react native-tutorial

React Native Styling

For styling our main components in React Native, we merely use JavaScript. For defining styles, we don’t need any particular syntax or language. A prop (attribute) called style is used by each and every core component. The style names and values are comparable to those used in web-compatible CSS. The only variation is how camel-cased names are written, such as fontSize rather than font-size.

The simplest approach to style our code is with the style prop, which is just a regular JavaScript object.

Our component can be designed in a variety of ways, including utilising inline style and StyleSheet.create. It is preferable to use StyleSheet.create to define several styles in one location as the component becomes more complicated.

React Native style Example:

In this example, we will use both inline style as well as StyleSheet.create. Inline styles are applied at where the components are created.

App.js

import React, { Component } from 'react';  
import { AppRegistry, StyleSheet, Text, View } from 'react-native';  
  
export default class ImplementingStyle extends Component {  
    render() {  
        return (  
            <View>  
                <Text style={{ backgroundColor: '#a7a6a9', color: 'yellow', fontSize: 20 }}>this is inline style</Text>  
                <Text style={styles.green}>just green</Text>  
                <Text style={styles.biggray}>just biggray</Text>  
                <Text style={[styles.biggray, styles.green]}>biggray, then green</Text>  
                <Text style={[styles.green, styles.biggray]}>green, then biggray</Text>  
            </View>  
        );  
    }  
}  
const styles = StyleSheet.create({  
    biggray: {  
        color: 'gray',  
        fontWeight: 'bold',  
        fontSize: 30,  
    },  
    green: {  
        color: 'green',  
    },  
});  



Output:

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *