How to animate react-native-webview? - react-native-webview

Question

The goal is to do a fade transition for react-native-webview.
The idea is to transition the webview when switching tabs. Having a View inside Animated.View would transition as expected, but the WebView does not.
import { useRef } from 'react';
import { Animated } from 'react-native';
import { WebView } from 'react-native-webview';
import { useFocusEffect } from '#react-navigation/native';
export const FadeInView = props => {
const fadeAnim = useRef(new Animated.Value(0)).current;
useFocusEffect(() => {
Animated.timing(fadeAnim, {
toValue: 1,
duration: 500,
useNativeDriver: true,
}).start();
return () => {
Animated.timing(fadeAnim, {
toValue: 0,
duration: 250,
useNativeDriver: true,
}).start();
};
});
return (
<Animated.View style={{ flex: 1, opacity: fadeAnim }} >
<WebView source={{ uri: 'https://expo.dev' }} />
</Animated.View>
);
};
The code above shows the webview instantly.

Answer 1

I solved this issue by setting the androidLayerType to hardware.
<WebView
androidLayerType={'hardware'}
source={{ uri: 'https://expo.dev' }} />
.
.
.
This alternative works, but it only animates once
import Animated, { FadeInRight, FadeInLeft } from 'react-native-reanimated';
<Animated.View entering={FadeInRight} style={{ flex: 1 }}>
<WebView source={{ uri: 'https://expo.dev' }} />
</Animated.View>
If you're switching tabs with the createBottomTabNavigator you can add <Tab.Navigator screenOptions={{unmountOnBlur: true}} />
but this loses its state though