React-navigation change url but not view - reactjs

I am using React Native for Web and implemented navigation in my app but I am not able to navigate next - previous with browser button,
The URL is changed in the address bar of the browser but not able to change the view.
I have used React-Navigation for both Web/Mobile, Anyone knows a better approach please guide me
//App.js
import * as React from 'react';
import { View, Text,Button,Platform } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<View style={{ marginVertical: 20 }}>
<Text style={{fontWeight:'100',fontSize:30}}>Home Screen</Text>
</View>
<Button
title="Go to Details Screen"
onPress={() => navigation.navigate('Details')}
/>
<View style={ {marginVertical:20}}>
<Button title="Go to Setting Screen" onPress={() => navigation.navigate('Setting')} />
</View>
</View>
);
}
const Stack = createStackNavigator();
function App() {
const linking = {
prefixes: ['myurlhere://'],
config: {
screens: {
Setting: 'Setting',
Details: 'Details',
},
},
};
return (
<NavigationContainer linking={linking} >
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: !isWeb, headerLeft:()=> null }} />
<Stack.Screen name="Setting" component={Setting} options={{headerShown:!isWeb}}/>
<Stack.Screen name="Details" component={Details} options={{headerShown:!isWeb}}/>
</Stack.Navigator>
</NavigationContainer>
);
}
[![//Setting Screen
function Setting() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{fontWeight:'100',fontSize:30}}>Setting Screen</Text>
</View>
);
}
//Details Screen
function Details() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{fontWeight:'100',fontSize:30}}>Detail's Screen</Text>
</View>
);
}]
export default App;

I am also looking into it.
But here is where I am at and its working.
const linking = {
prefixes: ['http://localhost:19006/', 'mychat://'],
config: {
screens: {
Home: '',
Search: '?:id/Search',
}
},
};
return (
<AppContext.Provider value={userSettings}>
<NavigationContainer linking={linking}>
<StackContainer />
</NavigationContainer>
</AppContext.Provider>
);

Related

Bottom Bar + Drawer Navigation

Bottom Bar + Drawer Navigation . If I want to implement these both together, which should implement first ?
Bottom bar then Drawer navigator OR
Drawer then Bottom Navigator
Anyone please answer with proper explanation....
Thanks
first should be drawer ideally and then tabs.
But it all depends upon your business requirement.
https://snack.expo.dev/#gaurav1995/nesting-navigators-%7C-react-navigation
check the above snack, have implemented.
import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
onPress={() => navigation.navigate('Notifications')}
title="Go to notifications"
/>
</View>
);
}
function SettingsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
onPress={() => navigation.navigate('Notifications')}
title="Go to notifications"
/>
</View>
);
}
function PlaceHome({navigation}){
return(
<Tab.Navigator screenOptions={{headerShown:false}} >
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
)
}
function NotificationsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => navigation.goBack()} title="Go back home" />
</View>
);
}
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator useLegacyImplementation initialRouteName="DummyHome">
<Drawer.Screen name="DummyHome" component={PlaceHome} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
Hope it helps

React Native, reactnavigation, how do I goBack() to the previous screen, not the first screen, using a Drawer?

Here's a demo of my problem: https://snack.expo.dev/xtklvo6eM
I want to go from ScreenOne -> ScreenTwo -> ScreenThree -> goBack() to ScreenTwo....
But calling navigation.goBack() on ScreenThree takes me back to ScreenOne, not ScreenTwo.
Can someone tell me why this is?
import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
function ScreenOne({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
onPress={() => navigation.navigate('ScreenTwo')}
title="Go to screen two"
/>
</View>
);
}
function ScreenTwo({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => navigation.navigate('ScreenThree')} title="Go to screen three" />
</View>
);
}
function ScreenThree({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => navigation.goBack()} title="Try to go back to screen two.." />
</View>
);
}
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="ScreenOne">
<Drawer.Screen name="ScreenOne" component={ScreenOne} />
<Drawer.Screen name="ScreenTwo" component={ScreenTwo} />
<Drawer.Screen name="ScreenThree" component={ScreenThree} />
</Drawer.Navigator>
</NavigationContainer>
);
}
backBehavior="history"
https://reactnavigation.org/docs/drawer-navigator#backbehavior

How to navigate to another page by making <View> container clickable in React Native?

I needed custom shaped button so I used <View> and designed the button the way I need with <Image> and <Text> the problem I am facing here is I need that custom <View> button to be clickable to that after clicking on that I can redirect to another page.
Code for button
<View style={{ flexDirection: 'row' }}>
<Text style={styles.headerfont}>Categories</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={{ fontSize: 15, left: 195 }}>View More</Text>
<Image
style={{ left: 200, height: 23, width: 23 }}
source={require('../img/agni/viewmore.png')}
/>
</View>
</View>;
Things I have tried
<Pressable>
<TouchableOpacity>
Image Representation
After clicking should redirect from Screen 1 to Screen 2
We need to create navigator for pages we need to navigate through.
Use TouchableOpacity for onPress for pushing page.
App.js
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomePage}/>
<Stack.Screen name="AgniViewMorePage" component={AgniViewMorePage} />
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}
Home.js
export default function HomeScreen({ navigation}) {
return (
<TouchableOpacity onPress={() => navigation.navigate('Profile')}>
<View style={{ flexDirection: 'row' }}>
<Text>Categories</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={{ fontSize: 15, left: 195 }}>View More</Text>
</View>
</View>
</TouchableOpacity>
);
}
Profile.js
export default 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>
);
}
React Native by default does support routing, you'll need to build on your own, luckily there is react-navigation, which aims to create routing and navigation for Expo and React Native apps.
See their website here https://reactnavigation.org
In order to create a clickable view on React Native, you'll need a TouchableOpacity.
import {TouchableOpacity} from 'react-native';
export default () => (
<TouchableOpacity onPress={() => console.log('Do something')}>
<View>
<Text>Example</Text>
</View>
</TouchableOpacity>
);
Another option would be Button
<Button title="Click Me" onPress={() => console.log('Do something')} />
and here is a quick demo to move between screens:
import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}
function DetailsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button
title="Go to Home"
onPress={() => navigation.navigate('Home')}
/>
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Here is a snack https://snack.expo.dev/#abranhe/hello-react-navigation

ReactNavigation 5.0 browser next/previous button not enable

I have created a project using React Native for Web and it is working fine in mobile but when I run into the web it does not enable the browser default next-previous button.
How to enable browser button and manage next previous in browser
// In App.js in a new project
import * as React from 'react';
import { View, Text,Button,Platform } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const isWeb = Platform.OS === 'web';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => linkTo('/Details')} title="Go to Details Screen" />
</View>
);
}
function Details() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{fontWeight:'100',fontSize:30}}>Detail's Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="HomeScreen">
<Stack.Screen name="HomeScreen" component={HomeScreen} options={{ headerShown: !isWeb}} />
<Stack.Screen name="Setting" component={Setting} options={{headerShown:!isWeb}}/>
<Stack.Screen name="Details" component={Details} options={{headerShown:!isWeb}}/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
I think you have to use "navigation" object that is part of the params to the Home Screen. Have a look at below code
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => navigation.navigate('Details');} />
</View>
);
}

Navigation between screen in react native

So I try to navigate between 2 screens. I created a button on the tab bar(right)
but the problem is that it always says that is undefined.
Here is the code:
static navigationOptions = {
headerTitleStyle: { alignSelf: 'center', },
title:'Oferte',
headerStyle: {
backgroundColor: '#BA272A',
},
headerRight: (
<View style={{paddingRight:11}}>
<Button
color="#ff5c5c" title="Tombola"
onPress={() => this.props.navigation( 'Post', { name: 'Jane'} )}
/>
</View>
),
headerTintColor: 'white',
headerTitleStyle: {
fontWeight: 'bold',
},
}
You can use react-native-router-flux (npm install --save react-native-router-flux)
just make one Navigator.js file and define each page you wanted to navigate.
import React from 'react';
import { Router, Scene } from 'react-native-router-flux';
import LaunchScreen from '../components/LaunchScreen.js';
import Feed from '../components/Feed.js';
const Navigator = () => {
return (
<Router>
<Scene key="root">
<Scene key="lauchscreen" component={LaunchScreen} hideNavBar initial />
<Scene key="feedscreen" type="reset" hideNavBar component={Feed} />
</Scene>
</Router>
);
};
export default Navigator;
now in your App.js file add this:
import Navigator from './src/Navigator.js';
export default class App extends Component<Props> {
render() {
return (
<Navigator />
);
}
}
now in your login.js when you click on login button write this:
import { Actions } from 'react-native-router-flux';
onLoginClick() {
Actions.feedscreen();
}
Thats it.. happy coding.
Looking at https://reactnavigation.org/docs/4.x/redux-integration/#setparams-from-your-screen, probably you should do:
static navigationOptions = ({navigation}) => ({
headerTitleStyle: { alignSelf: 'center', },
title:'Oferte',
headerStyle: {
backgroundColor: '#BA272A',
},
headerRight: (
<View style={{paddingRight:11}}>
<Button
color="#ff5c5c" title="Tombola"
onPress={() => navigation( 'Post', { name: 'Jane'} )}
/>
</View>
),
headerTintColor: 'white',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
When using this inside a static property or method it will refer to the class itself and not the instance of the component.
using react-navigation v5 component base api :
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function DetailsScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button title="navigate" onPress={()=> props.navigate("home")} />
</View>
);
}
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button title="navigate" onPress={()=> props.navigate("details")} />
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
or with old v4 api:
// Other code for HomeScreen here...
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
}
class DetailsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home',
}
);
// Other code for App component here...
Inside these components you can asses navigation prop, which consists of helper functions for navigating.Some frequently used one are
naviagtion.navigate("screenName") //navigates to new screen
navigation.goBack() // go backs to previous screen
navigation.push("screen name") // navigates to new screen with stack animation . this only works for stackNavigator
navigation.pop()// navigates to previous screen with stack animation . this only works for stackNavigator

Resources