I am trying to set my button style that way, it will be spread across my View. Currently its creating white border on the left and on the bottom of my button (see attached screenshot).
My code:
let {width, height} = Dimensions.get('window');
let photoWidth = width/4;
return (
<View style={{width: width, height: 500}}>
<ScrollView style={{width: width, height: height}}>
<View style={{flexDirection: 'row', width: width, flexWrap: 'wrap'}}>
{
this.state.photos.map((p, i) => {
return (
<SelectedPhoto
key={i}
index={i}
style={{
width: photoWidth,
height: photoWidth,
}}
limit={this.state.supportLength}
photo={p}
onSelectPhoto={this.onSelectPhoto}
onDeselectPhoto={this.onDeselectPhoto}
/>
);
})
}
</View>
</ScrollView>
<View style={{ flexDirection:"row", flexWrap: 'wrap', width: width }}>
<Button
onPress={this.onNext}
containerViewStyle={{width: width}}
backgroundColor={Colors.red}
title='NEXT' />
</View>
</View>
);
I consider
Button
component you used fromreact-native
. Just remove wrapper flex you added as you setwidth
to it.