React Native Change Functional State inside State to Class State inside State

Question

How to write this functional state to be class state? I usually know how to change this in general, but what confuses me a lot here is because this third const state uses some other state inside itself, state const scrollAnim is used inside third state. So I dont understand how to write this for class component because this is written inside functional.

const [scrollAnim] = useState(new Animated.Value(0));
const [offsetAnim] = useState(new Animated.Value(0));

  const [clampedScroll, setClampedScroll] = useState(Animated.diffClamp(
    Animated.add(
      scrollAnim.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 1],
        extrapolateLeft: 'clamp'
      }),
      offsetAnim
    ), 0, 1
  ));

What I tried:

state = {
    scrollAnim: (new Animated.Value(0)),
    offsetAnim: (new Animated.Value(0)),
    
    clampedScroll: (Animated.diffClamp(
      Animated.add(
        scrollAnim.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 1],
          extrapolateLeft: 'clamp'
        }),
        offsetAnim
      ), 0, 1
    ))
  };

score 0 · Accepted Answer · answered Nov 12 '20 at 16:06

0

its simple like this use this.state :

state = {
    scrollAnim: (new Animated.Value(0)),
    offsetAnim: (new Animated.Value(0)),
    
    clampedScroll: (Animated.diffClamp(
      Animated.add(
        this.state.scrollAnim.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 1],
          extrapolateLeft: 'clamp'
        }),
        this.state.offsetAnim
      ), 0, 1
    ))
  };

answered Nov 12 '20 at 16:06

سعيد

1,547
1
14
32

thank u it worked! also pls do u know whats the best way to use this ; `const navbarTranslate = this.state.clampedScroll.interpolate({ inputRange: [0, HEADER_HEIGHT], outputRange: [0, -HEADER_HEIGHT], extrapolate: "clamp", });` inside class component? whjat i need to change? – MatkoMilic Nov 12 '20 at 17:25
wat are the state variables here ? also I suggest you learn about state in class component in general then you won't need help with this – سعيد Nov 12 '20 at 17:29
literally just const varuiable im asking how to use it for class. so just focus on const part here pls – MatkoMilic Nov 12 '20 at 17:36
ahh yeah so you either decalre the const outside of the class ,or you decalre it as a class property like this ``` constructor(props){ this.navbarTranslate =...}``` – سعيد Nov 12 '20 at 17:39
about ur original code, i used it, and when i use it whereever i call these states they arent found i dont know why. it says this.state.scrollAnim is undefined `this.state.clampedScroll( Animated.diffClamp( Animated.add( this.state.scrollAnim.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolateLeft: "clamp", }), this.state.offsetAnim ), 0, height ) );` – MatkoMilic Nov 12 '20 at 20:36
can you provide your state object – سعيد Nov 12 '20 at 20:37
`state = { scrollAnim: new Animated.Value(0), offsetAnim: new Animated.Value(0), clampedScroll: Animated.diffClamp( Animated.add( this.state.scrollAnim.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolateLeft: "clamp", }), this.state.offsetAnim ), 0, 1 ), };` – MatkoMilic Nov 12 '20 at 20:43
i mean its exactly what u wrote – MatkoMilic Nov 12 '20 at 20:43
is it because i try to use this.state inside a function? some guy wrote this answer somewhere else: https://stackoverflow.com/questions/59359282/react-native-state-undefined but idk is it that?? – MatkoMilic Nov 12 '20 at 20:46
this error is weird because i call many other states, i didnt show them inside my state object to u because they are irrelevant but i call all other members of state normally and with same way... idk why only this doesnt work? – MatkoMilic Nov 12 '20 at 20:48
i read somewhere "You need to bind the function to keyword this" maybe i need sht like that – MatkoMilic Nov 12 '20 at 20:50
yeah if you have any function that you're using inside component you should bind it , so that when you use ```this``` it refers to the component – سعيد Nov 12 '20 at 20:57

React Native Change Functional State inside State to Class State inside State

1 Answers1