Media queries support? about react-native-css HOT 5 CLOSED

Not sure if React-native css supports media queries. I might make this to be compatible with React. Please note, this module isn't fully complete. @pukhalski

from react-native-css.

from react-native-css.

@pukhalski yep I noticed that error.

facebook/react-native#971, checking if react-native has support for FS. I will work on it tonight.

from react-native-css.

@pukhalski
I will update the doc soon.

I think React-native doesn't have support for node modules. So i found this alternative:

1. please update to version 1.1.1 of this project: npm install [email protected] --save
2. make a style.css file with some css styles within your project
3. add the follow to your package.json scripts json path:

  "scripts": {
    "css": "node_modules/.bin/rncss -i style.css -o style.js",
    "start": "npm run css && node_modules/react-native/packager/packager.sh"
  }

notice rncss!

node_modules/.bin/rncss -i SOURCE_CSS_PATH_AND_FILE_NAME.css -o PATH_TO_AND_JS_FILENAME.js

what css script will do is, take an input (-i) css file and out (`-o') javascript file name, it will generate the follow:

module.exports = require('react-native').StyleSheet.create({"description":{"marginBottom":20,"fontSize":18,"textAlign":"center","color":"#656656"},"container":{"padding":30,"marginTop":65,"alignItems":"center"}});

then within index.ios.js' just require in the generatedstyle.js`:

var styles = require('./style')

full example of the demo app:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var styles = require('./style')

var saybrrlinksapps = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+Control+Z for dev menu
        </Text>
      </View>
    );
  }
});


AppRegistry.registerComponent('saybrrlinksapps', () => saybrrlinksapps);

We lose the refresh command, I will see if I can hooking the packager and get it to execute this module. For now just open another terminal and run:
node_modules/.bin/rncss -i SOURCE_CSS_PATH_AND_FILE_NAME.css -o PATH_TO_AND_JS_FILENAME.js

from react-native-css.

@pukhalski a new version with file watching has been added, ignore the text above.
[email protected] improves the cli

from react-native-css.