04-Apr-2023
.
Admin
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...
#React Native