Search code examples
react-nativereact-native-router-flux

App Freezes after React Native Navigator is called


i'm working on my first react native app that uses the Navigator and i have encountered an issue. Anytime i press on the <TouchableOpacity /> to make the push to the navigator, the app freezes and can't be press again.

here's my code

```

import React, { Component } from 'react';
import {AppRegistry, Navigator, Text, TouchableOpacity} from 'react-native';
import App from './src/App';
import SinglePost from './src/components/SinglePost';


class AppNavigator extends Component{

renderScene(route, navigator){
 var navProps = {navigator};
 switch (route.id) {
    case "postsList":
    console.log(route)
    return (
      <TouchableOpacity onPress={() => navigator.push({id:'yes'})}>
        <Text>Hey</Text>
      </TouchableOpacity>
    )
   case "singlePost":
    return <SinglePost title="Post"/>
   case "yes":
    console.log("yes route ",route)
    return <Text>Yes</Text>
   default:
    return <Text>Yes</Text>
   }

}

render(){
 return (
  <Navigator
    initialRoute={{id: "postsList"}}
       renderScene={this.renderScene}
      />
    )
  }
 }

AppRegistry.registerComponent('SocialMe', () => AppNavigator);


```

When I click the yes, it just freezes, any explanation for this and how can I resolve this? Thanks


Solution

  • Found the problem. I noticed that this only happens when I'm debugging Js remotely. If I disable it, then all works fine