React-Native styling using CSS stylesheets and class names

Question

I've just started working on a react-native app. The official docs suggest to use JavaScript objects to create styles for your components, like so,

<Text style={style.text}>Blah Blah</Text>
const style = {
    text: {
        fontSize: 20
    }
}

I'm trying to add a className to the Text property, so I can add css using simple stylesheets. Is this even possible with react-native (I know we can do this in react, though)? Something like this,

<Text className="text-style"></Text>

// from CSS file
text-style: {
    font-size: 20;
}

no, it will not work as per my knowledge. You can check SO's document about styling for detailed info — Jigar Shah, Aug 16 '17 at 09:49
No you can not use css classes in react native as far as I know. — Paras Watts, Aug 16 '17 at 09:49

score 7 · Answer 1 · answered Aug 16 '17 at 11:30

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%').

It's not a replica of CSS -- you are passing JSON objects to StylesSheet.create, the API's are different, and browser spec is not present. — ryanwebjackson, May 17 '20 at 22:30

score 5 · Answer 2 · edited Dec 23 '20 at 02:55

5

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

edited Dec 23 '20 at 02:55

Zach

189
2
11

answered Aug 16 '17 at 11:08

Vahid Boreiri

3,418
1
19
34

`text-style` is incorrect syntax and won't work. You can't have a dash in a variable name like that. – Zach Dec 21 '20 at 15:59

score 0 · Answer 3 · edited Jun 16 '21 at 03:09

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;

Najathi · Answer 4 · 2020-07-25T02:19:53.900

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

score 0 · Answer 5 · answered Oct 15 '22 at 13:15

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%",
  }
})

Aravind · Answer 6 · 2022-12-17T07:08:03.830

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.

React-Native styling using CSS stylesheets and class names

6 Answers6