Navigate back to the homepage

React Native Multiple Styles Example

Infinitbility
React Native
July 9th, 2021 · 1 min read

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});

Thanks for reading…

Follow me on Twitter

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.

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]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

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 not in

July 5th, 2021 · 1 min read
© 2020–2022 Infinitbility
About
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]