=> MacOS Monterey Version 12.6.2
=> Xcode Version 14.2
Bellow is my package version:-
"#react-native-async-storage/async-storage": "^1.17.11",
"#react-navigation/native": "^6.1.2",
"#react-navigation/native-stack": "^6.9.8",
"react": "18.1.0",
"react-native": "0.70.6",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2"
Hear is my Navigation File code:-
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import * as React from 'react';
import ScreenManager from './Screens/ScreenManager';
const Stack = createNativeStackNavigator();
export default MyStack = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false
}}
>
<Stack.Screen
name="Home"
component={ScreenManager}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
Showing this error in Simulator
i am install react navigation dependency from follow bellow url =>
https://reactnative.dev/docs/navigation
and also try pod install command. but still getting fail to run my application.
Related
I added stack and bottom navigator in my app, and it is running correctly. But if I add drawer navigation then I am getting error
Below I have added my files
App.tsx:
import {NavigationContainer} from '#react-navigation/native';
import MainNavigator from '../src/navigator/MainNavigator';
import 'react-native-gesture-handler';
const App = () => {
return (
<NavigationContainer>
<MainNavigator />
</NavigationContainer>
);
};
MainNavigator.tsx:
import {createNativeStackNavigator} from '#react-navigation/native-stack';
import MyTabs from './TabNavigator';
const MainStack = createNativeStackNavigator();
const MainNavigator = () => {
return (
<MainStack.Navigator initialRouteName='StartupScreen'>
<MainStack.Screen
name='StartupScreen'
component={StartupScreen}
/>
<MainStack.Screen
name={'Main'}
component={MyTabs}
/>
</MainStack.Navigator>
);
};
TabNavigator.tsx: I have added drawer in this file
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import {createDrawerNavigator} from '#react-navigation/drawer';
const Drawer = createDrawerNavigator();
function DrawerNavigator() {
return (
<Drawer.Navigator>
<Drawer.Screen name="ReferScreen" component={ReferScreen} />
<Drawer.Screen name="OtherScreen" component={OtherScreen} />
</Drawer.Navigator>
);
}
const iconSize = 24;
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator initialRouteName="HomeScreen">
<Tab.Screen
name="HomeScreen"
component={HomeScreen}
options={{
headerTitle: '',
headerShown: false,
tabBarIcon: props =>
props.focused ? (
<ImageConfig.HomeIconOn height={iconSize} width={iconSize} />
) : (
<ImageConfig.HomeIconOff height={iconSize} width={iconSize} />
),
}}
/>
<Tab.Screen
name="ProfileScreen"
component={ProfileScreen}
options={{
tabBarIcon: props =>
props.focused ? (
<ImageConfig.SettingIconOn height={iconSize} width={iconSize} />
) : (
<ImageConfig.SettingIconOff height={iconSize} width={iconSize} />
),
}}
/>
<Tab.Screen name="drawer" component={DrawerNavigator} />
</Tab.Navigator>
);
}
and following are my dependencies in package.json:
"dependencies": {
"#react-navigation/bottom-tabs": "^6.5.5",
"#react-navigation/drawer": "^6.6.0",
"#react-navigation/native": "^6.1.3",
"#react-navigation/native-stack": "^6.9.9",
"react": "17.0.2",
"react-native": "0.68.5",
"react-native-gesture-handler": "^2.9.0",
"react-native-reanimated": "^2.14.4",
"react-native-safe-area-context": "^4.5.0",
"react-native-screens": "^3.19.0",
},
I am getting this error:
Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error
is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
I have an issue with Stack.Navigator on Android. It just doesn't work by some strange reason.
There is simple code:
import React from 'react';
import {createNativeStackNavigator} from '#react-navigation/native-stack';
import {ROUTES} from '../../constants/routes';
import {AuthScreen, LoginScreen, RegisterScreen} from './screens';
export const Unauthorized = () => {
const Stack = createNativeStackNavigator();
return (
<Stack.Navigator
initialRouteName={ROUTES.ROUTE_AUTH}
screenOptions={{headerShown: false}}>
<Stack.Screen name={ROUTES.ROUTE_AUTH} component={AuthScreen} />
<Stack.Screen name={ROUTES.ROUTE_LOGIN} component={LoginScreen} />
<Stack.Screen name={ROUTES.ROUTE_REGISTER} component={RegisterScreen} />
</Stack.Navigator>
);
};
Looks simple. AuthScreen component also is simple:
import React from 'react';
import {SafeAreaView, StyleSheet, Text} from 'react-native';
export const AuthScreen = () => {
return (
<SafeAreaView>
<Text style={styles.text}>Auth screen</Text>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
text: {
color: 'red',
},
});
There is a App.tsx:
import 'react-native-gesture-handler';
import React from 'react';
import {SafeAreaView, StatusBar, useColorScheme} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {ApolloProvider} from '#apollo/client';
import client from './src/apollo';
import {SplashScreen} from './src/screens';
const App = () => {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
return (
<ApolloProvider client={client}>
<SafeAreaView style={backgroundStyle}>
<SplashScreen />
<StatusBar backgroundColor="white" barStyle="dark-content" />
</SafeAreaView>
</ApolloProvider>
);
};
export default App;
But screen is empty when app is Running.
But if I remove Stack.Navigator at all then the content gets visible
Any notes with dependencies or MainActivity I have done.
There is deps:
"#apollo/client": "^3.7.1",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"#react-navigation/stack": "^6.0.11",
"graphql": "^16.6.0",
"react": "18.1.0",
"react-hook-form": "^7.39.1",
"react-native": "0.70.4",
"react-native-bootsplash": "^4.3.3",
"react-native-gesture-handler": "^2.8.0",
"react-native-mmkv-storage": "^0.8.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.10.0"
I spent 4 hours and I have no more ideas how to get Stask.Navigator to show content....
I tried to use
import {createStackNavigator} from '#react-navigation/stack'
const Stack = createStackNavigator()
instead of createNativeStackNavigator
I tried to change versions. Nothing helped.
give flex:1 style to SafeAreaView in App.js
Hello guys I'm new to React Native and I was going along with a tutorial on YouTube. There I imported heroicons as this is what I needed to do. Everything works fine until I import the actual Icons like this:
import { UserIcon, ChevronDownIcon, SearchIcon, AdjustmentsIcon, } from "react-native-heroicons/outline"
Then the error: Unexpected token '{'. import call expects exactly one argument. no stack comes up. Is there anyone who knows how I can solve this problem as everything I found so far didn't work.
My dependencies:
"dependencies": {
"#react-navigation/native": "^6.0.11",
"#react-navigation/native-stack": "^6.7.0",
"#react-navigation/stack": "^6.2.2",
"expo": "~46.0.6",
"expo-status-bar": "~1.4.0",
"react": "18.0.0",
"react-native": "0.69.4",
"react-native-heroicons": "^2.2.0",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0",
"react-native-svg": "12.3.0",
"react-navigation-stack": "^2.10.4",
"tailwindcss-react-native": "^1.7.10"
},
HomeScreen:
import { View, Text, SafeAreaView, StyleSheet, Platform, StatusBar, Image } from 'react-native';
import React, { useLayoutEffect } from 'react';
import { useNavigation } from '#react-navigation/native';
import { UserIcon, ChevronDownIcon, SearchIcon, AdjustmentsIcon, } from "react-native-heroicons/outline"
const HomeScreen = () => {
const navigation = useNavigation();
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
});
}, [])
return (
<SafeAreaView style={styles.AndroidSafeArea}>
<Text className='text-red-500'>
{/* Header */}
<View className="flex-row pb-3 items-center mx-4 space-x-2">
<Image
source={{
uri: 'http://links.papareact.com/wru'
}}
className='h-7 w-7 bg-gray-300 p-4 rounded-full'
/>
<View>
<Text className="font-bold text-gray-400 text-xs">
Deliver Now!
</Text>
<Text className="font-bold text-xl">
Current Location
<ChevronDownIcon size={20} color="#00CCBB"/>
</Text>
</View>
</View>
</Text>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
AndroidSafeArea: {
flex: 1,
backgroundColor: "white",
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
}
})
export default HomeScreen
Thank you for your help :)
I run into same issue if you run your app using expo start or npx expo start you should see that they are telling you where is the issue.
My issue was that react-native-svg version was hire then what expo was expected i just run expo doctor --fix-dependencies and it should fix the version of react-native-svg installed
About
Version of Stack Navigation - #react-navigation/stack": "^5.9.3"
I am trying to show the home screen on load.
Error Details
Code in App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import NavigationContainer from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import Home from './screens/home';
export default function App() {
const Stack = createStackNavigator();
return (
<View style={styles.container}>
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
</NavigationContainer>
</View>
);
}
Code in Home screen
import React, { useState } from 'react';
import { Text, View } from 'react-native';
export default function Home() {
return (
<View>
<Text>Home Screen</Text>
</View>
)
}
Versions
"#react-navigation/drawer": "^5.9.3",
"#react-navigation/native": "^5.7.6",
"#react-navigation/stack": "^5.9.3",
"expo": "~39.0.2",
"expo-status-bar": "~1.0.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
"react-native-web": "~0.13.12"
You need to wrap the <MyStack /> with the NavigationContainer tags
import {
NavigationContainer,
} from '#react-navigation/native';
<NavigationContainer>
<MyStack />
</NavigationContainer>
As per the package.json you are using two versions of navigation so update all to navigation 5 something like below
"#react-navigation/native": "^5.4.0",
Possible causes:
Stack navigator should be <NavigationContainer>'s immediate child.
If your React version does not support hooks use older version of react navigation.
I'm using react-navigation version 5.
I have tab navigation and drawer navigation together.
I'm trying to add an icon in my header to open/close drawer:
here is my custom right header for toggling the drawer:
const HeaderRight = ({ navigation }) => {
return (
<View style={{flexDirection: 'row'}}>
<TouchableOpacity
onPress={ () =>{ navigation.toggleDrawer()}}> //here is the problem
<Image source={require('./assets/images/icons/drawer.png')}/>
</TouchableOpacity>
</View>
);}
this is my tab navigator:
const Tab = createBottomTabNavigator();
function AppTab() {
return (
<Tab.Navigator>
<Tab.Screen name="Category" component={Category} />
<Tab.Screen name="Home" component={Home}/>
</Tab.Navigator>
);}
drawer navigator:
const Drawer = createDrawerNavigator();
function App() {
return (
<Drawer.Navigator>
<Drawer.Screen name="AppTab" component={AppTab} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
);}
and my stack navigator to theme mix all:
const Stack = createStackNavigator();
export default function MyStack() {
return (
<NavigationContainer>
<Stack.Navigator
headerMode="screen"
screenOptions={{
headerRight: ({ navigation }) => (<HeaderRight navigation={navigation} />
),}} >
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
</NavigationContainer>
);
}
when I press the right header icon
what I'm missing here?
the documents weren't really helpful
note:I have also try using dispatch but it didn't work:
navigation.dispatch(DrawerActions.toggleDrawer())
package.json:
{
"name": "test",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/async-storage": "^1.8.0",
"#react-native-community/masked-view": "^0.1.6",
"#react-navigation/bottom-tabs": "^5.0.5",
"#react-navigation/drawer": "^5.0.5",
"#react-navigation/native": "^5.0.5",
"#react-navigation/stack": "^5.0.5",
"moment": "^2.24.0",
"randomcolor": "^0.5.4",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-base64": "0.0.2",
"react-native-gesture-handler": "^1.6.0",
"react-native-image-slider": "^2.0.3",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.0.0-beta.4",
"react-native-woocommerce-api": "^1.0.12"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/runtime": "^7.6.2",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
i have created an simple example deppending upon what i understood, i hope it helps,
u can use options props of Stack.Screen to render custom right or left button and in button component use useNavigation hook to get navigation prop and toggle the drawer user navigation.dispatch(DrawerActions.toggleDrawer())
import React, {useEffect} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import {NavigationContainer, useNavigation, DrawerActions} from '#react-navigation/native';
import {createDrawerNavigator} from '#react-navigation/drawer';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import {createStackNavigator, HeaderBackButton, Header} from '#react-navigation/stack';
import Home from './src/home';
import {TouchableOpacity} from 'react-native-gesture-handler';
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
const TabComponent = () => {
return (
<Tab.Navigator>
<Tab.Screen component={Home} name="Home1" />
<Tab.Screen component={Home} name="Home2" />
{/*
* Rest Screens
*/}
</Tab.Navigator>
);
};
const DrawerComponent = () => {
return (
<Drawer.Navigator>
<Drawer.Screen component={TabComponent} name="Main" />
{/*
* Rest Screens
*/}
</Drawer.Navigator>
);
};
const HeaderLeft = () => {
const navigation = useNavigation();
return (
<View style={{flexDirection: 'row'}}>
<TouchableOpacity
onPress={() => {
navigation.dispatch(DrawerActions.openDrawer());
}}>
<Text>Open</Text>
{/* <Image source={require('./assets/images/icons/drawer.png')} /> */}
</TouchableOpacity>
</View>
);
};
export default () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
options={{
headerLeft: ({}) => <HeaderLeft />
}}
component={DrawerComponent}
name="Drawer"
/>
{/*
* Rest Screens
*/}
</Stack.Navigator>
</NavigationContainer>
);
};
Instead of toggleDrawer() use openDrawer()
STEPS
import { DrawerActions } from '#react-navigation/native';
navigation.dispatch(DrawerActions.openDrawer());
If the above function not working try this:
this.props.navigation.openDrawer()
UPDATE CODE
const HeaderRight = ({ navigation }) => {
return (
<View style={{ flexDirection: "row" }}>
<TouchableOpacity
onPress={() => {
navigation.dispatch(DrawerActions.openDrawer());
}}
>
<Image source={require("./assets/images/icons/drawer.png")} />
</TouchableOpacity>
</View>
);
};
Make sure you have imported the package before using
if this.props.navigation.openDrawer() isnt work, you may try useNavigation.
import { useNavigation } from '#react-navigation/native';
in your header function() add
const navigation = useNavigation();
and add navigation.openDrawer() to onPress
this is worck for me !
headerRight: () => (
<HeaderButtons HeaderButtonComponent={HeaderButton}> // this is a cutom button
<Item
title="Favorite"
iconName="ios-menu"
onPress={() => {navigation.navigation.toggleDrawer() }}
/>
</HeaderButtons>
),