如何使 React Native Animated.View 可点击？

Question

I'm using this react native tinder demo ->https://github.com/brentvatne/react-native-animated-demo-tinder

Is it possible to make the cards 'clickable' so it would navigate to another view on click? I've tried wrapping the "Touchable" components around the animated view but doing so disables the animations.

Any ideas would be highly appreciated, thanks!

Answer 1

Another method (which worked better for me) is to create AnimatedTouchable component using createAnimatedComponent method of Animated:

const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);

<AnimatedTouchable onPress={this.onPress}>
  stuff here
</AnimatedTouchable>

Answer 2

I guess you can use TouchableX inside the Animated.View

import { Animated, TouchableOpacity } from 'react-native'
<Animated.View>
  <TouchableOpacity>
    <View>
      stuff
    <View>
  </TouchableOpacity>
</Animated.View>

Ensure you are using the correct imports (not react-native-gesture-handler) otherwise it might not work on Android.

Answer 3

my variant. This custom AnimatedPressable can also be used inside Animated.View .

import {Text, Animated, Pressable} from 'react-native'
    
const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
    
export default () => {
  return (
     <AnimatedPressable onPress={()=>alert('test onPress')}>
        <View>
           <Text>{'....'}</Text>
        </View>
     </AnimatedPressable>
  )
}

Answer 4

In my case it was not working on Android, when I was using

import { TouchableOpacity } from 'react-native-gesture-handler'

Use TouchableOpacity provided by React Native.

import { TouchableOpacity } from 'react-native'
const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);

<Animated.View>
<AnimatedTouchable onPress={() => this.props.navigation.goBack()}>
      <BackButton style={{ height: '100%', width: '100%' }} />
    </AnimatedTouchable>

</Animated.View>

Answer 5

it's too late but in my case i have set the height of Animated.View less than the content inside it

so make sure that the Animated.View height must be greater or equal to the content on which TouchableOpacity is placed

Answer 6

What works for me when i tried to make a dismissable bottomsheet by pressing on backdrop

was this :

const renderBackdrop = () => {
const animatedBackdropOpacity = Animated.interpolate(fall, {
  inputRange: [0, 1],
  outputRange: [0.5, 0],
});

return (
  <Animated.View
    pointerEvents={pointerEvents}
    accessibilityViewIsModal
    accessibilityLiveRegion="polite"
    style={StyleSheet.absoluteFill}>
    <TouchableWithoutFeedback onPress={_closeBs}>
      <Animated.View
        style={[
          styles.backdropContainer,
          {
            opacity: animatedBackdropOpacity,
          },
        ]}
      />
    </TouchableWithoutFeedback>
  </Animated.View>
);

};

Credit goes to React Native Paper Modal Component https://github.com/callstack/react-native-paper/blob/master/src/components/Modal.tsx#L184

Answer 7

What about checking ref value? In example below I use swipes and simulate <TouchableOpacity /> onPress action by checking translation.dx._value

export const CoolComponent = () => {
  const theme = StyleSheet.create({
    blockPosition: {
      transform: [{translateX: translation.x}],
    },
  });

  const translation = useRef(new Animated.ValueXY({x: 0, y: 0})).current;
  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponderCapture: () => true,
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => false,
      onMoveShouldSetPanResponderCapture: () => false,
      onPanResponderMove: Animated.event(
        [
          null,
          {
            dx: translation.x,
          },
        ],
        {
          useNativeDriver: false,
        },
      ),
      onPanResponderRelease: checkTranslationCoords,
      onPanResponderTerminate: checkTranslationCoords,
    }),
  ).current; 

  const checkTranslationCoords = () => {
    if (Math.abs(translation.x._value) === 0) {
      // TouchableOpacity action here
    }
  };

  return (
    <Animated.View
      {...panResponder.panHandlers}
      style={[theme.blockPosition]}
    >
      <Text>Some text</Text>
      </Animated.View>
  )
}

Answer 8

you need to write a method to animate inside the .

renderButton: function() {
  return (
    <TouchableOpacity onPress={this._onPressButton}>
      <Image
        style={styles.button}
        source={require('./myButton.png')}
      />
    </TouchableOpacity>
  );
},

in top of the render () you need to write the animated style with in this method

_onPressButton(){
........
........
}