I need to use state on my App.js code but react-navigation v3 don't use class so I can't define the constructor method.
Is there any other way so I can use state?
I tried to use a boolean javascript variable but it didn't help.
I use StackNavigator, drawer navigator and DrawerNavigator and BottomTabNavigator like this
const TabAppNavigator = createBottomTabNavigator({
Posts: {
screen: PostsScreen,
navigationOptions: {
tabBarLabel: 'Posts',
tabBarIcon: ({ tintColor }) => (<Icon name="md-home" color={tintColor} size={25} />)
}
},
Tools: {
screen: ToolsScreen,
navigationOptions: {
tabBarLabel: 'Tools',
tabBarIcon: ({ tintColor }) => (<Icon name="md-apps" color={tintColor} size={25} />)
}
},
Favourite: {
screen: FavouriteScreen,
navigationOptions: {
tabBarLabel: 'Favourite',
tabBarIcon: ({ tintColor }) => (<Icon name="md-heart" color={tintColor} size={25} />)
}
},
}, {
initialRouteName: 'Posts',
order: ['Posts', 'Tools', 'Favourite'],
tabBarOptions: {
activeTintColor: '#d94854',
inactiveTintColor: '#818181',
style: {
backgroundColor: '#fff',
borderTopColor: '#818181',
borderTopWidth: 1,
paddingBottom: 5,
paddingTop: 15,
},
labelStyle: {
fontSize: 13,
marginTop: 10,
},
},
navigationOptions: ({ navigation }) => {
return {
headerTitle: 'Growth Hack Toolkit',
headerTintColor: '#fff',
headerStyle: {
backgroundColor: '#d94854',
},
headerLeft: (
<Icon name="md-menu" color="#fff" size={25} style={{ paddingLeft: 15 }} onPress={() => navigation.openDrawer()} />
),
headerRight: (
<Icon name="md-search" color="#fff" size={25} style={{ paddingRight: 15 }} onPress={() => search()} />
)
}
}
}
)
const PostsStackAppNavigator = createStackNavigator({
TabAppNavigator: TabAppNavigator,
Posts: { screen: PostsScreen },
Post: { screen: PostScreen }
})
const ToolsStackAppNavigator = createStackNavigator({
TabAppNavigator: TabAppNavigator,
Tools: { screen: ToolsScreen },
Tool: { screen: ToolScreen },
ToolList: { screen: ToolListScreen },
Web: { screen: WebScreen },
Mobile: { screen: MobileScreen },
})
const DrawerAppNavigator = createDrawerNavigator({
Posts: { screen: PostsStackAppNavigator },
Tools: { screen: ToolsStackAppNavigator },
About: { screen: AboutScreen },
}, {
contentComponent: SideMenu,
drawerWidth: 250,
})
const App = createAppContainer(DrawerAppNavigator);
export default App;
I want to change my header view based on my state
basically, I have a default header (the same header for all tab screens) that contains a title, menu icon to open the drawer navigation and search icon to start searching
what I need to do is that when search icon is pressed I will change my state to show the instead of the title and when close icon is pressed I will change the state to show my default header again.
after spending so much time searching for a solution or a workaround, the answer is: I cannot.
It is not possible to have state in a functional component. So I have to use react navigation v2 instead of v3 as it is implemented as class-based component.
These links could help to understand:
difference between functional and class-based React components
React State without Constructor
Related
Apparently simple problem: the Header Title in react Navigation
Navigator file with my Bottom Tabs
const BottomTabNavigator = createMaterialBottomTabNavigator(
{
ToFind: {
screen: TopBarNavigator,
navigationOptions: {
title: "Discover",
tabBarIcon: (tabInfo) => {
return (
<Ionicons
name="md-search"
size={25}
color={tabInfo.tintColor} //prende lo stesso colore di tintcolor giù
/>
);
},
tabBarColor: "#27ae60",
activeColor: "white",
},
},
....
const Navigator = createStackNavigator({
BottomTabNavigator,
Detail: DetailScreen, // not visible but I need the navigation
Item: ItemDisplay, // not visible but I need the navigation
});
Now I try to set the name into the page (at the bottom)
MapScreen.navigationOptions = (navData) => {
return {
headerTitle: "Map",
};
};
Doing this I have the Bottom Tabs styled as I want and navigation but I CAN'T change the header title (navigation title) but I always see BottomTabNavigator
It looks really trick or I'm mistaking somewhere?
Any Idea?
Thanks
createMaterialBottomTabNavigator does not have header bar by default, but createStackNavigator has.
You can do something like this.
import React from "React";
import { createAppContainer, createStackNavigator } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
</View>
);
}
}
const Tab1 = createStackNavigator({
S1: {
screen: ToFind
}
});
const Tab2 = createStackNavigator({
S2: {
screen: ToFind
}
});
export default createAppContainer(
createBottomTabNavigator({
Tab1,
Tab2
}, {
//CUSTOM CONFIG
initialRouteName: 'Tab1',
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Tab1') {
iconName = 'icon1';
} else if (routeName === 'Tab2') {
iconName = 'icon2';
}
return <Icon name={iconName} size={24} color={tintColor} />;
<Ionicons
name={iconName}
size={25}
color={tabInfo.tintColor} //prende lo stesso colore di tintcolor giù
/>
},
}),
tabBarOptions: {
activeTintColor: 'white',
inactiveTintColor: 'black',
showLabel: false,
style: {
backgroundColor: '#27ae60',
borderTopWidth: 0,
borderTopColor: '#27ae60',
},
},
});
);
Try these steps. Hope to fix your problem.
Create Your Bottom Tab Navigator :
const BottomTabNavigator = createMaterialBottomTabNavigator(
{
PageOne: {
screen: PageOneComponent,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Feather name="airplay" size={26} color={tintColor} />,
tabBarLabel: null,
barStyle: { backgroundColor: 'white', elevation: 0, }
},
},
PageTwo: {
screen: PageTwoComponent,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Feather name="search" size={25} color={tintColor}/>,
tabBarLabel: null,
barStyle: { backgroundColor: 'white', elevation: 0, }
}
},
MapViewLink: {
screen: MapView,
navigationOptions: {
tabBarIcon: <Feather name="map-pin" size={25} color={'green'} />,
tabBarOnPress: ({ navigation }) => {
navigation.navigate('MapView');
},
tabBarLabel: null
}
},
},
{
initialRouteName: 'PageOne',
activeColor: 'orange',
inactiveColor: 'grey',
labeled: false,
barStyle: { backgroundColor: 'white', elevation: 0, borderTopWidth: 1, borderTopColor: '#efefef' },
}
);
Create your StackNavigator and export the navigator
const StackNavigator = createStackNavigator({
// bottom tab navigator
BottomTabNavigator: {
screen: BottomTabNavigator,
navigationOptions: {
header: null
}
},
// MapView Page
MapView: {
screen: MapView,
navigationOptions: ({ navigation }) => ({
title: 'Hello World'
})
},
}, {
defaultNavigationOptions: ({navigation}) => ({
headerTitleAlign: 'center',
cardStyle: { backgroundColor: '#FFFFFF' },
headerTitleStyle: {
// the default styles you want to apply to header title
},
});
export default createAppContainer(StackNavigator);
In the end, put the navigator inside the main project file. e.g App.js
I have a static data file (json) that stores information like facebook page link. If the facebook page link is empty, I do NOT want the Follow Us tab to show. The facebook page link is stored in businessDataJSON.facebook. Is there a way to only show the Follow Us Tab if businessDataJSON.facebook is not empty (empty string)? This is my App.js:
const ListStack = createStackNavigator(
{
ListCategories: ListCategoriesScreen,
ListCategoryItems: ListCategoryItemsScreen
},
{
initialRouteName: "ListCategories",
defaultNavigationOptions: {
headerStyle: {
backgroundColor: businessDataJSON.theme.navigationBarBackground
},
headerTintColor: businessDataJSON.theme.navigationBarTint,
headerTitleStyle: {
fontWeight: "bold"
}
}
}
);
const FollowUsStack = createStackNavigator(
{
FollowUs: FollowUsScreen
},
{
initialRouteName: "FollowUs",
defaultNavigationOptions: {
headerStyle: {
backgroundColor: businessDataJSON.theme.navigationBarBackground
},
headerTintColor: businessDataJSON.theme.navigationBarTint,
headerTitleStyle: {
fontWeight: "bold"
}
}
}
);
export default createAppContainer(
createBottomTabNavigator(
{
ListTab: {
screen: ListStack,
navigationOptions: {
title: businessDataJSON.theme.tabBarListTitle,
tabBarIcon: ({ tintColor }) => (
<Icon
name={businessDataJSON.theme.tabBarListIcon}
size={17}
color={tintColor}
/>
)
}
},
FollowUsStack: {
screen: FollowUsStack,
navigationOptions: {
title: "Follow Us",
tabBarIcon: ({ tintColor }) => (
<Icon name="users" size={17} color={tintColor} />
)
}
}
},
{
tabBarOptions: {
activeTintColor: businessDataJSON.theme.tabBarIconActive,
inactiveTintColor: businessDataJSON.theme.tabBarIconInactive,
style: {
elevation: 8,
...Platform.select({
ios: { paddingTop: 4, paddingBottom: 4 },
android: {
borderTopWidth: 0,
paddingTop: 6,
paddingBottom: 6
}
})
}
}
}
)
);
Yes but you would need to make the creation of the tabs dinamic wich leads to the navigation prop to be lost and make a nightmare to use it without redux. The simple approach that i can see is to use a root createSwitchNavigator with a loading screen/start screen and the tabs as the 2nd screen. in the loading screen you check if there is your facebook page, and navigate to them accordingly. this example is for auth, but it works in your case . trust me, the navigation props is a nightmare to manage.
I want to use react navigation in react native project but when I use this code in header it shows some back button in every screen and when I click on this it goes back to the splash screen. How to use react navigation with check first splash and then go to stack home and show back button in any screen.its very confuse me.
const TabNav=createBottomTabNavigator({
Notification:{
screen:Notif,
navigationOptions: () => ({
title:'',
tabBarIcon: ({ tintColor }) => {
return (
<IconIonicons
name='ios-notifications'
size={40}
color={tintColor}
/>
);
},
tabBarOptions: {
activeTintColor: '#000',
}
})
},
Home:{
screen:Home3,
navigationOptions: () => ({
title:'',
tabBarIcon: ({ tintColor }) => {
return (
<Image style={{ width: 40, height: 40,marginTop:'20%' }} source={Home}/>
);
}
})
},
User:{
screen:ProfileScreen,
navigationOptions: () => ({
title:'',
tabBarIcon: ({ tintColor }) => {
return (
<IconIonicons
name='ios-person'
size={40}
color={tintColor}
/>
);
},
tabBarOptions: {
activeTintColor: '#000',
}
})
},
},
{
initialRouteName:"Home"
},{
header: null,
headerMode: 'none',
}
)
const StackHome = createStackNavigator({
Tabs:{
screen:TabNav
},
CardView:{
screen:CardView,
},
Thumb:{
screen:Thumb,
}, Item:{
screen:Item,
}, Product:{
screen:ProductScreen,
}, Festivals:{
screen:Festivals,
} , Review:{
screen:Review,
} , Movie:{
screen:Movie,
} , Naghd:{
screen:Naghd,
} , Advertisment:{
screen:Advertisment,
} , Advertis:{
screen:Advertis,
}, CreateAd:{
screen:CreateAd,
}, Insta:{
screen:Insta,
}, Test:{
screen:Test,
}, ForoshRah:{
screen:ForoshRah,
}, Home2:{
screen:Home2,
}, Login:{
screen:Login,
}, Elan:{
screen:Elan,
}, Sabtenam:{
screen:Sabtenam,
}, sponser:{
screen:sponsor,
},Splash:{
screen:Spalsh
},Products:{
screen:Products
},
initialRouteName : 'Home',
},{
headerMode:'none',
navigationOptions: {
header: (props) => <ImageHeader {...props} />,
}
}
)
const RootNav = createStackNavigator({
StackHome:{
screen:StackHome
},
Splash:{
screen:Spalsh
},Login:{
screen:Login
},
},{
initialRouteName : 'Splash',
header: null,
});
You can use SwitchNavigator of React Navigation. As the SwitchNavigator is to only ever show one screen at a time. By default, it does not handle back actions and it resets routes to their default state when you switch away.
Kindly refer this https://reactnavigation.org/docs/en/switch-navigator.html
Remove the **Splash** Screen from your **StackHome** StackNavigator
Alter your **RootNav** with Switch Navigator like below
// Uses SwitchNavigator
const RootNav = createSwitchNavigator({
StackHome:{
screen: StackHome
},
Splash:{
screen: Splash
},Login:{
screen: Login
},
},{
initialRouteName : 'Splash'
});
Your StackHome consist of some stack navigators screens, you can set the navigation options from there itself to set the image in the header. You can set like below.
const StackHome = createStackNavigator({
CardView:{
screen: CardView,
navigationOptions: ({ navigation }) => ({
headerTitleStyle: { flex: 1, fontWeight: 'normal', fontSize: 15, color: '#FFFFFF', fontFamily: 'DroidSans-Bold' },
headerTintColor: "#2662b2",
headerStyle: {
backgroundColor: "#05BFFF",
},
headerRight:(<View><NotificationComponent navigation={navigation}/></View>)
})
},
Thumb:{
screen: Thumb,
}, Item:{
screen: Item,
}
});
I'm coding an app that uses react-navigation. My app has a bottom TabNavigator in which each tab consists of a stackNavigator, like so:
Routes.js:
const FirstStack = createStackNavigator({
First: {
screen: FirstScreen,
navigationOptions: {
header: props => <AppToolbar />
}
}
});
const SecondStack = createStackNavigator({
Second: {
screen: SecondScreen,
navigationOptions: {
header: props => <AppToolbar />
}
}
});
const ThirdStack = createStackNavigator({
Third: {
screen: ThirdScreen,
navigationOptions: {
header: props => <AppToolbar />
}
}
});
const FourthStack = createStackNavigator({
Fourth: {
screen: FourthScreen,
navigationOptions: {
header: props => <AppToolbar />
}
}
});
const FifthStack = createStackNavigator({
Fifth: {
screen: FifthScreen,
navigationOptions: {
header: props => <AppToolbar />
}
}
});
export const AppStack = createBottomTabNavigator(
{
First: {
screen: FirstStack,
navigationOptions: {
title: "First",
tabBarLabel: "First",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-home" color={tintColor} size={24} />
)
}
},
Second: {
screen: SecondStack,
navigationOptions: {
title: "Second",
tabBarLabel: "Second",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-clock" color={tintColor} size={24} />
)
}
},
Third: {
screen: ThirdStack,
navigationOptions: {
title: "Third",
tabBarLabel: "Third",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-fitness" color={tintColor} size={24} />
)
}
},
Fourth: {
screen: FourthStack,
navigationOptions: {
title: "Fourth",
tabBarLabel: "Fourth",
tabBarIcon: ({ tintColor }) => (
<Icon
name="ios-cloud-download"
color={tintColor}
size={24}
/>
)
}
},
Fifth: {
screen: FifthStack,
navigationOptions: {
title: "Fifth",
tabBarLabel: "Fifth",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-person" color={tintColor} size={24} />
)
}
}
},
{
initialRouteName: "First",
order: ["First", "Second", "Third", "Fourth", "Fifth"],
tabBarOptions: {
activeTintColor: "white",
inactiveTintColor: "grey",
style: {
backgroundColor: "#121212",
borderTopColor: "#303030"
}
}
}
);
Each stackNavigator inside the tabs in the tabNavigator has its own header so that I can customize the header for each tab, but all headers have a button which should navigate to the profile screen (in this example its the contact icon).
AppToolbar.js:
const appToolbar = props => {
return (
<View style={styles.toolbar}>
<Text style={styles.toolbarTitle}>Title</Text>
<TouchableOpacity onPress={...}>
<Icon
name="ios-contact"
color="grey"
size={30}
style={{ padding: 0, margin: 0, marginRight: 10 }}
/>
</TouchableOpacity>
</View>
);
};
What I want to do is that by pressing the contact icon the app should navigate to the profile screen, what I don't know is if its possible to define like a global route thats accesible from everywhere, Or do I have to add the profile screen to all the stackNavigators so that it is accesible from every screen in every stack?
Thanks in advance!
Found the answer here https://stackoverflow.com/a/50701940/1276438
Use a stackNavigator with the profile stack and the tabNavigator as children, making the tabNavigator the default route.
I'm trying to change the color of the background in my react native app, from grey to white. I'm using react-navigation to make a TabNavigator after I render it. I tried to put this TabNavigator in a view and set backgroundColor but all screen became white. How can I solve this?
index.js
...
render() {
return (
<View style={{ backgroundColor: '#FFFFFF'}}>
<Tabs />
</View>
)
}
...
Tabs
...
const Tabs = TabNavigator(
{
Home: {
screen: HomeStack,
navigationOptions: {
title: 'Acasa',
},
},
...
Account: {
screen: AccountScreen,
navigationOptions: {
title: 'Contul meu',
},
},
},
{
tabBarComponent: props => <FooterNavigation {...props} />,
tabBarPosition: 'bottom',
initialRouteName: 'Home',
},
);
...
Home Screen
render() {
const {
data, refreshing, loading, error,
} = this.state;
return (
<ScrollView>
<Container>
{error && <Text>Error</Text>}
{loading && <ActivityIndicator animating size="large" />}
<List>
<FlatList
data={data}
renderItem={({ item }) => (
<ListItem onPress={() => this.props.navigation.navigate('Item', item)}>
<Item data={item} />
</ListItem>
)}
// ID from database as a key
keyExtractor={item => item.title}
ItemSeparatorComponent={this.renderSeparator}
ListFooterComponent={this.renderFooter}
ListHeaderComponent={this.renderHeader}
refreshing={refreshing}
onRefresh={this.handleRefresh}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={0}
/>
</List>
</Container>
</ScrollView>
);
}
I've solved my problem, it was caused by StackNavigator. To solve it , just add some extra options
const HomeStack = StackNavigator(
{
Home: {
screen: HomeScreen,
},
Item: {
screen: ItemScreen,
navigationOptions: ({ navigation }) => ({
title: `${navigation.state.params.title}`,
}),
},
},
**
{
headerMode: 'screen',
cardStyle: { backgroundColor: '#FFFFFF' },
},
**
);
For React Navigation 5 and above
<Stack.Navigator
initialRouteName='dashboard'
screenOptions={{
headerStyle: { elevation: 0 },
cardStyle: { backgroundColor: '#fff' }
}}
>
<Stack.Screen name="Home" component={HomeStack} />
</Stack.Navigator>
For React Navigation 4 and earlier
const HomeStack = StackNavigator(
{
Home: {
screen: HomeScreen,
},
},
{
headerMode: 'screen',
cardStyle: { backgroundColor: '#fff' },
},
);
For React Navigation 6,
<Stack.Navigator screenOptions={{
contentStyle:{
backgroundColor:'#FFFFFF'
}
}} initialRouteName="Home">
Edit your View tag like this,
<View style={{flex: 1,backgroundColor: '#6ED4C8'}}></View>
The following will no longer work due to deprecation.
const HomeStack = StackNavigator(
{
Home: {
screen: HomeScreen,
},
Item: {
screen: ItemScreen,
navigationOptions: ({ navigation }) => ({
title: `${navigation.state.params.title}`,
}),
},
},
**
{
headerMode: 'screen',
cardStyle: { backgroundColor: '#FFFFFF' },
},
**
);
You now have to use defaultNavigationOptions (see below).
const HomeStack = StackNavigator(
{
Home: {
screen: HomeScreen,
},
Item: {
screen: ItemScreen,
navigationOptions: ({ navigation }) => ({
title: `${navigation.state.params.title}`,
}),
},
},
**
{
headerMode: 'screen',
defaultNavigationOptions: {
cardStyle: { backgroundColor: '#FFFFFF' },
},
},
**
);
The correct prop to be set is sceneContainerStyle:
<BottomTab.Navigator
...
sceneContainerStyle={{ backgroundColor: 'white' }}
>
...
</BottomTab.Navigator>
Set in view that's where you want to set background colour
view: {
backgroundColor: '#FFFFFF'
}