Как заставить 2 реагировать на родную <view>в одной строке?

Question

Я пытаюсь заставить программу просмотра изображений работать с моей галереей. Библиотека, которую я использую https://github.com/ascoders/react-native-image-viewer, позволяет отображать реагирующий элемент в заголовке.Я использую этот следующий элемент вместо заголовка

<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>

, и вот мои стили

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",
  },
})

, а вот как выглядит модальный

Answer 1

Вот так я получаю контент встроенный один слева и один справа.Также в вашем коде есть опечатка. Переименуйте style с 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>