Menu
I have 6 View components (shown in the picture) , I want to have space between all 6 View components.
My code:
<View style={{flexDirection:'column',flex:6}}> <View style={{flex:2,flexDirection:"row",justifyContent:'space-between'}}> <View style={{backgroundColor:'red',flex:1}}> </View> <View style={{backgroundColor:'blue',flex:1}}> </View> </View> <View style={{flex:2,flexDirection:"row",justifyContent:'space-between'}}> <View style={{backgroundColor:'white',flex:1}}> </View> <View style={{backgroundColor:'black',flex:1}}> </View> </View> <View style={{flex:2,flexDirection:"row",justifyContent:'space-between'}}> <View style={{backgroundColor:'gray',flex:1}}> </View> <View style={{backgroundColor:'yellow',flex:1}}> </View> </View> </View> 
879
To add space between two elements on the same line in React Native, we can set justifyContent to 'space-between' in the View . to set the flexDirection to 'row' and the justifyContent style to 'space-between' to spread the Text components on the screen.
Using flexbox's gap in React Native Below, let's set the container's gap property to 1rem to add spacing of 1rem between items horizontally and vertically: import React, { useState } from "react"; import { StyleSheet, View } from "react-native"; export default function App() { return ( <> <View style={styles.
A react-native component wrapper that avoiding keyboard when it displayed, support 'absolute' or 'fix' style position (while keyboardAvoidingView and react-native-keyboard-spacer doesn't)
Try to add padding to the element then and another blank view in each row, padding make space between each item
<View style={{ flexDirection:'column', flex:1, }}> <View style={{flex:2,flexDirection:"row",justifyContent:'space-between',padding:10}}> <View style={{backgroundColor:'red',flex:2,padding:10}}> </View> <View style={{flex:0.1}}/> <View style={{backgroundColor:'blue',flex:2,padding:10}}> </View> </View> <View style={{flex:2,flexDirection:"row",justifyContent:'space-between',padding:10}}> <View style={{backgroundColor:'white',flex:2,padding:10}}> </View> <View style={{flex:0.1}}/> <View style={{backgroundColor:'black',flex:2,padding:10}}> </View> </View> <View style={{flex:2,flexDirection:"row",justifyContent:'space-between',padding:10}}> <View style={{backgroundColor:'gray',flex:1,padding:10}}> </View> <View style={{flex:0.1}}/> <View style={{backgroundColor:'yellow',flex:1,padding:10}}> </View> </View> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
