Tuesday, 18 December 2018

React Native crashing on iOS with react-navigation drawer

I'm getting an error on iOS only:

TypeError: undefined is not an object (evaluating 'this._callListeners.bind')

This error is located at:
  in DrawerLayout (at DrawerView.js:161)
  ...

Project dependencies:

"dependencies": {
    "@babel/runtime": "7.2.0",
    "@babel/plugin-proposal-async-generator-functions": "7.2.0",
    "@babel/plugin-proposal-class-properties": "7.2.1",
    "@babel/plugin-proposal-object-rest-spread": "7.2.0",
    "babel-preset-expo": "5.0.0",
    "expo": "31.0.2",
    "expo-cli": "2.5.0",
    "native-base": "2.8.1",
    "react": "16.6.3",
    "react-native": "0.57.8",
    "react-redux": "6.0.0",
    "react-navigation": "3.0.8",
    "react-native-vector-icons": "6.1.0",
    "redux": "4.0.1"
  }

This started when I began using react-navigation; but works fine on Android.

Here's the code where we're using react-navigation, this is the main app the imports include the Home and Settings screens:

//imports...

const routes = {
  Home: Home,
  Settings: Settings
};

const AppNavigator = createDrawerNavigator(routes);

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
  state = {}

  render() {
    if (this.state.isReady) {
      return (
        <AppContainer/>
      );
      }
      else {
        return (<Container><Spinner/></Container>);
      }
  }

  componentWillMount() {
    this._loadAssets();
  }

  async _loadAssets() {
    await Expo.Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf")
    });

    this.setState({ isReady: true });
  }
}



from React Native crashing on iOS with react-navigation drawer

1 comment:

  1. I had a very similar problem and fixed by following these steps:

    First of all I have updated my babel.config.js and .babelrc files

    babel.config.js:
    module.exports = {

    presets: ["module:metro-react-native-babel-preset", "mobx"],
    plugins: [
    ["@babel/plugin-transform-flow-strip-types"],
    ["@babel/plugin-proposal-decorators",
    {
    legacy: true
    } ]
    ]
    };

    .babelrc:
    {
    "presets": ["module:metro-react-native-babel-preset", "mobx"],
    "plugins": [
    ["@babel/plugin-transform-flow-strip-types"],
    ["@babel/plugin-proposal-decorators",
    {
    "legacy": true
    } ]
    ]
    }

    After that, follow the steps below to clean cache and reinstall all dependencies:

    watchman watch-del-all &&
    rm -rf $TMPDIR/react-native-packager-cache-* &&
    rm -rf $TMPDIR/metro-bundler-cache-* &&
    rm -rf node_modules/
    && npm cache clean --force &&
    npm install &&
    npm start -- --reset-cache

    After that my project started to work again!
    I hope it helps!

    ReplyDelete