React Native Multiple Styles Example

Hello Friends,

Welcome To Infinitbility!

Sometimes, we need to add multiple style in react native element to use common styles.

we are going to learn how to add multiple styles in react native using some basics commponent of react native.

let’s start today article React Native Multiple Styles Example

For adding multiple styles in react native we have to use styles as a array, something same like below style props.

style={[{},{}]} => style={[style1,style2]}

Let’s understand with code example.

<View style={[styles.LogoLayout, styles.LoginLayout]}></View>

Full Example with styles commponent

import React from 'react';
import { StyleSheet, ScrollView, View, Text, TouchableOpacity, Image, } from 'react-native';

export default class LoginScreen extends React.Component {


    constructor(props) {
        super(props);
    }

      render() {
        return (
            <View>
                <AppStatusBar barStyle={'dark-content'} backgroundColor={'#FFFFFF'} />
                <ScrollView>
                    <View style={[styles.LogoLayout, styles.LoginLayout]}>
                    </View>
                </ScrollView>

                {
                    this.state.loading && <Loader />
                }
            </View>
        )
    }

}


const styles = StyleSheet.create({
    LoginLayout: {
        flex: 1,
        padding: 20
    },
    LogoLayout: {
        alignItems: "center",
        padding: 20
    },
    inputLayout: {
        paddingBottom: 20,
    },
    textDanger: {
        color: "#dc3545"
    }
});

Thanks for reading…