Styjun

I am trying to assign icons to the bottom navigation, but I have created stack navigation and I am rendering them to bottom navigation. Please help me out as I am new to React Native. And I do not want to use createMaterialBottomNavigator

import React from "react";
import createStackNavigator, createAppContainer, createBottomTabNavigator from "react-navigation";
import Icon from "native-base";
import DoctorHome from "../containers/Home/DoctorHome/DoctorHome";
import Appointments from "../containers/DoctorFlow/Appointments/Appointments";
import EditProfile from "../containers/DoctorFlow/EditProfile/EditProfile";
import ViewClinic from "../containers/DoctorFlow/ViewClinic/ViewClinic";
import AddClinic from "../containers/DoctorFlow/AddClinic/AddClinic";
import Profile from "../containers/DoctorFlow/Profile/Profile";
import Proffession from "../containers/DoctorFlow/Profile/Proffession";
import Login from "../containers/Login/Login";
import SignUp from "../containers/SignUp/SignUp";
// import Splash from "../containers/SplashScreen";
import 
 View,
 Image,
 Touchable,
 TouchableHighlight,
 TouchableNativeFeedback,
 Platform
 from "react-native";

 const HomeStack = createStackNavigator (
 Home: DoctorHome,
 Appointments: Appointments,
 EditProfile: EditProfile
 );
 const ClinicStack = createStackNavigator (
 Clinic: ViewClinic,
 AddClinic: AddClinic
 );
 const ProfileStack = createStackNavigator (
 Profile: Profile,
 EditProfile: EditProfile,
 Proffession: Proffession
 );
 const LoginStack = createStackNavigator (
 Login: Login,
 SignUp: SignUp
 );
 const MainNavigator = createBottomTabNavigator(
 Home: HomeStack,
 Clinic: ClinicStack,
 Profile: ProfileStack,
 Login: LoginStack
);

export const AppNavigator = createAppContainer(MainNavigator);

Refer the code below to assign icons to bottom navigation.

 import React from 'react';
 import Text, View from 'react-native';
 import Ionicons from '@expo/vector-icons'; // 6.2.2
 import createBottomTabNavigator, createAppContainer from 'react-navigation';

 class HomeScreen extends React.Component 
 render() 
 return (
 <View style= flex: 1, justifyContent: 'center', alignItems: 'center' >
 <Text>Home!</Text>
 </View>
 );
 
 

 class SettingsScreen extends React.Component 
 render() 
 return (
 <View style= flex: 1, justifyContent: 'center', alignItems: 'center' >
 <Text>Settings!</Text>
 </View>
 );
 
 

 class IconWithBadge extends React.Component 
 render() 
 const name, badgeCount, color, size = this.props;
 return (
 <View style= width: 24, height: 24, margin: 5 >
 <Ionicons name=name size=size color=color />
 badgeCount > 0 && (
 <View
 style=
 // /If you're using react-native < 0.57 overflow outside of the parent
 // will not work on Android, see https://git.io/fhLJ8
 position: 'absolute',
 right: -6,
 top: -3,
 backgroundColor: 'red',
 borderRadius: 6,
 width: 12,
 height: 12,
 justifyContent: 'center',
 alignItems: 'center',
 >
 <Text style= color: 'white', fontSize: 10, fontWeight: 'bold' >
 badgeCount
 </Text>
 </View>
 )
 </View>
 );
 
 

 const HomeIconWithBadge = props => 
 // You should pass down the badgeCount in some other ways like context, redux, mobx or event emitters.
 return <IconWithBadge ...props />;
 ;

 const getTabBarIcon = (navigation, focused, tintColor) => 
 const routeName = navigation.state;
 let IconComponent = Ionicons;
 let iconName;
 if (routeName === 'Home') 
 iconName = `ios-information-circle$focused ? '' : '-outline'`;
 // We want to add badges to home tab icon
 IconComponent = HomeIconWithBadge;
 else if (routeName === 'Settings') 
 iconName = `ios-options$focused ? '' : '-outline'`;
 

 // You can return any component that you like here!
 return <IconComponent name=iconName size=25 color=tintColor />;
 ;

 export default createAppContainer(
 createBottomTabNavigator(
 
 Home: screen: HomeScreen ,
 Settings: screen: SettingsScreen ,
 ,
 
 defaultNavigationOptions: ( navigation ) => (
 tabBarIcon: ( focused, tintColor ) =>
 getTabBarIcon(navigation, focused, tintColor),
 ),
 tabBarOptions: 
 activeTintColor: 'tomato',
 inactiveTintColor: 'gray',
 ,
 
 )
 );