React-Native styling using CSS stylesheets and class names

The way React Native works with CSS styles is that the StyleSheet object is a js replica of CSS as a language. all you need to do is create a .js and import the js objects containing the StyleSheet objects.

an example of a StyleSheet JS object would be:

import { StyleSheet } from 'react-native'; 

const styles = StyleSheet.create({
  textStyle: {
    fontSize: 20,
  },
  otherStyle: {
    position: 'absolute',
    justifyContent: 'center',
  }
});

basically what it needs is an array of objects that follow the API of StyleSheet. A good rule of thumb is to write the css styles you know in camel case, e.g. justifyContent instead of justify-content the React Native engine does its best to replicate CSS through the use of these StyleSheet objects and reading documentation and examples will help you understand what StyleSheet is capable and not capable of(hint: flex and the Dimensions API are amazing and percentages are strings like '50%').

There is no className in react-native but you can use a style object in react-native like this:

<Text style={textStyle}>Some Words</Text>

const textStyle = {
    fontSize: 20
}

Note: Some style properties are in different name. for example the css font-size is fontSize in react-native

need to config react native sass /css transformer https://github.com/kristerkari/react-native-sass-transformer

Transform JSX className property to a style property that calculates styles at runtime in React Native. The plugin is used to match style objects containing parsed CSS media queries and CSS viewport units with React Native.

Please check out this link : https://github.com/kristerkari/babel-plugin-react-native-classname-to-dynamic-style

When using React native typescript, you need to install this package also https://github.com/kristerkari/react-native-types-for-css-modules

The object that the documentation is referring to is the StyleSheet object in JSX. You need to import StyleSheet from react-native. The style that you have written to a const variable here will go into that object which you will create using StyleSheet.

import {StyleSheet} from 'react-native';
var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-evenly',
    backgroundColor: '#0070af',
    alignItems: 'center',
    backgroundColor:'#0070af'
  },
  textstyle:{
    color:'white',
    fontFamily: "Roboto",
  }});

export default styles;

First you need to import StyleSheet from react-native. Than create object with styles.

import { StyleSheet, View } from "react-native"

const Home = () => {
  return(
    <View style={styles.container}></View>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: blue,
    height: "100%",
  }
})

I don't know why anyone hasn't mentioned this but I think this is much better.

How can I use CSS in ReactNative

Make a file named App.moudle.css to write pure traditional css. and import it like so-

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

<View style={style.container}>

This would be much better as it would increase the shared code b/w react and react-native.

Much to my disappointment, there is yet to be a way to use css classes in react-native.