Cannot click TouchableOpacity in animated.view using React native

Question

I can't click TouchableOpactity in Animated.View. Can you help me?

<Animated.View>
    <TouchableOpacity>
        <Text>Click Me!!</Text>
    </TouchableOpacity>
</Animated.View>

Answer 1

use TouchableOpacity from 'react-native-gesture-handler' instead of from 'react-native'.

import { TouchableOpacity } from 'react-native';

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

Answer 2

I think Animated API not working like that, you have to create separate class like in this example and demo in snack:

import React from 'react';
import { Animated, Text, View } from 'react-native';

class FadeInView extends React.Component {
  state = {
    fadeAnim: new Animated.Value(0),  // Initial value for opacity: 0
  }

  componentDidMount() {
    Animated.timing(                  // Animate over time
      this.state.fadeAnim,            // The animated value to drive
      {
        toValue: 1,                   // Animate to opacity: 1 (opaque)
        duration: 10000,              // Make it take a while
      }
    ).start();                        // Starts the animation
  }

  render() {
    let { fadeAnim } = this.state;

    return (
      <Animated.View                 // Special animatable View
        style={{
          ...this.props.style,
          opacity: fadeAnim,         // Bind opacity to animated value
        }}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}

// You can then use your `FadeInView` in place of a `View` in your components:
export default class App extends React.Component {
  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
          <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
        </FadeInView>
      </View>
    )
  }
}

Answer 3

see this question for more info if PanResponder is used. TouchableOpacity with parent PanResponder

---

PS: in my case, below can make TouchableHighlight unresponding.

import { TouchableHighlight } from 'react-native-gesture-handler';