SwitchNavigator screens are never unmounted - react-navigation

I've implemented https://reactnavigation.org/docs/en/auth-flow.html as described with a SwitchNavigator. However, my AuthScreen is never unmounted when I navigate to App.
I'm, using a SwitchNavigator, with in it a screen and a DrawerNavigator, as well as some StackNavigators. I've tried changing the structure of my navigators, but that doesn't seem to have any effect.
const AppStack = createDrawerNavigator(
{
StackA: {
name: 'someStackNavigator',
screen: someStackNavigator
},
},
{
...
});
const AppNavigator = createSwitchNavigator(
{
App: AppStack,
Auth: {
screen: AuthScreen
}
},
{
initialRouteName: 'App'
});
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;
How do I force the Auth screen in the SwitchNavigator to be unmounted if you navigate to a screen in the other stacks/drawers?

Like this?
import React, { Component } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import {
createSwitchNavigator,
createStackNavigator,
createAppContainer,
createDrawerNavigator,
} from 'react-navigation';
class Screen extends Component {
render() {
return (
<View style={styles.container}>
<Text>Screen</Text>
</View>
);
}
}
class AuthScreen extends Component {
componentDidMount() {
console.log('componentDidMount');
}
componentWillUnmount() {
console.log('componentWillUnmount');
}
render() {
return (
<View style={styles.container}>
<Text>Auth Screen</Text>
<TouchableOpacity onPress={() => this.props.navigation.navigate('App')}>
<Text>Login</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
marginTop: 40,
justifyContent: 'center',
alignItems: 'center',
},
});
const SomeStackNavigator = createStackNavigator({
ScreenA: Screen,
ScreenB: Screen,
});
const AppStack = createDrawerNavigator({
StackA: {
name: 'StackA',
screen: SomeStackNavigator,
},
StackB: {
name: 'StackB',
screen: SomeStackNavigator,
},
});
const AppNavigator = createSwitchNavigator(
{
App: AppStack,
Auth: {
screen: AuthScreen,
},
},
{
initialRouteName: 'Auth',
},
);
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;
You can try it here. You can see in the console that AuthScreen is unmounted when the login button is clicked.

Related

React-slick with gatsby-plugin-image

I'm trying to use React-slick with gatsby-plugin images and I have the page setup like this.
import React from "react";
import { graphql } from "gatsby"
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { GatsbyImage } from "gatsby-plugin-image"
const settings = {
autoPlay: true,
arrows: false,
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
};
const ImgSlide = ({ data }) => {
return (
<div>
<Slider {...settings}>
<div>
<GatsbyImage fluid={data.image1.childImageSharp.fluid} />
</div>
<div>
<GatsbyImage fluid={data.image2.childImageSharp.fluid} />
</div>
</Slider>
</div>
);
};
export const pageQuery = graphql`
query {
image1: file(relativePath: { eq: "images/icon.png" }) {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
image2: file(relativePath: { eq: "images/icon.png" }) {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
`
export default ImgSlide;
When i run Gatsby develop I get an error saying image1 is not defined. I really don't know what I'm missing here. I think it has something to do with how I'm trying to define image1 but I'm pretty sure I've used relativePath properly unless I'm not specifying the location properly.
I do have the same image specified twice that is just because I have not imported the photos in just yet I'm just testing to make it work.
gatsby-config setup is
module.exports = {
siteMetadata: {
title: "Inkd Era",
description: "Clothing and brand built for tattoo and tattoed culture",
},
plugins: [
"gatsby-plugin-sass",
"gatsby-plugin-image",
"gatsby-plugin-react-helmet",
"gatsby-plugin-sitemap",
{
resolve: "gatsby-plugin-manifest",
options: {
icon: "src/images/icon.png",
},
},
"gatsby-transformer-remark",
"gatsby-plugin-sharp",
"gatsby-transformer-sharp",
{
resolve: "gatsby-transformer-remark",
options: {
plugins: [
{
resolve: "gatsby-remark-images",
options: {
maxWidth: 650,
},
},
],
},
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "images",
path: `${__dirname}/src/images/`,
},
__key: "images",
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "pages",
path: `${__dirname}/src/pages/`,
},
__key: "pages",
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `Inkd Era`,
short_name: `Inkd era`,
start_url: `/`,
background_color: `#000`,
theme_color: `#fafafa`,
display: `standalone`,
icon: `content/assets/gatsby-icon.png`,
},
},
],
};
The structure for the new <GatsbyImage> component when passing the image itself is using the image prop, not fluid. In addition, the query needs to fetch gatsbyImageData, not fluid as you can see in the docs:
import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
function BlogPost({ data }) {
const image = getImage(data.blogPost.avatar)
return (
<section>
<h2>{data.blogPost.title}</h2>
<GatsbyImage image={image} alt={data.blogPost.author} />
<p>{data.blogPost.body}</p>
</section>
)
}
export const pageQuery = graphql`
query {
blogPost(id: { eq: $Id }) {
title
body
author
avatar {
childImageSharp {
gatsbyImageData(
width: 200
placeholder: BLURRED
formats: [AUTO, WEBP, AVIF]
)
}
}
}
}
`
In your scenario, you are mixing the gatsby-image approach, from Gatsby v2 with the new gatsby-plugin-image, which stills in beta, but it's from the v3.
If you want to use the <GatsbyImage>, adapt the query and the component to the needs, otherwise, use the gatsby-image properly like:
import Img from `gatsby-image`
<Img fluid={data.image1.childImageSharp.fluid} />

The component for route must be a react component Search : MyScreen

The component for route 'FilmDetail' must be a React Component
I'm trying to use react-navigation but I can't get it to work. I've tried removing brackets while importing and can still reproduce the error:
Navigaton.js
import React from 'react'
import { StyleSheet, Image } from 'react-native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
import { createStackNavigator } from 'react-navigation-stack'
import { createAppContainer } from 'react-navigation'
import Search from '../Components/Search'
import FilmDetail from '../Components/FilmDetail'
import Favorites from '../Components/Favorites'
const SearchStackNavigator = createStackNavigator({
Search: {
screen: Search,
navigationOptions: {
title: 'Rechercher'
}
},
FilmDetail: {
screen: FilmDetail
}
})
const MoviesTabNavigator = createBottomTabNavigator(
{
Search: {
screen: SearchStackNavigator,
navigationOptions: {
tabBarIcon: () => {
return <Image
source={require('../Images/ic_search.png')}
style={styles.icon}/>
}
}
},
Favorites: {
screen: Favorites,
navigationOptions: {
tabBarIcon: () => {
return <Image
source={require('../Images/ic_favorite.png')}
style={styles.icon}/>
}
}
}
},
{
tabBarOptions: {
activeBackgroundColor: '#DDDDDD',
inactiveBackgroundColor: '#FFFFFF',
showLabel: false,
showIcon: true
}
}
)
const styles = StyleSheet.create({
icon: {
width: 30,
height: 30
}
})
export default createAppContainer(MoviesTabNavigator)
App.js
import React from 'react'
import Navigation from './Navigation/Navigation'
import { Provider } from 'react-redux'
import Store from './Store/configureStore'
export default class App extends React.Component {
render() {
return (
<Provider store={Store}>
<Navigation/>
</Provider>
)
}
}
FilmDetail.js
import React from 'react'
import { StyleSheet, View, Text, ActivityIndicator, ScrollView, Image, Button ,TouchableOpacity} from 'react-native'
import {getImageFromApi} from '../API/TMDBApi'
import getFilmDetailFromApi from '../API/TMDBApi'
import moment from 'moment'
import numeral from 'numeral'
import { connect } from 'react-redux'
class FilmDetail extends React.Component {
constructor(props) {
super(props)
this.state = {
film: undefined,
isLoading: true
}
}
componentDidMount() {
getFilmDetailFromApi(this.props.navigation.state.params.idFilm).then(data => {
this.setState({
film: data,
isLoading: false
})
})
}
componentDidUpdate() {
console.log("componentDidUpdate : ")
console.log(this.props.favoritesFilm)
}
_displayLoading() {
if (this.state.isLoading) {
return (
<View style={styles.loading_container}>
<ActivityIndicator size='large' />
</View>
)
}
}
_toggleFavorite() {
const action = { type: "TOGGLE_FAVORITE", value: this.state.film }
this.props.dispatch(action)
}
_displayFavoriteImage() {
var sourceImage = require('../Images/ic_favorite_border.png')
if (this.props.favoritesFilm.findIndex(item => item.id === this.state.film.id) !== -1) {
// Film dans nos favoris
sourceImage = require('../Images/ic_favorite.png')
}
return (
<Image
style={styles.favorite_image}
source={sourceImage}
/>
)
}
_displayFilm() {
const { film } = this.state
if (film != undefined) {
return (
<ScrollView style={styles.scrollview_container}>
<Image
style={styles.image}
source={{uri: getImageFromApi(film.backdrop_path)}}
/>
<Text style={styles.title_text}>{film.title}</Text>
<TouchableOpacity style={styles.favorite_container} onPress={() => this._toggleFavorite()}>{this._displayFavoriteImage()}</TouchableOpacity>
<Text style={styles.description_text}>{film.overview}</Text>
<Text style={styles.default_text}>Sorti le {moment(new Date(film.release_date)).format('DD/MM/YYYY')}</Text>
<Text style={styles.default_text}>Note : {film.vote_average} / 10</Text>
<Text style={styles.default_text}>Nombre de votes : {film.vote_count}</Text>
<Text style={styles.default_text}>Budget : {numeral(film.budget).format('0,0[.]00 $')}</Text>
<Text style={styles.default_text}>Genre(s) : {film.genres.map(function(genre){
return genre.name;
}).join(" / ")}
</Text>
<Text style={styles.default_text}>Companie(s) : {film.production_companies.map(function(company){
return company.name;
}).join(" / ")}
</Text>
</ScrollView>
)
}
}
render() {
return (
<View style={styles.main_container}>
{this._displayLoading()}
{this._displayFilm()}
</View>
)
}
}
const styles = StyleSheet.create({
main_container: {
flex: 1
},
loading_container: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'
},
scrollview_container: {
flex: 1
},
image: {
height: 169,
margin: 5
},
title_text: {
fontWeight: 'bold',
fontSize: 35,
flex: 1,
flexWrap: 'wrap',
marginLeft: 5,
marginRight: 5,
marginTop: 10,
marginBottom: 10,
color: '#000000',
textAlign: 'center'
},
description_text: {
fontStyle: 'italic',
color: '#666666',
margin: 5,
marginBottom: 15
},
default_text: {
marginLeft: 5,
marginRight: 5,
marginTop: 5,
},favorite_container: {
alignItems: 'center'
},favorite_image: {
width: 40,
height: 40
}
})
const mapStateToProps = (state) => {
return {
favoritesFilm: state.favoritesFilm
}
}
export default connect(mapStateToProps)(FilmDetail)
Your displayLoading and displayFilm functions need to return null. Currently they only return if the happy path is followed, but that can lead to weird stuff happening if they don't return null for the other paths where they shouldn't display themselves.
I'm not sure if that will fix your error or not, I am not seeing anything else sticking out to me, but I would implement that and see if your issue goes away.
If that doesn't work, try not using React-Navigation for a second and just import/render the FilmDetail component by itself to see if a different error comes up that may be the underlying issue.
If not let me know and I'll look again.
I fix it by changing my "react-navigation": "^1.6.1" to "react-navigation": "^4.3.9" and instead of using #react-navigation/bottom-tabs i tried using react-navigation-tabs

Expo React Native with redux: The component for route must be react component

I'm using React Active with Redux on Expo and tried to run my project on Android and getting below error:
enter image description here
Versions:
Expo: 36.0.0
React: 16.9.0
React-Native: 36.0.0 SDK
Redux: 4.0.2
React-Redux: 5.1.1
App.js
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';
// import Store from './src/redux/Store';
import configureStore from './src/redux/Store';
import AppNavigator from './src/navigation/AppNavigator'
const store = configureStore();
export default function App() {
return (
<Provider store={store}>
<AppNavigator></AppNavigator>
</Provider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
=============================================
AppNavigation.js
import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import Products from '../screens/Products';
import Checkout from '../screens/Checkout';
import Receipt from '../screens/Receipt';
import themes from '../styles/theme.style';
const AppNavigator = createStackNavigator({
Products: {
screens: Products
},
Checkout: {
screens: Checkout
},
Receipt: {
screens: Receipt
}
}, {
navigationOptions: {
headerStyles: {
backgroundColor: themes.BACKGROUND_COLOR,
paddingHorizontal: 10,
},
headerTintColor: '#fff'
}
}
);
export default AppNavigator;
========================================================
Product.js
import React, { Component } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import Product from '../components/Product';
import { addToCart } from '../redux/actions/CartActions';
import { fetchProducts } from '../redux/actions/ProductAction';
import Logo from '../components/Logo';
import Cart from '../components/Cart';
class Products extends React.Component {
static navigationOptions = ({navigation}) => {
return {
headerTitle: 'Products',
headerLeft: <Logo navigation={navigation}/>,
headerRight: <Cart navigation={navigation}/>
}
}
constructor(props) {
super(props);
}
componentWillMount = () => {
this.props.fetchProducts();
}
addItemsToCart = (product) => {
this.props.addToCart(product);
}
render() {
const { products, navigation } = this.props
return (
<View style={styles.container}>
<View style={styles.body}>
<FlatList
data={products}
renderItem={({item}) => <Product item={item} addItemsToCart={this.addItemsToCart} product={item}/>}
keyExtractor ={(item) => item.id}
ItemSeparatorComponent= {()=> <View style={{height:0.5, backgroundColor:'#34495e90'}}/> }/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
body: {
flex: 1,
justifyContent: 'center'
}
});
const mapStateToProps = (state) => ({
products: state.products.items
})
export default connect(mapStateToProps, {addToCart,fetchProducts})(Products);
I don't know wat is wrong here, I tried with multiple options but no luck. Any suggestions will be appreciated.
Run command:
expo-cli start
Check where you are importing from.
import {createStackNavigator } from 'react-navigation/stack';

How to get props value through drawer navigator

How to get the userdata props value in head component ?I am mapping state to
props but not able to take that value in head component.How to pass this.
Passing values to Higher order component.Provinding the code.Can someone
please go through it. How to get the userdata props value in head component ?I am mapping state to
props but not able to take that value in head component.How to pass this.
Passing values to Higher order component.Provinding the code.Can someone
please go through it
import React from "react";
import {Image, Text, View, ToastAndroid} from "react-native";
import {createDrawerNavigator} from 'react-navigation-drawer';
import {createMaterialTopTabNavigator, createStackNavigator, createAppContainer,DrawerActions} from "react-navigation";
import {Icon} from 'react-native-elements';
import DrawerContent from "./DrawerContent";
import {connect} from "react-redux";
import FirstList from "./FirstList";
import SecList from "./SecList";
import ThirList from "./ThirList";
import color from "../util/Colors";
import DashBoard from "./DashBoard";
const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const TabNavigator = createMaterialTopTabNavigator(
{
FirstList : FirstList ,
SecList : SecList ,
},
{
tabBarOptions: {
labelStyle: {fontSize: 13},
activeTintColor: color.basecolor,
inactiveTintColor: 'black',
scrollEnabled: false,
style: {
backgroundColor: 'white',
height:45
},
indicatorStyle: {
backgroundColor: color.basecolor,
}
},
title: 'Details',
}
);
const StackNavigator1 = createStackNavigator({
TabNavigator: {
screen: TabNavigator,
navigationOptions:({navigation})=>{
return{
header: (
<Head/>
)
}
},
},
List: {
screen: ThirList
navigationOptions:({navigation})=>{
return{
header: null
}
},
},
});
const RootNav = createAppContainer(StackNavigator1);
var name;
class Head extends React.Component {
constructor(props) {
super(props);
name='';
var today = new Date();
this.state = {
'date': today.getDate() + " " + monthNames[today.getMonth()] + " " + today.getFullYear()
};
console.log(JSON.stringify(this.props)+"userdata");
}
render() {
const {date} = this.state;
return (
<View>
<View style={{flexDirection: 'row', backgroundColor: color.mainback, height: 40,padding:10}}>
<Text style={{
fontSize: 14,
textAlign: 'left',
marginLeft: 10,
flex:1,
color:color.textcolor,
fontWeight:'bold',
textAlignVertical: "center"
}}>Orders</Text>
<Text style={{
fontSize: 10,
textAlign: 'right',
marginLeft: 20,
marginRight: 20,
fontWeight: 'bold',
color:color.datetextcolor,
textAlignVertical: "center"
}}>{date}</Text>
</View>
</View>
);
}
}
class RootScreen extends React.Component {
render() {
return (
<View style={{flex: 1}}>
<RootNav/>
</View>
);
}
}
const StackNavigator = createStackNavigator({
DrawerNavigator: {
screen: RootScreen,
activeTintColor: color.basecolor,
navigationOptions: ({navigation}) => ({title: 'Home'}, {
headerLeft:
<View style={{flexDirection: 'row', marginLeft: 20}}>
<Icon name="menu" onPress={()=>navigation.dispatch(DrawerActions.toggleDrawer())} size={30} color="white"/>
<Image source={require('../images/logo.png')}
style={{height: 35, width: 150, resizeMode: 'contain'}}/>
</View>,
}
),
},
Dashboard: {
screen: DashBoard,
navigationOptions: {
headerTitle: (
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
<View style={{flex: 1, justifyContent: 'center'}}>
<Image
source={require('../images/logo.png')}
style={{height: 35, width: 150, marginLeft: -20, resizeMode: 'contain'}}
/>
</View>
</View>
),
},
},
}, {
defaultNavigationOptions: {
headerTintColor: 'white',
headerStyle: {
backgroundColor: color.basecolor,
},
}
}
);
const DrawerNavigator = createDrawerNavigator(
{
Home: StackNavigator
},
{
contentComponent: DrawerContent,
drawerWidth: 280,
navigationOptions: {
header: null
},
}
);
function mapStateToProps(state) {
return {
userdata: state.auth.userdata
}
}
export default connect(mapStateToProps) (DrawerNavigator);
Your aim is to connect Head component to Redux Store, right?
Simply using connect() function will suffice.
The solution would be to add this line of code.
const NewHead = connect(mapStateToProps)(Head)
Replace the <Head/> with <NewHead/> in StackNavigator1
Then, access the data within the Head component in the following manner.
this.props.userdata
OR
If you want to pass data to routes when you navigate to them, you can refer to this documentation.

react-navigation Android Tabbar not displaying correctly

I followed the react-navigation API instructions as in the link (https://reactnavigation.org/docs/tab-based-navigation.html) and created Tabbar app with TabNavigator stack and each tab has StackNavigator screens. I purposefully commented the tabBarComponent and tabBarPosition because I want the Tabs to appear like native for Android (Top Tabbbar) and IOS (Bottom Tabbar) with same code base. The IOS Tab bar works correctly but when I look at the Android tabbar, the top portion of the tab bar is overlap/overflowing to the Android status bar (I mean the section where the time, battery and wifi symbols appear). Also, the icons and label font size are bigger compared to IOS tab bar size which makes the label to wrap to next line (see "Abcd's ef" tab). What needs to be done, in order for the Android Tabbar to show correctly like the IOS tabbar but at the top i.e., without overflow, wrap text and correct icon and label size. I have provided below the code as well as screenshots of Android and IOS Tabbar.
FYI, I am using Expo on Android and IOS device (not simulators) with create-react-native-app application
[IOS][1]
[Android][2]
[Android Screen with issue details][3]
***Commented Code:***
//tabBarComponent: TabBarBottom,
//tabBarPosition: 'bottom',
***Codes:***
<code>
import React, { Component } from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';
import FirstScreen from './tabs/FirstScreen';
//import SecondScreen from './tabs/SecondScreen';
import FagsHome from './FagsHome';
import Movies from './Movies';
import MenuSecondScreen from './MenuSecondScreen';
import ThirdScreen from './tabs/ThirdScreen';
import FourthScreen from './tabs/FourthScreen';
import FifthScreen from './tabs/FifthScreen';
import { TabNavigator, TabBarBottom, StackNavigator } from 'react-navigation';
import IconOcticons from 'react-native-vector-icons/Octicons';
import IconFontAwesome from 'react-native-vector-icons/FontAwesome';
// What's Up
const WhatsupStackMain = StackNavigator(
{
FirstScreen: {
screen: FirstScreen,
},
Movies: {
screen: Movies,
},
},
{
initialRouteName: 'FirstScreen',
}
);
const WhatsupStack = StackNavigator(
{
Main: {
screen: WhatsupStackMain,
},
MenuFags: {
screen: MenuSecondScreen,
},
},
{
mode: 'card',
headerMode: 'none',
}
);
// Fags
const FagsStackMain = StackNavigator(
{
FagsHome: {
screen: FagsHome,
},
Movies: {
screen: Movies,
},
},
{
initialRouteName: 'FagsHome',
}
);
const FagsStack = StackNavigator(
{
Main: {
screen: FagsStackMain,
},
MenuFags: {
screen: MenuSecondScreen,
},
},
{
mode: 'card',
headerMode: 'none',
}
);
// Tags
const TagsStackMain = StackNavigator(
{
ThirdScreen: {
screen: ThirdScreen,
},
Movies: {
screen: Movies,
},
},
{
initialRouteName: 'ThirdScreen',
}
);
const TagsStack = StackNavigator(
{
Main: {
screen: TagsStackMain,
},
MenuFags: {
screen: MenuSecondScreen,
},
},
{
mode: 'card',
headerMode: 'none',
}
);
// Settings
const SettingsStackMain = StackNavigator(
{
FourthScreen: {
screen: FourthScreen,
},
Movies: {
screen: Movies,
},
},
{
initialRouteName: 'FourthScreen',
}
);
const SettingsStack = StackNavigator(
{
Main: {
screen: SettingsStackMain,
},
MenuFags: {
screen: MenuSecondScreen,
},
},
{
mode: 'card',
headerMode: 'none',
}
);
// Profile
const ProfileStackMain = StackNavigator(
{
FifthScreen: {
screen: FifthScreen,
},
Movies: {
screen: Movies,
},
},
{
initialRouteName: 'FifthScreen',
}
);
const ProfileStack = StackNavigator(
{
Main: {
screen: ProfileStackMain,
},
MenuFags: {
screen: MenuSecondScreen,
},
},
{
mode: 'card',
headerMode: 'none',
}
);
// Tabs
export default TabNavigator(
{
'Abcd\'s ef': { screen: WhatsupStack },
Ghij: { screen: FagsStack },
Klmn: { screen: TagsStack },
Settings: { screen: SettingsStack },
Profile: { screen: ProfileStack },
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Abcd\'s ef') {
//iconName = `ios-information-circle${focused ? '' : '-outline'}`;
//return <Icon name={focused ? 'globe' : 'globe'} size={22}
//style={{ color: focused ? '#ff0066' : 'black'}}/>;
return <IconOcticons name={'globe'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>;
} else if (routeName === 'Ghij') {
//iconName = `ios-options${focused ? '' : '-outline'}`;
return <IconFontAwesome name={'users'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>
} else if (routeName === 'Klmn') {
//iconName = `ios-options${focused ? '' : '-outline'}`;
return <IconFontAwesome name={'heart'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>
} else if (routeName === 'Settings') {
//iconName = `ios-options${focused ? '' : '-outline'}`;
return <IconOcticons name={'gear'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>
} else if (routeName === 'Profile') {
//iconName = `ios-options${focused ? '' : '-outline'}`;
return <IconFontAwesome name={'user'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>
}
// You can return any component that you like here! We usually use an
// icon component from react-native-vector-icons
//return <Ionicons name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: '#ff0066',
inactiveTintColor: 'gray',
showIcon: true,
upperCaseLabel: false,
},
//tabBarComponent: TabBarBottom,
//tabBarPosition: 'bottom',
animationEnabled: true,
swipeEnabled: true,
}
);
</code>
[1]: https://i.stack.imgur.com/0oVwG.png
[2]: https://i.stack.imgur.com/QQhN4.png
[3]: https://i.stack.imgur.com/oFeiG.png
use allowFontScaling:false in tabBarOptions , by adding this font size will not scale on the basis of devices fontSize.
tabBarOptions:{
allowFontScaling:false
}

Resources