Request: OnPress should display Material Design Ripple Effect about react-native-action-button HOT 7 CLOSED

I tried to implement this but ran into a bug when trying to apply an animated value to the offsetShadow height property.
facebook/react-native#3911

So until that issue is resolved there is no way of adding proper material design animations.

from react-native-action-button.

+1

from react-native-action-button.

I need this feature too and I think it can be resolved by adding a _renderButton property on ActionButton, so we can use our customized TouchableNativeFeedback.

from react-native-action-button.

@iSimonWeb how would your renderButton function look like?

from react-native-action-button.

I think it could be a function of (props) and it should return a React Component.
This could break a lot of your component functionalities set by props, but you can provide an ActionButton.Default (or whatchamacallit) that will rely on the current configuration.

So then, if I don't need a custom button, I can continue to use legacy configuration via props:
<ActionButton size={64} offsetX={20} offsetY={20} buttonColor="#F00" />
either way I can pass my own button that will update based on props:
<ActionButton size={64} offsetX={20} offsetY={20} renderButton={(props) => <MyActionButton {...props} />} />

We can discuss on positioning. As embedded in my example, position can still be controlled by the ActionButton component wrapping the button in a <View /> and giving to it the current button positioning styles.

from react-native-action-button.

Sorry, I probably wasn't clear with my question. I'm more interested in your MyActionButton component. How exactly would the implementation of your custom component look like? Maybe we can give the ripple effect to everyone without them having to make use of a custom render method.

from react-native-action-button.

Well then I suppose you can just add a useNativeFeedback prop to switch TouchableOpacity/TouchableNativeFeedback inside ActionButton._renderButton().
TouchableNativeFeedback additional props are background and useForeground, it would be useful to have them configurable too.

Anyway, I'm also trying to shrink the main button size while the sub-items are visible, having a fully customizable renderButton would perfectly fit for anyone who needs complete control over styles.

from react-native-action-button.