Disable console log in react navigation

Question

I'm using react navigation for my app development. When i run log-android, it keeps logging something like this.

Navigation Dispatch: Action: {...}, New State: {...}

which is from createNavigationContainer.js line 150.

I've run through github and document said it could be done by by setting onNavigationStateChange={null} on a top-level navigator.

How can i achieve this by setting onNavigationStateChange={null} and where should i set it?

I've try to set like below, but it the page will not be able to redirect to other page.

export default () => {
 <App onNavigationStateChange={null} />
}

Below are my app.js code

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import { StackNavigator,DrawerNavigator } from 'react-navigation';
import DrawerContent from './components/drawer/drawerContent.js';

import News from './components/news/home.js';

    const drawNavigation = DrawerNavigator(
      {
        Home : {
           screen : News ,
           navigationOptions : {
             header : null
           }
         }
      },
      {
        contentComponent: props => <DrawerContent {...props} />
      }
    )

    const StackNavigation = StackNavigator({
      Home : { screen : drawNavigation,
        navigationOptions: {
          header: null
        }
       }
    });


    export default StackNavigation;

This is my drawerContent.js

import React, {Component} from 'react'
import {View,Text, StyleSheet,
  TouchableNativeFeedback,
  TouchableOpacity,
  TouchableHighlight
} from 'react-native'
import { DrawerItems, DrawerView } from 'react-navigation';
import Icon from 'react-native-vector-icons/Octicons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

class DrawerContent extends Component {
  constructor(props){
    super(props);
      console.log('DrawerContent|testtttttt');
  }
  render(){
    return (
      <View style={styles.container}>
        <Text>Hi darren</Text>
        <TouchableOpacity style={{ marginBottom:5 }} onPress={() => this.props.navigation.navigate('RegistrationScreen') } >
          <View style={styles.nonIconButton}>
            <Text  style={{ color: 'black',fontSize: 13 }} >Sign Up</Text>
          </View>
        </TouchableOpacity>
            <Text>Hi darren</Text>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});


export default DrawerContent;

Answer 1

First, make sure you are using the latest release of react-navigation as the comment noting that the fix was committed is fairly recent.

Based on your code example, to disable logging for all navigation state changes, you would want to replace this code:

export default StackNavigation;

with:

export default () => (
  <StackNavigation onNavigationStateChange={null} />
);

as StackNavigation appears to be your root navigator.

Answer 2

React navigation is great, but this logging is really bad. Solution

const AppNavigator = StackNavigator(SomeAppRouteConfigs);
    class App extends React.Component {
      render() {
        return (
          <AppNavigator onNavigationStateChange={null} /> 
        );
      }
    }