skip to Main Content

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


  1. 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 do pod install. The culprit is one of the item in subspecs.

    Login or Signup to reply.
  2. 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.

    rm -rf node_modules && rm -rf package-lock.json
    npm install
    npm run pods
    npm start
    npm run ios
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search