I want create custom header bar,because product screen to product name screen i want to display product name in header bar
Try this,
More Help :- https://reactnavigation.org/docs/headers/
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Profile"
onPress={() =>
navigation.navigate('Profile', { name: 'Custom profile header' })
}
/>
</View>
);
}
function ProfileScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Profile screen</Text>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'My home' }}
/>
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={({ route }) => ({ title: route.params.name })}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
Related
Cannot pass parameter to functions or const via Drawer Screen component. Is there any better way to achieve this. the idea is to use single function which change the content accordingly.
function Pagef(param1) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Profile Screen</Text>
<Text>{param1}</Text>
</View>
);
}
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator useLegacyImplementation initialRouteName="Feed">
<Drawer.Screen
name="Feed"
component={Pagef('Home')}
options={{ drawerLabel: 'Home' }}
/>
<Drawer.Screen
name="Notifications"
component={Pagef('Updates')}
options={{ drawerLabel: 'Updates' }}
/>
<Drawer.Screen
name="Profile"
component={Pagef('Profile')}
options={{ drawerLabel: 'Profile' }}
/>
</Drawer.Navigator>
);
}
Use initialParams to pass route params to component.
<Drawer.Screen name="Feed" component={Pagef} initialParams={{ param1: "Home" }}/>
...
function Pagef({route: {params: {param1}}}) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Profile Screen</Text>
<Text>{param1}</Text>
</View>
);
}
I created this simple React Native app from scratch but I am having trouble getting simple stacked navigation to work. I don't get any console exception but what happens is the page doesn't change. It still renders the same home component.
Setup:
export default function Index() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home} options={{
title: "overview"
}} />
<Stack.Screen name="About" component={About} />
</Stack.Navigator>
</NavigationContainer>
);
}
Home component:
export function Home() {
return (
<View style={styles.container}>
<Text>Welcome!</Text>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to About"
onPress={() => {
navigation.navigate('About')
}}
/>
</View>
</View>
);
}
Initial page:
After clicking on go to about page:
try importing the navigation from props as the following and retest:
export function Home({navigation}) {
return (
<View style={styles.container}>
<Text>Welcome!</Text>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to About"
onPress={() => {
navigation.navigate('About')
}}
/>
</View>
</View>
);
}
And if this doesn't solve your problem or that's how you already have done it but didn't write all the code then
please show all your code, as well as the About screen code
I'm following the guide here from React Navigation V6 and my component is not displaying as it is intended to. When I swap out createBottomTabNavigator with createMaterialTopTabNavigator I get my display. Can somebody help me figure out why the output is behaving this way? Photos are attached below the code. Thank you to anybody that can help!
Edit: React-Native-Web sometimes displays things incorrectly. When viewed on a phone it looks correct.
import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
function FeedScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Feed Screen!</Text>
</View>
);
}
function HomeScreen({ navigation }:any) {
return (
<View >
<Text>Home screen</Text>
<Button
title="Go to Profile"
onPress={() => navigation.navigate('Profile')}
/>
<Button
title="Go to Settings"
onPress={() => navigation.navigate('Settings')}
/>
</View>
);
}
function NotificationsScreen({ navigation }:any) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Notifications Screen</Text>
</View>
);
}
function ProfileScreen({ navigation }:any) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Profile Screen</Text>
<Button
title="Go to Settings"
onPress={() => navigation.navigate('Settings')}
/>
</View>
);
}
function SettingsScreen({ navigation }:any) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings screen</Text>
<Button
title="Go to tabs"
onPress={() => navigation.navigate('Home')}
/>
</View>
);
}
function BasicStack() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: true }}
/>
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Navigator>
)
}
function Home() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Feed" component={FeedScreen} />
<Tab.Screen name="Notifications" component={NotificationsScreen} />
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<BasicStack/>
</NavigationContainer>
);
}
Output with createBottomTabNavigator
Output with createMaterialTopTabNavigator
On Android, I am aware that the stack screen animation can be controlled to be horizontal when using the react-navigation-stack library with the transitionConfig prop. However, it doesn't seem to work for the react-navigation/stack library, or rather it doesn't have any support for it. Have anyone managed to make it work with react-navigation/stack? Or are there any way to combine both libraries, as i would find it a waste to rewrite my codes in another library just for this small issue. Any help would be appreciated!
Use it like this -
Working Example
Youtube Tutorial for Navigation Gestures
import * as React from 'react';
import { Button, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { Easing } from 'react-native';
import {
createStackNavigator,
CardStyleInterpolators,
} from '#react-navigation/stack';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Profile"
onPress={() => navigation.navigate('Profile')}
/>
</View>
);
}
function ProfileScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Notifications"
onPress={() => navigation.navigate('Notifications')}
/>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
function NotificationsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Settings"
onPress={() => navigation.navigate('Settings')}
/>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
function SettingsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
const Stack = createStackNavigator();
const timingConfig = {
animation: 'timing',
config: {
duration: 200,
easing: Easing.linear,
},
};
const options = {
gestureEnabled: true,
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
transitionSpec: {
open: timingConfig,
close: timingConfig,
},
};
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} options={options} />
<Stack.Screen
name="Notifications"
component={NotificationsScreen}
options={options}
/>
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={options}
/>
<Stack.Screen
name="Settings"
component={SettingsScreen}
options={options}
/>
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}
return (
<Tab.Navigator
barStyle={{backgroundColor: '#F2F2F2'}}
initialRouteName="Catalog">
<Tab.Screen
name="Settings"
options={{
tabBarLabel: 'Alterações',
title: 'Configurações',
tabBarIcon: ({color}) => (
<MaterialCommunityIcons name="cog" color="#000" size={22} />
),
}}>
{(props) => (
<Settings
{...props}
params={{
cpf: params.cpf ? params.cpf : cpf,
}}
/>
)}
</Tab.Screen>
<Tab.Screen
name="Catalog"
options={{
tabBarVisible: false,
title: 'Ofertas',
}}>
{(props) => (
<Catalog
{...props}
params={{
pracaId: params.pracaId ? params.pracaId : pracaId,
}}
/>
)}
</Tab.Screen>
[...]
</Tab.Navigator>
);
The documentations says to use the titleDisplayMode but where? when? I only find solution for older versions. I need it to v5.
Please, can some one help me?
I have include some part of my code to understend how I'm using the lib
There is a shifting prop that you can put to false in your navigator :
<Tab.Navigator
barStyle={{backgroundColor: '#F2F2F2'}}
initialRouteName="Catalog"
shifting={false}
>
.....
Whether the shifting style is used, the active tab icon shifts up to show the label and the inactive tabs won't have a label.
By default, this is true when you have more than 3 tabs. Pass shifting={false} to explicitly disable this animation, or shifting={true} to always use this animation.
https://reactnavigation.org/docs/5.x/material-bottom-tab-navigator#shifting
I have created this example where the HomeScreen always hide the bottom tab and the SettingsStack always show the bottom tab automatically. The key point is basically these lines of code, one have just a screen and the other one have a StackNavigator:
<Tab.Screen name="HomeScreen" component={HomeScreen} />
<Tab.Screen name="SettingsStack" component={SettingsStack} />
This example is similar to the one in the docs https://reactnavigation.org/docs/hiding-tabbar-in-screens/, but with more components.
The code below is in snack, check if this helps you:
https://snack.expo.io/#ronicesarrc/react-navigation-hiding-showing-bottom-tab-navigator
import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createMaterialBottomTabNavigator } from '#react-navigation/material-bottom-tabs';
function SettingsInternalScreen() {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'orange',
}}>
<Text>SettingsInternalScreen!</Text>
</View>
);
}
function SettingsScreen({ navigation }) {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red',
}}>
<TouchableOpacity
style={{ backgroundColor: 'orange', padding: 16 }}
onPress={() => navigation.navigate('SettingsInternalScreen')}>
<Text>Go to Screen showing bottom tab</Text>
</TouchableOpacity>
</View>
);
}
const SettingStack = createStackNavigator();
function SettingsStack() {
return (
<SettingStack.Navigator>
<SettingStack.Screen name="SettingsScreen" component={SettingsScreen} />
<SettingStack.Screen
name="SettingsInternalScreen"
component={SettingsInternalScreen}
/>
</SettingStack.Navigator>
);
}
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity
style={{ backgroundColor: 'gray', padding: 16 }}
onPress={() => navigation.navigate('HomeInternalScreen')}>
<Text>Go to Screen hidding bottom tab</Text>
</TouchableOpacity>
</View>
);
}
function HomeInternalScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>HomeInternalScreen!</Text>
</View>
);
}
const Tab = createMaterialBottomTabNavigator();
const Tabs: React.FC = () => {
return (
<Tab.Navigator>
<Tab.Screen name="HomeScreen" component={HomeScreen} />
<Tab.Screen name="SettingsStack" component={SettingsStack} />
</Tab.Navigator>
);
};
const MainStack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<MainStack.Navigator headerMode="none">
<MainStack.Screen name={'Tabs'} component={Tabs} />
<MainStack.Screen
name={"HomeInternalScreen"}
component={HomeInternalScreen}
/>
</MainStack.Navigator>
</NavigationContainer>
);
}