RNative-Components

CSS in React Native

September 22, 2020

Recently, one of our users expanded their usage of Builder from their React app to their React Native app. They soon reported a rather troublesome bug: applying text styles to a button’s text did not properly work in React Native.

In this piece, we’re going to dive into this bug, and how the solution involves re-creating some of CSS’s cascading mechanisms for React Native.

Internal CSS ::

    import { StatusBar } from 'expo-status-bar';
    import { StyleSheet, Text, View } from 'react-native';

    export default function App() {
      return (
        <View style={styles.container}>
          <Text>Open up App.js to start working on your app!</Text>
          <StatusBar style="auto" />
        </View>
      );
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
    });

   
Inline CSS ::

   
    import React,{useState} from 'react';
    import { StatusBar } from 'expo-status-bar';
    import { StyleSheet, Text, View,Button } from 'react-native';

    export default function App() {

      return (
        <View>
          <Text style={{color:'white', backgroundColor:"gray", padding:"25px"}}>
            This is inline CSS
          </Text>
        </View>
      );
    }

External CSS ::
 
create new style.js file and compose below code
 
    import { StyleSheet } from "react-native";

    export default ExStyles = StyleSheet.create({
        textBox:{
        color:"white",
        backgroundColor:"gray",
        }
    }) and in App.js file code should be like this

       
    import React,{useState} from 'react';
    import { StatusBar } from 'expo-status-bar';
    import { StyleSheet, Text, View,Button } from 'react-native';

    import ExStyles from './style';

    export default function App() {

      return (
        <View>
          <Text style={ExStyles.textBox}>
            This is external css...
          </Text>
         <Text>this is text...</Text>
        </View>
      );
    }
Linear Gradient in React Native CSS