How to animate 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.

Mihkuno · Accepted Answer · 2022-12-28T20:51:25.967

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

How to animate react-native-webview?

1 Answers1