React Native Button onPressIn animation request

Viewed 411

I want to achieve an animation each time a user taps on a button this shrinks in a smaller button.

GIF HERE

1 Answers

For this use TouchableHighlight component from react-native. It has onPressIn and onPressOut on which you can change buttons width and height.

e.g.

export const TouchableHighlightExample = () => {
  const [BtnSize, setBtnSize ] = useState({ height: 40, width: "100%" });

  const zoomIn=()=>{
    setBtnSize({ height: 35, width: "90%",marginHorizontal:"5%" })
  }
  const zoomOut=()=>{
    setBtnSize({ height: 40, width:  "100%" })
  }
  return (
    <View style={styles.container}>
      <TouchableHighlight underlayColor="#ffffff00" onPressIn={zoomIn} onPressOut={zoomOut}>
        <View style={[styles.button,BtnSize]}>
          <Text style={{color: "white"}}>Touch Here</Text>
        </View>
      </TouchableHighlight>
    </View>
  );
} 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10,
  },
  button: {
    alignItems: 'center',
    backgroundColor: 'red',
    padding: 10,
    borderRadius:40
  },
});
Related