I have an issue that no matter what I try, I just cannot get styling to work on my Stack with Drawer navigator. I've tried several examples and solutions but just none of them work, my navigation stays the default blue.
In my current code below, I've left 2 coloring options open - those two are of the many things I've tried before.
I hope that someone knows what's going on because I'm starting to get clueless.
const MainScreenNavigator = StackNavigator({
'Home': {
screen: Components.HomeScreen,
navigationOptions: ({navigation}) => ({
header: <Components.StackHeader title='Home' navigation={navigation} />
})
},
'Scan': {
screen: Components.ScanScreen,
navigationOptions: ({navigation}) => ({
header: <Components.StackHeader title='Scan QR' navigation={navigation} />
})
},
'LockInfo': {
screen: Components.LockInfoScreen,
navigationOptions: ({navigation}) => ({
header: <Components.StackHeader title='Lock' navigation={navigation} />
})
},
});
const RootNavigator = DrawerNavigator ({
Home: {
screen: MainScreenNavigator,
},
});
RootNavigator.navigationOptions = {
contentOptions: {
activeBackgroundColor: '#ff5976',
style: {
backgroundColor: '#000000'
}
}
}
const ModalNavigator = StackNavigator(
{
Main: { screen: Main },
Login: { screen: Login },
},
{
headerMode: 'none',
mode: 'modal',
navigationOptions: {
gesturesEnabled: false,
},
https://reactnavigation.org/docs/navigators/stack#Screen-Navigation-Options
checkout this above link, search and add the required styling properties inside your own StackNavigator, headerStyle, headerTitleStyle, headerBackTitleStyle, headerTintColor and so on...
Also for DrawerNavigator, checkout this below link and replicate the code, styling properties for the same are provided.
https://reactnavigation.org/docs/navigators/drawer#DrawerNavigator
Also remove the single inverted commas from Home, Scan and LockInfo
Related
Everyone I am facing an issue in react-native as I am new to this .
I am callling a tabbpage from homePage
so in tabpage there is a navbar at the top,below this navbar a tabbar is showing two tabs.
This is good till now but the problem starts from here
In tabPage I have two tabs ->tab1 and tab2
from tab1 I am navigating to page MainPage1 where it is showing a Navbar below navbar a tabbar below tabbar an another navbar. As shown in the picture.
I am totally unable to remove both the top level navbar having title "Stopages" and the tabbar.
I am using Tabview for creating this tabbpage and using stacknavigator for navigating to different pages.I am stuck here and Not able to find solution
NOTE->I have tried using
navigationOptions: {
tabBar: ({ state }) => ({
visible: false
})
but its not doing anything Please help
class TabPage extends React.Component{
state = {
index: 0,
routes: [
{ key: 'Stopagess', title: 'Stopages' },
{ key: 'MapStopagess', title: 'Maps' },
],
};
render() {
return (
<TabView
navigationState={this.state}
renderScene={SceneMap({
Stopagess: Stopages,
MapStopagess: MapStopages,
})
}
renderTabBar={props =>
<TabBar
{...props}
style = {{backgroundColor:'#3f51b5'}}
indicatorStyle={{ color: 'pink' }}
/>
}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width }}
indicatorStyle={{ backgroundColor: 'pink' }}
/>
);
}
}
This is my Stopages class
class Stopages extends Component {
render()
{
return (
<StopageDetail/>
)
}
}
const StopageDetail = createStackNavigator({
Stp:{
screen: Stpforsomeissue,
navigationOptions: () => ({
header:null,
tabBarVisible: false,
}),
},
NextDetailStopage:{
screen :StopageDetailOfStudents,
navigationOptions: ({ navigation, screenProps }) => ({
title: 'Stopages Detail',
// tabBarVisible: navigation.state.params=false,
headerStyle: { backgroundColor: '#ffd600'},
/>,
})
}
})
I believe you are using createMaterialTopNavigator under a root stack with routeName Stopages and under each Tab route you have a dedicated stack for each one, the first one being the Stopages Detail. Please correct me if thats not the case and edit your post to show the navigation stack you have written.
This might be useful to you:
The root stack can be like the one below:
createStackNavigator ({
StopPages: {screen: MyTabNavigator, navigationOptions: {header: null}}
});
and the TabNavigator will be like this:
const MyTabNavigator = createMaterialTopTabNavigator({
Stopages: {screen: StopagesStack},
Maps: {screen: MapsStack},
});
const StopagesStack = createStackNavigator({
StopagesDetail: {screen: DetailContainer, navigationOptions: {header: null}}
});
The key to hide default stack navigator's header is to set it null in the navigationOptions.
You can play around within navigationOptions within a tab of createMaterialTopTabNavigator in order which ones had TopTabBar or not, Example:
export const Dashboard = createMaterialTopTabNavigator({
First: {
screen: FirstScreen, // This is my first Tab (a View)
navigationOptions: {
title: 'First'
}
},
Second: {
screen: SecondStack, // This is another Stack
navigationOptions: ({ navigation }) => ({
title: 'SecondStack',
tabBarVisible: navigation.state.index === 0, //Tab bar will be visible depending of the state (you can put another index)
animationEnabled: true
})
},
Third: {
screen: ThirdScreen, // This is my third Tab (a View)
navigationOptions: {
title: 'ThirdScreen',
}
}
});
I have a StackNavigation like this:
const AppNavigator = createStackNavigator({
Login: {
screen: Login,
navigationOptions: () => ({
title: 'Login',
headerTintColor: 'white',
headerStyle:{
backgroundColor: '#000',
elevation: 0,
showdowOpacity: 0
},
})
},
Home: {
screen: AppDrawerNavigator,
navigationOptions: () => ({
header: null
})
},
});
With a DrawerNavigator nested inside:
const AppDrawerNavigator = createDrawerNavigator({
Home: {
screen: Home,
navigationOptions: {
drawerLabel: 'Home',
gesturesEnabled: false,
}
},
Favorites: {
screen: Favorites,
navigationOptions: {
drawerLabel: 'Favorites',
}
}
},
{
drawerPosition: 'left',
contentComponent: props => <Drawer {...props} />
});
The initial route of the stack navigator is working fine
Login -> Home
But when I try navigating from Home to Favorites it navigates immediately back to Home after rendering the Favorites screen.
I am using react-navigation#2.11.2 and react-native#0.56.0
With Home being used in both stack and drawer navigator.
There are high chances of name conflicts occurring here.
Try this structure.
const Stack = {
FirstView: {
screen: FirstView
},
SecondView: {
screen: SecondView
},
ThirdView: {
screen: ThirdView
}
};
const DrawerRoutes = {
FirstViewStack: {
name: 'FirstViewStack',
screen: StackNavigator(Stack, { initialRouteName: 'FirstView' })
},
SecondViewStack: {
name: 'SecondViewStack',
screen: StackNavigator(Stack, { initialRouteName: 'SecondView' })
},
ThirdViewStack: {
name: 'ThirdViewStack',
screen: StackNavigator(Stack, { initialRouteName: 'ThirdView' })
},
};
const RootNavigator =
StackNavigator({
Drawer: {
name: 'Drawer',
screen: DrawerNavigator(
DrawerRoutes,
),
},
...Stack
},
{
headerMode: 'none'
}
);
I faced a similar issue when i tried to use a hamburger menu in my Home page (which uses stack navigator to goto other pages).
Check this Git Article also.
Im using react-navigation to build my app, I want to have both tab and stack navigation so I did this:
const FindPage = StackNavigator({
Find: {
screen: Find,
},
Item:{
screen:Item
}
}, {
initialRouteName: 'Find',
});
const ProfilePage = StackNavigator({
Profile: {
screen: Profile,
},
Item:{
screen:Item
}
}, {
initialRouteName: 'Profile',
});
const MyApp = createBottomTabNavigator({
Find: FindPage,
Profile: ProfilePage
}
});
const auth = StackNavigator({
Login:{
screen: Login,
},
Register:{
screen: Register,
},
Main:{
screen: MyApp,
}
},{
initialRouteName: 'Main',
headerMode: 'none'
});
export default auth;
But I dont get it well. this is what the screenshot is
giving:
enter image description here
if you see the tab lost it tab icon and font when im using stacknavigation in tab navigation, this worked for me in another version of react nvigation and cant find anything on the web Please Help !
with reactnavigation2 you can achieve this like in the below code
Read more about it here https://reactnavigation.org/docs/en/bottom-tab-navigator.html
import Ionicions from "react-native-vector-icons/Ionicons";
screen: createBottomTabNavigator(
{
HomeScreen: {
screen: HomeStack,
navigationOptions: {
tabBarLabel: props => <Label name="Home" {...props} />,
tabBarIcon: props => (
<Icon name="ios-home-outline" fillname="ios-home" {...props} />
)
}
}
})
I have 2 tabs and I put inside in createStackNavigator
I am using
"react-navigation": "^2.0.1",
"react-native": "0.55.3",
const Cstack = createStackNavigator({
cstack: {
screen: Screen1,
}
},{
headerMode:'none'
});
const Dstack = createStackNavigator({
dstack: {
screen: Screen2,
},
},{
headerMode:'none'
});
const mytabnavigator= createTabNavigator({
Tab1: {
screen: Cstack,
navigationOptions: ({navigation}) => ({
headerTintColor: 'white',
tabBarIcon: ({focused, tintColor}) => {
return (
<IconIonicons
name='ios-cash'
type='ionicon'
color="#FFFFFF"
size={26}
/>
);
},
})
},
Tab2: {
screen: Dstack,
navigationOptions: ({navigation}) => ({
headerTintColor: 'white',
tabBarIcon: ({focused, tintColor}) => {
return (
<IconIonicons
name='ios-card'
type='ionicon'
color="#FFFFFF"
size={26}
/>
);
},
})
}
}, {
tabBarOptions: {
showIcon: true,
style: {
backgroundColor: '#3f51b5',
},
inactiveTintColor: '#FFFFFF',
activeTintColor: "#FFFFFF"
},
});
const StackTab = createStackNavigator({
stacktab: mytabnavigator,
navigationOptions: ({navigation}) => ({
title: 'Welcome'
})
});
My problem is that they both share the same title Welcome
how can I dynamically change the title when I switch to other tab example I will switch tabsettings then my title would be Settings.
If you are using react navigation <2 i.e ~1.5.* You can set it like this.
const Tabs = TabNavigator({
Tab1:{
screen: Tab1,
navigationOptions: ({navigation}) => {
return { title: "Tab 1 Heading", tabBarLabel:"Tab 1 "}
},
}
Tab2:{
screen: Tab2
navigationOptions: ({navigation}) => {
return { title: "Tab 2 Heading", tabBarLabel:"Tab 2 "}
}
}
})
const Stack = StackNavigator({
tabs: {
screen: Tabs
navigationOptions: ({navigation}) => {
return { title: "Stack"}
}
},
otherScreen: Page
})
I'm not sure why did they remove this feature, when you try the same it won't work on the latest react-navigation. Now title object key is used for fallback it seems.
This may be helpful some users. If you wish you can try downgrading also.
I have the Upgraded the React Navigation to latest today for my project I think this way will be useful to someone
const Tabs = TabNavigator({
Tab1:{
screen: Tab1,
navigationOptions: ({navigation}) => {
return { tabBarLabel:"Tab 1 "}
}},
Tab2:{
screen: Tab2
navigationOptions: ({navigation}) => {
return { tabBarLabel:"Tab 2 "}
}}
});
Tabs.navigationOptions = ({navigation})=>{
const { routeName } = navigation.state.routes[navigation.state.index]; //This gives current route
switch(routeName){
case "Tab1":
headerTitle="Tab 1";
break;
case "Tab1":
headerTitle="Tab 1";
break;
}
return {
headerTitle: headerTitle
}
}
I had the same problem and I couldn't find anything but think I may have figured out a solution.
I added a navigationOptions callback for the screen -
const RootStack = createStackNavigator({
HomeScreen: {
screen: CustomHome,
navigationOptions: ({navigation}) => {
if(navigation && navigation.state && navigation.state.params && navigation.state.params.title) {
return {title: navigation.state.params.title}
}
}
},
InputScreen: {
screen: CustomInput,
navigationOptions: ({navigation}) => {
return {title: navigation.state.params.title}
}
}
})
and in my components in the constructor, I am calling this to update the header name
props.navigation.setParams({title: props.navigation.state.params.input.name})
Hope this helps.
You can set the header title manually in every single screen by making use of navigationOptions. Example:
class TabSettingsScreen extends React.Component {
static navigationOptions = ({navigation}) => ({
title: 'Settings'
})
render() {
return (... );
}
}
remove headerModer: 'none' in child navigators and give required title for screens
const Tstack = createStackNavigator({
tabsettings: {
screen: tabsettings,
navigationOptions: {title : 'Settings'}
},
});
Remove title in mainStackNavigator
const StackTab = createStackNavigator(
{
stacktab: mytabnavigator
},
{
navigationOptions: {
header: null
}
}
);
use TabNavigator
import TabNavigator from 'react-navigation';
declare title for each pages separately
class Screen1 extends React.Component {
static navigationOptions = ({navigation}) => ({
title: 'Settings'
})
}
remove headerMode:'none'
I've made a custom tab bar in a Component which uses StackNavigator like so
export default StackNavigator(
{
Login: {
screen: Login,
},
ForgotPassword: {
screen: ForgotPassword,
},
SignUp: {
screen: SignUp,
},
Home: {
screen: Home,
},
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
},
initialRouteName: 'Home',
},
);
Now my Home screen has a custom made Tab Bar like so
export default () => (
<View>
<Text>HOME</Text>
<TabBar />
</View>
)
I want my Home screens Tab bar to have no transition
Currently it animates (left to right for IOS & bottom to up for Android) when one of the Tab link is clicked
I checked docs & found mode property but it has only 2 props card & modal & I want no animation
How to do it ?
Thanks to #Vojtech, I got the answer
const customAnimationFunc = () => ({
screenInterpolator: (sceneProps) => {
const { scene } = sceneProps;
const tabs = ['Home'];
if (tabs.indexOf(scene.route.routeName) !== -1) return null;
},
});
export default StackNavigator(
{
Login: {
screen: Login,
},
ForgotPassword: {
screen: ForgotPassword,
},
SignUp: {
screen: SignUp,
},
Home: {
screen: Home,
},
},
{
headerMode: 'none',
transitionConfig: customAnimationFunc,
navigationOptions: {
headerVisible: false,
},
initialRouteName: 'Home',
},
);
The only problem right now is nothing is animating. I'll edit the answer when few screens animate & tabs don't