CODEWITHSUNDEEP
cssreact-nativeflexbox
yavg
yavg

Reputation: 3061

how to align one element to the left and another in the middle in the same row using syntaxis "flex: x"

I am using react native using flexbox.

the display: flex property does not exist, but it does exist for example flex: x

I'm trying to do something like this:

enter image description here

an element on the left retaining the width that occupies its content as well as the center element

How can I do it? If in my code I use display: flex, it works, but this property does not exist in react-native.

https://jsfiddle.net/cuamqfe0/

<div class="container">
 <div>
   1
 </div>
  <div>
  2
 </div>

</div>

.container{
  flex:1;
  __display:flex;
  justify-content:center;
  align-items:flex-end;
  flex-direction:row;
  border:1px solid red;
  height: 100vh;
}

.container div{
  border:1px solid blue;
}

Upvotes: 1

Views: 3648

Answers (2)

Gaurav Roy
Gaurav Roy

Reputation: 12245

This is a pretty neat trick on how to achieve on what you want to do. display:flex doesnt work in react native rather flex:1 and flexDirection:'row' works . See the below code and its working example in an expo snack:

export default class App extends React.Component {
  render() {
    return (
      <View style={{flexDirection:'row',justifyContent:'space-between'}} >
        <View style={{height:20,width:20, borderWidth:2,borderColor:'red'}}>
          <Text style={{alignSelf:'center'}}>1</Text>
        </View>
        <View style={{height:20,width:20, borderWidth:2,borderColor:'red'}}>
          <Text style={{alignSelf:'center'}}>2</Text>
        </View>
        <View style={{height:20,width:20}}>
          <Text style={{alignSelf:'center'}}></Text>
        </View>
      </View>
    );
  }
}

The workable link is expo-link

Now ill explain what ive done , first in parent view ive added flexDirection:'row' , so its child elemnt will be in a row fashion.

Now justifyContent:'space-between' makes sure all 3 child elemnts are in a equal spacing apart, so and since you dont have a 3rd box, ive just created a dummy box so that spacing is intact like the 3rd child elemnt 

<View style={{height:20,width:20}}>
          <Text style={{alignSelf:'center'}}></Text>
        </View>

is just a view and doesnt render elemnt , but only used for spacing everything equally. now final result looks like :

enter image description here

Hope it helps. feel free for doubts.

Upvotes: 6

kenmistry
kenmistry

Reputation: 2143

you can try adding a third component and adding width percentages to all three components, like this:

<View
style={{
flex: 1,
backgroundColor: "transparent",
flexDirection: "row",
justifyContent: "center",
borderWidth: 1,
borderColor: "#ffff00",
width: "100%"
}}
>
<TouchableOpacity
style={{
borderWidth: 1,
borderColor: "#ff0000",
marginBottom: 10,
alignSelf: "flex-start"
width: "33%"
}}
onPress={() => {
takePictureAsync();
}}
>
<Icon
name="close"
type="FontAwesome"
style={{ color: "white", fontSize: 50 }}
></Icon>
</TouchableOpacity>

<TouchableOpacity
style={{
borderWidth: 1,
borderColor: "#ff0000",
marginBottom: 10,
alignSelf: "center",
width: "34%"
}}
onPress={() => {
setShowCamera(false);
}}
>
<View style={[styles.captureBtn]}></View>
</TouchableOpacity>

<TouchableOpacity
style={{
borderWidth: 1,
borderColor: "#ff0000",
marginBottom: 10,
alignSelf: "flex-end",
width: "33%"
}}
activeOpacity={1}
>
<View />
</TouchableOpacity>
</View>

Upvotes: 0

Related Questions