CODEWITHSUNDEEP
javascriptiosanimationreact-native
Denny
Denny

Reputation: 163

How to make React Native Animated.View clickable?

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!

Upvotes: 25

Views: 47154

Answers (8)

Nishanth Shankar
Nishanth Shankar

Reputation: 1976

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.

Upvotes: 28

Sergey Zakharov
Sergey Zakharov

Reputation: 81

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>
  )
}

Upvotes: 1

Dmytro Ivashchenko
Dmytro Ivashchenko

Reputation: 363

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>
  )
}

Upvotes: 12

Niteesh Kumar
Niteesh Kumar

Reputation: 31

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>

Upvotes: 3

&#214;mer
&#214;mer

Reputation: 188

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

Upvotes: 1

devoka
devoka

Reputation: 458

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

Upvotes: 0

HumanCEO
HumanCEO

Reputation: 2571

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>

Upvotes: 60

user1731387
user1731387

Reputation:

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(){
........
........
}

Upvotes: -5

Related Questions