0

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

enter image description here

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>
        );
divibisan
  • 11,659
  • 11
  • 40
  • 58
Ilona Semyonov
  • 73
  • 1
  • 10
  • try to add `position: 'absolute', right:40, top:300` in your `Button style`, and set `height` of `View` to max, before `` and delete `style` in – flix May 31 '18 at 11:18
  • @flix cant you please again include code? I tried to implement the changes ...its putting the button in the middle of the screen – Ilona Semyonov May 31 '18 at 11:58
  • just change the `right` and `top` value to go to your bottom screen, it's mean your `button` will `fixed`, or you won't let the `button` `fixed`? – flix May 31 '18 at 12:01
  • It works on my android, the question is how will it look in other devices? I tried to run it on android studio ...it did not load the page . I need also to test it on ios – Ilona Semyonov May 31 '18 at 14:18
  • actually, you need to set the `value` of `right` or `top` in percentage of screen size, so every time the app opened in different screen size, the value would be dynamic, depending on percentage of the screen – flix Jun 04 '18 at 08:29

1 Answers1

0

I consider Button component you used from react-native. Just remove wrapper flex you added as you set width to it.

<Button
   onPress={this.onNext}  
   containerViewStyle={{width: width}}
   backgroundColor={Colors.red}
   title='NEXT' />
Revansiddh
  • 2,932
  • 3
  • 19
  • 33