I want to have back button on all of my tabs in my drawer navigator (except the home page). I am using react-navigation.
I tried doing this like in the react-navigation docs...
<TouchableOpacity style={{ //open School instagram
top: 9,
left: -99,
}}
onPress={() => { () => goBack(null) }}>
<Image
style={{
height: 33,
width: 33,
tintColor: '#E1B60B',
}}
source={require('../resources/icons/homeb.png')}
/>
</TouchableOpacity>
However this just always went back to the home screen for me, even when I went to other screens prior.
I also had some formatting issues with this component. It would always go to the top of the screen and leave a white bar (even with absolute positioning).
Here is the code for my drawer navigator:
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
});
Thanks in advance
Related
I have two Nagigators 1:StackNavigator and 2:DrawerNavigator
my react native and react navigation version
"react-native": "0.55.4",
"react-navigation": "^1.0.0-beta.11",
my root navigator is the StackNavigator from which i call the DrawerNavigator.
when i call the navigation.navigate('DrawerOpen') my screen returns to the initialRouteName .
my StackNavigator
import DrawerNavigatorScreen from "./src/DrawerNavigator";
const myApp = StackNavigator({
Home: {
screen: App,
navigationOptions: {
header: null
}
},
HomeChildData: {
screen: DrawerNavigatorScreen,
navigationOptions: {
header:null,
}
},
otp: {
screen: otp,
navigationOptions: ({ navigation }) => ({
header: null
})
}
});
my DrawerNavigator (/src/DrawerNavigator)
const DrawerNavigatorScreen = DrawerNavigator(
{
social: {
screen: socialstack,
navigationOptions: {
header: null
}
},
profile: {
screen: profilescreen,
navigationOptions: ({ navigation }) => ({
header: null
})
},
{
initialRouteName: "social",
contentOptions: {
labelStyle: {
alignSelf: "center",
fontFamily: "Avenir-Light",
fontSize: 15,
color: "#3B3B3B"
},
activeTintColor: "#3B3B3B",
activeBackgroundColor: "#ffc34d", //rgba(255,181,14,0.1)
// inactiveTintColor: 'black',
inactiveBackgroundColor: "#fff"
},
});
export default DrawerNavigatorScreen
where my problem occurs
static navigationOptions = ({ navigation }) => ({
header:null,
headerTitleStyle: {
alignSelf: 'center',
marginLeft: margintLeftValue,
color: '#2F2E2F',
fontFamily: 'Avenir-Medium'
},
headerLeft: <TouchableOpacity onPress={() => navigation.navigate('DrawerOpen')}>
<Image
source={require('./../images/menu.png')}
style={styles.drawerIcon} />
</TouchableOpacity>,
})
I want to simply open or toggle the drawer .
I think what you're looking for is navigation.toggleDrawer();.
You can read more here.
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 have a navigation.js which returns SwitchNavigator...
I want to put TabIcon in one of the screens....But i can't do it inside the screen,
i.e
static navigationOptions = () => ({
header: null,
tabBarLabel: 'Orders',
});
As i have a nested tab, so i don't have a screen where i can do this ....here is my code
navigation.js
const AppStack = TabNavigator({
//ORDER TAB----->>>>
orders: {
navigationOptions: {
tabBarLabel: 'Orders',
},
screen: TabNavigator({
navigationOptions: {
tabBarLabel: 'Orders',
tabBarIcon: ({ tintColor }) => {
return <Icon name="shopping-cart" size={20} color={tintColor} />;
}
},
awaitingScreen: {
screen: StackNavigator({
awaiting: { screen: AwaitingScreen },
awaitingorderdetail: { screen: AwaitingDetailScreen }
})
},
confirmedscreen: {
screen: StackNavigator({
confirmed: { screen: ConfirmedScreen },
confirmedorderdetail: { screen: ConfirmedDetailScreen }
})
},
}, {
tabBarOptions: {
activeTintColor: '#415041', // Color o f tab when pressed
inactiveTintColor: '#b5b5b5', // Color of tab when not pressed
showIcon: 'true', // Shows an icon for both iOS and Android
//showLabel: (Platform.OS !== 'android'), //No label for Android
lazy: true,
animationEnabled: false,
indicatorStyle: {
borderBottomColor: '#f5e9dd',
borderBottomWidth: 2,
},
labelStyle: {
fontSize: 10,
color: 'white',
fontFamily: 'NeutraText-Book'
},
style: {
backgroundColor: '#415041',
}
}
}
)
},
//PAYMENT TAB---->>>
payments: { screen: PaymentScreen },
//CUSTOMER TAB----->>
customers: { screen: CustomerScreen },
//MESSAGES TAB----->>
messages: { screen: MessageScreen },
//backBehavior: 'none',
},
{
headerMode: 'none', // I don't want a NavBar at top
tabBarPosition: 'bottom', // So your Android tabs go bottom
swipeEnabled: false,
lazy: true,
animationEnabled: false,
tabBarOptions: {
activeTintColor: '#415041', // Color o f tab when pressed
inactiveTintColor: '#b5b5b5', // Color of tab when not pressed
showIcon: 'true', // Shows an icon for both iOS and Android
//showLabel: (Platform.OS !== 'android'), //No label for Android
labelStyle: {
fontSize: 8,
margin: 0,
padding: 0,
fontFamily: 'NeutraText-Book'
},
indicatorStyle: {
borderBottomColor: '#f5e9dd',
borderBottomWidth: 2,
},
style: {
backgroundColor: '#fff', // Makes Android tab bar white instead of standard blue
}
}
});
const AuthStack = TabNavigator({
selectadmin: { screen: SelectAdminScreen },
otp: { screen: OtpScreen },
password: { screen: PasswordScreen },
pin: { screen: PinScreen }
},
{
navigationOptions: {
tabBarVisible: false
},
tabBarPosition: 'bottom',
swipeEnabled: false,
lazy: true,
animationEnabled: false,
//backBehavior: 'none',
}
);
export default SwitchNavigator(
{
AuthLoading: AppLoadingScreen,
App: AppStack,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
}
);
Now i want to import this navigator inside App.js
like
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<SwitchNavigator />
</View>
);
}
}
But i can't do this as i can't return JSX without React,
So is there any work around? I can declare all this inside my App.js but That is my last option as it will make my code messy.
return <Icon name="shopping-cart" size={20} color={tintColor}
It returns React must be in scope
Make sure to always import React in every file that contains jsx:
import React from 'react';
The error indicates that you forgot to do so in a file that contains jsx.
I have created a basic react-native app which consists of a few buttons that are used to render different screens. After the user has logged in, I render a TabNavigator item but for some reason the no tabs appear and the screen is completely blank. I have comparing my code to others without any luck. Any suggestions?
import React from 'react';
import { StyleSheet, Text, View, Image, Button, ImageBackground } from 'react-native';
import { TabNavigator } from 'react-navigation';
import {Electric} from './Sub-bills/Electric';
import {Web} from './Sub-bills/WebBill';
import {Water} from './Sub-bills/Water';
import {OtherBills} from './Sub-bills/OtherBills';
import {Personal} from './Sub-bills/Personal';
export const Tabs = TabNavigator(
{
Electric: {
screen: Electric,
navigationOptions: {
tabBarLabel: 'Electric'
}
},
Web: {
screen: Web,
navigationOptions: {
tabBarLabel: 'Web'
}
},
Water: {
screen: Water,
navigationOptions: {
tabBarLabel: 'Water'
}
},
OtherBills: {
screen: OtherBills,
navigationOptions: {
tabBarLabel: 'Other'
}
},
Personal: {
screen: Personal,
navigationOptions: {
tabBarLabel: 'Personal'
}
}
},
);
export class HouseholdBills extends React.Component{
render(){
return (
<Tabs />
);
}
}
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
backgroundColor:'transparent',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute'
},
});
A component is rendered by pressing a button
In new version of ReactNavigation putting TabNavigator under a SafeAreaView will cause it not to show, since react navigation is already handling it,
If in your case you are using SafeAreaView component on top of TabNavigator, maybe removing it will help you.
I use the following as extra configuration to the Tab Nav. You possibly can strip some stuff out, but what worked was to at least define the order.
import { TabNavigator, TabBarBottom } from 'react-navigation';
export const Tabs = TabNavigator(
{
... Your tabs here...
}
{
tabBarOptions: {
activeTintColor: 'red',
inactiveTintColor: 'grey',
style: {
backgroundColor: 'white',
borderTopColor: 'red',
},
labelStyle: {
fontSize: 12,
fontWeight: 'normal'
},
indicatorStyle: {
borderBottomColor: 'red,
borderBottomWidth: 4,
},
},
initialRouteName: 'Electric',
order: ['Electric', 'Web', 'Water', 'OtherBills', 'Personal'],
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
},
{
...TabNavigator.Presets,
animationEnabled: false,
swipeEnabled: false,
showIcon: false,
}
};
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.