React Native — Добавление поля: 1 в Camera Roll

Как идеально добавить margin: 1 в фотопленку? Потому что, когда я добавлю margin: 1 в свой <Image .../>, порядок будет не в правильном порядке.

Результат, который я хочу, как в Instagram. Слева и справа нет полей, верно?

Так же, как это изображение:

Вот мои коды:

render() {
return(
  <View style = {styles.container}>
    {/* <SelectedImage source = {{uri: this.state.pickedImage}}/> */}
    <Image source = {{uri: this.state.pickedImage}} style = {styles.image}/>
    <ScrollView contentContainerStyle = {styles.scrollView} showsVerticalScrollIndicator = {false}>
      {this.state.photos.map((photos, index) => {
        return(
          <TouchableHighlight 
            style = {{opacity: index === this.state.index ? .5 : 1}}
            onPress = {() => this.setState({pickedImage: photos.node.image.uri})}
            key = {index}
            underlayColor='transparent'
          >
            <Image
              style = {{width: width / 3, height: width /3}}
              source = {{uri: photos.node.image.uri}}
              resizeMode='cover'
            />
          </TouchableHighlight>
        );
      })}
    </ScrollView>
  </View>
); 
}
}

const styles = StyleSheet.create({
container: {
 height: '100%',
 width: '100%',
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: 'white'
},
scrollView: {
 flexWrap: 'wrap',
 flexDirection: 'row'
},
scrollViewContainer: {
 flex: 1,
 flexDirection: 'row',
},
 image: {
 width: '100%',
 height: 300,
 backgroundColor: 'black'
}
});

Это мой собственный результат: (Не беспокойтесь о черной рамке, я просто не обрезал идеально, и у меня всего 6 фотографий в моем эмуляторе Android).

Предлагаемый ответ:

componentDidMount() {
this.getPhotos();
this.rightButtonIcon();
requestExternalStoragePermission();

photoFilter = () => {
  var arr = this.state.photos;
  var number = 0;
  arr.forEach((item) => {
    switch(number) {
      case 0: 
        number = 1;
        item.position = "left"
      break;
      case 1:
        number = 2;
        item.position = "center"
      break;
      case 2: 
        number = 0;
        item.position = "right"
      break;
      default:
        return null;
    }
  })
  this.setState({photos: arr})
}
};

 imageStylePositionCalc = (pos) =>{
  if (pos== = "left") return {marginRight:1,marginBottom:1}
  if (pos== = "center") return {marginRight:1,marginBottom:1}
  if (pos== = "right") return {marginBottom:1}
 }

  render() {
return(
  <View style = {styles.container}>
    {/* <SelectedImage source = {{uri: this.state.pickedImage}}/> */}
    <Image source = {{uri: this.state.pickedImage}} style = {styles.image}/>
    <ScrollView contentContainerStyle = {styles.scrollView} showsVerticalScrollIndicator = {false}>
      {this.state.photos.map((photos, index) => {
        return(
          <TouchableHighlight 
            style = {{opacity: index === this.state.index ? .5 : 1}}
            onPress = {() => this.setState({pickedImage: photos.node.image.uri})}
            key = {index}
            underlayColor='transparent'
          >
            <Image
              style = {[{width: width / 3, height: width /3}, this.imageStylePositionCalc(photos.position)]}
              source = {{uri: photos.node.image.uri}}
              resizeMode='cover'
            />
          </TouchableHighlight>
        );
      })}
    </ScrollView>
  </View>
); 
}
}

Это еще одна проблема, поле: 1 занимает всю ширину экрана, а во 2-й строке нет поля: