I tried to increase de gestureResponseDistance using different ways to improve the swipe gesture back, but none of mi attempts works:
1. Changing gestureResponseDistance inside the createStackNavigator: Try A
`
const AppNavigator = createStackNavigator(
{
Drawer: {
screen: Drawer
},
},
{
headerMode: 'none',
initialRouteName: 'Drawer',
navigationOptions: params => ({
gestureResponseDistance: {
horizontal: 200
}
})
}
);
`
2. Changing gestureResponseDistance inside the createStackNavigator: Try B
`
const AppNavigator = createStackNavigator(
{
Drawer: {
screen: Drawer
},
},
{
headerMode: 'none',
initialRouteName: 'Drawer',
navigationOptions: {
gestureResponseDistance: {
horizontal: 200
}
}
}
);
`
3. Adding defaultProps to the stack navigator variable:
`
AppNavigator.defaultProps = {
gestureResponseDistance: 200,
};
`
4. Adding prop to the stack navigator tag
`
return (
<Root>
<AppNavigator gestureResponseDistance="200" />
</Root>
);
`
Any idea?, thanks.
Related
I have a tab navigator (with 3 screens) then each of these have also 2 or 3 screen each.
TabNavigator => "A,B,C"
A stack => "1,2,3"
Sometimes I'llgo from 1 to 2, and sometimes from B to 2 (for example), I want that when pressing the back button navigates to the previous screens so 1 for first example and B on the seconds. But right now only goes to 1.
Here is my navigation stack:
const RaidsStack = createStackNavigator({
Raids: { screen: RaidsScreen, },
CreateRaid: { screen: CreateRaidScreen, },
})
const ChatsStack = createStackNavigator({
Chats: { screen: ChatsScreen },
ChatRoom: { screen: ChatRoomScreen, },
})
const SettingsStack = createStackNavigator({
Settings: { screen: SettingsScreen },
EditProfile: { screen: editProfileScreen },
Start: { screen: StartScreen },
})
const StartStack = createStackNavigator({
Tabs: { screen: SettingsScreen },
Register: { screen: editProfileScreen },
Start: { screen: StartScreen },
})
const TabNavigator = createBottomTabNavigator(
{
Raids: { screen: RaidsStack },
Chats: { screen: ChatsStack },
Settings: { screen: SettingsStack }
},
{
tabBarPosition: "bottom",
tabBarComponent: props => {
return (
<Footer>
<FooterTab>
<Button
vertical
active={props.navigation.state.index === 0}
onPress={() => props.navigation.replace('Tabs', {}, NavigationActions.navigate({ routeName: 'RaidsStack' }))}>
<Icon name="egg" />
<Text>Raids</Text>
</Button>
<Button
vertical
active={props.navigation.state.index === 1}
onPress={() => props.navigation.replace('Tabs', {}, NavigationActions.navigate({ routeName: 'Chats' }))}>
<Icon name="mail" />
<Text>Chats</Text>
</Button>
<Button
vertical
active={props.navigation.state.index === 2}
onPress={() => props.navigation.replace('Tabs', {}, NavigationActions.navigate({ routeName: 'Settings' }))}>
<Icon name="settings" />
<Text>Settings</Text>
</Button>
</FooterTab>
</Footer>
);
}
}
)
const AppStack = createStackNavigator({
Start: { screen: StartScreen },
Register: { screen: RegisterScreen },
Tabs: TabNavigator,
Raids: { screen: RaidsScreen },
Chats: { screen: ChatsScreen },
Settings: { screen: SettingsScreen }
}, {
headerMode: 'none',
})
How to do it? I'm new to react and react navigation.
I suggest looking at the documentation https://reactnavigation.org/docs/stack-navigator/
Since you also using nested navigator I suggest looking at this page too https://reactnavigation.org/docs/nesting-navigators/
It’s exactly tells shows you the example of nested navigator with a tab
Hope this material will help you!
I want to update the react-navigation library V2 to V3 and change part of my code thinking that there would not be any problems but it turns out that I have problems creating createStackNavigator with a screen of type createDrawerNavigator and that in turn contains createBottomTabNavigator.
my code that works with the previous version was:
export const createRootNavigator = (signedIn = false) => {
const commonNavigationOptions = {
headerStyle: {
shadowColor: 'transparent',
elevation: 0
},
headerTintColor: DEFAULT_THEME.topaz
};
const SignedIn = createStackNavigator(
{
Home: {
screen: Drawer('Home'),
navigationOptions: () => ({
headerStyle: {
height: 0
},
header: getSafeArea(DEFAULT_THEME.backgrouncolorHomeSafeArea)
})
},
Cards: {
screen: Tabs('Cards'),
navigationOptions: () => ({
headerStyle: {
height: 0
}
})
},
);
const SignedOut = createStackNavigator(
{
SignIn: {
screen: LoginContainer,
navigationOptions: () => ({
headerStyle: {
height: 0
},
header: getSafeArea(DEFAULT_THEME.dark)
})
},
SelectableCardsList: { screen: SelectableCardsListComponent },
);
return createSwitchNavigator(
{
SignedIn: { screen: SignedIn },
SignedOut: { screen: SignedOut }
},
{
initialRouteName: signedIn ? 'SignedIn' : 'SignedOut'
}
);
};
const Drawer = (initialRoute) => createDrawerNavigator(
{
Home: { screen: Tabs('Home') },
{
initialRouteName: initialRoute,
contentComponent: CustomDrawerComponent
}
);
const Tabs = (initialRouteName) => createBottomTabNavigator(
{
Home: {
screen: HomeContainer,
navigationOptions: {
tabBarLabel: I18n.t('tabs.me')
}
},
Home2: {
screen: Home2,
navigationOptions: {
tabBarLabel: I18n.t('tabs.credentials')
}
},
{
initialRouteName: initialRouteName,
tabBarComponent: ({ navigation }) => <CustomBottomBarComponent navigation={navigation} navigationState={navigation['state']} />,
tabBarOptions: {
style: {
backgroundColor: 'white'
}
}
}
);
try this solution with react-navigation V3 and send me an error
I try the following:
encapsulate createSwitchNavigator in createAppContainer and separate (SignedOut and SignedOut) createStackNavigator out of createSwitchNavigator, the rest is still the same.
export const createRootNavigator = (signedIn = false) => createAppContainer(createSwitchNavigator(
{
SignedIn: { screen: SignedIn },
SignedOut: { screen: SignedOut }
},
{
initialRouteName: signedIn ? 'SignedIn' : 'SignedOut'
}
));
I get the following error: The component for route 'Home' must be a react component. For Example
import MyScreen from './MyScreen';
...
Home : MyScreen,
}
you can also use a navigator:
The problem is located in this part:
const SignedIn = createStackNavigator(
{
Home: {
screen: Drawer,
Also try to change Drawer for any component (a component with a blank screen) and this works, but I can not insert the Tabs in the Drawer.
Thank you very much for your help.
I'm pretty new at react-native, please bear with me. I have a Stack and Tab navigator that both work well but independently. I, however, need them to work together.
const MainTabs = TabNavigator({
Messages: { screen: MessageScreen },
Cards: { screen: CardScreen },
Statements: { screen: StatementScreen },
Profile: { screen: ProfileScreen },
},
{
tabBarOptions: {
activeTintColor: bongzBlue,
inactiveTintColor: 'gray',
},
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false,
}
);
export default class App extends Component {
render() {
return (
// <RootStack />
<MainTabs />
);
}
}
Here is a suggestion:
You can nest the StackNavigator in a TabNavigator. So for your specific case, you can make your screens StackNavigators.
For example, your Messages screen can be created like this:
const MessagesStack = StackNavigator({
index: { screen: MessageScreen }
...
})
and then you can use it in your TabNavigator and export that as your main component.
const MainTabs = TabNavigator({
Messages: { screen: MessageStack },
...
},
Hope this helps.
Consider the render of the Main component:
render() {
const { isAuthenticated } = this.props;
return (
<View>
{isAuthenticated ? <Dashboard /> : <Login />}
</View>
);
I want to lock the drawer in the Login component. Now i know that i could achieve this if Login wasn't a child of Main this way (in my Router component):
Login: {
screen: Login,
navigationOptions: () => ({
drawerLockMode: 'locked-closed',
}),
},
But since Login is a child of Main and Main has the drawer, Login will automatically have the drawer too. I've tried "overriding" it by calling this in Login:
static navigationOptions = {
drawerLockMode: 'locked-closed',
};
But no success. Here's my Router:
const Stack = {
Main: { screen: Main },
Login: {
screen: Login,
navigationOptions: () => ({
drawerLockMode: 'locked-closed',
}),
},
Outbox: { screen: Outbox },
Dashboard: { screen: Dashboard },
JobList: { screen: JobList },
CreateJob: { screen: CreateJob },
Reporting: { screen: Reporting },
JobDescription: { screen: JobDescription },
};
const DrawerRoutes = {
DrawerStack: {
name: 'DrawerStack',
screen: StackNavigator(
Stack,
{
initialRouteName: C.MAIN,
headerMode: 'none',
navigationOptions: {
gesturesEnabled: false,
},
}),
},
};
export const DrawerNavigation = StackNavigator({
Drawer: {
name: 'Drawer',
screen: DrawerNavigator(DrawerRoutes, {
contentComponent: DrawerPanel,
}),
},
...Stack,
}, { headerMode: 'none' });
Is there a way to achieve this ?
I want to create perspective animation like following -
I am using react-native-scaling-drawer & have currently done -
My App.js is the root file which is as follows -
App.js
const AppNavigator = StackNavigator(
{
walkthroughStack: {
screen: WalkthroughStack,
},
drawerStack: {
screen: DrawerStack,
},
},
{
initialRouteName: 'walkthroughStack',
headerMode: 'none',
},
);
export default AppNavigator;
My Walkthrough.js file is the file which shows the Walkthrough of the app & is as follows -
WalkthroughStack.js
const WalkthroughStack = StackNavigator(
{
Walkthrough: {
screen: Walkthrough,
},
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
},
initialRouteName: 'Walkthrough',
},
);
export default WalkthroughStack;
My DrawerStack.js is the file which has the animation shown in the repo -
DrawerStack.js
let defaultScalingDrawerConfig = {
scalingFactor: 0.6,
minimizeFactor: 0.6,
swipeOffset: 20
};
class CustomDrawerView extends Component {
constructor(props) {
super(props);
}
componentWillReceiveProps(nextProps) {
/** Active Drawer Swipe **/
if (nextProps.navigation.state.index === 0)
this._drawer.blockSwipeAbleDrawer(false);
if (nextProps.navigation.state.index === 0 && this.props.navigation.state.index === 0) {
this._drawer.blockSwipeAbleDrawer(false);
this._drawer.close();
}
/** Block Drawer Swipe **/
if (nextProps.navigation.state.index > 0) {
this._drawer.blockSwipeAbleDrawer(true);
}
}
setDynamicDrawerValue = (type, value) => {
defaultScalingDrawerConfig[type] = value;
/** forceUpdate show drawer dynamic scaling example **/
this.forceUpdate();
};
render() {
const {routes, index} = this.props.navigation.state;
const ActiveScreen = this.props.router.getComponentForState(this.props.navigation.state);
return (
<ScalingDrawer
ref={ref => this._drawer = ref}
content={<LeftMenu navigation={this.props.navigation}/>}
{...defaultScalingDrawerConfig}
onClose={() => console.log('close')}
onOpen={() => console.log('open')}
>
<ActiveScreen
navigation={addNavigationHelpers({
...this.props.navigation,
state: routes[index],
openDrawer: () => this._drawer.open(),
})}
dynamicDrawerValue={ (type, val) => this.setDynamicDrawerValue(type, val) }
/>
</ScalingDrawer>
)
}
}
const AppNavigator = StackRouter({
{
Main: {
screen: Main,
},
Walkthrough: {
screen: Walkthrough,
},
Typography: {
screen: Typography,
},
},
{
headerMode: 'none',
gesturesEnabled: false,
navigationOptions: {
headerVisible: false,
},
initialRouteName: 'Main',
},
);
const CustomDrawer = createNavigationContainer(createNavigator(AppNavigator)(CustomDrawerView));
export default CustomDrawer;
But this isn't working as shown in the README of the repo. How to do it ?
Example given works with React-Navigation's v1. Make sure you are using v1 for react-navigation