Current Behavior
Ios app freezing when I want to navigate from Page1 to Page2
Expected Behavior
I have two simple pages and I want to go to from Page1 to Page2 like
<Button title = "Go to Page2" onPress={() => this.props.navigation.navigate("Page2")} />
But on IOS simulator when I press to Button or TouchableOpacity, app is freezing and can not go to another screen. Actually page 2 is loading in background but screen can not update itself.
Page1.js
import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';
export default class Page1 extends Component{
render() {
return(
<View>
<Text>Page 1</Text>
<Button title = "Go to page 2" onPress={() => this.props.navigation.navigate("Page2")} />
</View>
)
}
}
Page2.js
import React, {Component} from 'react';
import {View, Text} from 'react-native';
export default class Page2 extends Component{
componentDidMount() {
console.log("This is page 2 and, I can see this from console.");
}
render() {
return(
<View>
<Text>I'm in Page 2</Text>
</View>
)
}
}
Router.js
import React from 'react';
import { createStackNavigator, createAppContainer } from "react-navigation";
import Page1 from "./Page1";
import Page2 from "./Page2";
const AppNavigator = createStackNavigator({
Page1: {
screen: Page1
},
Page2: {
screen: Page2
}
}, {
initialRouteName: "Page1",
}
);
export default createAppContainer(AppNavigator);
package.json
"dependencies": {
"@react-native-community/async-storage": "^1.5.0",
"react": "16.8.3",
"react-native": "0.59.8",
"react-native-elements": "^1.1.0",
"react-native-facebook-account-kit": "^1.1.0",
"react-native-fbsdk": "^0.8.0",
"react-native-gesture-handler": "^1.3.0",
"react-native-iap": "^2.5.5",
"react-native-vector-icons": "^6.5.0",
"react-navigation": "^3.11.0"
}
Podfile
pod 'React', :path => '../node_modules/react-native', subspecs: [
'Core',
'CxxBridge',
'DevSupport',
'RCTText',
'RCTNetwork',
'RCTWebSocket',
'RCTAnimation',
'RCTActionSheet',
'RCTBlob',
'RCTCameraRoll',
'RCTGeolocation',
'RCTImage',
'RCTPushNotification',
'RCTSettings',
'RCTTest',
'RCTVibration',
'RCTLinkingIOS'
]
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
pod 'RNAccountKit', :path => '../node_modules/react-native-facebook-account-kit/ios'
pod 'RNIap', :path => '../node_modules/react-native-iap'
pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage'
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'
Environment
React Native Environment Info:
System:
OS: macOS 10.14.4
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 209.52 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.1 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
Android SDK:
API Levels: 24, 26, 27, 28, 29
Build Tools: 19.1.0, 20.0.0, 21.1.2, 22.0.1, 23.0.2, 25.0.0, 26.0.2, 27.0.0, 28.0.3, 29.0.0, 29.0.0
System Images: android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5522156
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.8 => 0.59.8
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-rename: 2.4.1
2
Answers
I had the same issue, I spend almost 1week to solve it. Your pod file is the issue.
in subspecs
‘Core’,
‘RCTLinkingIOS’
you only need these two. Change your pod file, and do
pod install
. If you get any error, add the missing subspec and dopod install
. The culprit is one of the item in subspecs.I had a similar issue and @CRYadu’s answer helped. I ended up clearing out my dependencies and then reinstalling from scratch solved the problem.