React Native - React Navigation Bottom Tab slow transitions (lag) when contains WebView

Question

Lag While Switching Tab When App Coming From Background

I have 4 tabs focused (rendered) before. So when the app coming from background, I changed tab but it take 0,3 - 1s to switch these tab.

The lags happened only re-focus every tab on the first time.

Dependencies

• "@react-navigation/bottom-tabs": "^5.8.0",
• "@react-navigation/native": "^5.7.3",
• "react": "16.13.1",
• "react-native": "0.63.2",
• "react-native-safe-area-context": "^3.1.7",
• "react-native-screens": "^2.10.1",
• "react-native-webview": "^10.8.3"

The App.tsx

import React, {useEffect} from 'react';
import {StyleSheet} from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer, useIsFocused} from '@react-navigation/native';
import WebView from 'react-native-webview';

function Tab1() {
  const focused = useIsFocused();
  useEffect(() => {
    console.log(focused);
  }, [focused]);
  return <WebView source={{uri: 'https://google.com'}} style={styles.tab1} />;
}

function Tab2() {
  const focused = useIsFocused();
  useEffect(() => {
    console.log(focused);
  }, [focused]);
  return <WebView source={{uri: 'https://facebook.com'}} style={styles.tab1} />;
}

function Tab3() {
  const focused = useIsFocused();
  useEffect(() => {
    console.log(focused);
  }, [focused]);
  return (
    <WebView source={{uri: 'https://instagram.com'}} style={styles.tab1} />
  );
}

function Tab4() {
  const focused = useIsFocused();
  useEffect(() => {
    console.log(focused);
  }, [focused]);
  return <WebView source={{uri: 'https://tiktok.com'}} style={styles.tab1} />;
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator lazy={false}>
        <Tab.Screen name={'Tab1'} component={Tab1} />
        <Tab.Screen name={'Tab2'} component={Tab2} />
        <Tab.Screen name={'Tab3'} component={Tab3} />
        <Tab.Screen name={'Tab4'} component={Tab4} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  tab1: {
    flex: 1,
    backgroundColor: 'red',
  },
  tab2: {
    flex: 1,
    backgroundColor: 'blue',
  },
  tab3: {
    flex: 1,
    backgroundColor: 'green',
  },
  tab4: {
    flex: 1,
    backgroundColor: 'black',
  },
});