Проблема с версией React Navigation 4.x при переходе на другой экран

При использовании реакции-навигации версии 4.1.1 При переходе с одного экрана на другой он колеблется, и я использую там ImageBackground, поэтому после загрузки этого фонового изображения появляется первый белый пустой экран, что очень медленно, и я легко могу увидеть переход. там . Я не знаю, в чем именно проблема. И для этой новой версии мне нужно установить библиотеки также для реагирующей навигации, т. Е. Реагировать на собственные экраны, анимированные и maskedView, safeareacontext. Пожалуйста, дайте мне знать об этом ... Заранее спасибо.

Вот видео для моего приложения, где у меня возникают проблемы с загрузкой изображений ...

https://drive.google.com/open?id=16bdmxOC342uCQl3UL_hB8K0wznpbedge

Вот мой файл APP.js, в котором я создал навигатор стека.

import React, { Component } from 'react';
import { createAppContainer } from "react-navigation"
import { createStackNavigator } from 'react-navigation-stack';
import WelcomeScreen from './Screens/WelcomeScreen';
import Walkthorugh from './Screens/Walkthrough';
import Login from './Screens/Login';
import Signup from './Screens/Signup';
import Profile from './Screens/Profile';
import Wishlist from './Screens/Wishlish';
import Home from './Screens/Home';
import Cart from './Screens/Cart';
const notificationsel = require('./Screens/icons/notificationsel.png');
 import { createBottomTabNavigator } from 'react-navigation-tabs';
 import { enableScreens } from 'react-native-screens';
 import { useScreens } from 'react-native-screens';

import { 
  StyleSheet, 
  Easing, 
  View, Animated, FlatList,
  Text, Image, Alert, YellowBox, Button, ImageBackground, 
  TouchableWithoutFeedback, TouchableOpacity
} from 'react-native';


const welcomeStack = createStackNavigator({
  Welcome:{screen:WelcomeScreen
    },
 });
 const homeStack = createStackNavigator({
  Home:{screen:Home
    },
 });

 const profileStack = createStackNavigator({
  Profile:{screen:Profile,
    navigationOptions:{header:null}},
 });

 const cartStack = createStackNavigator({
  Cart:{screen:Cart,
    navigationOptions:{header:null}},
 });

 const wishlistStack = createStackNavigator({
  Wishlist:{screen:Wishlist,
    navigationOptions:{header:null}},
 });

const HomeTabNavigator = createBottomTabNavigator({
  Home   : homeStack,
  Profile : profileStack,
  Cart : cartStack,
  Wishlist   : wishlistStack,
},

{
 defaultNavigationOptions: ({ navigation }) => ({
  tabBarOnPress: ({ navigation, defaultHandler }) => {
    console.log('onPress:', navigation.state.routeName);
    // if(navigation.state.routeName=='CallNow'){
    //   Linking.openURL(`tel:${'9414036555'}`)
    //   console.log("CallNow")
    // }
     defaultHandler()
  },
   tabBarIcon: ({ focused, horizontal, tintColor }) => {
     const { routeName } = navigation.state;
     let iconName;
     if (routeName === 'Home') {
        iconName = focused ? notificationsel : notificationsel;
     }

     else if (routeName === 'Profile') {
       iconName = focused ? notificationsel : notificationsel;
     }

     else if (routeName === 'Cart') {
       iconName = focused ? notificationsel : notificationsel;  
     }

     else if (routeName === 'Wishlist') {
       iconName = focused ? notificationsel : notificationsel;
     }

     // You can return any component that you like here!
     return <Image source={iconName} style={{width:22,height:22}}/>
    ;
   },
 }),

              tabBarOptions:{
                activeTintColor: 'blue',
                inactiveTintColor: '#000',
                showLabel:true,
                style:{backgroundColor:'#fff',padding:5}
               },
}
);


const AppNavigator = createStackNavigator(
  {
    Home: {
      screen: HomeTabNavigator,
      // navigationOptions:{header:null}

    },
    Walkthorugh:{
      screen:Walkthorugh,
      // navigationOptions:{header:null}
    },
    Welcome:{
      screen:WelcomeScreen,
      // navigationOptions:{header:null}
    },
    Login:{
      screen:Login,
    },
    Signup:{
      screen:Signup,
      // navigationOptions:{header:null}
    },
  },
  {
    headerMode:'none',
    initialRouteName: "Walkthorugh",
    cardStyle: {backgroundColor: "transparent", opacity: 1 },

    defaultNavigationOptions: {
      gesturesEnabled: false,
      cardStyle: {backgroundColor: "transparent", opacity: 1 },
    swipeEnabled: false,
    animationEnabled: false,
  },

  }
);

const AppContainer = createAppContainer(AppNavigator);

export default class App extends Component {


  render() {
    return (
      <AppContainer />
    )
  }
}

А это мой Login.js ..

import React, { Component } from 'react';
import {
    StyleSheet,
    Platform,
    View, ActivityIndicator, FlatList,
    Text, Image, Dimensions, Keyboard, TextInput, ImageBackground,
    StatusBar, TouchableOpacity
} from 'react-native';
import { NavigationActions, StackActions } from 'react-navigation';
const { width, height } = Dimensions.get('window');
const app_icon = require('./icons/app_icon.png')
const loginbg = require('./icons/loginbg.jpg')
const fashionbot = require('./icons/fashionbot.png')
import { Api_const, App_colors } from './Const/Const.js';
import { ScrollView } from 'react-native-gesture-handler';
import LinearGradient from 'react-native-linear-gradient';

export default class Login extends Component {

    static navigationOptions = {
        headerTitle: 'Login',
        // headerLeft: (
        //     <View style={{ flexDirection: "row", marginLeft: 20, marginRight: 20 }}>
        //         <TouchableWithoutFeedback>
        //             <Image source={require('../assets/Hamburger.png')} >

        //             </Image>
        //         </TouchableWithoutFeedback>
        //     </View>
        // ),
        headerStyle: { borderBottomWidth: 0, marginTop: (Platform.OS === 'ios') ? 0 : 0 },
        headerBackTitle: " "
    };

    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            email: '',
            password: '',
        }
    }

    onClick_Login = () => {
        var action = StackActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: 'Home',params:{test:'test'} })]
        });
        this.props.navigation.dispatch(action);

        // setTimeout(()=>{
            // this.props.navigation.dispatch(action);
        // },
        // 400);   
     }

    render() {

        if (this.state.isLoading) {
            return (
                <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <ActivityIndicator size="large" />
                </View>
            );
        }

        return (
            <LinearGradient colors={[App_colors.purple, App_colors.pink, App_colors.pink]} style={{flex:1}}>

            <ScrollView  ref="scrollView" style={{ flex:1 }} bounces={false}>
                           <StatusBar hidden={true} backgroundColor={App_colors.purple} barStyle="dark-content" />

            <View style={{ flex:1,height}}>
                <ImageBackground source={loginbg} style={{height }}>
                    <View style={{height }}>

                        <View style={{ flexDirection: 'row', margin: 15 }}>
                            <Image style={{ flex: 0.3, height: 90, alignItems: 'center', justifyContent: 'center', alignSelf: 'center' }} resizeMode={"contain"} source={app_icon} />
                            <Image style={{ flex: 1, alignItems: 'center', justifyContent: 'center', alignSelf: 'center' }} resizeMode={"contain"} source={fashionbot} />
                        </View>


                        <View style={{flex:1, justifyContent: 'center', marginLeft: 25, marginRight: 25 }}>
                            <Text style={{ fontSize: 22, color: '#fff', alignItems: 'center', alignSelf: 'center' }}>{'Login'}</Text>



                            <Text style={{ fontSize: 16, color: '#fff', marginTop: 15 }}>{'Email'}</Text>

                            <TextInput style={{ fontSize: 14, height: 40, marginLeft: 0, marginRight: 0, color: 'white' }}
                                value={this.state.email}
                                onChangeText={(text) => this.setState({ email: text })}
                                placeholder={'Your Email'}
                                placeholderTextColor={App_colors.white}
                                underlineColorAndroid={'white'}
                                textContentType={'username'}
                                keyboardType='email-address'
                                caretHidden={false}
                                onSubmitEditing={() => { Keyboard.dismiss() }}
                            />


                            {/* PASSWORD */}
                            <Text style={{ fontSize: 16, color: '#fff', marginTop: 15 }}>{'Password'}</Text>

                            <TextInput style={{ fontSize: 14, height: 40, marginLeft: 0, marginRight: 0, color: 'white' }}
                                value={this.state.password}
                                onChangeText={(text) => this.setState({ password: text })}
                                placeholder={'*********'}
                                placeholderTextColor={App_colors.white}
                                underlineColorAndroid={'white'}
                                secureTextEntry={true}
                                caretHidden={false}
                                onSubmitEditing={() => { Keyboard.dismiss() }}
                            />


                            <Text style={{ fontSize: 16, color: '#fff', marginTop: 5 }}>{'Forgot Password?'}</Text>


                            <TouchableOpacity style={{ justifyContent: 'center',alignSelf:'center', marginBottom: 10, marginTop: 30, width: width - 100, marginLeft: 0, marginRight: 0, alignItems: 'center', borderRadius: 25, borderWidth: 0, paddingTop: 15, paddingBottom: 15, backgroundColor: 'white' }}
                                onPress={this.onClick_Login}>
                                <Text style={{ fontSize: 16, color: App_colors.purple }}>{'Log in'}</Text>
                            </TouchableOpacity>

                        </View>
                    </View>
                </ImageBackground>
            </View>
                </ScrollView>
                </LinearGradient>
        );
    }
}