0

Here is the code, it is very simple:

render() {
    return (
     <View>
         <StatusBar hidden={true}/>
        <View style={{height:0}}>
            <Button>
                <Text>this button should disappears</Text>
            </Button>
        </View>
        <View style={{height:400}}>
            <Text>other view</Text>
        </View>
    </View>
   );
}

And here is the output screenshot:

enter image description here

As you can see, because the height of the view is 0, so the button's container is invisible, but why is the button still visible?

After some work, I found out that I have to set the 'other view' 's backgroundColor&height to overlap the button, like that:

<View style={{height:400,backgroundColor:'white'}}>
   <Text>other view</Text>
</View>

Now the button will be invisible.

It's so strange, just Button component, I have tried several other components, they are all ok, is it a bug of Button?

Thanks Wong Kim Hau for his reminding, the Button component is from 'native-base', not 'react native'

I'm using react-native v0.44.0, native-base 2.1.3

Elydasian
  • 2,016
  • 5
  • 23
  • 41
Yao Hui Ji
  • 23
  • 4

1 Answers1

0

just use the default Button component from 'react-native', it work fine.

KimHau
  • 330
  • 4
  • 14
  • thanks for your reminding, the Button is from 'native-base',I have change the tag and the question description – Yao Hui Ji May 23 '17 at 06:00