I am trying to swipe in a page and I have:
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { HomeScreen } from './screens/Home';
import { IvoryFeedScreen } from './screens/IvoryFeed';
export default function App() {
const Stack = createNativeStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='feed' screenOptions={{ headerShown: false, gestureDirection: 'vertical' }}>
<Stack.Screen name="feed" component={IvoryFeedScreen} />
<Stack.Screen name="home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
When I'm on IvoryFeedScreen, I have:
import React, { useEffect, useState } from 'react'
import { View, Text } from 'react-native';
import { Link } from '#react-navigation/native';
export function IvoryFeedScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Ivory Feed Screen</Text>
<Link to="/home">Home</Link>
<Link to={`/feed/${Math.random()}`}>Feed - {Math.random()}</Link>
</View>
);
}
So when you click through to feed, it simply refreshes. But I want it to swipe in as if it were a new route. Can this be accomplished?
Use action to change behavior for in-page navigation. push action adds a route on top of the stack, so a route can be present multiple times.
<Link
to={`/Details/${Math.random()}`}
action={StackActions.push(`Details`)}>
Feed - {Math.random()}
</Link>
Related
I started React Native couple of days ago. Trying to create basic native apps. When i try react native navigation 5 i am gettin this error. Couldn't find similiar problem with this version of it.
TypeError: route is undefined
My Code is:
import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import AppLogo from "./modules/AppLogo";
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
Hi I'm trying to navigate to a shopping cart from inside a products page called merchandise and I can't seem to navigate using the header. I've tried using options and screenoptions but both aren't working and I'm thinking I'm putting the navigation in the wrong place? I've loaded the shopping cart nav into the merch nav but I can't seem to navigate to this from the shopping cart icon component
MerchNav
import React from 'react';
import { StyleSheet, Text, View, Image, SafeAreaView, Dimensions } from 'react-native';
import { useDimensions } from '#react-native-community/hooks';
import { createStackNavigator, HeaderStyleInterpolators } from '#react-navigation/stack';
import ArtistMerch from '../pages/ArtistPages/ArtistMerch';
import ShoppingCartNav from '../navigation/ShoppingCartNav'
import ShoppingCartIcon from '../components/ShoppingCartIcon';
const Stack = createStackNavigator();
export default function MerchNav() {
console.log(useDimensions());
return (
<Stack.Navigator>
<Stack.Screen name = {'ProductsList'} component={ArtistMerch} options={({navigation}) => ({headerStyle: {backgroundColor: 'lightblue'},
headerTitle: (
<View style={styles.logo}>
<Text style={styles.logo}> Merchandise </Text>
</View>),
headerTitleStyle: { alignSelf: 'center', top: 0},
headerRight: () => (
<ShoppingCartIcon onPress={() => navigation.navigate("ShoppingCart")}/>)})}/>
<Stack.Screen name = {'ShoppingCart'} component={ShoppingCartNav} options={{headerStyle: {backgroundColor: 'lightblue'},
headerTitle: (
<View style={styles.logo}>
<Text style={styles.logo}> Shopping Cart </Text>
</View>)}}/>
</Stack.Navigator>
);
}
ShoppingCartNav
import React from 'react';
import { StyleSheet, Text, View, Image, SafeAreaView, Dimensions } from 'react-native';
import { useDimensions } from '#react-native-community/hooks';
import { createStackNavigator, HeaderStyleInterpolators } from '#react-navigation/stack';
import ShoppingCart from '../pages/ArtistPages/ShoppingCart';
const Stack = createStackNavigator();
export default function ShoppingCartNav() {
console.log(useDimensions());
return (
<Stack.Navigator>
<Stack.Screen name = {'Cart'} component={ShoppingCart} options={{headerStyle: {backgroundColor: 'lightblue'},
headerTitle: (
<View style={styles.logo}>
<Text style={styles.logo}> Shopping Cart </Text>
</View>)}}/>
</Stack.Navigator>
);
}
You have to accept navigation as props inside your MerchNav component. MerchNav({navigation})
I have just started learning React Native. I am trying to insert bottom menu tabs on my first app.
I am using this code on Tabs.js (this is just the export part):
export default function Tabs() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
Unfortunately, I don't know how to call it to my main App file (this is just one of my attempts):
import * as React from 'react';
import { Text, View } from 'react-native';
import Tabs from './Tabs.js';
Tabs();
I've read about exporting default function, but I don't understand how to use it in my main App file. I'm sure that this is a syntax issue.
Also, I am planning to add a background colour to all tabs. Any advice?
Thank you.
UPDATE:
This is my Tabs file.
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '#expo/vector-icons';
const Tabs = () => {
function Feed() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text></Text>
</View>
);
}
function Profile() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text></Text>
</View>
);
}
function MainPage() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text></Text>
</View>
);
}
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator
initialRouteName="Feed"
tabBarOptions={{
activeTintColor: '#e91e63',
}}
>
<Tab.Screen
name="Feed"
component={Feed}
options={{
tabBarLabel: '',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="MainPage"
component={MainPage}
options={{
tabBarLabel: '',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="pill" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Profile"
component={Profile}
options={{
tabBarLabel: '',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="format-list-text" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
);
}
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
export default Tabs
This is my main App file.
import * as React from 'react';
import { Text, View } from 'react-native';
import Tabs from './Tabs.js';
const App=()=>{
return <Tabs />
}
Make sure to export the App as default. You most probably have a file called index.js in the root folder and that is importing your App component.
Your App.js file should look like this:
import * as React from 'react';
import { Text, View } from 'react-native';
import Tabs from './Tabs.js';
export default const App=()=>{
return <Tabs />
}
And then your index.js file looks like this:
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
You don't necessarily have to export as default, because you can only have one default export. If you export App as default you import it like this: import App from './App'; and if you export without a default, you have to import like this: import {App} from './App'
And to get an advice how to add background color to the tabs, check here: How to set the background color of Tab.Navigator?
you basically call it like would call a component
btw your Tabs should export like this
const Tabs=()=>{
/...
}
export default Tabs
const App=()=>{
return <Tabs />
}
I'm using React Native Navigation dependency as route. But I have problem in the following code which appears to do nothing.
I'm trying to create 2 screens, one is login, the other is register (later on I will add button to move between them, right now even the default screen doesn't work).
App.JS
import React from 'react';
import { View, StatusBar, Text } from 'react-native';
import Login from './login.js';
export default function App() {
return (
<View>
<StatusBar barStyle="dark-content" hidden={false} backgroundColor="#ffffff" translucent={true}/>
<Login/>
</View>
);
}
Login.JS
import React from 'react';
import Register from './register.js';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function LoginScreen() {
return (
<View style={{ flex: 1, paddingTop: 100, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function Login() {
return (
<View style={styles.container}>
<Text style={styles.logo}>My Title</Text>
<Text style={styles.slogan}>Welcome</Text>
<NavigationContainer>
<Stack.Navigator initialRouteName="Login">
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Register" component={Register} />
</Stack.Navigator>
</NavigationContainer>
</View>
);
}
export default Login;
By reading the docs that should work, but I can't understand what is wrong here.
I receive blank area in the stack screen area.
I have tried to replace Register component with function, didn't work either.
How can I display React Native Navigation stack screen correctly?
How about having the Navigation Container wrap the contents of App.js then you can leave the Stack navigator and screens in the Login component
The container around your navigation has a background-color, so remove all background-color around it and see again.
I am trying to learn React Native navigation. This is my App.js, and it works fine, as expected:
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
class App extends Component {
HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
render() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={this.HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
)
}
}
const Stack = createStackNavigator();
export default App;
Here I have defined HomeScreen in the App.js file itself. But what if I wanted to define it as a standalone component in another file (say HomeScreen.js), like so -
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class HomeScreen extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
)
}
}
export default HomeScreen;
How would I import and use that HomeScreen in App.js? I have tried import HomeScreen from './components/HomeScreen' and <Stack.Screen name="Home" component={HomeScreen} /> but that gives me an error saying that it's not a component. I know this is a simple, basic question, but so far I've not been able to find an answer anywhere. Is there a different navigation library I should be using to solve this problem?
I fixed it. What I was trying to do is give the component value JSX style, like component={<HomeScreen />} but it should just be component={HomeScreen}.