Related
I have an app that use react-navigation, and I have theme system in place, if the user chooses a specific color, it changes all the screens backgrounds to the selected color.
I'd like to do the same with react-navigation, so for example if person selects green color, the react-navigation header backgroundcolor would be green as well.
This is my themeProvider:
const STORAGE_KEY = 'THEME_ID';
const ThemeContext = React.createContext();
export const ThemeContextProvider = ({ children }) => {
const [themeID, setThemeID] = useState();
useEffect(() => {
(async () => {
const storedThemeID = await AsyncStorage.getItem(STORAGE_KEY);
if (storedThemeID) setThemeID(storedThemeID);
else setThemeID(THEMES[1].key);
})();
}, []);
return (
<ThemeContext.Provider value={{ themeID, setThemeID }}>
{!!themeID ? children : null}
</ThemeContext.Provider>
);
};
export function withTheme(Component) {
return props => {
const { themeID, setThemeID } = useContext(ThemeContext);
const getTheme = themeID => THEMES.find(theme => theme.key === themeID);
const setTheme = themeID => {
AsyncStorage.setItem(STORAGE_KEY, themeID);
setThemeID(themeID);
};
return (
<Component
{...props}
themes={THEMES}
theme={getTheme(themeID)}
setTheme={setTheme}
/>
);
};
}
Screen example that already uses the theming
ArchivedScreen = ({ theme, navigation }) => {
return (
<View style={[style.container, { backgroundColor: theme.backgroundColor }]}>
<Button title="Open drawer" onPress={() => navigation.openDrawer()} />
</View>
);
};
const style = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontWeight: 'bold',
},
});
export default withTheme(ArchivedScreen);
My question really is, how do I go about this?
This is my drawerNavigator:
const drawerNavigator = createDrawerNavigator({
Home: HomeStack,
Tasks: {
screen: TasksStack,
navigationOptions: {
drawerLabel: 'Task manager - -'
}
},
Completed: {
screen: CompletedStack,
navigationOptions: {
drawerLabel: 'Completed -'
}
},
Archived: {
screen: ArchivedStack,
navigationOptions: {
drawerLabel: 'Archived -',
},
},
Calendar: CalendarStack,
Notifications: NotificationStack,
Settings: SettingsStack,
Account: AccountStack,
});
HomeScreen.navigationOptions = {
title: 'Dashboard',
headerTintColor: 'white',
headerStyle: {
borderBottomWidth: 0,
backgroundColor: theme.backgroundColor,
},
}
CompletedScreen.navigationOptions = {
title: 'Completed tasks',
headerTintColor: 'white',
headerStyle: {
borderBottomWidth: 0,
backgroundColor: theme.backgroundColor,
}
}
TaskScreen.navigationOptions = {
title: 'Tasks',
headerTintColor: 'white',
headerStyle: {
borderBottomWidth: 0,
backgroundColor: theme.backgroundColor,
}
}
ArchivedScreen.navigationOptions = {
title: 'Archived tasks',
headerTintColor: 'white',
headerStyle: {
borderBottomWidth: 0,
backgroundColor: theme.backgroundColor,
}
}
AccountScreen.navigationOptions = {
title: 'Account',
headerTintColor: 'white',
headerStyle: {
borderBottomWidth: 0,
backgroundColor: theme.backgroundColor,
}
}
CalendarScreen.navigationOptions = {
title: 'Calendar',
headerTintColor: 'white',
headerStyle: {
borderBottomWidth: 0,
backgroundColor: theme.backgroundColor,
}
}
NotificationScreen.navigationOptions = {
title: 'Notifications',
headerTintColor: 'white',
headerStyle: {
borderBottomWidth: 0,
backgroundColor: theme.backgroundColor,
}
}
SettingsScreen.navigationOptions = {
title: 'Settings',
headerTintColor: 'white',
headerStyle: {
borderBottomWidth: 0,
backgroundColor: theme.backgroundColor,
}
}
export default drawerNavigator;
As you can see, I'm trying to use backgroundColor as the selected theme to use as header background color.
I've tried to wrap navigator to use the withTheme hook and then export as export default withTheme(drawerNavigator); however that returns that it cannot find variable theme and turns into loop when loading the app?
Can anybody enlighten me how to go about this? I'm fairly new to react-navigation.
I'm using react navigation V3 and I have a bottom tab navigation in my app
as follow:
export default createBottomTabNavigator({
profile: {
screen: ProfileUser,
navigationOptions:{
title : 'Profile',
}
},
leaderboard :{
screen : Leaderboard,
navigationOptions:{
title : 'Leaderboard',
}
},
home :{
screen : Homeboard,
navigationOptions:{
title : 'Home',
tabBarIcon: ({tintColor}) => (
<BattleTabIcon
width={30}
height={30}
/>
),
},
},
store :{
screen : AppStore,
navigationOptions:{
title : 'Store',
}
},
setting :{
screen : Settings,
navigationOptions:{
title : 'Setting',
}
},
},{
tabBarOptions: {
scrollEnabled : true,
upperCaseLabel: false,
activeTintColor: '#fff',
activeBackgroundColor :'#1f1f3c',
inactiveTintColor: '#8583a9',
showLabel: false,
style: {
backgroundColor: '#131332',
height: 50,
borderTopWidth: 2,
borderTopColor: '#aeaeae',
},
labelStyle: {
fontSize: 12,
fontFamily : 'Questrial-Regular',
marginBottom: 5
},
},
initialRouteName : 'home',
});
I have 5 tabs, I want to have more width for my center tab, also I need to have border for each on but I dont know how to do that.
please help me with your advices.
Thanks.
You could always create a custom tab component and do it yourself:
const MainTabNavigator = TabNavigator({
Home: {
screen: HomeScreen,
},
Tab2: {
screen: EmptyTab,
},
Tab3: {
screen: EmptyTab,
}
}, {
initialRouteName: 'Home',
tabBarPosition: "bottom",
tabBarComponent: props => {
return <TabNavigation {...props}
items={[
{
text: "Home", icon: { name: "home", type: "Entypo" },
route: "Home"
},
{
text: "Tab2", icon: { name: "data-usage", type: "MaterialIcons" },
route: "Tab2",
expand: true
},
{
text: "Tab3", icon: { name: "package", type: "Octicons" },
route: "Tab3"
}
]}
/>
}
});
And then use the expand prop of that item to control the style. This is my TabNavigation:
class TabNavigation extends React.PureComponent {
route = (route) => {
this.props.navigation.navigate(route);
}
render(){
let tabs = this.props.items.map((item, index) => {
let active = ((this.props.navigationState && this.props.navigationState.index === index) || (this.props.navigation && this.props.navigation.state && this.props.navigation.state.index === index));
let icon, text = null;
if (item.icon){
let iconStyle = {
color: active ? this.props.theme.navBarTextColorActive : this.props.theme.navBarTextColor,
size: 23
};
if (item.icon.size)
iconStyle.fontSize = item.icon.size;
if (item.icon.color)
iconStyle.color = item.icon.color;
icon = this.props.getIcon(item.icon.type, item.icon.name, iconStyle.size, iconStyle.color);
}
if (item.text)
text = <Text active={active}>{item.text}</Text>;
return (<TouchableOpacity key={index} onPress={() => this.route(item.route)} style={{flex: 1}}>
<View style={styles.buttonWrapper}>
{icon}
{text}
</View>
</TouchableOpacity>)
});
if (tabs.length == 0)
return null;
else
return (<NavBar>{tabs}</NavBar>)
}
}
You will need to add the logic there for the styles.
I am using DrawerNavigator for React-Native, and inside the Drawer the following CustomDrawerContentComponent...
const uiTheme = {
palette: {
primaryColor: COLOR.blue500,
},
toolbar: {
container: {
height: 80,
},
},
};
const propTypes = {
navigation: PropTypes.shape({
goBack: PropTypes.func.isRequired,
}).isRequired,
};
const CustomDrawerContentComponent = props => (
<Container>
<Toolbar
leftElement="arrow-back"
onLeftElementPress={() => this.props.navigation.goBack()}
centerElement="Menu"
/>
<View>
<Drawer.Header>
<Drawer.Header.Account
avatar={<Avatar text="K" />}
footer={{
dense: true,
centerElement: {
primaryText: 'Account',
secondaryText: 'xxxx#yahoo.com',
},
rightElement: 'arrow-drop-down',
}}
/>
</Drawer.Header>
<DrawerItems {...props} />
</View>
</Container>
);
const MainRoot = DrawerNavigator(
{
Login: {
path: '/login',
screen: Login,
},
Profile: {
path: '/profile',
screen: Profile,
},
Settings: {
path: '/settings',
screen: Settings,
},
},
{
initialRouteName: 'Settings',
contentOptions: {
activeTintColor: '#2089b0',
activeBackgroundColor: 'transparent',
inactiveTintColor: '#000000',
inactiveBackgroundColor: 'transparent',
labelStyle: {
fontSize: 18,
marginLeft: 0,
fontFamily: 'sans-serif-thin',
},
},
drawerWidth: SCREEN_WIDTH * 0.8,
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
}
);
export default class AppContainer extends Component {
render() {
return (
<ThemeContext.Provider value={getTheme(uiTheme)}>
<MainRoot />
</ThemeContext.Provider>
);
}
}
Expo.registerRootComponent(AppContainer);
What I want to do is position the elements of the Toolbar toward the bottom...
Side Menu
How does one do this..? (Sorry relatively new to React-Native...)
Also the code onLeftElementPress={() => this.props.navigation.goBack()}
returns null for this.props.navigation.
Is something need to be passed in..?
Thnks.
Am using react-native-material-ui, so Toolbar has leftElementContainer and centerElementContainer elements. So they can be styled using:
const uiTheme = {
palette: {
primaryColor: COLOR.blue500,
},
toolbar: {
container: {
height: 80,
},
leftElementContainer: {
marginTop: 20,
},
centerElementContainer: {
marginTop: 20,
},
},
};
react-navigation error img.
I am using react-navigation in my app. Tried to do some test with -native-base side bar. and when you click on the any nav item inside side bar it shows this error. How can it be solved for this side bar? Here is the code:
import React, { Component } from "react";
import { View, ScrollView,Button,Text,StyleSheet,Dimensions } from "react-native";
import {Container,Content,List,Icon,Badge,ListItem,Left,Right,Body} from 'native-base'
import Exponent from 'expo'
import { DrawerItems } from 'react-navigation';
const screenHeight = Dimensions.get('window').height;
const datas = [
{
name: "Home",
route: "HomeScreen",
icon: "phone-portrait",
bg: "#C5F442",
},
{
name: "Business",
route: "Business",
icon: "easel",
bg: "#C5F442",
},
{
name: "Education",
route: "Education",
icon: "phone-portrait",
bg: "#477EEA",
types: "8",
},
{
name: "Life Style",
route: "Lifestyle",
icon: "phone-portrait",
bg: "#DA4437",
types: "4",
},
{
name: "Tech",
route: "Tech",
icon: "notifications",
bg: "#4DCAE0",
},
{
name: "Contact",
route: "Contact",
icon: "radio-button-off",
bg: "#1EBC7C",
types: "9",
},]
const DrawerContent = (props) => {
let showItems = props.items.filter(itemObj => {
return itemObj.routeName !== 'Welcome'
&& itemObj.routeName !== 'Signin'
&& itemObj.routeName !== 'Signup'
})
return (
<View style={style.container}>
<Content>
<List
dataArray={datas}
renderRow={data =>
<ListItem button noBorder onPress={() => this.props.navigation.navigate(data.route)}>
<Left>
<Icon active name={data.icon} style={{ color: "#777", fontSize: 26, width: 30 }} />
<Text>
{data.name}
</Text>
</Left>
{data.types &&
<Right style={{ flex: 1 }}>
<Badge
style={{
borderRadius: 3,
height: 25,
width: 72,
backgroundColor: data.bg,
}}
>
<Text>{`${data.types} Types`}</Text>
</Badge>
</Right>}
</ListItem>}
/>
</Content>
</View>
)
}
const style = StyleSheet.create({
container: {
height: screenHeight,
backgroundColor: '#494949',
flex:1,
paddingTop: Exponent.Constants.statusBarHeight,
},
});
export default DrawerContent;
Is there any solution for this error and for this code?
I also faced the similar problem ,use it like this
In your class where you are using sidebar class declare a function for navigation
goto(route) {
console.log("navigation" + route);
const { navigate } = this.props.navigation;
navigate(route);
}
Then bind this function to the side bar
content={<DrawerContent route={this.goto.bind(this)} />} >
Then in sidebar file handle on press like this
onPress={() => this.props.route('Page Name')}
How do I hide the shadow under react-navigation headers?
They look like this.
Add the following to the navigationOptions header style.
const AppNavigation = StackNavigator(
{
'The First Screen!': { screen: FirstScreen },
},
{
navigationOptions: {
header: {
style: {
elevation: 0, // remove shadow on Android
shadowOpacity: 0, // remove shadow on iOS
},
},
},
},
);
The documentation isn't great yet, but you can learn about navigationOptions in the React Navigation Docs.
in react navigation V5 this how you can do it:
to do it for all screens apply screenOptions prop to <Stack.Navigator>
in example:
<Stack.Navigator
screenOptions={{
headerStyle: {
elevation: 0,
shadowOpacity: 0
},
}}
/>
</Stack.Navigator>
to do it for a specific screen apply options prop to <Stack.Screen>
in example:
<Stack.Screen
name="Example"
component={ExampleComponent}
options={{
headerStyle: {
elevation: 0,
shadowOpacity: 0
},
}}
/>
UPDATE V6:
since released React Navigation V6, you can't hide header shadow using headerStyle option. instead of that you can use bolean option headerShadowVisible and set it to be false like example bellow:
<Stack.Screen
name="Example"
component={ExampleComponent}
options={{headerShadowVisible: false}}
/>
The following works for me as the original Stylesheet uses "borderBottomWidth" on iOS:
const navigator = StackNavigator(screens, {
navigationOptions: {
headerStyle: {
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
}
}
});
I don't know how much this answer will value, but sharing my code to let you know that this worked for me for react-navigation version: 3.9.1
const AppNavigation = StackNavigator(
{
FirstScreen,
},
{
defaultNavigationOptions: {
headerStyle: {
elevation: 0, //for android
shadowOpacity: 0, //for ios
borderBottomWidth: 0, //for ios
},
},
})
In v5 you can do the following
<Stack.Navigator>
<Stack.Screen
name="Example"
component={ExampleComponent}
options={{
headerStyle: {
elevation: 0,
shadowOpacity: 0
},
}}
/>
</Stack.Navigator>
Good afternoon, React Navigation 6:
<Stack.Navigator screenOptions={{headerShadowVisible:false}}>
This works for me:
export const AppNavigator = StackNavigator(
{
Login: { screen: LoginScreen },
Main: { screen: MainScreen },
Profile: { screen: ProfileScreen },
},
navigationOptions: {
headerStyle: {
elevation: 0,
shadowOpacity: 0,
}
}
);
or
export const AppNavigator = StackNavigator(
{
Login: { screen: LoginScreen },
Main: { screen: MainScreen },
Profile: { screen: ProfileScreen },
},
header: {
style: {
elevation: 0, //remove shadow on Android
shadowOpacity: 0, //remove shadow on iOS
}
}
);
in react-navigation version 5.x.x:
<Tab.Navigator
tabBarOptions={{
activeTintColor: colors.darkGray,
labelStyle: { fontSize: 12 },
style: { backgroundColor: colors.white, borderTopWidth: 0, elevation: 0, shadowOpacity: 0, },
}}
>
Try passing cardStyle: { shadowColor: 'transparent' }
export const AppNavigator = StackNavigator(
{
Login: { screen: LoginScreen },
Main: { screen: MainScreen },
Profile: { screen: ProfileScreen },
},
cardStyle: { shadowColor: 'transparent' }
As per this question React Navigation Stack Navigator default shadow styling
I have been trying to solve this problem for the past couple of hours and have finally found the solution.
The problem in my case was that the header was in a different Z position than the rest of the other components.
try:
const styles = {
headerStyle: {
zIndex: 1
}
}
As of 2019 this answer doesn't work in version 3.
The new way of doing it is:
const AppNavigation = StackNavigator(
{
'The First Screen!': { screen: FirstScreen },
},
{
defaultNavigationOptions: {
headerStyle: {
elevation: 0,
shadowOpacity: 0,
},
},
},
);
I'm using react navigation v5, i use this code :
const HomeStackScreen = ({navigation}) => (
<HomeStack.Navigator
initialRouteName="Home"
headerMode="screen"
mode="modal"
screenOptions={{
headerStyle: {
backgroundColor: COLORS.WHITE,
elevation: 0, // remove shadow on Android
shadowOpacity: 0, // remove shadow on iOS
borderBottomWidth: 0,
},
headerTintColor: COLORS.GREY,
headerTitleStyle: {
fontFamily: 'Montserrat-SemiBold',
fontWeight: '600',
fontSize: 18,
},
}}>
<HomeStack.Screen
name="Home"
component={Home}
options={{
title: 'Expanded',
headerLeft: () => <RenderHeaderLeft />,
headerRight: () => <RenderHeaderRight navigation={navigation} />,
headerTitleAlign: 'left',
}}
/>
<HomeStack.Screen name="HomeDetails" component={HomeDetails} />
</HomeStack.Navigator>
);
put shadowOpacity and elevation inside headerStyle
it is:
options: {{
headerShadowVisible: false,
}}
check the docks for more info:
https://reactnavigation.org/docs/native-stack-navigator
You can try this, and it worked for me !
export const SignedOut = StackNavigator({
SignIn: {
screen: SignInScreen,
navigationOptions: {
title: "SignIn",
headerStyle: {
shadowOpacity: 0, // This is for ios
elevation: 0 // This is for android
}
}
}
});
The shadow is achieved via elevation, use:
headerStyle: {
backgroundColor: 'white',
shadowColor: 'transparent',
elevation: 0,
},
For React Native Navigation 5
<Stack.Screen
name={"Profile"}
component={Profile}
options={{
headerTitle: "Profile",
headerHideShadow: true,
}}
/>
Or
<Stack.Navigator
screenOptions={{
headerHideShadow: true,
}}
>