React Native - Fitting elements precisely

Question

Can anyone please explain this layout cunundrum to me / suggest a better approach please:

I have a dynamic array of images and a 'add photo' button which are layed out in equal widths in rows - i want the thumbnails / button to be eactly the same width / height and show in 3's across the block. heres a pic -

heres the layout code:

  <View style={PhotoStyles.imgThumbnailWrap}>
            {this.state.ADImageArray.map((prop, key) => {

               return (
                 <View style={PhotoStyles.imgThumbnailBlock}>
                  <Image
                    source={{uri: prop, isStatic: true}}
                    style={PhotoStyles.imgThumbnail}
                    />
                    <TouchableOpacity onPress={this.removephoto} style={PhotoStyles.removePhotoLnk}>
                      <Image
                        source={require('../images/icons/ico-removeImg.png')}
                        style={PhotoStyles.removePhotoImg}
                      />
                    </TouchableOpacity>
                </View>
               );
            })}
            <TouchableOpacity onPress={this.photoAdditional} >
            <View style={PhotoStyles.imgThumbAddMore}>
              <Image source={require('../images/icons/ico-upload-photo.png')} style={PhotoStyles.imgThumbnailBtn} />
            </View>
          </TouchableOpacity>
        </View>

heres the relevant styles: const itemWidth = (Dimensions.get('window').width / 3) -30;

imgThumbnailBlock: { margin:8, width:itemWidth, height:itemWidth, position:'relative', }, imgThumbnail: { backgroundColor:'#f79431', width:itemWidth, height:itemWidth,

},

imgThumbnailBtn: {

width:25,
height:25,

}, imgThumbnailWrap: { flex:1, flexDirection: 'row', justifyContent: 'flex-start', flexWrap:'wrap', marginTop:15, marginBottom:15, marginLeft:15, marginRight:15,

}, imgThumbAddMore: { width:itemWidth, height:itemWidth, margin:8, backgroundColor: '#e9e9e9', alignItems:'center', justifyContent: 'center',

},

as you can see the images container (imgThumbnailBlock:)and add more button container imgThumbAddMore have an applied width /height provided by the itemwidth calculation. const itemWidth = (Dimensions.get('window').width / 3) -30;

My iphone has an available width of 375 - if i divide that by 3 for each item - take away the margin from each (I'd like a 10 margin) and minus the container padding of 30 divided by 3 for each item - that leaves the subtracted 30 from each width as above. this provides a width of each block as 95 with the applied 10 margin and container padding this adds up to 375 - so everything should fit exactly.
But when i apply this the third item falls onto the second line. I need to reduce the margin value to 8pm to allow everything to fit - this makes zero sense to me - can off a suggestion / explanation please?

Answer 1

Actually it should work like this, I setup an Expo Snack for you:

https://snack.expo.io/@moritzw1/image-grid-fitting

So I'm guessing there is something outside of your top level

<View style={PhotoStyles.imgThumbnailWrap}>

that causes the view to shrink (like borders, padding or margin).