AsyncStorage access in Material Top Tab Navigator React Native - react-native

I want to the change user profile pic, when user log into the system. User avator in left side corner in the Material Tab navigator. When user log in to the system I store the image url in AsyncStorage as profilePic.
I want to access AsyncStorage and get the profile pic here.
<Image
source={{
uri:
'https://cdn.apparelconnects.com/users_2_a34456c8-6d69-4b80-98f2-d184ff9f504d_img.png',
}}
I try to many ways. but I can not do this. Here I attached my code. Anyone know the access AsyncStorage here, please help me..
const TabNavigator = createMaterialTopTabNavigator(
{
Profile: {
screen: Logout,
navigationOptions: {
title: 'Home',
tabBarIcon: ({tintColor}) => (
<Image
source={{
uri:
'https://cdn.apparelconnects.com/users_2_a34456c8-6d69-4b80-98f2-d184ff9f504d_img.png',
}}
style={{
width: tabBarConfiguration.icon_size,
height: tabBarConfiguration.icon_size,
borderRadius: 40 / 2,
overflow: 'hidden',
borderWidth: tintColor == colors.orange ? 2 : 0,
borderColor: tintColor,
}}
/>
),
},
},
Home: {
screen: Home,
navigationOptions: {
title: 'Home',
tabBarIcon: ({tintColor}) => (
<Image
source={require('../asserts/images/home_icon.png')}
style={{
width: tabBarConfiguration.icon_size,
height: tabBarConfiguration.icon_size,
tintColor: tintColor,
}}
/>
),
},
},
{
initialRouteName: 'Home',
activeColor: '#f0edf6',
inactiveColor: '#3e2465',
barStyle: {backgroundColor: '#694fad'},
tabBarPosition: 'top',
swipeEnabled: true,
lazy: true,
tabBarOptions: {
showIcon: true,
showLabel: false,
activeTintColor: colors.orange,
inactiveTintColor: '#a1a1a1',
style: {
backgroundColor: '#ffffff',
height: hp('10%'),
},
labelStyle: {
textAlign: 'center',
fontWeight: 'bold',
},
indicatorStyle: {
backgroundColor: 'transparent',
},
},
defaultNavigationOptions: ({navigation}) => ({
tabBarOnPress: ({navigation, defaultHandler}) => {
if (
navigation.state.routeName === 'Profile' ||
navigation.state.routeName === 'More'
) {
return null;
}
defaultHandler();
},
}),
},
);
export default createAppContainer(TabNavigator);

Related

TabIcon count not updated if record is deleted on tab focus in react-native CLI

Regarding my question from SO: Mapping view not updating on tab navigator in react-native, I have added function to delete the product from cart. And yes the cart view is reducing after deleting, but the tabicon badge count is still on last count, until I press on any tab other than cart.
For adding product cart to object, yes it will update the count accordingly. Just when delete record from object, the count is not updated.
My script on cart screen has follow suggestion from linked posting:-
componentDidUpdate(prevProps) {
if (prevProps.isFocused !== this.props.isFocused) {
this.setState({ prodData: appGlobal.ObjProduct });
}
}
shouldComponentUpdate(nextProps, nextState) {
if (this.props.prodData !== nextState.prodData) {
return true;
}
return false;
}
On TabHelpers class:-
const tabScreen = createBottomTabNavigator(
{
'Home': {
screen: homeStack,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Icon name='home' size={20} color={tintColor} />
),
},
},
'Favourite': {
screen: favStack,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Icon name='heart' size={20} color={tintColor} />
),
},
},
'Cart': {
screen: cartStack,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<View>
<Icon name='shopping-cart' size={20} color={tintColor} />
{typeof appGlobal.ObjProduct !== 'undefined' && appGlobal.ObjProduct.length > 0 ?
<Badge style={{ position: 'absolute', right: 10, top: 0, height: 13 }}>
<Text style={{ color: 'white', fontSize: 8 }}>{appGlobal.ObjProduct.length}</Text>
</Badge>
: null}
</View>
),
},
},
'Profile': {
screen: profileStack,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Icon name='user' size={20} color={tintColor} />
),
},
}
},
{
initialRouteName: 'Home',
headerMode: 'none',
lazy: false,
backBehavior: 'initialRoute',
swipeEnabled: true,
animationEnabled: true,
tabBarPosition: 'bottom',
tabBarOptions: {
showLabel: true,
showIcon: true,
activeTintColor: '#ffffff',
activeBackgroundColor: '#4961c4',
inactiveTintColor: '#4962a6',
style: {
backgroundColor: '#475691',
},
labelStyle: {
textAlign: 'center',
fontWeight: 'bold',
},
indicatorStyle: {
borderBottomColor: '#FFFFFF',
borderBottomWidth: 2,
},
},
defaultNavigationOptions: ({ navigation }) => ({
tabBarOnPress: ({ navigation, defaultHandler }) => {
navigation.popToTop();
defaultHandler();
},
}),
}
);
export default createAppContainer(tabScreen);
Did I miss something or wrongly apply?

react-navigation-tabs - icons not aligned and covering text

I cant seem to get the icons to align using the new react-navigation-tabs.....some icons are sitting higher than others.
Also the icons are covering the labels and Id like to have some margin between icon and label.
I tried the code style={{textAlignVertical: 'center'}} for the icons (from another question on SO) but that did not work either
Below is code
import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
import IconFA from 'react-native-vector-icons/FontAwesome';
import IconMCI from 'react-native-vector-icons/MaterialCommunityIcons';
const ProfileTabBarIcon = ({tintColor}) => (
<IconFA
name="user-circle"
size={35}
color={tintColor}
/>
);
const SearchTabBarIcon = ({tintColor}) => (
<IconMCI
name="account-search"
size={45}
color={tintColor}
/*onPress={() => {
console.log('HELP!!');
this.props.navigation.navigate('Search');
}}*/
/>
);
const MessageTabBarIcon = ({tintColor}) => (
<IconFA
name="envelope"
size={35}
color={tintColor}
/>
);
const SignedInTabNav = createMaterialTopTabNavigator(
{
Profile: {
screen: Profile,
navigationOptions: {
tabBarLabel: 'Me',
tabBarIcon: ProfileTabBarIcon,
},
},
Search: {
screen: Search,
navigationOptions: {
tabBarLabel: 'Search',
tabBarIcon: SearchTabBarIcon,
},
},
Message: {
screen: Message,
navigationOptions: {
tabBarLabel: 'Message',
tabBarIcon: MessageTabBarIcon,
},
},
},
{
tabBarOptions: {
showIcon: true,
upperCaseLabel: false,
activeTintColor: '#42CBC8',
inactiveTintColor: '#9A9F99',
iconStyle: {
width: 'auto',
height: 20,
},
labelStyle: {
fontSize: 12,
},
style: {
backgroundColor: '#F8F8FF',
//borderBottomWidth: 2,
borderBottomColor: '#D3D3D3',
paddingVertical: 2,
height: 60,
},
},
animationEnabled: false,
},
);
....but this is what it looks like :(
Can anyone help?
I styled the first icon and you can change it as necessary to fit your needs and then apply those to the other two icons as well. If you need to understand what is going on better go ahead and apply backgroundColor attr to different elements. Simply, I wrapped the icon component in a View and then gave that view some styling to fit the icon appropriately.
import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
import IconFA from 'react-native-vector-icons/FontAwesome';
import IconMCI from 'react-native-vector-icons/MaterialCommunityIcons';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
import React from 'react';
import { StyleSheet, View } from 'react-native';
const ProfileTabBarIcon = ({tintColor}) => (
<View style={styles.container}>
<IconFA
style={styles.iconStyle}
name="user-circle"
size={35}
color={tintColor}
/>
</View>
);
const SearchTabBarIcon = ({tintColor}) => (
<IconMCI
name="account-search"
size={45}
color={tintColor}
/*onPress={() => {
console.log('HELP!!');
this.props.navigation.navigate('Search');
}}*/
/>
);
const MessageTabBarIcon = ({tintColor}) => (
<IconFA
name="envelope"
size={35}
color={tintColor}
/>
);
export default SignedInTabNav = createMaterialTopTabNavigator(
{
Profile: {
screen: HomeScreen,
navigationOptions: {
tabBarLabel: 'Me',
tabBarIcon: ProfileTabBarIcon,
},
},
Search: {
screen: LinksScreen,
navigationOptions: {
tabBarLabel: 'Search',
tabBarIcon: SearchTabBarIcon,
},
},
Message: {
screen: SettingsScreen,
navigationOptions: {
tabBarLabel: 'Message',
tabBarIcon: MessageTabBarIcon,
},
},
},
{
tabBarOptions: {
showIcon: true,
upperCaseLabel: false,
activeTintColor: '#42CBC8',
inactiveTintColor: '#9A9F99',
labelStyle: {
fontSize: 12,
margin: 0
},
iconStyle: {
flex: 1
},
style: {
backgroundColor: '#F8F8FF',
height: 65,
borderBottomColor: '#D3D3D3',
},
},
animationEnabled: false,
},
);
const styles = StyleSheet.create({
container: {
flex: 1,
width: 50,
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
}
});
I added an empty tabBarLabel in the tab screen, and included the text inside the tabBarIcon.
<Tab.Screen
name="Home"
component={MainStackNavigator}
options=
{{
tabBarLabel:"",
tabBarIcon:() =>
{
return(
<View>
<Text>Home</Text>
<Image
style={{ width:20,height:20 }}
source{require('./assets/home_white.png')}>
</Image>
</View>
)
}
}}
/>
set resizeMode in your style section
such as :
<Image
source={iconName}
style={{ width: 25, height: 25, tintColor }}
resizeMode={"contain"}
/>

I couldn't use react-navigation tab bar. How to use this?

Now I am trying to create React Native app on Expo and use React-Navigation Tab Bar but I could't.
Actually I don't get any error but this code below doesn't work.
No warning as well.
import { createBottomTabNavigator, createAppContainer } from 'react-
navigation';
import Icon from 'react-native-vector-icons/FontAwesome';
import Home from './src/Screens/Home';
import Help from './src/Screens/Help';
const App = createBottomTabNavigator(
{
Home: {
screen: Home,
defaultNavigationOptions: {
tabBarIcon: ({ tintColor }) => {
<Icon name="home" style={{ width: 25, height: 25, tintColor:
tintColor}}/>
},
title: 'Home',
},
},
Help: { screen: Help },
},
{
swipeEnabled: false, //Android用
tabBarOptions: {
activeTintColor: '#DE628D',
inactiveTintColor: '#707070',
},
},
);
export default createAppContainer(App);
the tab works fine, but if you meant, there's no icon, try this instead
navigationOptions: {
tabBarIcon: ({ tintColor, activeTintColor }) => (
<Icon name="home" size={24} color={tintColor} />)
},
Please try to implement this way. This is copy of my tabNavigator. Hope this will be helpful for you.
const TabRouter = createBottomTabNavigator(
{
HomeAfterLoginScreen: { screen: A },
ShowListAlertScreen: { screen: B },
ShowListProfessionScreen: { screen: C },
MyAccountScreen: { screen: F }
},
{
tabBarPosition: "bottom",
tabBarOptions: {
style: { backgroundColor: "#50bcb8" },
showIcon: true,
showLabel: true,
gesturesEnabled: true,
indicatorStyle: { borderBottomWidth: 3, borderBottomColor: Style.color },
inactiveTintColor: "#fff",
activeTintColor: "#fff",
tabStyle: { justifyContent: "center", alignItems: "center" }
}
});
I got it. I have solved this issue.
const App = createBottomTabNavigator(
{
Favorite: {
screen: FavoriteShops,
navigationOptions: {
tabBarLabel: 'お気に入り',
tabBarIcon: ({ tintColor }) => (
<Icon name="heart" size={25} color={tintColor} />
),
},
},
Home: {
screen: Home,
navigationOptions: {
tabBarLabel: 'ホーム',
tabBarIcon: ({ tintColor }) => (
<Icon name="home" size={30} color={tintColor} />
),
},
},
Help: {
screen: Help,
navigationOptions: {
tabBarLabel: 'その他',
tabBarIcon: ({ tintColor }) => (
<Icon name="bars" size={25} color={tintColor} />
),
},
},
},
{
swipeEnabled: false, //Android用
tabBarOptions: {
showIcon: true,
showLabel: true,
activeTintColor: '#DE628D',
inactiveTintColor: '#707070',
style: {
width: '100%',
height: 70,
},
tabStyle: {
paddingTop: 20,
},
},
},
);

React Native - Change background color in tabnavigator dynamically

i want to change my tab navigator background color dynamically in based on my API response so below is my code
_TabNavigator.js
const MyTabnav = TabNavigator({
ScreenOne: {
screen: ({ navigation, screenProps }) => <ScreenOneNav screenProps={{ tabbarNavigation: navigation, ...screenProps }} onNavigationStateChange={null} />,
navigationOptions: {
tabBarLabel: 'ScreenOne',
tabBarIcon: ({ tintColor }) => (
<View style={[styles.tabViewBox]}>
<Text style={[styles.tabText, { color: tintColor }]}>ScreenOne</Text>
</View>
)
}
},
ScreenTwo: {
screen: ({ navigation, screenProps }) => <ScreenOneNav screenProps={{ tabbarNavigation: navigation, ...screenProps, }} onNavigationStateChange={null} />,
navigationOptions: {
tabBarLabel: 'ScreenOne',
tabBarIcon: ({ tintColor }) => (
<View style={[styles.tabViewBox]}>
<Text style={[styles.tabText, { color: tintColor }]}>ScreenTwo</Text>
</View>
)
}
},
ScreenThree: {
screen: ({ navigation, screenProps }) => <StockNotificationNav screenProps={{ tabbarNavigation: navigation, ...screenProps }} onNavigationStateChange={null} />,
navigationOptions: {
tabBarLabel: 'Notifications',
tabBarIcon: ({ tintColor }) => (
<View style={[styles.tabViewBox]}>
<Text style={[styles.tabText, { color: tintColor }]}>ScreenThree</Text>
</View>
)
}
},
},
{
tabBarOptions: {
style: {
backgroundColor: white,
height: 55,
borderTopColor: 'transparent',
borderTopWidth: 1,
paddingRight: 10,
paddingLeft: 10,
borderTopWidth: 1,
borderTopColor: grayPlaceHolder
},
showLabel: false,
showIcon : true,
},
tabBarComponent : TabBarBottom,
initialRouteName: 'ScreenTwo',
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false
}, []);
var styles = StyleSheet.create({
tabText: {
fontSize: 10,
fontWeight: "600",
flex: 4,
},
tabViewBox: {
flex: 1,
alignItems: "center",
},
tabIcon: {
flex: 5,
alignSelf: "center",
marginTop: 10
},
});
export default StocksTabNav;
I want to change my tabnavigtor background color in my ScreenTwo.js file which include API response code on it as per that it tabnavigator background color (backgroundColor) should change as black or white as per API response so how can i achieve this? your all suggestions are appreciable
After update code as per Rahul suggests give below warning message
what you can do is make one custom tabBar component and using javaScript immutability concept you can override style of tabBarOptions.
const MyTabnav = TabNavigator({ScreenOne: {
screen: ({ navigation, screenProps }) => <ScreenOneNav screenProps={{ tabbarNavigation: navigation, ...screenProps }} onNavigationStateChange={null} />,
navigationOptions: {
tabBarLabel: 'ScreenOne',
tabBarIcon: ({ tintColor }) => (
<View style={[styles.tabViewBox]}>
<Text style={[styles.tabText, { color: tintColor }]}>ScreenOne</Text>
</View>
)
}
},
ScreenTwo: {
screen: ({ navigation, screenProps }) => <ScreenOneNav screenProps={{ tabbarNavigation: navigation, ...screenProps, }} onNavigationStateChange={null} />,
navigationOptions: {
tabBarLabel: 'ScreenOne',
tabBarIcon: ({ tintColor }) => (
<View style={[styles.tabViewBox]}>
<Text style={[styles.tabText, { color: tintColor }]}>ScreenTwo</Text>
</View>
)
}
},
ScreenThree: {
screen: ({ navigation, screenProps }) => <StockNotificationNav screenProps={{ tabbarNavigation: navigation, ...screenProps }} onNavigationStateChange={null} />,
navigationOptions: {
tabBarLabel: 'Notifications',
tabBarIcon: ({ tintColor }) => (
<View style={[styles.tabViewBox]}>
<Text style={[styles.tabText, { color: tintColor }]}>ScreenThree</Text>
</View>
)
}
},
},
{
tabBarOptions: {
style: {
backgroundColor: white,
height: 55,
borderTopColor: 'transparent',
borderTopWidth: 1,
paddingRight: 10,
paddingLeft: 10,
borderTopWidth: 1,
borderTopColor: grayPlaceHolder
},
showLabel: false,
showIcon : true,
},
//Here Goes Your CustomTabBar Component
tabBarComponent : CustomTabBarComponent,
initialRouteName: 'ScreenTwo',
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false
}, []);
CustomTabBarComponent.js
const TabBar = (props) => {
const { navigationState } = props;
let newProps = props;
newProps = Object.assign(
{},
props,
{
style: {
// get value from redux store and set it here
backgroundColor: 'rgba(0,0,0,0.1)',
position: 'absolute',
bottom: 0,
left: 0,
right: 0
},
activeTintColor: '#fff',
inactiveTintColor: '#bbb',
},
);
return <TabBarBottom {...newProps} />;
};
Now You can connect this CustomTabBarComponent with Redux store and can change the value of whatever Property you want.
What you need to do is set your tab component as a function and send the color as a parameter to that function. Try this:
const MyTabnav = color => TabNavigator({
ScreenOne: {
screen: ({ navigation, screenProps }) => <ScreenOneNav screenProps={{ tabbarNavigation: navigation, ...screenProps }} onNavigationStateChange={null} />,
navigationOptions: {
tabBarLabel: 'ScreenOne',
tabBarIcon: ({ tintColor }) => (
<View style={[styles.tabViewBox]}>
<Text style={[styles.tabText, { color: tintColor }]}>ScreenOne</Text>
</View>
)
}
},
ScreenTwo: {
screen: ({ navigation, screenProps }) => <ScreenOneNav screenProps={{ tabbarNavigation: navigation, ...screenProps, }} onNavigationStateChange={null} />,
navigationOptions: {
tabBarLabel: 'ScreenOne',
tabBarIcon: ({ tintColor }) => (
<View style={[styles.tabViewBox]}>
<Text style={[styles.tabText, { color: tintColor }]}>ScreenTwo</Text>
</View>
)
}
},
ScreenThree: {
screen: ({ navigation, screenProps }) => <StockNotificationNav screenProps={{ tabbarNavigation: navigation, ...screenProps }} onNavigationStateChange={null} />,
navigationOptions: {
tabBarLabel: 'Notifications',
tabBarIcon: ({ tintColor }) => (
<View style={[styles.tabViewBox]}>
<Text style={[styles.tabText, { color: tintColor }]}>ScreenThree</Text>
</View>
)
}
},
},
{
tabBarOptions: {
//use the color you passed in the prop here:
style: {
backgroundColor: color,
height: 55,
borderTopColor: 'transparent',
borderTopWidth: 1,
paddingRight: 10,
paddingLeft: 10,
borderTopWidth: 1,
borderTopColor: grayPlaceHolder
},
showLabel: false,
showIcon : true,
},
tabBarComponent : TabBarBottom,
initialRouteName: 'ScreenTwo',
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false
}, []);
var styles = StyleSheet.create({
tabText: {
fontSize: 10,
fontWeight: "600",
flex: 4,
},
tabViewBox: {
flex: 1,
alignItems: "center",
},
tabIcon: {
flex: 5,
alignSelf: "center",
marginTop: 10
},
});
export default MyTabNav;
Then where you use MyTabnav pass the color as a param to it. for example
export default class App extends Component<{}> {
constructor(props) {
super(props);
this.state = {
color: 'black'
};
}
getRandomColor = () => {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};
onPress = () => {
this.setState({
color: this.getRandomColor()
});
};
render() {
const Tabs = MyTabnav(this.state.color);
return (
<View style={{ flex: 1 }}>
<Button onPress={this.onPress} title="Click me" />
<Tabs />
</View>
);
}
}
try using
const tabBarOptions = {
// setting height 'null', and top 0 will change the color of pressed tab
indicatorStyle: {
height: null,
top: 0,
backgroundColor: "red",
borderBottomColor: "black",
borderBottomWidth: 3,
},
activeTintColor: "black",
pressColor: "white",
style: {
backgroundColor: "#ddc8be",
},
labelStyle: { fontSize: 13 },
};

How to get side by side icon and label in tab navigator

I am trying to achieve row-wise icon and label for a tab navigator in one of my project. I am able to set icon and label as per the default settings, but i want the icon to be on the left side and label on the right not as icon on top and label on bottom.
This is my code:
export const InnerTab = TabNavigator({
Map: {
screen: MapStack,
navigationOptions: {
tabBarLabel: 'Map',
tabBarIcon: (
<Image source={require('../logos/map.png')}
style={[styles.innerTabIcon, {color: '#ffffff'}]}
/>
)
},
},
List: {
screen: ListStack,
navigationOptions: {
tabBarLabel: 'List',
tabBarIcon: (
<Image source={require('../logos/list.png')}
style={[styles.innerTabIcon, {color: '#ffffff'}]}
/>
)
},
},
},
{
tabBarPosition: 'top',
animationEnabled: false,
swipeEnabled:false,
lazy:true,
tabBarOptions: {
upperCaseLabel: false,
showIcon: true,
activeBackgroundColor:'#2394C7',
inactiveBackgroundColor:'#77909F',
tabStyle:{
marginTop:(Platform.OS === 'ios') ? 0 : 0,
height : 40,
},
indicatorStyle: {
backgroundColor : '#2394C7',
height :(Platform.OS === 'ios') ? 53 : 63,
},
style :{
backgroundColor:'#77909F'
},
labelStyle: {
fontSize: 18,
fontWeight:'bold',
marginTop: 0,
color :'#ffffff'
},
},
});
I have gone through the docs but found none. But tried few ways but didnt work.
Is there any way i can achieve it??
You can add flexDirection:'row' to tabStyle under tabBarOptions.
Reference:
https://reactnavigation.org/docs/navigators/tab
tabBarOptions: {
upperCaseLabel: false,
showIcon: true,
activeBackgroundColor:'#2394C7',
inactiveBackgroundColor:'#77909F',
tabStyle:{
marginTop:(Platform.OS === 'ios') ? 0 : 0,
height : 40,
flexDirection: 'row'
},
labelPosition under tabBarOptions seems to have been designed for this.
Reference:
https://reactnavigation.org/docs/bottom-tab-navigator#labelposition
tabBarOptions={{
activeTintColor: 'blue',
inactiveTintColor: 'gray',
labelPosition: 'beside-icon',
}}
Use alignself in the image styling in your icons.
Screen4: {
screen: WalletScreen,
navigationOptions: {
tabBarLabel: 'Wallet',
tabBarIcon: () => (
<Image
source={require('./Images/wallet2.png')}
style={{
width: 40,
height: 40,
alignSelf: 'center',
}}
/>
),
},