CODEWITHSUNDEEP
react-nativereact-animated
Mehmet Kaplan
Mehmet Kaplan

Reputation: 2352

Is it possible to use animated setValue with useNativeDriver?

I am translating views to follow a move gesture, with least possible latency.

I am investigating a couple of options and one of which is - if possible - to send the setValue action to UI thread, rather than the JS thread.

Even though in the documentations it is stated that the Animated.timing, Animated.spring, etc type of functions can be offloaded to the UI thread with useNativeDriver: true directive, there is no reference - at least that I could have found - on if it is possible to send the direct setValue action to the UI thread or not.

My question is; is it possible to use animated setValue with useNativeDriver and how if possible.

Below is the rough example of the code that I am using:

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
    this.spaceAnimatedTranslations = new Animated.ValueXY();
    this._animatedStyle = {
      transform: [
        { translateX: this.spaceAnimatedTranslations.x }, 
        { translateY: this.spaceAnimatedTranslations.y }
      ]
    };
  }

  onSpaceMove(event) {
    this.spaceAnimatedTranslations.setValue({x: event.nativeEvent.translationX, y: event.nativeEvent.translationY});
  }

  render(){
    return <PanGestureHandler
        key={`test`}
        onGestureEvent={e => this.onSpaceMove(e)}>
      <Animated.View
          ref={ref => {
            this.testAnimatedView = ref;
          }}
          style={[this._animatedStyle]}>
        <View style={styles._box_content}>
          {someContent}
        </View>
      </Animated.View>
    </PanGestureHandler>
  }

}

Upvotes: 1

Views: 1462

Answers (1)

Mike P.
Mike P.

Reputation: 251

You have to use Animated.event to do the mapping directly in native thread. See Tracking gestures. Other possibility would be to use react-native-reanimated with react-native-gesture-handler.

Upvotes: 1

Related Questions