I'm trying to add module BottomNavigation and DrawerNavigation. I did download the module package successfully. I conducted import createBottomTabNavigator() or createDrawerNavigator() then i received error notify as shown below.
Can anyone help me?
Update:
I installed them by npm install #react-navigation/bottom-tabs.
And my code:
import React from 'react';
import Home from '../Component/Home';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
export default function BottomNav(){
return(
<NavigationContainer>
<Tab.Navigator
initialRouteName="Home"
>
<Tab.Screen name="Home" component={Home} />
</Tab.Navigator>
</NavigationContainer>
)
}
react native 0.65.1 had some issues with reanimated library. thats why happens, also i got same issue.
Related
That's my code. I am working with expo. This just shows a blank white background but the URL doesn't load up
On expo documentation page. it seems pretty easy but I have no idea if it is cause I am navigating to the webview that's why I am facing this issue. P.S no error or warning is shown
1.) create Expo Project
expo init rnwebviewnav
2.) install expo react navigation from react navigation
npx expo install react-native-screens react-native-safe-area-context
3.) install webview with expo
expo install react-native-webview
4.) Create a folder called src (for source) and add your files. For me, I added 2 files there Like this
5.) make sure your package.json looks like this (or has this components as dependencies)
6.) Make sure your App.js Looks like this
import React from "react";
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import WebViewPage from "./src/WebViewPage";
import ButtonPage from "./src/ButtonPage";
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="ButtonPage"
component={ButtonPage}
options={{ headerShown: false }}
/>
<Stack.Screen
name="WebViewPage"
component={WebViewPage}
options={{ title: "Webview Page" }}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
7.) Make sure the page that navigates to the Webview Looks like this
Button Page
import { Button, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { useNavigation } from '#react-navigation/native';
const ButtonPage = () => {
const navigation = useNavigation();
const navigateToWebView = () =>{
navigation.navigate('WebViewPage');
}
return (
<View style={{flex:1, justifyContent:'center'}}>
<Text>ButtonPage</Text>
<Button onPress={navigateToWebView} title="Click to Navigate" color="#841584" />
</View>
)
}
export default ButtonPage
const styles = StyleSheet.create({})
8.) Make sure your Webview Page looks thus
Web View Page
import { SafeAreaView, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import WebView from 'react-native-webview'
const WebViewPage = () => {
return (
<SafeAreaView style={{ flex: 1 }}>
<WebView
source={{ uri: 'https://reactnative.dev/' }}
/>
</SafeAreaView>
)
}
export default WebViewPage
const styles = StyleSheet.create({})
9.) run npm start on your terminal to see what you have done so far!
button page
webview page
I believe I have answered your question :) If yes , pls upvote my answer if it has helped you.
I am working on a project that I want to switch between screens in one tab. for example I have 4 bottom tabs. and from the 1st tab, I want to move to another screen or component inside 1st tab
From this picture, I want to move to another screen or component by staying inside 1st tab.
Could anyone help me to get the possible way.
You need to nest navigators which is a basic feature of react-native-navigation.
This is described in the documentation here.
Navigating to a screen works as usual as it is described in the documentation here.
Here is a minimal working example for which I have made a working snack.
App.js
import React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import Tabs from './Tabs'
export default function App() {
return (
<NavigationContainer>
<Tabs />
</NavigationContainer>
)
}
Tabs.js with 2 Tabs
import React from 'react';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import Home from './Home.js'
import Profile from './Profile.js'
const Tab = createBottomTabNavigator();
function Tabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
);
}
export default Tabs;
Home.js a StackNavigator
import React from 'react';
import {createNativeStackNavigator} from '#react-navigation/native-stack';
import ScreenA from './ScreenA.js'
import ScreenB from './ScreenB.js'
const Stack = createNativeStackNavigator()
function Home() {
return <Stack.Navigator>
<Stack.Screen name="" component={ScreenA} options={{headerShown: false}} />
<Stack.Screen name="ScreenB" component={ScreenB} />
</Stack.Navigator>
}
export default Home;
ScreenA.js
import React from 'react'
import { View, Button } from 'react-native'
function ScreenA(props) {
return <View>
<Button title="NavigateToScreenBInTabHone" onPress={() => props.navigation.navigate('ScreenB')}>
</Button>
</View>
}
export default ScreenA;
ScreenB.js
import React from 'react'
import { View } from 'react-native'
function ScreenB() {
return <View></View>
}
export default ScreenB;
Profile.js
import React from 'react'
import { View } from 'react-native'
function Profile() {
return <View></View>
}
export default Profile;
I copied code from React Navigation's documentation into my project after something I wrote didn't seem to work. But I still got the same error: undefined is not an object (evaluating 'route.key')
This is the code:
import React from 'react'
import { NavigationContainer } from '#react-navigation/native'
import { createNativeStackNavigator } from '#react-navigation/native-stack'
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
import { Text } from 'react-native'
const Stack = createNativeStackNavigator()
const Tab = createBottomTabNavigator()
function Home() {
return (
<Tab.Navigator>
<Tab.Screen name="Feed" component={() => { return <Text>Feed</Text>}} />
</Tab.Navigator>
)
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
It's almost the same as the same code as the one in the documentation but doesn't seem to work. Any idea why?
Make sure you have the correct versions in your package.json file. I encountered this error when using #react-navigation/native-stack v6 and everything else v5. Sticking consistently to the v5 docs solved the issue for me :)
I am using react native and react navigation. I am trying to create a nested navigator, i.e., I am trying to place a tab navigator within a stack navigator. When I run the app on iOS simulator, however, the main screen reloads infinitely. What might be wrong with the below code? New to react native...bear with me if this is a simple one!
Below is the part of the code where I am doing the nesting:
import React from 'react';
import Home from './routes/Home'
import Alert from './routes/Alert'
import Profile from './routes/Profile'
import Subs from './routes/Subs'
import Write from './routes/Write'
import OtherProfile from './routes/OtherProfile'
import Post from './routes/Post'
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { SafeAreaView } from 'react-native-safe-area-context';
export default function App() {
const MainStack = createStackNavigator();
const Tab = createBottomTabNavigator();
function HomeTab() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home}/>
<Tab.Screen name="Subs" component={Subs}/>
<Tab.Screen name="Write" component={Write} options={{ tabBarVisible: false }}/>
<Tab.Screen name="Alert" component={Alert}/>
<Tab.Screen name="Profile" component={Profile}/>
</Tab.Navigator>
)
}
function MainStackScreen() {
return (
<MainStack.Navigator>
<MainStack.Screen name="HomeTab" component={HomeTab} options = {{ headerShown: false }} />
<MainStack.Screen name="Post" component={Post} />
<MainStack.Screen name="OtherProfile" component={OtherProfile} />
</MainStack.Navigator>
)
}
return (
<NavigationContainer>
<SafeAreaView style={{flex:1}}>
<MainStackScreen/>
</SafeAreaView>
</NavigationContainer>
)
}
Found the answer right after posting this.
I declared the navigators and the navigation components outside of the App component and it works.
Hey I'm using react native to build an app for android, ios and web, I'm using https://reactnative.dev/docs/navigation for navigation, it works fine on android and IOs but on web I've stumbled open 2 problems.
First is the next screen always open in the same page, I want it to go to a new page.
Second, Let's assume I'm on the third screen in the stack and if I hit refresh in the browser It goes to the first screen(in my case the first screen is the login screen).
What can I do to solve this problem? is there any other navigation framework that I should use for web, android and ios, or do you have completely different thing to suggest?
import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
import { NavigationContainer, StackActions } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import LoginScreen from './screen/LoginScreen';
import HomeScreen from './screen/HomeScreen';
import AboutUsScreen from './screen/AboutUsScreen';
import ProgramsScreen from './screen/ProgramsScreen';
import ResourcesScreen from './screen/ResourcesScreen';
import NewsScreen from './screen/NewsScreen';
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{ headerShown: true }}
>
<Stack.Screen name="LoginScreen" component={LoginScreen} />
<Stack.Screen name="HomeScreen" component={HomeScreen}/>
<Stack.Screen name="AboutUsScreen" component={AboutUsScreen}/>
<Stack.Screen name="ProgramsScreen" component={ProgramsScreen}/>
<Stack.Screen name="ResourcesScreen" component={ResourcesScreen}/>
<Stack.Screen name="NewsScreen" component={NewsScreen}/>
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
For anyone looking for an answer, I solved it, I created 2 App.js files, App.js for web and App.android.js for android, In App.android.js I used react navigation for navigating and for the web I used routes, Using routes removed the problem which was on refreshing the page the app would jump to the login screen.