Navigate back to the homepage

React Native Multiple Styles Example

Infinitbility
React Native
July 9th, 2021 · 1 min read
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.

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

Full Example with styles commponent

1import React from 'react';
2import { StyleSheet, ScrollView, View, Text, TouchableOpacity, Image, } from 'react-native';
3
4export default class LoginScreen extends React.Component {
5
6
7 constructor(props) {
8 super(props);
9 }
10
11 render() {
12 return (
13 <View>
14 <AppStatusBar barStyle={'dark-content'} backgroundColor={'#FFFFFF'} />
15 <ScrollView>
16 <View style={[styles.LogoLayout, styles.LoginLayout]}>
17 </View>
18 </ScrollView>
19
20 {
21 this.state.loading && <Loader />
22 }
23 </View>
24 )
25 }
26
27}
28
29
30const styles = StyleSheet.create({
31 LoginLayout: {
32 flex: 1,
33 padding: 20
34 },
35 LogoLayout: {
36 alignItems: "center",
37 padding: 20
38 },
39 inputLayout: {
40 paddingBottom: 20,
41 },
42 textDanger: {
43 color: "#dc3545"
44 }
45});

Subscribe Our Newsletter You will get monthly free programming book

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Subscribe Our Newsletter You will get monthly free programming book

Tutorials

React Native

Categories

More articles from Infinitbility

How to export excel in react

How to export excel in react

React export excel example

July 6th, 2021 · 1 min read
Sequelize where in and where not in array example

Sequelize where in and where not in array example

Sequelize where in and not in

July 5th, 2021 · 1 min read
© 2020–2021 Infinitbility
Disclaimer
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]