Hi, i ran into an issue with react navigation performance. Today i updated version of libraries that i use in my React Native Expo Project which caused that issue. Then unaware of poor navigation performance i’ve pushed current version of my app to git repository. When i realized that navigation stopped working smoothly i restored it to the previous version. I’ve deleted node_modules and package-lock.json directories and cleared npm cache, then ran npm install once again with previous version of libraries, but it didnt help at all. Even when I restored version from 2 weeks ago and installed specified version of libraries, the app still doesnt work as it used to.
Current version of package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"axios": "^0.18.0",
"expo": "^32.0.6",
"prop-types": "^15.7.2",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-animatable": "^1.3.2",
"react-native-datepicker": "^1.7.2",
"react-native-elements": "^1.1.0",
"react-native-flash-message": "^0.1.11",
"react-native-gifted-chat": "^0.7.3",
"react-native-google-places-autocomplete": "^1.3.9",
"react-native-modal": "^7.0.2",
"react-native-size-matters": "^0.2.1",
"react-navigation": "^3.9.0",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-axios-middleware": "^4.0.0",
"redux-persist": "^5.10.0",
"redux-persist-expo-securestore": "^0.1.1",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1"
},
"private": true
}
Previous version of package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"axios": "^0.18.0",
"expo": "^32.0.6",
"prop-types": "^15.7.2",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-animatable": "^1.3.1",
"react-native-datepicker": "^1.7.2",
"react-native-elements": "^1.1.0",
"react-native-flash-message": "^0.1.11",
"react-native-gifted-chat": "^0.7.3",
"react-native-google-places-autocomplete": "^1.3.9",
"react-native-modal": "^7.0.2",
"react-native-size-matters": "^0.1.6",
"react-navigation": "^3.3.2",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-axios-middleware": "^4.0.0",
"redux-persist": "^5.10.0",
"redux-persist-expo-securestore": "^0.1.1",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
},
"private": true
}
Navigation file:
import React from "react";
import { Animated, Easing, SafeAreaView } from "react-native";
import {
createAppContainer,
createDrawerNavigator,
createStackNavigator,
createSwitchNavigator
} from "react-navigation";
import AddAppsScreen from "../screens/AddAppsScreen";
import BoardScreen from "../screens/BoardScreen";
import FavoriteScreen from "../screens/FavoriteScreen";
import HomeScreen from "../screens/HomeScreen";
import AuthLoadingScreen from "../screens/AuthLoadingScreen";
import LoginScreen from "../screens/LoginScreen";
import NoticeScreen from "../screens/NoticeScreen";
import ProfileScreen from "../screens/ProfileScreen";
import SearchResultScreen from "../screens/SearchResultScreen";
import SearchScreen from "../screens/SearchScreen";
import UserDetailsScreen from "../screens/UserDetailsScreen";
import SideMenu from "./SideMenu";
import NavigationBar from "./NavigationBar";
import MessagesScreen from "../screens/MessagesScreen";
import ChatRoomScreen from "../screens/ChatRoomScreen";
import { moderateScale } from "react-native-size-matters";
const RootNavigator = createStackNavigator(
{
Home: {
screen: HomeScreen
},
Board: {
screen: BoardScreen
},
Notice: {
screen: NoticeScreen
},
Profile: {
screen: ProfileScreen
},
Favorite: {
screen: FavoriteScreen
},
Search: {
screen: SearchScreen
},
SearchResult: {
screen: SearchResultScreen
},
UserDetails: {
screen: UserDetailsScreen
},
AddApps: {
screen: AddAppsScreen
},
Messages: {
screen: MessagesScreen
},
ChatRoom: {
screen: ChatRoomScreen
}
},
{
headerMode: "none",
initialRouteName: "Home",
transitionConfig: () => ({
transitionSpec: {
duration: 300,
easing: Easing.out(Easing.poly(4)),
timing: Animated.timing
},
screenInterpolator: sceneProps => {
const { layout, position, scene } = sceneProps;
const { index } = scene;
const width = layout.initWidth;
const translateX = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [width, 0, 0]
});
const opacity = position.interpolate({
inputRange: [index - 1, index - 0.99, index],
outputRange: [0, 1, 1]
});
return { opacity, transform: [{ translateX: translateX }] };
}
})
}
);
const HomeNavWrapper = createStackNavigator(
{
RootNavigator: {
screen: RootNavigator
}
},
{
defaultNavigationOptions: ({ navigation }) => ({
header: <NavigationBar navigation={navigation} />
}),
transitionConfig: () => ({
transitionSpec: {
duration: 300,
easing: Easing.out(Easing.poly(4)),
timing: Animated.timing
},
screenInterpolator: sceneProps => {
const { layout, position, scene } = sceneProps;
const { index } = scene;
const width = layout.initWidth;
const translateX = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [width, 0, 0]
});
const opacity = position.interpolate({
inputRange: [index - 1, index - 0.99, index],
outputRange: [0, 1, 1]
});
return { opacity, transform: [{ translateX: translateX }] };
}
})
}
);
const HomeDrawerNavigator = createDrawerNavigator(
{
HomeNavWrapper: HomeNavWrapper
},
{
contentComponent: SideMenu,
drawerWidth: moderateScale(280)
// drawerPosition: "right"
}
);
const AppNavigator = createSwitchNavigator(
{
AuthLoading: {
screen: AuthLoadingScreen
},
Login: {
screen: LoginScreen
},
HomeDrawerNavigator: {
screen: HomeDrawerNavigator
}
},
{
// initialRouteName: "HomeDrawerNavigator"
initialRouteName: "AuthLoading"
}
);
const MainNavigation = createAppContainer(AppNavigator);
export default MainNavigation;