react-native-interactive-touchable v0.0.3

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

Objects passed to animationConfigs | pressInAnimationConfigs | pressOutAnimationConfigs

Animated.WithSpringConfig

Animated.WithTimingConfig

License

MIT