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.
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