I&#39;m trying to switch screens using both stack and tab navigator.

    const MainNavigation = StackNavigator({
          otp: { screen: OTPlogin },
          otpverify: { screen: OTPverification},
          userVerified: {
            screen: TabNavigator({
              List: { screen: List },
              Settings: { screen: Settings }
            }),
          },
        });

In this case stack navigator is used first and then tab navigator. I want to hide the headers from stack navigator. Which is not working properly when I use navigation options like::

    navigationOptions: { header: { visible: false } }

i&#39;m trying this code on first two components which are using in stacknavigator.
if i use this line then getting some error like:

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/DzbD0.png

Hide header in stack navigator React navigation

I&#39;m using react native navigation (react-navigation) StackNavigator. 
it starts from the Login page throughout the whole lifecycle of the app. I don&#39;t want to have a back option, returning to the Login screen. Does anyone know how it can be hidden on the screen after the login screen?
BTW, I&#39;m also hiding it in the login screen by using: 

&lt;!-- language: lang-js --&gt;

    const MainStack = StackNavigator({
      Login: {
        screen: Login,
        navigationOptions: {
          title: &quot;Login&quot;,
          header: {
            visible: false,
          },
        },
      },
      // ... other screens here
    })



Disable back button in react navigation

I&#39;ve got a problem with the navigation of [React Navigation][1] and React Native. It is about resetting navigation and returning to the home screen.

I&#39;ve build a StackNavigator inside of a DrawerNavigator, and the navigation between home screen and other screens is working. But the problem is, that the navigation stack grows and grows. I&#39;m not sure how to remove a screen from the stack. 

For example when going from the home screen to the settings screen, then to the entry screen and lastly again to the home screen, the home screen is twice in the stack. With the back button I do not get out of the app, but again to the entry screen.

When selecting the home button again a reset of the stack would be great, but I don&#39;t know how to do this. [Here][2] someone tried to help an other person with a similar problem, but the solution didn&#39;t work for me. 

    const Stack = StackNavigator({
      Home: {
        screen: Home
      },
      Entry: {
        screen: Entry
      },
      Settings: {
        screen: Settings
      }
    })
    
    export const Drawer = DrawerNavigator({
      Home: {
        screen: Stack
      }},
      {
        contentComponent: HamburgerMenu
      }
    )

And this is a simple example of the drawer screen

    export default class HamburgerMenu extends Component {
      render () {
        return &lt;ScrollView&gt;
          &lt;Icon.Button
            name={&#39;home&#39;}
            borderRadius={0}
            size={25}
            onPress={() =&gt; { this.props.navigation.navigate(&#39;Home&#39;)}}&gt;
            &lt;Text&gt;{I18n.t(&#39;home&#39;)}&lt;/Text&gt;
          &lt;/Icon.Button&gt;
    
          &lt;Icon.Button
            name={&#39;settings&#39;}
            borderRadius={0}
            size={25}
            onPress={() =&gt; { this.props.navigation.navigate(&#39;Settings&#39;)}}&gt;
            &lt;Text&gt;{I18n.t(&#39;settings&#39;)}&lt;/Text&gt;
          &lt;/Icon.Button&gt;

          &lt;Icon.Button
            name={&#39;entry&#39;}
            borderRadius={0}
            size={25}
            onPress={() =&gt; { this.props.navigation.navigate(&#39;Entry&#39;)}}&gt;
            &lt;Text&gt;{I18n.t(&#39;entry&#39;)}&lt;/Text&gt;
          &lt;/Icon.Button&gt;
        &lt;/ScrollView&gt;
      }
    }

I hope you can help me. This is an essential part of the navigation and a solution would be great!


  [1]: https://reactnavigation.org/
  [2]: https://github.com/react-community/react-navigation/issues/725

Resetting the navigation stack for the home screen (React Navigation and React Native)

# The Goal
Using react navigation, navigate from a screen in a navigator to a screen in a different navigator.

# More Detail

If I have the following Navigator structure:

 - Parent Navigator
  - Nested Navigator 1
     - screen A
     - screen B
  - Nested Navigator 2
     - screen C
     - screen D

how do I go from screen D under nested navigator 2, to screen A under nested navigator 1? Right now if I try to `navigation.navigate` to screen A from screen D there will be an error that says it doesn&#39;t know about a screen A, only screen C and D.

I know this has been asked in various forms in various places on this site as well as GitHub(https://github.com/react-navigation/react-navigation/issues/983, https://github.com/react-navigation/react-navigation/issues/335#issuecomment-280686611)  but for something so basic, there is a lack of clear answers and scrolling through hundreds of GitHub comments searching for a solution isn&#39;t great. 

**Maybe this question can codify how to do this for everyone who&#39;s hitting this very common problem.**


How to navigate between different nested stacks in react navigation

I&#39;ve a page that will render the user&#39;s name if s/he is logged in or &quot;Create an account&quot; or &quot;Sign in&quot; option if s/he not. Screen as below

[![enter image description here][1]][1]


They can navigate to &quot;Sign in&quot; or &quot;Create an account&quot; page. After successfully signing in or registering, it will navigate to this page and it will show the user name. Screen as below

[![enter image description here][2]][2]

Currently, I store user data in `AsyncStorage`, I want to update this field once the user successfully logs in or register when they redirect from the page.

How can I achieve this? 

is there a way to pass param from `navigate.goBack()` and parent can listen to the params and update its state?


  [1]: https://i.stack.imgur.com/P2aGy.png
  [2]: https://i.stack.imgur.com/WOZ4R.png

React navigation goBack() and update parent state

What are the technical differences between the main two React Native navigation solutions: React Native Navigation and React Native?

 - [React Navigation](https://reactnavigation.org)
 - [React Native
   Navigation](https://wix.github.io/react-native-navigation)

Are there specific technical limitations that would require the use of one over the other?

Is one more widely used than the other?

React Navigation vs. React Native Navigation

I want the name of the current route or screen in react-navigation which I want to use inside if condition to make some changes.

How to get current route name in react-navigation?

React-navigation docs are still young, and reading through the issues is not working quite much for me (changes on each version) does anyone have a working method to center title in Android using `react-navigation` in React Native?

How can we center title of react-navigation header?

I am trying to use react-navigation to create an initial LOGIN screen that has no tabbar and header, and once the user has been successfully authenticated will navigate to another screen called LISTRECORD which has a  tabbar, header and no back button option. Anyone has experience in this and can share?

In summary, what I&#39;m trying to achieve with react-navigation is described below...

Screen 1: Login Screen (No Header &amp; Tabbar)  
Authenticated...  
Screen 2: LISTRECORD (Header, Tabbar and No Back Button)  
The tabbar contains other tabs too for navigation to Screen 3, Screen 4...  


React-Navigation with Login Screen

I am using React-Navigation in my app and the app consists of StackNavigator with multiple screens, some screens of which have TextInput with `autoFocus={true}`

**Problem:** on these screens when the component renders, the height of the screen is being set in the constructor:

    constructor(props) {
		super(props);
		this.state = { 
			height: Dimensions.get(&#39;window&#39;).height,
		};
	}

But, since the `autoFocus` of TextInput is `true`, the keyboard on this screen pops-up on the screen almost instantly **after the render**, causing the component to re-render due to the eventListener that is added to Keyboard in componentWillMount:

     componentWillMount() {
        this.keyboardWillShowListener = Keyboard.addListener(
            &quot;keyboardWillShow&quot;,
            this.keyboardWillShow.bind(this)
        );
    }

    keyboardWillShow(e) {
        this.setState({
            height:
                Dimensions.get(&quot;window&quot;).height * 0.9 - e.endCoordinates.height
        });
        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    }

This affects the performance and I would like to avoid the unnecessary re-renders. 

**Questions:**     
1. Is it possible to set the dynamic height (depending on the device) of the Keyboard in React-Navigation&#39;s ScreenProps?    
2. Is it possible to do the same with React-Navigation&#39;s state.params?    
3. Is there any other way to solve this problem, apart from applying KeyboardAvoidingView or [this module][1] ?


  [1]: https://github.com/APSL/react-native-keyboard-aware-scroll-view

How to get a height of a Keyboard in React-Native?

I have been searching for a solution for a long time, but surprisingly, I think nobody has faced it yet. So I am posting it.

I have created a simple Drawer Navigator with React Navigation V3. I have added a Menu icon, and when I click it, the drawer appears as it should be. But, no hand gesture is working. Swiping from left to right don&#39;t do anything. Even when the drawer is open, tapping on empty space doesn&#39;t close the drawer.

Here is my code:

    import {
        createStackNavigator,
        createSwitchNavigator,
        createAppContainer,
        createDrawerNavigator
    } from &#39;react-navigation&#39;;
    import Home from &#39;./screens/Home&#39;;
    import LoginForm from &#39;./screens/LoginForm&#39;;
    import Articles from &#39;./screens/Articles&#39;;
    
    const AuthStack = createStackNavigator({
        LoginScreen: LoginForm
    });
    
    const AppStack = createDrawerNavigator({
        HomeScreen: Home,
        ArticlesScreen: Articles
    });
    
    const RootNavigator = createSwitchNavigator(
        {
            Auth: AuthStack,
            App: AppStack
        },
        {
            initialRouteName: &#39;Auth&#39;
        }
    );
    
    export default createAppContainer(RootNavigator);



React Navigation: Swipe on drawer does not work in Android

My React Native code: 

    import React, { Component } from &#39;react&#39;;
    import { AppRegistry, ActivityIndicator, StyleSheet, ListView, 
      Text, Button, TouchableHighlight, View } from &#39;react-native&#39;;
    
    import { StackNavigator } from &#39;react-navigation&#39;;
    import DetailsPage from &#39;./src/screens/DetailsPage&#39;;

    class HomeScreen extends React.Component {
      
       constructor() {
        super();
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) =&gt; r1 !== r2});
        this.state = {
          userDataSource: ds,
        };
      }
    
      componentDidMount(){
    	  this.fetchUsers();
      }
      
    	fetchUsers(){
    		
    		fetch(&#39;https://jsonplaceholder.typicode.com/users&#39;)
    			.then((response) =&gt; response.json())
    			.then((response) =&gt; {
    				this.setState({
    					userDataSource: this.state.userDataSource.cloneWithRows(response)
    				});
    			});
    	}
    	
    	onPress(user){
    		this.props.navigator.push({
    			id: &#39;DetailPage&#39;
    		});
    	}
      
      renderRow(user, sectionID, rowID, highlightRow){
    	  return(
    	  &lt;TouchableHighlight onPress={()=&gt;{this.onPress(user)} } &gt;
    	  &lt;View style={styles.row}&gt;
    		&lt;Text style={styles.rowText}&gt; {user.name} &lt;/Text&gt;
    	  
    	  &lt;/View&gt;
    	  &lt;/TouchableHighlight&gt;
    	  )
      }
      
      
      render(){
    	  return(
    		  &lt;ListView
    			dataSource = {this.state.userDataSource}
    			renderRow = {this.renderRow.bind(this)}
    		  /&gt;
    	  )
      } 
    }

Navigation config: 

    const NavigationTest = StackNavigator({
      Home: { screen: HomeScreen },
      DetailsPage: { screen: DetailsPage },
    });



The Details screens is: 

    import React, { Component } from &#39;react&#39;;
    import { StyleSheet, Text, View } from &#39;react-native&#39;;
    
    import styles from &#39;../styles&#39;;


    export default class DetailsPage extends React.Component {
      static navigationOptions = ({ navigation }) =&gt; ({
        title: `User: ${navigation.state.params.user.name}`,
      });
      render() {
        const { params } = this.props.navigation.state;
        return (
          &lt;View&gt;
            &lt;Text style={styles.myStyle}&gt;Name: {params.name}&lt;/Text&gt;
            &lt;Text style={styles.myStyle}&gt;Email: {params.email}&lt;/Text&gt;
          &lt;/View&gt;
        );
      }
    }


I am not able to pass the `user` to the `DetailsPage` with the code: 

    onPress(user){
            this.props.navigator.push({
                id: &#39;DetailPage&#39;
            });
        }

I want to navigate to the `DetailPage` with the `onPress` function. If I alert it like: 

    onPress(user){ Alert.alert(user.name)}

I do get the value, but how do I pass it to the other page?

Many thanks!

How to Pass Parameters to screen in StackNavigator?

Perviously when I wanted to make some actions when screen is opened I put them inside `componentDidMount`. For example I can fetch some data.

like this.

    componentDidMount() {
      this.updateData();
    }


But with `react-navigation` **`componentDidMount`** occurs only one time when user open screen first time, and if later user open this page again it will not trigger componentDidMount.

What is proper way to detect when page(screen) is activated and do actions?

react-navigation: Detect when screen, tabbar is activated / appear / focus / blur

I am getting RNSScreen error even though I have installed all related packages and followed react-navigation guide (https://reactnavigation.org/docs/getting-started#installation) but nothing worked for me.


[![enter image description here][1]][1]


[![enter image description here][2]][2]

[![enter image description here][3]][3]


  [1]: https://i.stack.imgur.com/KzOim.png
  [2]: https://i.stack.imgur.com/NBl7q.png
  [3]: https://i.stack.imgur.com/am7xx.png

Invariant Violation: requireNativeComponent: &quot;RNSScreen&quot; was not found in the UIManager

I am new to react-native but not ReactJs iam going to mad about this error from 2 days

    error: bundling failed: Error: While trying to resolve module `@react-navigation/native` from file `C:\XXXXX\Example\src\Router.jsx`, the package `C:\XXXXX\Example\node_modules\@react-navigation\native\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\@react-navigation\native\src\index.tsx`. Indeed, none of these files exist:

    error: bundling failed: Error: While trying to resolve module `react-native-safe-area-context` from file `C:\XXXXX\Example\App.js`, the package `C:\XXXXX\Example\node_modules\react-native-safe-area-context\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\react-native-safe-area-context\src\index.tsx`. Indeed, none of these files exist:

This is my package.json 

    {
      &quot;name&quot;: &quot;Example&quot;,
      &quot;version&quot;: &quot;0.0.1&quot;,
      &quot;private&quot;: true,
      &quot;scripts&quot;: {
        &quot;start&quot;: &quot;react-native start&quot;,
        &quot;test&quot;: &quot;jest&quot;
      },
      &quot;dependencies&quot;: {
        &quot;@react-native-community/masked-view&quot;: &quot;^0.1.6&quot;,
        &quot;@react-navigation/native&quot;: &quot;^5.0.0&quot;,
        &quot;@react-navigation/stack&quot;: &quot;^5.0.0&quot;,
        &quot;eslint&quot;: &quot;^6.8.0&quot;,
        &quot;jetifier&quot;: &quot;^1.6.5&quot;,
        &quot;native-base&quot;: &quot;^2.13.8&quot;,
        &quot;prop-types&quot;: &quot;^15.7.2&quot;,
        &quot;react&quot;: &quot;16.8.6&quot;,
        &quot;react-native&quot;: &quot;0.60.0&quot;,
        &quot;react-native-camera&quot;: &quot;^3.16.0&quot;,
        &quot;react-native-gesture-handler&quot;: &quot;^1.5.6&quot;,
        &quot;react-native-image-crop-picker&quot;: &quot;^0.28.0&quot;,
        &quot;react-native-reanimated&quot;: &quot;^1.7.0&quot;,
        &quot;react-native-safe-area-context&quot;: &quot;^0.7.2&quot;,
        &quot;react-native-safe-area-view&quot;: &quot;^1.0.0&quot;,
        &quot;react-native-screens&quot;: &quot;^2.0.0-beta.2&quot;,
        &quot;react-native-svg&quot;: &quot;^11.0.1&quot;,
        &quot;react-native-vector-icons&quot;: &quot;^6.6.0&quot;
      },
      &quot;devDependencies&quot;: {
        &quot;@babel/core&quot;: &quot;^7.3.3&quot;,
        &quot;@babel/runtime&quot;: &quot;^7.3.1&quot;,
        &quot;@react-native-community/eslint-config&quot;: &quot;^0.0.3&quot;,
        &quot;babel-jest&quot;: &quot;^24.1.0&quot;,
        &quot;jest&quot;: &quot;^24.1.0&quot;,
        &quot;metro-react-native-babel-preset&quot;: &quot;^0.54.1&quot;,
        &quot;react-test-renderer&quot;: &quot;16.8.6&quot;
      },
      &quot;jest&quot;: {
        &quot;preset&quot;: &quot;react-native&quot;
      }
    }

I am downgrade the react-navigation version  to react-navigation 4 and react-navigation-stack
the error become

    error: bundling failed: Error: While trying to resolve module `react-native-safe-area-context` from file `C:\XXXXX\Example\node_modules\react-navigation-stack\lib\module\vendor\views\Stack\StackView.js`, the package `C:\XXXXX\Example\node_modules\react-native-safe-area-context\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\react-native-safe-area-context\src\index.tsx`. Indeed, none of these files exist:

I am also deleted node_modules ,clear cache and install again but no use same errors appear



All React Navigation Solutions on Gang of Coders

Total of 15 React Navigation Solutions