CODEWITHSUNDEEP
reactjsreact-nativeflexbox
Kireeti K
Kireeti K

Reputation: 1520

How to get 2 react native <view> in the same line?

I am trying to get an image viewer to work with my gallery, The library I use https://github.com/ascoders/react-native-image-viewer gives option to render a react element in the header. I am using this following element in the place of header

<View styles={modalStyles.header}>
    <View onPress={props.closeModal} style={modalStyles.leftHeader}>
        <Icon name="close" size={20} color="#fff"></Icon>
    </View>

    <View onPress={() => props.startDownload(props.getShowingImage())} style={modalStyles.rightHeader}>
        <Icon name="download" size={30} color="#fff"></Icon>
    </View>

</View>

and here is my styles

const modalStyles = StyleSheet.create({
  header: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    backgroundColor: "red",
  },
  leftHeader: {
    marginLeft: 20,
    padding: 10,
    alignSelf: 'flex-start',
    backgroundColor: "red",
  },
  rightHeader: {
    marginRight: 20,
    padding: 10,
    alignSelf: 'flex-end',
    backgroundColor: "red",
  },
})

and here is how the modal looks like enter image description here

Upvotes: 0

Views: 6773

Answers (1)

Hamza Ahmed
Hamza Ahmed

Reputation: 86

This is how i get content inline one at left and one at right. Also you have typo in your code .. rename style with styles

 <View style={[{flexDirection:'row', alignItems:'center'}]}>
    <View style={[{flex:1,flexDirection:'row'}]}>
             //... left content
    </View>
    <View style={[{justifyContent:'space-evenly', marginVertical:10}]}>
              // .... right content
    </View>
 </View>

Upvotes: 4

Related Questions