How can I use CSS in ReactNative

Question

Can I use CSS for styling my ReactNative component. Currently I can only use StyleSheet like this:

var styles = React.StyleSheet.create({
 autocomplete: {
   backgroundColor: '#FFF',
   zIndex: 5,
 },
 ...

I want to use CSS instead of this as in ReactJs

Answer 1

First create a file named App.module.css

then write your pure css here

.container {
  background-color: rgb(44, 0, 95);
  width: 100%;
  height: 100%;
}

then,

import the file in your js file

import style from './App.module.css';

Now you can this style like normal react native styling

<View style={style.container}>

Answer 2

What do you mean pure css ?

Have a look at styled-components, the project is in active development.

This allow you to style your react components using css.

Answer 3

I had the same issue once and I solved it using this component. I see is no longer under development however for me it was perfectly working.

What it does basically is taking your CSS files and it will generate from them some StyleSheet components that you can easily integrate in your react application.

Answer 4

Try this library: https://atom.io/packages/atom-react-native-css

You can style components with CSS and built in support for SASS.

Answer 5

<Text style={{backgroundColor:'#FFF',zIndex: 5}}></Text>