CODEWITHSUNDEEP
reactjsreact-native
Joseph Attia
Joseph Attia

Reputation: 304

Put View next to each other in React Native

So I'm trying to add View Boxes next to each other. So first I made a box as shown Step 1

And then I made multiple as shown Step 2

So my question is how to put the boxes next to each other?

Here is my React Native Css

readings:{
     width:100,
     height:100,
     backgroundColor:'#e3e3e3',
     marginLeft:20,
     shadowColor: '#000',
    shadowOffset: { width: 4, height: 4 },
    shadowOpacity: 0.8,
    shadowRadius: 2,  
    elevation:5,
    float:'right'
   }

Upvotes: 0

Views: 691

Answers (1)

Diogo Aleixo
Diogo Aleixo

Reputation: 871

You should use flex to achieve that. Something like

<View style={{
      display: 'flex',
      flexDirection: 'row'
    }}>
      <View style={{width: 100, height: 100, backgroundColor: 'red'}}></View>
      <View style={{width: 100, height: 100, backgroundColor: 'blue'}}></View>
    </View>

Where you have one top View that orders the items in row.

Upvotes: 2

Related Questions