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
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}>
"None of these files exist: * components/App.module.css(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)" It looks like I can't import a file which ends in .css?
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.
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.
Try this library: https://atom.io/packages/atom-react-native-css
You can style components with CSS and built in support for SASS.
<Text style={{backgroundColor:'#FFF',zIndex: 5}}></Text>
