Can not find Variable in react-native

Question

I am trying to build an app in react native and keep having an error titled Cannot find variable: opacity in a feature that should fade an image in and then fade an image out depending on the user pressing a button.

I have tried multiple things such as using the let operator and trying to change where the code is located in the class.

here is the code for the button and animation

import React, { Component } from "react";
import {
  Image,
  Animated,
  Easing,
  StyleSheet,
  TouchableWithoutFeedBack
} from "react-native";

const styles = StyleSheet.create({
  info: {
    // for info button
    height: 50,
    width: 50,
    flex: 1,
    position: "absolute",
    left: 315,
    bottom: -675
  }
});

class Info extends Component<Props> {
  state = { opacity: new Animated.Value(0) };
  infoScale = opacity.interpolate({      
      inputRange: [0, 1],
      outputRange: [0.85, 1],
  });
  transformStyle = {
    ...styles.image,
    transform: [{ opacity: infoScale }]
  };
  render() {
    return (
      <TouchableWithoutFeedBack
        onPressIn={() => {
          scaleValue.setValue(0);
          Animated.timing(opacity, {
            toValue: 1,
            duration: 250,
            easing: Easing.linear,
            useNativeDriver: true
          }).start();
        }}
        onPressOut={() => {
          Animated.timing(opacity, {
            toValue: 0,
            duration: 100,
            easing: Easing.linear,
            useNativeDriver: true
          }).start();
        }}
      >
        <Image
          source={require("../assets/images/info2.png")}
          style={styles.info}
          resizeMode="contain"
        />
        <Animated.View style={transformStyle}>
          <Image source={require("../assets/images/iPhoneTimeTreeInfo.png")} />
        </Animated.View>
      </TouchableWithoutFeedBack>
    );
  }
}

export default Info;

Vishnudev Krishnadas · Accepted Answer · 2019-06-12 17:54:31Z

1

opacity in Animated.timing should be this.state.opacity

import React, { Component } from "react";
import {
  Image,
  Animated,
  Easing,
  StyleSheet,
  TouchableWithoutFeedBack
} from "react-native";

const styles = StyleSheet.create({
  info: {
    // for info button
    height: 50,
    width: 50,
    flex: 1,
    position: "absolute",
    left: 315,
    bottom: -675
  }
});

class Info extends Component<Props> {
  state = { opacity: new Animated.Value(0) };
  infoScale = this.state.opacity.interpolate({      
      inputRange: [0, 1],
      outputRange: [0.85, 1],
  });
  transformStyle = {
    ...styles.image,
    transform: [{ opacity: infoScale }]
  };
  render() {
    return (
      <TouchableWithoutFeedBack
        onPressIn={() => {
          scaleValue.setValue(0);
          Animated.timing(this.state.opacity, {
            toValue: 1,
            duration: 250,
            easing: Easing.linear,
            useNativeDriver: true
          }).start();
        }}
        onPressOut={() => {
          Animated.timing(this.state.opacity, {
            toValue: 0,
            duration: 100,
            easing: Easing.linear,
            useNativeDriver: true
          }).start();
        }}
      >
        <Image
          source={require("../assets/images/info2.png")}
          style={styles.info}
          resizeMode="contain"
        />
        <Animated.View style={transformStyle}>
          <Image source={require("../assets/images/iPhoneTimeTreeInfo.png")} />
        </Animated.View>
      </TouchableWithoutFeedBack>
    );
  }
}

export default Info;

edited Jun 12, 2019 at 17:54

answered Jun 12, 2019 at 17:08

Vishnudev Krishnadas

11k2 gold badges29 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

dpatel125 Over a year ago

I made this change and the same error still comes up.

Vishnudev Krishnadas Over a year ago

There are two changes to make. Did you change all?

dpatel125 Over a year ago

Yes, I changed it in both Animated.timing parts.

Zaytri Over a year ago

infoScale doesn't have opacity defined

dpatel125 Over a year ago

This was the issue, Thank You

Collectives™ on Stack Overflow

Can not find Variable in react-native

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related