RN 0.63 Button compatibility - useNativeDriver was not specified

React Native now complains if useNativeDriver wasn't specified when animating.

Lines 372 to 381 in 3382b02

    
           setOpacityTo(value: number, duration: number) { 
        
               Animated.timing( 
        
                   this._opacityAnimatedValue!, 
        
                   { 
        
                       toValue: value, 
        
                       duration: duration, 
        
                       easing: Animated.Easing.InOut(), 
        
                   }, 
        
               ).start(); 
        
           }

reactxp/src/native-common/Animated.tsx

Lines 160 to 167 in 3382b02

    
           const timingConfig: RN.Animated.TimingAnimationConfig = { 
        
               toValue: config.toValue, 
        
               easing: config.easing ? config.easing.function : undefined, 
        
               duration: config.duration, 
        
               delay: config.delay, 
        
               isInteraction: config.isInteraction, 
        
               useNativeDriver: config.useNativeDriver, 
        
           };

I can PR, but not sure if it's safe to just add useNativeDriver: true?

Not all animations can use native driver, so maybe we just need to force config.useNativeDriver to non-optional in typescript now.

David de Regt (@deregtd)

David de Regt (@deregtd) that sounds like the right plan. -- I wish there was a cleaner API from react-native that would tell us if a particular Animation supports useNativeDriver. Then we could detect those cases and conditionally set the flag.

This feels like an API Wart from RN's side.

API warts from react native are a significant portion of the reason ReactXP exists. :)

But the Button is only animating opacity in setOpacityTo. Why wouldn't this be ok?

 // reactxp/src/native-common/Button.tsx

 setOpacityTo(value: number, duration: number) { 
     Animated.timing( 
         this._opacityAnimatedValue!, 
         { 
             toValue: value, 
             duration: duration, 
             easing: Animated.Easing.InOut(), 
+            useNativeDriver: true, 
         }, 
     ).start(); 
 }

Ah, I misunderstood the suggestion. That change is okay, since the code appears to only animate opacity specifically in the button. But also we need to change the config's type to be nonoptional now to find any other broken spots.

Kristian Gerardsson (@Frexuz)

Kristian Gerardsson (@Frexuz) -- I think we should do this. Do you want to submit a PR for it?

Frederic Barthelemy (@fbartho)

Frederic Barthelemy (@fbartho) yep :)

Navigation Menu

Repository navigation

RN 0.63 Button compatibility - useNativeDriver was not specified #1227

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	setOpacityTo(value: number, duration: number) {
	Animated.timing(
	this._opacityAnimatedValue!,
	{
	toValue: value,
	duration: duration,
	easing: Animated.Easing.InOut(),
	},
	).start();
	}

	const timingConfig: RN.Animated.TimingAnimationConfig = {
	toValue: config.toValue,
	easing: config.easing ? config.easing.function : undefined,
	duration: config.duration,
	delay: config.delay,
	isInteraction: config.isInteraction,
	useNativeDriver: config.useNativeDriver,
	};

RN 0.63 Button compatibility - useNativeDriver was not specified #1227

Description

Activity

deregtd commented on Aug 2, 2020

fbartho commented on Aug 2, 2020

deregtd commented on Aug 2, 2020

Frexuz commented on Aug 3, 2020

deregtd commented on Aug 3, 2020

fbartho commented on Aug 9, 2020

Frexuz commented on Aug 10, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions