I'm using react-navigation. I want createStackNavigator style navigation, but I just want the header to be at the bottom of the screen instead of the top. It seems the only way to get a bottom navbar without making my own navigator is with createBottomTabNavigator.
I'm making a flow, with one screen following another until it ends.
The headerStyle prop doesn't take positioning properties like bottom, top, left.
Following some advice here, this is now what I have.
import BottomStackNavigationView from '../components/BottomStackNavigationView'
export default class MyScreen extends Component {
static navigationOptions = {
title: 'giraffe',
headerTitle: 'monkey',
headerBackTitle: 'c3po',
header: (props) => <BottomStackNavigationView {...props} />,
}
render() {}
I log the props I get in my BottomStackNavigationView and it doesn't look like I am getting, for example, headerTitle, title, or headerBackTitle.
Is there a better way of doing this than making a custom navigator?
As mentioned by #Darpan Rangari in the comments, position: absolute is not available in headerStyle so the below solution should work.
Try this:
export default class MyScreen extends Component {
static navigationOptions = {
header: (navigationOptions) => (<View style={{position:"absolute", bottom: 0, height: 80, width: "100%", backgroundColor: "#dbdbdb"}}><Text>{navigationOptions.headerTitle}</Text></View>); //this is your custom header
render() {}
}
I needed a footer at the bottom of my stack navigator too. When bottom: 0 didn't work, I found the height of my screen, and used:
import React from 'react'
import { createStackNavigator } from 'react-navigation-stack'
import { Dimensions, View, Text } from 'react-native';
const styles = {
position: 'absolute',
width: '100%',
height: 130,
top: Dimensions.get('window').height-130,
backgroundColor: 'orange',
}
const A = props => (
<Text style={{width: '50%', height: 200, backgroundColor: 'green'}}
onPress={() => props.navigation.navigate('B')} />
)
const EventCreationStack = createStackNavigator(
{
A: {screen: A},
B: {screen: A},
},
{
defaultNavigationOptions: {
header: props => <View style={styles} />,
},
}
)
export default EventCreationStack
Related
Im having problems with passing custom light or dark themes from react-navigation. The new defined object items of a theme are not overwritten as shown below. My goal is to use custom dark and light themes that i can use in every component. But now only the default values are showing not the custom ones.
App.js:
import React from 'react';
import { AppearanceProvider } from 'react-native-appearance';
import Navigation from './components/Navigation.js';
const App = () => {
return (
<AppearanceProvider>
<Navigation />
</AppearanceProvider>
);
};
export default App;
Inside the Navigation component im using the navigationContainer to pass the theme prop based on light or dark theme.
Navigation.js:
import React, { useState } from 'react';
import { NavigationContainer, DefaultTheme, DarkTheme } from '#react-navigation/native';
import { createStackNavigator, HeaderBackButton } from '#react-navigation/stack';
import Login from './screens/Login.js';
const Navigation = props => {
//CUSTOM THEMES
const MyTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: '#b91c22',
primary: 'rgb(255, 45, 85)',
},
};
const MyThemeDark = {
...DarkTheme,
colors: {
...DarkTheme.colors,
background: 'green',
primary: 'rgb(255, 45, 85)',
},
};
//STATES
const [darkApp, setDarkApp] = useState(false);
//SET THE THEME
const appTheme = darkApp ? MyThemeDark : MyTheme;
//STYLE
const headerStyle = {
header: {
display: 'flex',
alignItems: 'center',
height: 0,
},
title: {
position: 'absolute',
top: 0,
fontWeight: '900',
fontSize: 30,
color: '#fff',
alignSelf: 'center',
},
};
return (
<NavigationContainer theme={appTheme}>
<Stack.Navigator headerMode='screen'>
<Stack.Screen
name='Login'
component={Login}
options={{
headerStyle: headerStyle.header,
headerTitleStyle: headerStyle.title,
title: 'Login',
}}
/>
</Stact.Navigator>
</NavigationContainer>
);
};
export default Navigation;
Then for example i want to get the overwritten background color in a button component, so i use the useTheme option from react-navigation. But the background color is not overwritten the default one. I was expected that the background would have the color #b91c22 but instead it is showing rgb(240, 240, 240), what im i doing wrong here?
Example Button.js:
import React from 'react';
import { TouchableOpacity, Text, View } from 'react-native';
import { useColorScheme } from 'react-native-appearance';
import { useTheme } from '#react-navigation/native';
const Button = props => {
//PROPS
const {} = props;
//THEMES
const { colors } = useTheme();
let scheme = useColorScheme();
return (
<TouchableOpacity style={{ backgroundColor: colors.background }}>
<Text>Im Button</Text>
</TouchableOpacity>
);
};
export default Button;
I want to give box shadow to Header according to below in image in React native navigation and after giving borderBottomRadius there is a little white color showing from both right and left side i want to remove that color and want to make that according to the home.js background color.
here is code of header:
const stackNav = createStackNavigator({
Home : {
screen: Routes.Home,
navigationOptions: ({navigation}) => ({
title: "Home",
headerTitleStyle: {
fontWeight: '600',
color: '#e91e63',
},
headerStyle:{
borderBottomLeftRadius:10,
borderBottomRightRadius:10,
},
headerLeft:(<TouchableOpacity onPress={() => navigation.openDrawer()}>
<View style={{
paddingLeft: 15
}}>
<IOSIcon
name="ios-menu"
size={40}
color='#e91e63'
/>
</View>
</TouchableOpacity>
),
})
}
});
here is Home.js
import React from 'react';
import { View,Text, StyleSheet,Dimensions } from 'react-native';
class Home extends React.Component {
render() {
return(
<View style={styles.container}>
<Text>Home.js</Text>
</View>
)
}
}
export default Home;
const styles = StyleSheet.create({
container:{
backgroundColor:'#F0F3F5',
flex:1,
}
})
what i want in header the box shadow
want to get rid of that mark area or change color according to Home.js color
Since you didn't provide any code, the best we can do is guess.
Maybe you're adding the box-shadow to the parent container (wrapper) instead of the white rounded 'plate'?
I'm trying to achieve a Instagram-like navigation
I have a buttom tab navigation in App.js
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { createAppContainer, createBottomTabNavigator} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Home from './views/Home'
import Search from './views/Search'
const MainNavigator = createBottomTabNavigator({
Home: { screen: Home },
Search: { screen: Search },
}, {
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if(routeName === 'Home'){
iconName = `ios-home`;
}
if(routeName === 'Search'){
iconName = `ios-search`;
}
return <IconComponent name={iconName} size={25} color={tintColor} />;
}
}),
initialRouteName: 'Search',
tabBarOptions: {
activeTintColor: '#fff',
activeBackgroundColor: '#4c399c',
inactiveTintColor: '#f1f3f5',
inactiveBackgroundColor: '#5442a0',
showLabel: false
},
});
const App = createAppContainer(MainNavigator);
export default App;
I'll have more than two views at the bottom.
The top bar will have a centered logo on all views, and some views will have 1 left button and/or 1 right button.
What I'm trying to achieve is to not render the header bar in every view, but to declare one globally (like the bottom navigation) and add the custom buttons on the few views that will have them
put the tab navigation as the parent, and add a stack navigation inside each tab.
An easy way to do this is using the Header component from react-native-elements. You just need to add this to the screen that you want the header on.
It's really easy to add the buttons to open drawer or anything else that you need.
For this to work, don't forget to add the header: null to the stack navigators, otherwise you'll end up with 2 headers on your screen.
Example below:
<React.Fragment>
<Header
statusBarProps={{ barStyle: 'light-content' }}
barStyle="light-content"
leftComponent={
<SimpleIcon
name="menu"
color="#34495e"
size={20}
/>
}
centerComponent={{ text: 'HOME', style: { color: '#34495e' } }}
containerStyle={{
backgroundColor: 'white',
justifyContent: 'space-around',
}}
/>
</React.Fragment>
This code will display centered the header on each screen of your BottomTabNavigator - MainNavigator
const AppNavigator = createStackNavigator({
Home: {screen: MainNavigator}
},
defaultNavigationOptions: {title: 'Instagram'},
headerLayoutPreset: 'center'
})
const App = createAppContainer(AppNavigator);
export default App;
I'm trying to add a tabbed navigation to a React Native app, also using expo if that matters, and whenever I do this I get a big chunk of white at the top of the screen. I'm not seeing what's causing this though, the status bar background shouldn't be pushing it down and as far as I can tell changing the height style of my navigation or main view doesn't do anything.
This looks like:
The complete source to recreate this is:
// utils/colors.js
export const white = '#fff'
export const orange = '#f26f28'
// App.js
import React, { Component } from 'react'
import { StyleSheet, View, StatusBar, Dimensions } from 'react-native'
import {
createMaterialTopTabNavigator,
createStackNavigator
} from 'react-navigation'
import { Constants } from 'expo'
import List from './components/List'
import Add from './components/Add'
import { orange, white } from './utils/colors'
function StatusBarBackground ({ backgroundColor, ...props }) {
return (
<View style={{ backgroundColor, height: Constants.statusBarHeight }}>
<StatusBar translucent backgroundColor={backgroundColor} {...props} />
</View>
)
}
const Tabs = createMaterialTopTabNavigator({
List: {
screen: List,
navigationOptions: {
tabBarLabel: 'List',
},
},
Add: {
screen: Add,
navigationOptions: {
tabBarLabel: 'Add',
},
},
}, {
navigationOptions: {
header: null
},
tabBarOptions: {
activeTintColor: white,
style: {
height: 56,
backgroundColor: orange,
shadowColor: 'rgba(0, 0, 0, 0.24)',
shadowOffset: {
width: 0,
height: 3
},
shadowRadius: 6,
shadowOpacity: 1
}
}
})
const MainNavigator = createStackNavigator({
Home: {
screen: Tabs,
},
})
export default class App extends Component {
render() {
return (
<View style={{flex: 1}}>
<StatusBarBackground backgroundColor={orange} barStyle="light-content" />
<MainNavigator />
</View>
)
}
}
The Add and List components are just a view with a text, both look similar to this:
import React, { Component } from 'react'
import { View, Text } from 'react-native'
class Add extends Component {
render() {
return (
<View>
<Text style={{fontSize: 20}}>Add</Text>
</View>
)
}
}
export default Add
You are adding Your Tab Navigator inside Stack Navigator, That is why that white header is showing from Stack Navigator.
1) If You want to add header then style your header like below
const MainNavigator = createStackNavigator({
Home: {
screen: Tabs,
},
},{
navigationOptions:{
headerStyle : {
backgroundColor:'#243346'
},
headerTintColor:"#fff"
},
})
2) If you want to remove header then you can either remove your Tab Navigator from Stack Navigator or add headerMode:'none' inside navigationOprions object.
How can I change Background Color of the drawer fully? I don't need to change drawer items need to change the background color of the drawer fully. By default, it's white while I need to make it Green. Is there any demo example?
Old question, but this may help people that are looking for this solution. On createDrawerNavigator you have a drawerConfig property called drawerBackgroundColor.
Example:
import React from 'react';
import { createDrawerNavigator } from 'react-navigation';
import Home from '../screens/Home';
import Screen2 from '../screens/Screen2';
export default createDrawerNavigator({
Home,
Screen2
}, {
drawerPosition: 'left',
drawerBackgroundColor: '#0000FF',
});
You can read more about it, on React Navigation documentation: https://reactnavigation.org/docs/en/drawer-navigator.html
This Current example can help you , This the DrawerNavigtor using DrawerContent , Need to change the style of DrawerContent
const Main = DrawerNavigator({
home: { screen: HomePage },
}, {
drawerWidth: 250,
drawerPosition: 'right',
contentComponent: props => <DrawerContent {...props} />,
});
export default Main;
You can Change the style by using the this code below
class DrawerContent extends Component {
render() {
return (
<ScrollView style={styles.container}>
<View style={{ flex: 1 }}>
<Button transparent info onPress={() => { this.handlechange(); }}>
<Text style={{ fontSize: 16 }}>Change Email</Text>
</Button>
</View>
</ScrollView>
);
}
}
const styles = {
container: {
flex: 1,
padding: 20,
backgroundColor: 'Green',
},
};
export default DrawerContent;
This can change the background color