How to link changing scroll offset variable to Animated variable in React native?

Question

The thing is that i have hierarchy of components. I have a parent component, child component and child's child component (for easier navigation through code). In the parent's component I have a ScrollView and a variable (not Animated variable) contentOffset (in parent's state), that is changing whenever the scroll happens. The variable interval is between [-100,100].

Parent's component

 constructor(props) {
 super(props);
 this.state = {
   contentOffset: 1
 }
 this.onScrollEvent = this.onScrollEvent.bind(this);
 }


 onScrollEvent = event => {
 this.setState(
   {
     contentOffset: event.nativeEvent.contentOffset.y,
   }
 )
 }               
 render() { 
    return (                                        
    <ScrollView 
     showsVerticalScrollIndicator={false}
     onScroll={this.onScrollEvent.bind(this)>
        <ChildOne
           animation={this.state.contentOffset}/>
    );
  }

Child component

  constructor(props) {
      super(props);
  }
  render() { 
     return (   
     <NestedChild 
              handleClick={this.openSettingsInHeader} 
              header="What the..."
              transformAnimation={this.props.animation}/>
     );
   }

Child's child component

   constructor(props) {
       super(props);
       this.state = {
           AnimatedTextValue: new Animated.Value(0),
           ProfileOffset: this.props.transformAnimation
       }
   }

   render() { 

      const animatedStyles = {
           transform: [
             { scale: this.props.transformAnimation }]} <== if I'll pass it here the scale would be huge [-100,100], so we need to interpolate this, but the variable that's passed through props is not animated value and .interpolate function is not working
      return (   
      <Animated.Text style={[styles.nameStyle,animatedStyles]}>Hi</Animated.Text>
      );
    }

I pass the contentOffset variable as prop to child component and then to child's child component . If I'll use the code, the scale interval will be the same [-100,100] (and the text would be scaled as much so that we couldn't see it). For this, in React Native we have function .interpolate in Animated lib that takes the input interval and gives the output (so when the contentOffset is -100 we will scale down/up for example only on 4 points, not on 100.

But we can't pass the contentOffset variable, because it's not Animated.Value

This is the right code for interpolation and it would work, but the AnimatedTextValue from Child's child component is not linked with the contentOffset variable from parent's state

  const headerTranslate = this.state.AnimatedTextValue.interpolate({
  inputRange: [-100, 100],
  outputRange: [4,-4],
  extrapolate: 'clamp'
});

How can we link this variable to Child's child Animated.Value?

Joshua Obritsch Joshua Obritsch · Accepted Answer · 2019-03-25T18:59:07

Why not make contentOffset an Animated.Value? Then use setValue instead of setState like this:

constructor(props) {
  super(props);

  this.state = {
    contentOffset: new Animated.Value(0)
  };

  this.onScrollEvent = this.onScrollEvent.bind(this);
}


onScrollEvent = event => {
  this.state.contentOffset.setValue(event.nativeEvent.contentOffset.y);
}

How to link changing scroll offset variable to Animated variable in React native?

1 Answers