Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Can't create rounded ripple effect for Button in Header #849

Closed
RakhmatovR opened this issue May 23, 2017 · 4 comments
Closed

Can't create rounded ripple effect for Button in Header #849

RakhmatovR opened this issue May 23, 2017 · 4 comments
Assignees
@shivrajkumar
Labels
enhancement

Comments

@RakhmatovR
Copy link

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

image

Expected example

image

Is the bug present in both ios and android or in any one of them?

Tested on Android device.
@RakhmatovR
Copy link
Author

Similar issue - [Android] TouchableNativeFeedback's ripples aren't affected by borderRadius

@SupriyaKalghatgi SupriyaKalghatgi self-assigned this May 29, 2017
@kherock
Copy link
Contributor

kherock commented May 30, 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 added a commit to kherock/NativeBase that referenced this issue May 31, 2017
@kherock
Improve Android button appearances (closes GeekyAnts#849, GeekyAnts#896)
16865be 
This implements proper behavior for Material Design flat buttons and icon toggles - these buttons ripple as soon as the touch starts. Conveniently, React Native supports masking these ripples to the parent View's border radius. This also fixes a breakage introduced in GeekyAnts#808 that closes GeekyAnts#896.
kherock added a commit to kherock/NativeBase that referenced this issue May 31, 2017
@kherock
Improve Android button appearances (closes GeekyAnts#849, GeekyAnts#896)
1022b9d 
This implements proper behavior for Material Design flat buttons and icon toggles - these buttons ripple as soon as the touch starts. Conveniently, React Native supports masking these ripples to the parent View's border radius. This also fixes a breakage introduced in GeekyAnts#808 that closes GeekyAnts#896.
kherock added a commit to kherock/NativeBase that referenced this issue May 31, 2017
@kherock
Improve Android button appearances (closes GeekyAnts#849, GeekyAnts#896)
a14d8ed 
This implements proper behavior for Material Design flat buttons and icon toggles - these buttons ripple as soon as the touch starts. Conveniently, React Native supports masking these ripples to the parent View's border radius. This also fixes a breakage introduced in GeekyAnts#808 that closes GeekyAnts#896.
kherock added a commit to kherock/NativeBase that referenced this issue May 31, 2017
@kherock
Improve Android button appearances (closes GeekyAnts#849, GeekyAnts#896)
7dc594c 
This implements proper behavior for Material Design flat buttons and icon toggles - these buttons ripple as soon as the touch starts. Conveniently, React Native supports masking these ripples to the parent View's border radius. This also fixes a breakage introduced in GeekyAnts#808 that closes GeekyAnts#896.
kherock added a commit to kherock/NativeBase that referenced this issue May 31, 2017
@kherock
Improve Android button appearances (closes GeekyAnts#849, GeekyAnts#896)
ff97949 
This implements proper behavior for Material Design flat buttons and icon toggles - these buttons ripple as soon as the touch starts. Conveniently, React Native supports masking these ripples to the parent View's border radius. This also fixes a breakage introduced in GeekyAnts#808 that closes GeekyAnts#896.
@roziki-dev
Copy link

roziki-dev commented Sep 15, 2017 •
edited
Loading

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

@SupriyaKalghatgi
Copy link
Contributor

#1206

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@shivrajkumar shivrajkumar

Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@kherock @RakhmatovR @SupriyaKalghatgi @shivrajkumar @roziki-dev