CODEWITHSUNDEEP
react-native
An Cam
An Cam

Reputation: 123

Cannot click TouchableOpacity in animated.view using React native

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

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

Upvotes: 3

Views: 5024

Answers (3)

Chenhua
Chenhua

Reputation: 203

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';

Upvotes: -1

Randunu.KSW
Randunu.KSW

Reputation: 415

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

import { TouchableOpacity } from 'react-native';

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

Upvotes: 5

Satrio Adi Prabowo
Satrio Adi Prabowo

Reputation: 600

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

Upvotes: 1

Related Questions