React-Native-Interactive-Touchable

API

<InteractiveTouchable/> bases on <Pressable /> API provided from React-Native and inherits all Pressable Props.

Requires Reanimated 2 and React Native >= 0.63.

React Native Reanimated v2 needs extra steps to finalize its installation, please follow their installation instructions ..

Install

npm i react-native-interactive-touchable

yarn add react-native-interactive-touchable

Import

 import InteractiveTouchable from 'react-native-interactive-touchable';

Usage

Sample Usage Example

import React from 'react';

import { View, StyleSheet, Image } from 'react-native';

import InteractiveTouchable from 'react-native-interactive-touchable';

const TouchableScale = () => {
  return (
    <InteractiveTouchable activeScale={0.8} activeOpacity={0.4}>
      <Image
        style={styles.image}
        source={{ uri: 'https://www.fillmurray.com/640/360' }}
      />
    </InteractiveTouchable>
  );
};

const styles = StyleSheet.create({
  image: { width: 200, aspectRatio: 1, alignSelf: 'center'},
});

Advanced Usage Example

import React from 'react';

import { View, StyleSheet, Image } from 'react-native';

import InteractiveTouchable from 'react-native-interactive-touchable';

import Animated, {
  interpolate,
  useSharedValue,
  useAnimatedStyle,
} from 'react-native-reanimated';

const TouchableRotate = () => {
  const animatedProgress = useSharedValue(0);

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [
      {
        rotate: `${interpolate(animatedProgress.value, [0, 1], [0, 720])}deg`,
      },
    ],
  }));

  return (
    <View>
      <InteractiveTouchable
        activeOpacity={0.9}
        activeScale={0.7}
        animationConfigs={{
          duration: 1000,
        }}
        animatedProgress={animatedProgress}
      >
        <Animated.View style={animatedStyles}>
          <Image
            style={styles.image}
            source={{ uri: 'https://www.fillmurray.com/600/600' }}
          />
        </Animated.View>
      </InteractiveTouchable>

      <ProgressBar progress={animatedProgress} />
    </View>
  );
}

Props for Customization

Prop	Type	Default	Description
defaultScale	Number	1	Determines what the scale of the wrapped view should be when touch is not active
activeScale	Number	0.95	Determines what the scale of the wrapped view should be when touch is active
activeOpacity	Number	1	Determines what the opacity of the wrapped view should be when touch is not active
animatedProgress	Animated.SharedValue	undefined	Animated value to be used as a callback for the index node internally.
animationConfigs	Animated.WithSpringConfig | | Animated.WithTimingConfig	undefined	Object carrying pressIn and pressOut animation configuration.
pressInAnimationConfigs	Animated.WithSpringConfig | | Animated.WithTimingConfig	undefined	Object carrying pressIn animation configuration.
pressOutAnimationConfigs	Animated.WithSpringConfig | | Animated.WithTimingConfig	undefined	Object carrying pressOut animation configuration.
onPressInAnimationEnd	(isFinished: Boolean) => void;	undefined	The provided function will be called when the animation is complete. In case the animation is cancelled, the callback will receive false as the argument, otherwise it will receive true.
onPressOutAnimationEnd	(isFinished: Boolean) => void;	undefined	The provided function will be called when the animation is complete. In case the animation is cancelled, the callback will receive false as the argument, otherwise it will receive true.

Objects passed to animationConfigs | pressInAnimationConfigs | pressOutAnimationConfigs

Animated.WithSpringConfig

Options	Default
damping	10
mass	1
stiffness	100
overshootClamping	false
restDisplacementThreshold	0.01
restSpeedThreshold	2

Animated.WithTimingConfig

Options	Default
duration	300
easing	in-out quad easing

License

MIT