React Native Layout Props Tutorial

React Native

Nicesnippets

27-12-2021


React Native Layout Props Tutorial

Hi Guys,

Today, I will learn you how to use Layout Props in react native. You can easily use Layout Props event in react native. Here, I will give you full example for simply display Layout Props using react native as bellow.

The following example shows how different properties can affect or shape a React Native layout. You can try for example to add or remove squares from the UI while changing the values of the property flexWrap.

So let's start following example.

Step 1 - Create project


In the first step Run the following command for create project.

expo init LayoutPropsApp

Step 2 - App.js

In this step, You will open App.js file and put the code.

import React, { useState } from 'react';

import { Button, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native';

const App = () => {

const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];

const justifyContents = [

'flex-start',

'flex-end',

'center',

'space-between',

'space-around',

'space-evenly',

];

const alignItemsArr = [

'flex-start',

'flex-end',

'center',

'stretch',

'baseline',

];

const wraps = ['nowrap', 'wrap', 'wrap-reverse'];

const directions = ['inherit', 'ltr', 'rtl'];

const [flexDirection, setFlexDirection] = useState(0);

const [justifyContent, setJustifyContent] = useState(0);

const [alignItems, setAlignItems] = useState(0);

const [direction, setDirection] = useState(0);

const [wrap, setWrap] = useState(0);

const hookedStyles = {

flexDirection: flexDirections[flexDirection],

justifyContent: justifyContents[justifyContent],

alignItems: alignItemsArr[alignItems],

direction: directions[direction],

flexWrap: wraps[wrap],

};

const changeSetting = (value, options, setterFunction) => {

if (value == options.length - 1) {

setterFunction(0);

return;

}

setterFunction(value + 1);

};

const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);

return (

<>

<View style={{ paddingTop: StatusBar.currentHeight }} />

<View style={[styles.container, styles.playingSpace, hookedStyles]}>

{squares.map(elem => elem)}

</View>

<ScrollView style={[styles.container]}>

<View style={[styles.controlSpace]}>

<View style={styles.buttonView}>

<Button

title="Change Flex Direction"

onPress={() =>

changeSetting(flexDirection, flexDirections, setFlexDirection)

}

/>

<Text style={styles.text}>{flexDirections[flexDirection]}</Text>

</View>

<View style={styles.buttonView}>

<Button

title="Change Justify Content"

onPress={() =>

changeSetting(

justifyContent,

justifyContents,

setJustifyContent

)

}

/>

<Text style={styles.text}>{justifyContents[justifyContent]}</Text>

</View>

<View style={styles.buttonView}>

<Button

title="Change Align Items"

onPress={() =>

changeSetting(alignItems, alignItemsArr, setAlignItems)

}

/>

<Text style={styles.text}>{alignItemsArr[alignItems]}</Text>

</View>

<View style={styles.buttonView}>

<Button

title="Change Direction"

onPress={() => changeSetting(direction, directions, setDirection)}

/>

<Text style={styles.text}>{directions[direction]}</Text>

</View>

<View style={styles.buttonView}>

<Button

title="Change Flex Wrap"

onPress={() => changeSetting(wrap, wraps, setWrap)}

/>

<Text style={styles.text}>{wraps[wrap]}</Text>

</View>

<View style={styles.buttonView}>

<Button

title="Add Square"

onPress={() => setSquares([...squares, <Square/>])}

/>

</View>

<View style={styles.buttonView}>

<Button

title="Delete Square"

onPress={() =>

setSquares(squares.filter((v, i) => i != squares.length - 1))

}

/>

</View>

</View>

</ScrollView>

</>

);

};

const styles = StyleSheet.create({

container: {

height: '50%',

},

playingSpace: {

backgroundColor: 'white',

borderColor: 'blue',

borderWidth: 3,

},

controlSpace: {

flexDirection: 'row',

flexWrap: 'wrap',

backgroundColor: '#F5F5F5',

},

buttonView: {

width: '50%',

padding: 10,

},

text: { textAlign: 'center' },

});

const Square = () => (

<View style={{

width: 50,

height: 50,

backgroundColor: randomHexColor(),

}} />

);

const randomHexColor = () => {

return '#000000'.replace(/0/g, () => {

return (~~(Math.random() * 16)).toString(16);

});

};

export default App;

Step 3 - Run project

In the last step run your project using bellow command.

expo start

Output:

I hope it can help you...