Animatable TouchableOpacity, ToucableHighlight disappear after press

[quangtruong16994]

Example:

import { Text, View, TouchableOpacity, FlatList, InteractionManager, Image } from "react-native";
import * as Animatable from "react-native-animatable";

const AnimatableTouchableOpacity = Animatable.createAnimatableComponent(TouchableOpacity);

export default class Demo extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: "#9C27B0", justifyContent: "center", alignItems: "center" }}>
        <AnimatableTouchableOpacity onPress={() => { }} animation="bounceIn" style={{ borderColor: "#ddd", borderRadius: 3, borderWidth: 1, paddingHorizontal: 15, paddingVertical: 5 }}>
          <Text style={{ fontSize: 18, color: "#ddd", textAlign: "center" }}> Hit me!!! </Text>
        </AnimatableTouchableOpacity>
      </View>
    );
  }
}

After press AnimatableTouchableOpacity, it's gone. Something wrong? Or did I do something wrong?

I'm using: react-native: 0.46.4 react-native-animatable: 1.2.3 Genymotion: Android 6.0

[harryharanr]

Yeah.I am also facing the same issue!

[kornfleks]

Yeah, same issue for me, but without using animatable. It seems to be linked with react-native Animated.

[oneuptim]

Has anyone found a fix for this, it's really frustrating. I'm using: react-native: 0.54.2 react-native-animatable: 1.2.4

[nkov]

Had the same issue, solved it by moving the Animatable component down to be a child of the <TouchableOpacity> instead, which was an image for me.

This somewhat makes sense because I'm sure the intention is not to animate the clickable boundaries of your touchable. So in your case I would suspect it makes sense to move your styles to an <Animatable.View> which is a child of your <TouchableOpacity>

[oneuptim]

Thank you @nkov this solved the issue for me!

[nighttiger1990]

Does anyone fix this? solution of @nkov doesn't fix my issue (wrap component is temporary solution)

[konjoinfinity]

I have tested and using <AnimatableView> also works when wrapping the <TouchableOpacity> as seen below. <TouchableOpacity> is a child of <AnimatableView>. Thank you for this workaround!

import * as Animatable from 'react-native-animatable';

AnimatableView = Animatable.createAnimatableComponent(View);

<AnimatableView
            animation="bounceInLeft"
            delay={90}
            duration={1500}>
            <TouchableOpacity
              style={styles.mapButton}
              onPress={() => this.props.navigation.push("Map")}>
              <Text style={styles.mapButtonText}>Map 🗺</Text>
            </TouchableOpacity>
          </AnimatableView>

[mayconmesquita]

This still happens.

Edit: the @konjoinfinity code disables the onPress trigger.

[mayconmesquita]

I have a workaround that is working here:

Using onPressIn and disable animation, as follows:

const AnimatedTouchableOpacity = createAnimatableComponent(TouchableOpacity);

<AnimatedTouchableOpacity
   animation={this.state.disableAnimation ? null : "bounceIn"}
   delay={100} 
   useNativeDriver={true}
   onPressIn={()=>{ this.setState({ disableAnimation: true }) }}
   onPress={this.openImageDialog}
   activeOpacity={.6}
>
   <Icon name='camera2' color='#fff' size={22} />
</AnimatedTouchableOpacity>

[robertsmit]

It works when you put an extra view inside the hierarchy, like this:

<Animated.View style={style}> <View> <TouchableOpacity> {code} </TouchableOpacity> <View> </Animated.View>

[tuoying96]

How about try using <Animatable.Text>

import { Text, View, TouchableOpacity, FlatList, InteractionManager, Image } from "react-native";
import * as Animatable from "react-native-animatable";

const AnimatableTouchableOpacity = Animatable.createAnimatableComponent(TouchableOpacity);

export default class Demo extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: "#9C27B0", justifyContent: "center", alignItems: "center" }}>
        <AnimatableTouchableOpacity onPress={() => { }} animation="bounceIn" style={{ borderColor: "#ddd", borderRadius: 3, borderWidth: 1, paddingHorizontal: 15, paddingVertical: 5 }}>
          <Animatable.Text style={{ fontSize: 18, color: "#ddd", textAlign: "center" }}> Hit me!!! </Animatable.Text>
        </AnimatableTouchableOpacity>
      </View>
    );
  }
}