React Navigation 4.x version issue when navigating to other screen - react-native

Question

When Using react-navigation version 4.1.1
When navigating from one screen to another screen it is fluctuating and i am using ImageBackground there ,so first white blank screen appears after that imagebackground is loading which is very slow and i can easily see the transition over there .
I dont know what's the exact issue is there.
And for this new version i have to install libraries also for react navigation i.e.react-native screens,animated and maskedView ,safeareacontext.
So please any one know about this please let me know ..
Thanks in advance .
Here is a video for my app where i am getting image loading issue...
https://drive.google.com/open?id=16bdmxOC342uCQl3UL_hB8K0wznpbedge
Here is my APP.js File where i have created stack navigator..
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 />
)
}
}
And this is my 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>
);
}
}

Answer 1

in development mode react-native will show white screen. But in production, it won't so don't worry. it is normal.
about navigation I can't be sure but share the code or demo(image/video).