I'm building a react-native app for iOS and Android.
I'm using react-navigation to deal with routing and navigation as follows:
const AppDrawerNavigation = createDrawerNavigator({
Login: {
screen: Screens.Auth.Login,
path: '/login'
},
Register: {
screen: Screens.Auth.Register,
path: '/register'
},
Forgotten: {
screen: Screens.Auth.Forgotten,
path: '/forgotten'
},
Profile: {
screen: Screens.Profile,
path: '/profile'
}
})
And then I render this in React
export default class App extends React.Component {
render() {
return <AppDrawerNavigation persistenceKey="AppDrawerNavigationState2" />
}
}
Worked fine at the beginning but now when I navigate it sends me to the wrong page or refers to pages that I have removed.
This is happening because of the persistence. It is remembering routes that it has stored.
For safety, everytime you add, remove and/or change the routing, you should change the persistenceKey to erase the it's previous value and store again.
Example:
<AppDrawerNavigation persistenceKey="AppDrawerNavigationState" />
to
<AppDrawerNavigation persistenceKey="AppDrawerNavigationState1" />
I added a "1" at the end of my persistenceKey name
Related
I am trying to redirect my app on a condition. If it's login as a teacher then it must redirect to teachers profile otherwise it should redirect to student profile and if it's not login then it must redirect to login.
(() => {
if (isLoggedIn() !== "false")
AppRoutes.push({
path: isLoggedIn() === "teacher" ? "/tabs/home" : "/",
exact: true,
Component: isLoggedIn() === "teacher" ? TeachersProfile : ITCStudent,
});
else
AppRoutes.push({
path: "/",
exact: true,
Component: Login,
});
})();
This code is setting up the default component but i want to redirect to the profile page
Ionic React 5 and 6 are using React Router 5 (not React Router 6).
So one way is to redirect with useHistory().
const history = useHistory();
history.push('/redirect-path');
I'm not sure what AppRoutes is in your example, but if you have defined all your routes in , then you can just push to the path; you don't need to be passing the component.
So I have this routes.ts file where I've stored all the routes of my React app that I created with create-react-app. The routes get imported whenever I need to insert some route-related data.
tl;dr Webpack has no issue with a module elsewhere but says it's undefined at one spot.
Here's all the information you need to help me out 🙂
routes.ts
import { Route, PageName } from ".";
...
const routes: Record<PageName, Route> = {
landing: {
PATH: "/landing",
BASENAME: "landing",
TITLE: env.app.NAME,
Page: Landing,
},
...
}
Works fine everywhere else but here:
navbar-utils.ts
import { routes } from "../../config";
...
const navItems: NavItem[] = [
{
text: "Home",
icon: faHome,
to: routes.landing.PATH,
},
...
]
There is where Webpack loses it and keeps telling me that _config__WEBPACK_IMPORTED_MODULE_0__.routes is undefined.
I have a React/Redux Universal application and I have recently added i18next to add internalization to my website.
In my react-router config, I have edited my routes:
const routes = [
{
component: App,
routes: [
{ path: '/:lng(fr|en)?/', exact: true, component: Home },
{ path: '/:lng?/about', component: About },
…
{ component: NotFound }
]
}
];
Everything works well, but I don't know how to keep the lng paramaters between my pages. Indeed, when I use <Link to="/about" >, I logically lost my params.
So, how to keep this parameter?
Thanks
I'm using react navigation for navigate screen. I used nested navigation, TabNavigator and StackNavigator. How can I know in current screen has been swipe / change to other screen and change the state inside the screen without using Redux . I try to get this.props.navigation.state.routeName , it get the routeName of the screen, but how to trigger when routeName has change
const mainNav = TabNavigator({
Home: {
screen: HomeScreen,
},
Live: {
screen: LiveScreen,
},
Radio: {
screen: RadioScreen,
},
} );
export const mainStack = StackNavigator({
Home: { screen: mainNav},
Content: { screen: ContentScreen },
});
At present there is no way to track swipe gestures in react navigation. You can use hacks to achieve this, But mostly all of them requires hooking react navigation with redux.
Best way to track your screens will be to use react redux and hook the state with appState. This will give you most control over navigation and you can also use redux actions to control navigations along with other business stuff f in the app.
Simplest method to use react navigation with redux
You can refer
https://github.com/react-community/react-navigation/issues/1063
I followed an example that uses I18n to implement multi-language. Everything was working fine until I tried to use the I18n on a sideMenu. I create a drawer with DrawerNavigator and set the SideMenu as contentComponent
const AppDrawer = DrawerNavigator(
{
Home: {
path: '/',
screen: WelcomeContainer,
},
Category: {
path: '/other',
screen: other,
},
},
{
contentComponent: SideMenu,
initialRouteName: 'Home',
contentOptions: {
activeTintColor: '#4edb6d',
},
}
);
In sideMenu I use I18n exactly as in the other components
<Text>
{ I18n.t('menu.title') }
</Text>
Even if I change the language the text is always in English which is the default language. The text language changed one time after multiple language change. Do you have an idea about the problem or how to solve it?
Edit:
I just noticed that the text language change only after I click on an item from the sideMenu. Any idea?