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?
Related
I have a similar issue as After upgrading to expo SDK 37.0.0 my stackNavigator header doubled in height, however I had the same problem with Expo SDK 36. I tried to upgrade Expo (37.0.0) and react-navigation version, but it had no effect on the header.
"react-navigation": "^3.13.0",
"react-navigation-drawer": "^1.4.0",
"react-navigation-stack": "^1.7.3",
"react-navigation-tabs": "^1.2.0",
I have an authentication switch (As in react-navigation docs), which then routes to a stack above the BottomTabNavigator. In this way I can have a screen rendered over the bottom bar. Then I have a list of stacks in the BottomTabNavigator.
// Main appNavigator
export default createAppContainer(
createAnimatedSwitchNavigator({
AuthLoading: AuthLoadingScreen,
Auth: AuthStack,
App: AboveBottomTabStack,
}, {
initialRouteName: 'AuthLoading',
})
);
// Components routed here are ABOVE bottom tab navigator
const AboveBottomTabStack = createStackNavigator(
{
Tabs: {
screen: MainTabNavigator,
navigationOptions: {
// Hides the header, in this case the headers of the Stack components inside TabNavigator are shown
header: null,
}
},
ReportScreen: ReportScreen
}
);
// Components routed here are UNDER bottom tab navigator
const MainTabNavigator = createBottomTabNavigator({
HomeStack: HomeStack,
ReportListStack: ReportListStack,
SettingsStack: SettingsStack,
});
// One of the stacks inside the TabNavigator
const HomeStack = createStackNavigator(
{
Dashboard: {
screen: DashboardScreen,
navigationOptions: {
headerStyle: {
//backgroundColor:'#00beb8',
height: 0, // Even with height 0 the header is displayed
}
}
},
}
);
I tried in setting the last stack's header to null (the one in HomeStack for example), and the header actually hides. The problem is the size, even if the height is set to 0, a small portion of header is displayed, you can see pictures in the linked question at the top.
Ok with the help of a friend we managed to find the solution to this problem.
Using the following prop in the navigation options fixed the issue for us:
navigationOptions: {
headerForceInset: { vertical: 'never' },
}
From what I understood from react-navigation docs it creates a SafeAreaView component around the app's content, however why does it create this annoying small bar on the top is still unknown to me.
EDIT: This prop should be written for android only, because on Iphone it creates graphical issues
I have several components. The main component is the PageTemplate.js, which describes the menu, search bar and site header. And also a place in the center for the content of other pages(functional components react).
The idea is to use the template(PageTemplate.js) on all pages of the site, since there is only one. And generate a block with content from other components (pages, ex. EditRecord.js, NewRecord.js etc).
I use a react-router and when going to /EditRecord, for example, my content block rendered edit's page(EditRecord.js) there
Now I have done it something like this:
Page transitions work and the content block generates the page I need.
but i have a huge problem. For example there is a page with a table with data(MainPage.js). And the search and search function are located in the template(PageTemplate.js). How can I transfer the state from the template(PageTemplate.js) to the page(MainPage.js) to change the data table there by search value from template? And also, if I, for example, will be on the other page(example on /NewRecord) and call teh search function in PageTemplate, then how can I tell the react, that now it is necessary to draw the main page(/) MainPage with new data by searched results?
Many thanks to all in advance;)
router code:
import { Main} from './pages/MainPage/Main';
import { EditRecordPage } from './pages/EditRecordPage/EditRecordPage';
import { NewRecord } from './pages/NewRecordPage/NewRecord';
export const routes = [
{
path: '/',
exact: true,
component: Main,
},
{
path: '/EditRecord/:id',
exact: true,
component: EditRecordPage,
},
{
path: '/NewRecord/',
exact: true,
component: NewRecord,
}
];
Code one of pages (they are identical except for the name):
import React, { useState, useEffect } from 'react';
import { PageTemplate } from '../../components/PageTemplate';
import { MainPage } from './MainPage';
export const Main = (props) => {
return (
<PageTemplate title={'Main page'} {...props}><MainPage/></PageTemplate>
)
}
Here is a chunk in the render of PageTemplate.js where the page(main, edit etc) is rendered:
<Content
className="site-layout-background"
style={{
padding: 24,
margin: 0,
minHeight: 280,
}
>
<div {...props}/>//here is the required page(main, edit, new etc)
</Content>
I am working with a react native application, and it shows a warning in the console
import {createStackNavigator} from 'react-navigation-stack';
import {fromRight} from 'react-navigation-transitions';
const ApplyNowNav = createStackNavigator(
{
Home,
Profile,
},
{
headerMode: 'none',
transitionConfig: () => fromRight(),
}
);
WARN Deprecation in 'createStackNavigator':
transitionConfig' is removed in favor of the new animation APIs
Is there any solution to fix this issue?
You need to update your code to use to use the new Animation API: https://reactnavigation.org/docs/en/stack-navigator.html#animations
From the code you posted, you can change it to the following instead to have a slide from right animation:
import { createStackNavigator, TransitionPresets } from 'react-navigation-stack';
const ApplyNowNav = createStackNavigator(
{
Home,
Profile,
},
{
headerMode: 'none',
defaultNavigationOptions: {
...TransitionPresets.SlideFromRightIOS,
},
}
);
Update react-navigation and use creatStackNavigator component instead of StackNavigator.
Check current methods and syntax, there is a lot of changes compare to previous syntax.
Works for me when I updated the code
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
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