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.
Related
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;
export default DrawerNavigator({
MainScreen: {
screen: MainScreen,
},
CreateItem:{
screen: CreateItem,
},
MyitemScreen: {
screen: MyitemScreen,
},
Settings: {
screen: Settings,
},
Buying: {
screen: Buying,
},
Messages: {
screen: Messages,
},
Notifications: {
screen: Notifications,
}, Profile: {
screen: Profile,
}, Logout: {
screen: Logout,
},
},
{
drawerPosition:'left',
initialRouteName:'MainScreen',
drawerBackgroundColor:'white',
drawerWidth:250,
});
then
export default class MainScreen extends Component {
static navigationOptions =
{
title:'Home',
headerMode:"float",
headerStyle: {
backgroundColor: 'green',
elevation: null
},
headerTitleStyle: {
fontWeight: '300',
color: '#ffffff',
fontSize: 20,
flex:1,
textAlign:"center"
},
};
background header of mainscreen changed to green but still white color is appearing in the header
I assuming you are using 'React-Navigation'
try this prop for your static navigationOptions
static navigationsOptions = ({navigation}) = {
return{
title : 'My title',
headerStyle = {background : 'green'
}
}
I could be misunderstanding your questions btw. Posting an image might make it more clear.
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;
Ever since I started using Stack Navigator with Drawer Navigator, this problem occurred. Right now, I think I am passing the parent in the navigate so that it will navigate to the correct screen.
otherUser (username) {
this.props.navigation.navigate('AppStackNav', { username: username });
}
This is how my navigation are setup. I am using Drawer, Stack, and Tab:
const TabNav = TabNavigator({
Random: { screen: HomeScreen },
Recent: { screen: RecentScreen },
Trending: { screen: TrendingScreen },
AllTime: { screen: AllTimeScreen },
}, {
tabBarComponent: NavigationComponent,
tabBarPosition: 'bottom',
lazy: false,
animationEnabled: true,
swipeEnabled: true,
tabBarOptions: {
bottomNavigationOptions: {
labelColor: '#333',
rippleColor: 'white',
tabs: {
Recent: {
barBackgroundColor: '#EEEEEE',
activeLabelColor: '#212121',
},
Trending: {
barBackgroundColor: '#00796B',
},
RegisterScreen: {
barBackgroundColor: '#EEEEEE', // like in the standalone version, this will override the already specified `labelColor` for this tab
activeLabelColor: '#212121',
activeIcon: <Icon size={24} color="#212121" name="newsstand" />
},
AllTime: {
barBackgroundColor: '#00796B'
},
}
}
}
});
const AppStackNav = StackNavigator ({
OtherUserScreen: {screen: OtherUserScreen},
});
const AppDrawerNavigator = DrawerNavigator({
TabNav: {screen: TabNav},
LoginScreen: {screen: LoginScreen},
RegisterScreen: {screen: RegisterScreen},
ProfileScreen: {screen: ProfileScreen},
UserListScreen: {screen:UserListScreen},
HomeScreen: {screen: HomeScreen},
AppStackNav: {screen: AppStackNav},
OtherTagsScreen: {screen: OtherTagsScreen},
QuoteMachineScreen: {screen: QuoteMachineScreen},
},
{
initialRouteName: "TabNav",
contentOptions: {
activeTintColor: "#e91e63"
},
contentComponent: props => <SideBar {...props} />
},
);
Also, I am still learning in React Native so any tips will greatly be appreciated.
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