Nativebase: Can't create rounded ripple effect for Button in Header
react-native, react and native-base version
react-native: 0.44.0
react: 16.0.0-alpha.6
native-base: 2.1.4
Expected behaviour
Button shouldn't resize by adding rounded property and should correctly show ripple effect
Actual behaviour
Button resizes and ripple effect is "square"
Steps to reproduce
<Header>
<Left style={{ marginLeft: 4, marginRight: -20 }}>
<Button rounded transparent>
<Icon name='menu' />
</Button>
</Left>
<Body>
<Title>Imports List</Title>
</Body>
<Right />
</Header>
Screenshot
Expected example
Is the bug present in both ios and android or in any one of them?
Tested on Android device.
RakhmatovR
All 4 comments
RakhmatovR
on 23 May 2017
I have an incoming fix for this FYI. I'll hopefully be opening a PR later today with some Android-specific button enhancements and theme cleanup.
kherock
on 30 May 2017
<Header>
<Left>
<View style={{ borderRadius: 50, width: 42, height: 42 }}>
<TouchableNativeFeedback
onPress={() => { this.props.navigation.navigate('DrawerOpen') }}
background={TouchableNativeFeedback.Ripple('#fff', true)}>
<View style={{ width: 42, height: 42, backgroundColor: 'transparent', justifyContent:'center', alignItems:'center',alignSelf:'center'}} >
<Icon name='menu' style={{color:'#fff'}} />
</View>
</TouchableNativeFeedback>
</View>
</Left>
<Body>
<Title>My App</Title>
</Body>
<Right>
<Button transparent rounded >
<Icon name='ios-chatbubbles-outline' />
</Button>
</Right>
</Header>
roziy
on 15 Sep 2017
1206
SupriyaKalghatgi
on 6 Feb 2018
Related issues
omerdn1
路
3Comments
mcpracht
路
3Comments
Landerson352
路
3Comments
bsiddiqui
路
3Comments
natashache
路
3Comments
Most helpful comment
<Header> <Left> <View style={{ borderRadius: 50, width: 42, height: 42 }}> <TouchableNativeFeedback onPress={() => { this.props.navigation.navigate('DrawerOpen') }} background={TouchableNativeFeedback.Ripple('#fff', true)}> <View style={{ width: 42, height: 42, backgroundColor: 'transparent', justifyContent:'center', alignItems:'center',alignSelf:'center'}} > <Icon name='menu' style={{color:'#fff'}} /> </View> </TouchableNativeFeedback> </View> </Left> <Body> <Title>My App</Title> </Body> <Right> <Button transparent rounded > <Icon name='ios-chatbubbles-outline' /> </Button> </Right> </Header>