scaling a react-native button with animated

Question

I'm creating a touchable button in react native with an animation. When the button is pressed, it should scale down a little bit. When the pressure is released, it should scale back to normal.

This is my code:

export const TouchableButton = (props) => {

    const { onPress, text, icon } = props

    const animatedValue = new Animated.Value(0)

    const animatedValueInterpolateScale = animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: [1, 0.95]
    })

    const pressInHandler = () => {
        Animated.timing(
            animatedValue,
            {
                toValue: 1,
                duration: 150
            }
        ).start()
    }

    const pressOutHandler = () => {
        Animated.timing(
            animatedValue,
            {
                toValue: 0,
                duration: 150
            }
        ).start()
    }

return (
    
        
            
                
                    {text}
                    
                        
                    
                
            
        
    
)
}

When the button is pressed, the animation in pressInHandler is started, and the scale is animated from 1 to 0.95. This works. But when I release the pressure (onPressOut is called), the scale snaps back to 1 without a smooth animation. It seems like pressOutHandler (and the animation in it) never is called.

I have another button with the same properties but instead of scaling I set the background color, and this works like it should.

user_11657703 · Answer

Make it simple.

Note: ALWAYS USE useNativeDriver: true

const App = () => {
  const animation = new Animated.Value(0);
  const inputRange = [0, 1];
  const outputRange = [1, 0.8];
  const scale = animation.interpolate({inputRange, outputRange});

  const onPressIn = () => {
    Animated.spring(animation, {
      toValue: 1,
      useNativeDriver: true,
    }).start();
  };
  const onPressOut = () => {
    Animated.spring(animation, {
      toValue: 0,
      useNativeDriver: true,
    }).start();
  };

  return (
    
      
        
          BUTTON
        
      
    
  );
};

export default App;

const styles = StyleSheet.create({
  container: {flex: 1, alignItems: 'center', justifyContent: 'center'},
  button: {
    height: 70,
    width: 200,
    backgroundColor: 'red',
    marginBottom: 20,
    borderRadius: 10,
  },
  btn: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  btnText: {
    color: '#fff',
    fontSize: 25,
  },
});

user_1832330 · Answer

Here is a pretty simple solution without any animations which looks almost as native (at least on iOS):

import React from "react"
import { Pressable, PressableProps, StyleProp, ViewStyle } from "react-native"

type TouchableButtonProps = PressableProps & {
  scale?: number;
  style?: StyleProp;
}

const PressableScale: React.FC = ({ scale, style, children, ...otherProps }) => {
  return (
     [style, { transform: [{ scale: pressed ? (scale ?? 0.98) : 1 }] }]} {...otherProps}>
      {children}
    
  )
}

Usage:


  This is pressable button

scaling a react-native button with animated

2 Answers