CODEWITHSUNDEEP
cssreact-nativeflexboxstyles
Story Qz
Story Qz

Reputation: 11

chield flex-direction row not working react native?

i'm new to react native. i'm implement restaurant app. when i try flex direction row in parent is working but when i try chield it is now working

that is my design enter image description here

but i need like enter image description here

i try this code

 <View style={{ flexDirection: 'row' }}>
                    <View>
                        <Image style={{ width: 100, height: 100 }} source={require('../../Assets/restaurant.jpg')} />
                    </View>

                    <View>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                            <View>
                                <Text style={{ fontSize: commonStyles.simpleTextValue, fontWeight: 'bold', color: 'black' }}>RajDhani</Text>
                            </View>
                            <View>
                                <Text style={{ fontSize: 12, fontWeight: 'bold', color: 'gray' }}>12PM to 10PM</Text>
                            </View>
                        </View>
                    </View>
                    </View>

Upvotes: 1

Views: 289

Answers (2)

Xhirazi
Xhirazi

Reputation: 857

Try Below code

<View style={{ flexDirection: 'row' }}>
  <View style={leftView}>
    <Image source={{uri: 'some image'}} style={someStyle}/>
    <Rating />
  </View>
  <View style={rightView}>
    <View style={{flexDirection:'row,justifyContent:'space-between'}}>
      <Text>Raj Dhani</Text>
      <Text>12pm to 10pm</Text>
    </View>  
    <View style={{flexDirection:'row,justifyContent:'space-between'}}>
      <Text>Rajastani Lunch</Text>
      <Text>20% off on Dinner</Text>
    </View>  
    <View style={{flexDirection:'row,justifyContent:'space-between'}}>
      <Text>Rs 600/head</Text>
      <Text>Tuesday Lunch @225</Text>
    </View>  
  </View>
</View>

P.S: Please add other styles on you own ;)

Upvotes: 0

user14361391
user14361391

Reputation:

You are missing the parent component width,

<View style={{ flexDirection: 'row' }}>
                    <View>
                        <Image style={{ width: 100, height: 100 }} source={require('../../Assets/restaurant.jpg')} />
                    </View>
     <View style={{ width:'100%'}}>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', width:'100%', backgroundColor:'red' }}>
                <View>
                    <Text style={{  fontWeight: 'bold', color: 'black', width:'100%' }}>RajDhani</Text>
                </View>
                <View>
                    <Text style={{ fontSize: 12, fontWeight: 'bold', color: 'gray' }}>12PM to 10PM</Text>
                </View>
            </View>
        </View>
</View>

Upvotes: 1

Related Questions