I am using React Navigation in an react native application and the transition comes up from the bottom of the screen and looks bad. Is there any simple way to just turn off the transition completely. Looking at the documentation and this post this is what I came up with, but it doesn't work.
const Navigation = createStackNavigator({
Home: MainScreen,
Call: CallScreen,
Select: SelectScreen,
Help: HelpScreen
},
{
initialRouteName: 'Home',
headerMode: 'none',
navigationOptions: {
headerVisible: false,
},
transitionConfig : () => ({
transitionSpec: {
duration: 0,
easing: Easing.step0,
timing: Animated.timing,
},
}),
},
);
export default Navigation;
Related
I have some profile info data like name,email and mobile no in my app drawer in my react native app. I want to pass data to the custom app drawer component when the user logs in from async storage. Basically the problem is to pass async storage data to a functional component.
const AppDrawerNavigator = createDrawerNavigator ({
Home: {
screen : Maps,
navigationOptions: () => ({
title: `Search by`
})
},
Vendor: {
screen: HomeScreen,
navigationOptions: () => ({
title: `Vendor List`,
})
},
Notifications: NotificationsScreen,
Events: SearchDetails,
Venue : {
screen: SearchScreen,
navigationOptions: () => ({
title: `Venue Availability`,
})
},
Settings: {
screen: SettingsScreen
}
}, {
drawerPosition: 'left',
contentComponent: customDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoure: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
drawerWidth: 320,
contentOptions: {
activeTintColor: '#fff',
inactiveTintColor: '#030303',
activeBackgroundColor: '#B90066',
inactiveBackgroundColor: '#fff',
itemsContainerStyle: {
marginHorizontal: 10
},
itemStyle: {
height: 40,
borderRadius: 60,
},
activeLabelStyle: {
fontSize: 20,
fontWeight: 'normal'
}
}
})
const AppSwitchNavigator = createSwitchNavigator({
AuthLoadingScreen: AuthLoadingScreen,
Auth: AuthStackNavigator,
App: {
screen: AppDrawerNavigator
}
})
const WeTaAppDrawer = createAppContainer(AppSwitchNavigator)
export default class App extends Component {
render() {
return <WeTaAppDrawer />
}
}
You can use the componentDidMount in customDrawerContentComponent component and get the user data from asyncStorage like
async componentDidMount(){
const user = await AsyncStroage.getItem('user);
this.setState({ user });
}
then you can use the state in your render method
I am using stack navigator inside the drawer navigator. What I want to do is, I need to know the activeItem (the active screen), so as to display it as active.
StackNavigator
const stackNav = StackNavigator({
homeComponent: { screen: HomeScreen },
serviceScreen: { screen: ServiceScreen },
serviceDetailScreen: { screen: ServiceDetailScreen },
selectVehicleScreen: { screen: SelectVehileScreen },
addEditVehicle: { screen: AddVehicle },
dateTimeScreen: { screen: DateTimeScreen },
reviewScreen: { screen: ReviewScreen },
notesScreen: { screen: NotesScreen },
}, {
headerMode: 'none'
});
DrawerNavigator
const DrawerStack = DrawerNavigator({
appointment: {
screen: stackNav,
},
}, {
headerMode: 'none',
gesturesEnabled: false,
contentComponent: DrawerContainer
});
export default DrawerStack;
What you can do is
In your context there is only one screen that can be active and that is appointment screen.
If you want to know that if appointment screen is focused then you should check the props inside the DrawerContainer Component. It will give you the activeItemKey i.e appointment.
And then you can simply check in DrawerComponent that if
this.props.activeItemKey === 'appointment' ? { color: '#000' } : { color: '#fff' }]}
You can also pass the activeTintColor prop from DrawerNavigator as shown below
You can find other DrawerNavigatorConfigs here
const DrawerStack = DrawerNavigator({
appointment: {
screen: stackNav,
},
}, {
headerMode: 'none',
gesturesEnabled: false,
contentComponent: DrawerContainer,
contentOptions: {
activeTintColor: '#e91e63',
itemsContainerStyle: {
marginVertical: 0,
},
iconContainerStyle: {
opacity: 1
}
}
});
export default DrawerStack;
I want to order my screens automatically in alphabetical order. So I can just add a screen to the bottom and not worry about its position in the list. And I have a TON of screens.
Here is my code (I deleted some screens because there were too many, and did not post my imports) :
export const Root = DrawerNavigator({
Home: { screen: Home },
About: { screen: About },
Administration: { screen: Administration },
CSF: { screen: CSF },
Calendar: { screen: Calendar },
Directory: { screen: Directory },
HNN: { screen: HNN },
NHS: {screen: NHS},
IB: { screen: IB },
ID: { screen: ID },
Site: { screen: Site },
WebStore: { screen: WebStore },
}, {
// drawer config
//drawerWidth: 239, //drawer width //auto size for device
contentComponent: props => <ScrollView><DrawerItems {...props} /></ScrollView>, //scrolling drawer
//backBehavior: 'none', //currently makes back button do nothing
drawerPosition: 'right',
drawerBackgroundColor: 'whitesmoke',
drawerOpenRoute: 'DrawerOpen', //stuff that prevents errors
drawerCloseRoute: 'DrawerClose', //stuff that prevents errors
drawerToggleRoute: 'DrawerToggle', //stuff that prevents errors
contentOptions: {
activeTintColor: '#63461E', //brown active text
inactiveTintColor: '#7F6D45', //light brown inactive text
style: {
marginVertical: 9,
}
}
//end drawer config
});
Is this even possible?
How can I achieve this?
Thanks in advance
There's nothing to do with javascript about this, it's just about how your code editor do this automatically for you.
For Visual Studio Code, you can use plugin Sort JSON Object, that may works for you.
Alphabetically sorts the keys in selected JSON objects.
When I am in my SignIn screen and I reset my stack to point to the Main TabNavigator I see the Welcome screen briefly. It doesn't look appealing at all. How do I solve this?
I have the following code in my router:
export const WelcomeStack = StackNavigator({
welcome:{
screen: WelcomeScreen,
navigationOptions: {
header: () => { null }
}
},
SignIn: {
screen: SignIn,
navigationOptions: {
headerBackTitle: "Tilbake",
headerTintColor: colors.background,
headerStyle: {
marginTop: Platform.OS === 'android' ? 24 : 0,
backgroundColor: colors.primary
},
title: 'SeniorSmart'
}
},
main: {
screen: TabNavigator({
FindEvents: {
screen: FindEvents,
navigationOptions: {
title: 'Finn aktiviteter',
},
},
}, {
tabBarPosition: 'bottom',
tabBarComponent: TabBarBottom,
swipeEnabled: false,
animationEnabled: true
}),
}
And this is the code I use to navigate to the main tabnavigator screen:
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'main' }),
],
});
this.props.navigation.dispatch(resetAction);
Hi friends I am scratching my head with react-navigation from last 2 days, I tried many things(documentation doesn't seems that clear for a beginner), so right now I am facing few problem that seems little complex to me and hence I seek advice and help to proceed further.following are the cases/problem/scenario I seek help for -
react-navigation does not cover the header and statusbar, I wanted to achieve something like gmail but I ended up with like this
I used following code blocks to reach to this point
import React, {Component} from 'react';
import { AppRegistry, View, BackAndroid, StatusBar,} from 'react-native';
import {
NavigationActions,
addNavigationHelpers,
StackNavigator,
DrawerNavigator
} from 'react-navigation';
import LandingScreen from 'src/screens/landingScreen';
import Login from 'src/screens/login'
import SignUp from 'src/screens/signUp'
import ForgotPassword from 'src/screens/forgotPassword'
import Dashboard from 'src/screens/dashboard'
import UserProfile from 'src/screens/userProfile'
export const Drawer = DrawerNavigator({
Dashboard:{
path:'/',
screen:Dashboard,
},
UserProfile:{
path:'/'
screen:UserProfile
},
}, {
initialRouteName: 'Dashboard',
contentOptions: {
activeTintColor: '#e91e63',
},
headerMode: 'screen',
});
const routesConfig = {
Landing:{screen:LandingScreen},
Login: { screen: Login },
SignUp: { screen: SignUp },
ForgotPassword: { screen: ForgotPassword },
Drawer:{screen:Drawer}
};
export const AppNavigator = StackNavigator(routesConfig, {
initialRouteName: 'Drawer'
});
AppRegistry.registerComponent('Riduk', () => AppNavigator);
Other problem is how should I add 2 drawers in my app at the same screen
Here is a simplified example:
const FooStackNavigator = StackNavigator({
Foo: {
screen: FooScreen,
navigationOptions: {
title: 'Foo',
}
},
});
const BarStackNavigator = StackNavigator({...});
const MyDrawerNavigator = DrawerNavigator({
FooStack: {
screen: FooStackNavigator,
navigationOptions: {
drawer: () => ({
label: 'Foo',
})
},
},
BarStack: {
screen: BarStackNavigator,
navigationOptions: {
drawer: () => ({
label: 'Bar',
})
},
}
});
const AppNavigator = StackNavigator({
Drawer: { screen: MyDrawerNavigator },
}, {
headerMode: 'none',
});
There is an issue for Header in DrawerNavigator.
But you can fix by using StackNavigator inside DrawerNavigator
export const Drawer = DrawerNavigator({
Dashboard:{
path:'/',
screen: StackNavigator( { Screen1: {
screen: Dashboard
}})
},
UserProfile:{
path:'/',
screen: StackNavigator( { Screen1: {
screen: UserProfile
}})
},
}});
Then set headerMode: 'none' to root StackNavigator
export const AppNavigator = StackNavigator(routesConfig, {
headerMode: 'none'
});
Here, AppNavigator is root StackNavigator and routesConfig has above DrawerNavigator and other screens.
Is this the issue you're trying to resolve?
https://blog.callstack.io/android-drawer-statusbar-done-right-for-react-native-7e85f01fc099
As per my knowledge, you have to do 2 things:
1. Put drawer control at the top of navigation stack.
2. Set translucent propery of StatusBar
<StatusBar
translucent
backgroundColor="rgba(0, 0, 0, 0.24)"
animated
/>
{ Platform.OS === 'android' && Platform.Version >= 20 ?
<View
style={{
height: 24,
backgroundColor: "#512DA8",
}}
/>
: null }
Kindly let me know if it does work.
DrawerNavigator must over on StackNavigator, this is my way to fix this:
const navStack = StackNavigator({
Home: { screen: Main, },
Example01: { screen: Example01, },
Example02: { screen: Example02, },
});
const navDrawer = DrawerNavigator({
Home: {
screen: navStack, // Drawer over on StackNavigator
navigationOptions: {
drawerLabel: 'Home',
header: null,
}
},
Example03: {
screen: Example03,
navigationOptions: {
drawerLabel: 'Example03',
}
},
},
{
headerMode: 'none',
headerVisible: false,
navigationOptions: {
header: null
}
});
Hope this helps.