Develop Reference

Problems at nested Stack Navigation and Drawer Navigator for Android React Native

thanks for helping.
I'm learning React Native with Expo and I'm trying to use Stack Navigator and Drawer Navigator. The stacks from Stack Navigator are rendering the screens and all of this is inside of the Drawer Navigator.
Everything "works" fine but actually, it looks like is rendering the screens from the stack, inside of another screen from the drawer.
Stack Navigator rendering the screens
import React from 'react'
import HomeR from '../screens/HomeR'
import TaskR from '../screens/TasksR'
import AboutR from '../screens/AboutR'
import RenderTasksR from '../screens/RenderTasksR'
import { createStackNavigator } from '#react-navigation/stack'
const Stack = createStackNavigator ();
const AboutStack = () =>{
return (
<Stack.Navigator>
<Stack.Screen name = 'AboutA' component={AboutR}/>
</Stack.Navigator>
)
}
const HomeStack = () => {
return (
<Stack.Navigator >
<Stack.Screen name = 'HomeInit' component={HomeR} />
<Stack.Screen name = 'Task' component={TaskR} />
<Stack.Screen
name = 'RenderTasks'
component={RenderTasksR}
options={({route}) => ({title: route.params.task})}
/>
</Stack.Navigator>
)
}
export {AboutStack, HomeStack}
Drawer Navigator rendering the stacks from Stack Navigator
import React from 'react'
import { createDrawerNavigator } from '#react-navigation/drawer'
import { AboutStack, HomeStack } from './MyRoutes'
const MyDrawer = () => {
const Drawer = createDrawerNavigator ()
return (
<Drawer.Navigator>
<Drawer.Screen name = 'Home' component={HomeStack} />
<Drawer.Screen name = 'About' component={AboutStack} />
</Drawer.Navigator>
)
}
export default MyDrawer
App.js rendering the Drawer
import React from 'react'
import { NavigationContainer } from '#react-navigation/native';
import MyDrawer from './routes/MyDrawer';
export default function App(){
return(
<NavigationContainer>
<MyDrawer/>
</NavigationContainer>
);
}
Emulator showing 2 different "screens" (one inside the other)
After navigate, the main screen keeps showing "Home"
The navigation with the buttons of the app works on the inside screen, while the navigation with the drawer works on the outside screen. So the showed on display never navigates between screens according to the drawer.
I'm very new to this and I'm following a course from Udemy, in the videos the guy's using an iOS emulator and it works fine for him, so, I think that this happens only on Android.
I really appreciate it if u can help me and explain to me why this happens. Thank you so much.

React native android Undefined is not function

React native android:
When I am navigating from one screen to next screen
undefined is not a function (evaluating '(0,
_reactNavigation.StackNavigator)({ SettingScreen: { screen: _settings.default }, HomeScreen: { screen: _Home.default } })')
App.js
import React, {Component} from 'react';
import { AppRegistry} from 'react-native';
import { Button } from 'react-native';
import {Navigation} from 'react-native'
import { StackNavigator } from 'react-navigation';
import Settings from './screens/Settings';
import Home from './screens/Home';
const AppNavigator = StackNavigator({
SettingScreen: { screen: Settings },
HomeScreen: { screen: Home }
});
export default class App extends Component<Props> {
render() {
return (
<AppNavigator />
);
}
}
Setting.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
export class Settings extends Component {
render() {
return (
<View>
<Text>This is the Settings screen</Text>
<Button onPress={() => this.props.navigation.navigate('HomeScreen')} title="Home"/>
</View>
)
}
};
export default Settings;
Home.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
export class Home extends Component {
render() {
return (
<View>
<Text>This is the home screen</Text>
</View>
)
}
}
export default Home

Update your App.js to the below.
const App = createStackNavigator({
Home: HomeScreen,
Profile: ProfileScreen,
});
export default createAppContainer(App);
Remove the line export default Settings;
Remove the line export default Home;

Please try the updated function like below.
const App = createStackNavigator({
Home: {screen: HomeScreen},
Profile: {screen: ProfileScreen},
});

Please, Try with the below changes.
import { createStackNavigator } from "react-navigation";
const AppNavigator = createStackNavigator(
{
SettingScreen: { screen: Settings },
HomeScreen: { screen: Home }
}
)

React Native - How to manage the native back button with Drawer Navigation

I recreated the Drawer Navigation following this code: https://github.com/mariodev12/react-native-menu-drawer-navigator
Everything works correctly but now I do not know how to handle the native button to go back .. I would like to always return to the previous page, but if you press twice in the home exit the app.
This is my Code:
App.js
import React from 'react';
import {StackNavigator} from 'react-navigation';
import DrawerStack from './src/stacks/drawerStack';
const Navigator = StackNavigator({
drawerStack: {screen: DrawerStack}
}, {
headerMode: 'none',
initialRouteName: 'drawerStack'
})
export default Navigator
drawerStack.js
import React from 'react'
import {StackNavigator, DrawerActions} from "react-navigation";
import {Text, View, TouchableOpacity} from 'react-native';
import Home from "../components/home";
import DrawerScreen from "./drawerScreen";
const DrawerNavigation = StackNavigator({
DrawerStack: {screen: DrawerScreen}
}, {
headerMode: 'float',
navigationOptions: ({navigation}) => ({
headerStyle: {
backgroundColor: 'rgb(255,45,85)',
paddingLeft: 10,
paddingRight: 10
},
title: 'Home',
headerTintColor: 'white',
headerLeft: <View>
<TouchableOpacity
onPress={() => {
if (navigation.state.isDrawerOpen === false) {
navigation.dispatch(DrawerActions.openDrawer());
} else {
navigation.dispatch(DrawerActions.closeDrawer());
}
}}>
<Text>Menu</Text>
</TouchableOpacity>
</View>
})
})
export default DrawerNavigation;
drawerScreen.js
import {DrawerNavigator} from 'react-navigation'
import Home from '../components/home';
import Login from '../components/login';
import Contacts from '../components/contacts';
import News from '../components/news';
const DrawerScreen = DrawerNavigator({
Home: {screen: Home},
Login: {screen: Login},
Contacts: {screen: Contacts},
News: {screen: News}
}, {
headerMode: 'none',
initialRouteName: 'Home'
})
export default DrawerScreen;
news.js "Example of one page"
import React from "react";
import {Text, View} from 'react-native';
export default class News extends React.Component {
render() {
return (
<View>
<Text> Here Leave the News!! </Text>
</View>
);
}
}
Now, how do I insert the back button in the header instead of the classic menu (DrawerStack) for only the 'News.js' page?

In Android you have to handle back button actions by yourself with BackHandler from react-native.
First of all
import { BackHandler } from 'react-native';
in ComponentDidMount add an event listener to listen for backpress:
componentDidMount() {
BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
}
in ComponentwillUnmount make sure you remove the listener:
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
}
then
onBackPress = () => {
//inside here do what you want with single back button
}
Checkout this link too:
https://reactnavigation.org/docs/en/drawer-based-navigation.html
If you want to go back to previous Screen with back button drawer navigation isn't for you and you should try to use Stack Navigator.

You need create the button in your news screen too, like this.
import React from "react";
import {Text, View} from 'react-native';
export default class News extends React.Component {
static navigationOptions = ({navigation}) => {
return {
headerLeft: --- PUT HERE YOU CUSTOM BUTTON (Use navigation.goBack() in onPress)
}
}
render() {
return (
<View>
<Text> Here Leave the News!! </Text>
</View>
);
}
}
To make better, you can create a new screen with only your custom navigation options.

React Native - Unable to resolve module

Before adding this question , I have checked previous answers. Unfortunately I didn't find any fit to this. I'm a beginner in React Native and I'm following a tutorial. I'm getting this error.
index.android.js
import React from 'react';
import { AppRegistry } from 'react-native';
import Header from './src/components/header';
const App = () =>(
<Header/>
);
AppRegistry.registerComponent('albums' , ()=>App);
header.js
import React from 'react';
import { Text } from 'react-native';
const Header = () => {
return <Text> Albums ! </Text>;
};
export default Header;

//import lib
import React from 'react';
import {AppRegistry,View} from 'react-native';
import Header from './src/components/Header';
// create the component
const App = () => {
return (
<Header />
);
};
// render the component
AppRegistry.registerComponent('ListItem', () => App);
Header.js
import React from 'react';
import { Text } from 'react-native';
const Header = (props) => {
return(
<Text > Albums ! </Text>
);
};
export default Header;

You are providing a wrong path please correct this
import Header from './src/components/Header';
With
import Header from '../src/components/Header';

I think you need to pass in the props from your index.android.js to your header.js.In your original code,you set const Header = (props) => { in your header.js,but you didn't pass the props in your index file.
//import lib
import React from 'react';
import {AppRegistry,View} from 'react-native';
import Header from './src/components/Header';
// create the component
const App = () => {
return (
<Header headerText={'Albums'} />
);
};
// render the component
AppRegistry.registerComponent('ListItem', () => App);
header.js
import React from 'react';
import { Text } from 'react-native';
const Header = (props) => {
return(
<Text > {props.headerText} </Text>
);
};
export default Header;

Return response error 500 React Native

I am using react-native framework for developing my small android app.I'm trying to redirect to Home.js from index.android.js.when i run it,it showing red error message on my Emulator
index.android.js
import React, { Component } from 'react';
import {AppRegistry,Text,View} from 'react-native';
import Home from 'App/Component/Home';
export default class mylApp extends Component {
render() {
return (
<View>
<Home />
</View>
);
}
}
AppRegistry.registerComponent('reactTutorialApp', () => reactTutorialApp);
Home.js
import React, { Component } from 'react';
import {Text,View} from 'react-native';
class Home extends Component {
state = {
myTxt: 'hiiiiiiiiiiiiiiiiiiiiiii';
}
render() {
return (
<View>
<Text>
{this.state.myTxt}
</Text>
</View>
);
}
}
export default Home;

Check with this import Path import Home from 'App/Component/Home';. I assume the Home.js is inside the Project(Folder) -> App (Folder) -> Component (Folder) -> Home.js. If it so then you need import like this import Home from './App/Component/Home';
Update 1:
index.android.js
import React, { Component } from 'react';
import {AppRegistry,Text,View} from 'react-native';
import Home from './App/Component/Home';
export default class mylApp extends Component {
render() {
return (
<View>
<Home />
</View>
);
}
}
AppRegistry.registerComponent('reactTutorialApp', () => mylApp);
Update 2
Home.js
import React, { Component } from 'react';
import {Text,View} from 'react-native';
class Home extends Component {
state = {
myTxt: 'hiiiiiiiiiiiiiiiiiiiiiii'
}
render() {
return (
<View>
<Text>
{this.state.myTxt}
</Text>
</View>
);
}
}
export default Home;