We Keep Coding

React Native, Drawer navigation not show, the app is closes

When I try to access the Drawer the app closes and does not show me any type of error, I have not been able to solve the problem and be able to view the Draw.
This function is the one that generates problems for me, it should be noted that I am new to react and it is most likely that I have an error in the navigation configuration.
const LoggedInNavigator = () => (
<LoggedInStack.Navigator>
<LoggedInStack.Screen name="Home" component={Home} options={homeOptions} />
</LoggedInStack.Navigator>
);
I share the complete navigation file
import * as React from 'react';
import { NavigationContainer, Theme } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { useSelector } from 'react-redux';
import { navigationRef } from './NavigationService';
import Login from 'app/screens/Login';
import Home from 'app/screens/Home';
import ForgotPassword from 'app/screens/ForgotPassword';
import ThemeController from '../components/ThemeController';
import { StatusBar, Text } from 'react-native';
import { ILoginState } from 'app/models/reducers/login';
const Stack = createStackNavigator();
const AuthStack = createStackNavigator();
const LoggedInStack = createDrawerNavigator();
const homeOptions = {
title: 'Home',
headerTitleStyle: {
fontWeight: 'bold',
},
headerRight: () => <ThemeController />,
};
interface IState {
loginReducer: ILoginState;
}
interface IProps {
theme: Theme;
}
const AuthNavigator = () => {
const isLoggedIn = useSelector(
(state: IState) => state.loginReducer.isLoggedIn,
);
return (
<AuthStack.Navigator>
<Stack.Screen
name="Login"
component={Login}
options={{
// When logging out, a pop animation feels intuitive
// You can remove this if you want the default 'push' animation
animationTypeForReplace: isLoggedIn ? 'push' : 'pop',
headerRight: () => <ThemeController />,
}}
/>
<Stack.Screen
name="ForgotPassword"
component={ForgotPassword}
options={{
// When logging out, a pop animation feels intuitive
// You can remove this if you want the default 'push' animation
animationTypeForReplace: isLoggedIn ? 'push' : 'pop',
headerRight: () => <ThemeController />,
}}
/>
</AuthStack.Navigator>
);
};
//This component is the problem, but I don't know how to fix it
const LoggedInNavigator = () => (
<LoggedInStack.Navigator>
<LoggedInStack.Screen name="Home" component={Home} options={homeOptions} />
</LoggedInStack.Navigator>
);
const App: React.FC<IProps> = (props: IProps) => {
const { theme } = props;
const isLoggedIn = useSelector(
(state: IState) => state.loginReducer.isLoggedIn,
);
return (
<NavigationContainer ref={navigationRef} theme={theme}>
<StatusBar barStyle={theme.dark ? 'light-content' : 'dark-content'} />
<Stack.Navigator screenOptions={{ headerShown: false }}>
{isLoggedIn ? (
<Stack.Screen
name="AppHome"
component={LoggedInNavigator}
// options={homeOptions}
options={{ headerShown: false }}
/>
) : (
<Stack.Screen
name="Login"
component={AuthNavigator}
options={{
// When logging out, a pop animation feels intuitive
// You can remove this if you want the default 'push' animation
animationTypeForReplace: isLoggedIn ? 'push' : 'pop',
headerRight: () => <ThemeController />,
}}
/>
)}
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
thanks for your help

How to go to another screen in top tab navigation in react native

I want to go out of top tab navigation but it unable to navigate. It's giving error The action 'NAVIGATE' with payload {"name":"LoginPage"} was not handled by any navigator.
Do you have a screen named 'LoginPage'?
If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator
I use nesting navigation also but not work. My Screens are below
Top tab navigation screen
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createMaterialTopTabNavigator } from '#react-navigation/material-top-tabs';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import ProfileData from './profiledata';
import ProfileLikeData from './profilelikedata';
import Fontisto from 'react-native-vector-icons/Fontisto';
const Tab = createMaterialTopTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color }) => {
let iconName;
let size;
if (route.name === 'Data') {
iconName = focused
? 'nav-icon-grid'
: 'nav-icon-grid';
size = focused
? 25
: 25;
} else if (route.name === 'Like') {
iconName = focused ? 'heart' : 'heart';
size = focused
? 20
: 20;
}
return <Fontisto name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: '#d40786',
inactiveTintColor: 'white',
showIcon:true,
showLabel:false,
indicatorStyle: {
width: 0, height: 0, elevation: 0,
},
tabStyle: { width: wp('52%'),borderRightWidth:1,borderColor:'white' },
style: { backgroundColor:'trasparent',borderTopWidth:0.5,borderColor:'white',paddingBottom:5 },
}}
>
<Tab.Screen name="Data" component={ProfileData} />
<Tab.Screen name="Like" component={ProfileLikeData} />
</Tab.Navigator>
</NavigationContainer>
);
}
profiledata.js
import React from 'react';
import { View, StyleSheet, Text,ImageBackground,TouchableOpacity,Image } from 'react-native';
import { FlatGrid } from 'react-native-super-grid';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import { RFPercentage, RFValue } from "react-native-responsive-fontsize";
import Toast from 'react-native-simple-toast';
export default class ProfileData extends React.Component {
constructor(props) {
super(props);
this.state = {
videos:[],
loginid:'',
paused:true,
};
}
static navigationOptions = {
headerShown: false,
};
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<FlatGrid
data={this.state.videos}
spacing={0}
renderItem={({ item }) => (
<TouchableOpacity onPress={()=>navigate('LoginPage')} style={{flex:1}}>
// some data
</TouchableOpacity>
)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
// paddingHorizontal:wp('2%'),
backgroundColor:'black',
height: hp('100%'),
},
});

You should create another stack that has your login screen or add the login screen in the tab navigator.
for the first do something like this in your app.js
import { createStackNavigator } from '#react-navigation/stack';
import LoginScreen from './LoginScreen'; //Just import the login screen
const AuthStack = createStackNavigator();
const AuthStackScreen = () => (
<AuthStack.Navigator>
<AuthStack.Screen
name="LoginPage"
component={LoginScreen}
/>
</AuthStack.Navigator>
);
//Then in your profiledata.js;
<TouchableOpacity onPress={()=>navigate('LoginPage')} style={{flex:1}}>
// some data
</TouchableOpacity>
And for the second option just add the login screen in your tab navigator;
<Tab.Screen name="Data" component={ProfileData} />
<Tab.Screen name="Like" component={ProfileLikeData} />
<Tab.Screen name="LoginPage" component={LoginScreen} /> //Don't forget to import it

Using FontAwesome in a tabbar with React Native

I am new to react native and am trying to create a tabbar using createBottomTabNavigator. I would like each tab to have its own icon.
I have followed the following tutorial which uses FontAwesome to display the tab icon.
Tutorial
When I run my app in the iso simulator the tabs display but the icons don't.
Here is my code
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Icon from "react-native-vector-icons/FontAwesome5";
import HomeScreen from './HomeScreen';
import SecondActivity from './second';
const TabNavigator = createBottomTabNavigator({
Home: { screen: HomeScreen,
defaultNavigationOptions: {
tabBarIcon: ({tintColor}) =>
<Icon name="home" size={25} color={tintColor} />
}
},
Events: { screen: SecondActivity,
defaultNavigationOptions: {
tabBarIcon: ({tintColor}) =>
<Icon name="chart-bar" size={25} color={tintColor} />
}
}
}
);
const MyStack = createStackNavigator({
Tabs: {
screen: TabNavigator
},
Home: {
screen: HomeScreen
},
Events: {
screen: SecondActivity
}
},
{
initialRouteName: 'Tabs',
}
);
export default createAppContainer(MyStack);
How do I get the icons to display?

I have a solution for you that is a bit different that what you did in there .. so
const config = Platform.select({
web: { headerMode: "screen" },
default: {}
})
const HomeStack = createStackNavigator(
{
Home: HomeScreen
},
config
)
HomeStack.navigationOptions = {
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === "ios" ? "ios-calendar" : "md-calendar"}
/>
)
}
HomeStack.path = ""
and them you can do like this in createBottomTabNavigator
const tabNavigator = createBottomTabNavigator(
{
HomeStack,
},
{
activeColor: '#000'
}

// You can import Ionicons from #expo/vector-icons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
import Ionicons from 'react-native-vector-icons/Ionicons';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
export default createBottomTabNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'Home') {
iconName = focused
? 'ios-information-circle'
: 'ios-information-circle-outline';
// Sometimes we want to add badges to some icons.
// You can check the implementation below.
IconComponent = HomeIconWithBadge;
} else if (routeName === 'Settings') {
iconName = focused ? 'ios-list-box' : 'ios-list';
}
// You can return any component that you like here!
return <IconComponent name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
}
);
Link : https://snack.expo.io/#react-navigation/basic-tabs-v3
Link : https://reactnavigation.org/docs/en/tab-based-navigation.html

Uncaught Error: undefined is not an object (evaluating 'Y.props.navigation') touchableHandlePress#[native code]

I'm adding in the react-navigation header a drawerMenuButton to open the Drawer Menu.
The icon appears normally but when pressed returns the error quoted.
import React from 'react';
import { View, Dimensions } from 'react-native';
import { Button, Icon } from 'native-base';
import { createAppContainer, createStackNavigator, createDrawerNavigator } from 'react-navigation';
...
const DrawerConfig = {
drawerWidth: Dimensions.get('window').width * 0.75,
contentComponent: ({ navigation }) => {
return(<MenuDrawer navigation={navigation} />)
}
}
const HomeNavigator = createStackNavigator ({
...
}, {
defaultNavigationOptions: ({ navigation }) => {
return {
headerTitleStyle: {
fontWeight: 'bold'
},
headerLeft: (
<Button transparent onPress={() => this.props.navigation.toggleDrawer()}>
<Icon name='menu' style={{color: '#FFF'}} />
</Button>
),
headerRight: (
<HomeIcon navigation={navigation} />
),
headerStyle: {
backgroundColor: '#b80003'
},
headerTintColor: '#FFF'
}
}
});
const DrawerNavigator = createDrawerNavigator (
{
'Principal': {
screen: HomeNavigator
},
'Sobre o Aplicativo': {
screen: InformationApp
},
'Sobre os Responsáveis': {
screen: Team
},
'Sobre o Projeto': {
screen: Project
},
'Política e Termos': {
screen: Policy
}
},
DrawerConfig
);
const AppDrawerContainer = createAppContainer(DrawerNavigator);
export default AppDrawerContainer;
It is important to note that for screens belonging to const DrawerNavigator = createDrawerNavigator I am using the same code above to render drawerMenuButton and it is working normally, the error occurs only on const screens HomeNavigator = createStackNavigator.

Change your code like this
onPress={() => navigation.toggleDrawer()}>

Combine createStackNavigator and createBottomTabNavigator?

Scenario :
I have an app working with three tabs for navigation (School, Admin, Family);
I am now trying to add in other screens, that will not have corresponding tabs. These screens will be navigated to using something like this.props.navigation.navigate('ChatScreen')
Issue
- With my past solution, any time I added a screen it would add a tab for that screen.
Todo :
I would like to have the tabs in my navigation stack, as well as other normal (not-tab) screens.
I would like both the tabs and the header to be persistent
I have been unsuccessful at combining both, and have tried many
variations of the code below.
Tried Code :
const School = createStackNavigator({
School: {
screen: SchoolScreen,
navigationOptions: {
headerTitle: <CustomHeaderTitle screen='school'/>
}
}
});
const Admin = createStackNavigator(
{ Admin: {
screen: AdminScreen,
navigationOptions: {
headerTitle: <CustomHeaderTitle screen='admin' />
}
}
});
const Family = createStackNavigator(
{
Family: {
screen: FamilyScreen,
navigationOptions: {
headerLeft: null,
headerTitle: <CustomHeaderTitle screen='family' />
}
}
}
);
const ChatStack = createStackNavigator({
CreateChat: CreateChatScreen
});
const TabStack = createBottomTabNavigator(
{
School: School,
Admin: Admin,
Family: Family
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: () => {
const { routeName } = navigation.state;
return <Image id={1} source={require('./app/img/school_logo.png')} />
},
tabBarLabel: navigation.state.routeName
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
style: {
backgroundColor: 'black',
height: 55
}
}
}
);
const RootStack = createStackNavigator({
Root: ChatStack,
Tabs: TabStack
})
export default class App extends Component {
render() { return (
<Provider store={store}>
<RootStack />
</Provider>
);
}
}
I apologize, I cannot get this code to format after fighting with it for some time.
Thank you for any help or recommendations in advance!
Please suggest.

Credit to an unnamed redditor:
You'll have to nest you're entire stack into each screen of the tab navigator. As far as I know you can't access different screens in a StackNavigator if they are nested inside a different TabNavigator screen.
For example, if you want to be able to navigate to the chat screen from the SchoolScreen, you'll have to include that component inside your School navigator.
const School = createStackNavigation({
School: {
screen: SchoolScreen
},
SchoolChat: {
screen: CreateChatScreen
}
});
From there your main TabNavigator should look about the same
const TabStack = createBottomTabNavigator({
School: School
});

you should hide the RootStack header when TabStack is focused
TabStack.navigationOptions = {
// Hide the header from root stack
header: null,
};
and you did not need add stack to CreateChatScreen
const RootStack = createStackNavigator({
Tabs: TabStack,
ChatScreen: CreateChatScreen,
})

In react native navigation 5
import React from 'react';
import {Text} from 'react-native';
import {createStackNavigator} from '#react-navigation/stack';
import {NavigationContainer} from '#react-navigation/native';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
function Scr(){
return <Text>hello</Text>;
}
function MyTabs() {
return (
<Tab.Navigator
initialRouteName="Expolre"
tabBarOptions={{
activeTintColor: '#414757',
}}>
<Tab.Screen name="Expolre" component={Scr} />
</Tab.Navigator>
);
}
export default function Routing() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="login"
component={Scr}
options={{header: () => null}}
/>
<Stack.Screen
name="dashboard"
component={MyTabs}
options={{header: () => null}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}