React Native Screen white blinking when moving between tabs - react-native

im working on a App and im Using a BottomTabBar and in there are StackNavigators. When i switch the screens the screens gets white, it seems like they are loading. but i just want it without a loading animation or transition. i just want it like whatsapp or instagram so i can swap between my screens but i need a header for my application.
import React from "react";
import News from "../screens/News";
import Favorites from "../screens/Favorites";
import NewRecipe from "../screens/NewRecipe";
import Ingredients from "../screens/Ingredients";
import Profile from "../screens/Profile";
import { NavigationContainer } from "#react-navigation/native";
import { createMaterialBottomTabNavigator } from "#react-navigation/material-bottom-tabs";
import { MaterialIcons } from "#expo/vector-icons";
import { SafeAreaView } from "react-native-safe-area-context";
import { createStackNavigator } from "#react-navigation/stack";
export default function AppScreen() {
const Tab = createMaterialBottomTabNavigator();
const NewsStack = createStackNavigator();
const FavoritesStack = createStackNavigator();
const NewRecipeStack = createStackNavigator();
const IngredientsStack = createStackNavigator();
const ProfileStack = createStackNavigator();
function NewsNav() {
return (
<NewsStack.Navigator
screenOptions={{
animationEnabled: false,
}}
>
<NewsStack.Screen
name="News"
component={News}
options={{
headerTintColor: "#277093",
headerStyle: {
backgroundColor: "#272727",
height: 75,
},
headerTitleStyle: {
marginTop: -15,
},
animationEnabled: false,
}}
/>
</NewsStack.Navigator>
);
}
function FavoritesNav() {
return (
<FavoritesStack.Navigator>
<FavoritesStack.Screen
name="Favoriten"
component={Favorites}
options={{
headerTintColor: "#277093",
headerStyle: {
backgroundColor: "#272727",
height: 75,
},
headerTitleStyle: {
marginTop: -15,
},
}}
/>
</FavoritesStack.Navigator>
);
}
function NewRecipeNav() {
return (
<NewRecipeStack.Navigator
screenOptions={{
cardStyle: {
opacity: 1,
},
}}
>
<NewRecipeStack.Screen
name="Neue Rezepte"
component={NewRecipe}
options={{
headerTintColor: "#277093",
headerStyle: {
backgroundColor: "#272727",
height: 75,
},
headerTitleStyle: {
marginTop: -15,
},
}}
/>
</NewRecipeStack.Navigator>
);
}
function IngredientsNav() {
return (
<IngredientsStack.Navigator>
<IngredientsStack.Screen
name="Zutaten"
component={Ingredients}
options={{
headerTintColor: "#277093",
headerStyle: {
backgroundColor: "#272727",
height: 75,
},
headerTitleStyle: {
marginTop: -15,
},
}}
/>
</IngredientsStack.Navigator>
);
}
function ProfileNav() {
return (
<ProfileStack.Navigator>
<ProfileStack.Screen
name="Profil"
component={Profile}
options={{
headerTintColor: "#277093",
headerStyle: {
backgroundColor: "#272727",
height: 75,
},
headerTitleStyle: {
marginTop: -15,
},
}}
/>
</ProfileStack.Navigator>
);
}
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({}) => {
let iconName;
if (route.name == "News") {
iconName = "language";
} else if (route.name == "Favoriten") {
iconName = "star-border";
} else if (route.name == "Hinzufügen") {
iconName = "add-circle-outline";
} else if (route.name == "Zutaten") {
iconName = "shopping-cart";
} else if (route.name == "Profil") {
iconName = "person";
}
return (
<MaterialIcons
name={iconName}
color={"#277093"}
size={25}
></MaterialIcons>
);
},
})}
tabBarOptions={{
activeTintColor: "green",
}}
barStyle={{ backgroundColor: "#272727" }}
>
<Tab.Screen
name="News"
component={NewsNav}
options={{ animationEnabled: false }}
/>
<Tab.Screen name="Favoriten" component={FavoritesNav} />
<Tab.Screen name="Hinzufügen" component={NewRecipeNav} />
<Tab.Screen name="Zutaten" component={IngredientsNav} />
<Tab.Screen name="Profil" component={ProfileNav} />
</Tab.Navigator>
</NavigationContainer>
);
}
nsition but i cant fix it

Lower react-native-screen package version to 2.18.1 . Solution was obtained from this discussion.
https://github.com/react-navigation/react-navigation/issues/9593
Other solutions like setting the theme in Navigation Container, setting the cardInterpolatorStyle, and other modifications to the screen options of the navigator did not work.
This issue was visible only on Android in my case.

Related

react-native navigation. Drawer not opening after package update

I am make using react-native. I recently had to update my react-navigation package to version 6. The issue is my drawer will no longer open and I cannot figure out how to fix it.
This is may code for my navigation:
import React from 'react';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { createStackNavigator } from '#react-navigation/stack';
import { StyleSheet, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/dist/FontAwesome5';
import IonIcon from 'react-native-vector-icons/dist/Ionicons';
import { useNavigation } from '#react-navigation/native';
import { HomeScreen } from '../../screens/app/home/home.screen';
import HistoryScreen from '../../screens/app/history/history.screen';
import { SignoffScreen } from '../../screens/app/signoff/signoff.screen';
import NotificationsScreen from '../../screens/app/notifications/notifications.screen';
import useTheme from '../../theme/hooks/useTheme';
import { AppStackList, AppStackProps, DrawerList } from './types';
import { Colors } from '../../theme/Variables';
import CustomDrawerContent from '../../components/molecules/custom-drawer';
import { common } from '../../theme/Common';
import { FormScreen } from '../../screens/app/form/form.screen';
import { Menu } from '../../assets';
const AppStack = createStackNavigator<AppStackList>();
const Drawer = createDrawerNavigator<DrawerList>();
const renderIcon = (name: string, ion: boolean) => {
if (ion) {
return <IonIcon name={name} style={styles.iconStyle} />;
}
return <Icon name={name} style={styles.iconStyle} />;
};
const NotificationsNavigator = () => {
const { Gutters } = useTheme();
const navigation = useNavigation<AppStackProps>();
return (
<TouchableOpacity
style={(common.navIconStyle, Gutters.regularRMargin)}
delayPressIn={0}
onPress={navigation.navigate('Notifications', { screen: 'NotificationsScreen' })}
>
<IonIcon name="notifications-outline" style={common.navIconStyle} />
</TouchableOpacity>
);
};
const MenuNavigator = () => {
const navigation = useNavigation<AppStackProps>();
return (
<TouchableOpacity>
<Menu name="notifications-outline" style={common.navIconStyle} />
</TouchableOpacity>
);
};
const historyDrawerOptions = {
headerShown: false,
title: '',
drawerIcon: () => renderIcon('tasks', false),
headerTintColor: Colors.black,
headerRight: NotificationsNavigator,
};
const AppNavigator = () => {
const { Custom } = useTheme();
return (
<AppStack.Navigator screenOptions={Custom.globalNavigatorScreenOptions}>
<AppStack.Screen
name="App Home"
component={DrawerNavigator}
options={{ headerShown: false }}
/>
<AppStack.Screen
name="NotificationsScreen"
component={NotificationsScreen}
options={{ headerShown: false }}
/>
<AppStack.Screen name="FormScreen" component={FormScreen} options={{ headerShown: false }} />
<AppStack.Screen
name="SignoffScreen"
component={SignoffScreen}
options={{ headerShown: false }}
/>
</AppStack.Navigator>
);
};
const DrawerNavigator = () => (
<Drawer.Navigator
drawerStyle={styles.drawerStyle}
drawerContentOptions={{
activeTintColor: Colors.primary,
inactiveTintColor: Colors.white,
labelStyle: {
color: Colors.white,
},
}}
drawerContent={() => <CustomDrawerContent />}
>
<Drawer.Screen
name="Home"
component={HomeScreen}
options={{
headerShown: true,
headerTitle: '',
headerTransparent: true,
headerStyle: {
height: 120,
backgroundColor: '#fff',
},
headerTitleAlign: 'center',
headerTintColor: '#002C5F',
headerRight: NotificationsNavigator,
headerRightContainerStyle: {
width: 100,
marginRight: 8,
},
headerLeft: MenuNavigator,
drawerActiveTintColor: Colors.white,
drawerInactiveTintColor: Colors.white,
drawerLabelStyle: { fontSize: 15 },
}}
/>
<Drawer.Screen name="History" component={HistoryScreen} options={historyDrawerOptions} />
</Drawer.Navigator>
);
export default AppNavigator;
The draw was working before the update but now after it wont open? My NotificationsNavigator will also not open to its screen. Can anyone help???

react-navigation : how to hidden the line which on the TabBar top

I'm a React-Native tyro,
when I try to customed the Tab-Navigation ,
I found this line that I couldn't hidden it(that white line!).
pic
I tried to set borderColor:'00000000',but it didn't work
Please help me😥.
===============================================================================
this is my code👇
import React from 'react';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import Home from '../screens/Home';
import Me from '../screens/Me';
import { View, Image, Text } from 'react-native';
const Tab = createBottomTabNavigator();
export default () => {
return (
<Tab.Navigator
initialRouteName="Home"
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconSrc;
if (route.name === 'Home') {
iconSrc = require('../assets/img/影院.png');
} else if (route.name === 'Me') {
iconSrc = require('../assets/img/我的.png');
}
// You can return any component that you like here!
return (
<Image
source={iconSrc}
resizeMode="contain"
style={{
width: 25,
height: 25,
tintColor: focused ? '#FFCF64' : '#6D6D72'
}}
/>
);
},
tabBarActiveTintColor: '#FFCF64',
tabBarInactiveTintColor: '#6D6D72',
tabBarStyle: {
position: 'absolute',
borderRadius: 25,
height: 65,
borderColor: '#333',
backgroundColor: '#1a1a1a',
bottom: 30,
left: 10,
right: 10
},
tabBarItemStyle: {
height: 65
}
})}
>
<Tab.Screen
name="Home"
component={Home}
options={{
headerShown: false,
tabBarShowLabel: false
}}
/>
<Tab.Screen
name="Me"
component={Me}
options={{
headerShown: false,
tabBarShowLabel: false
}}
/>
</Tab.Navigator>
);
};
sorry,I'm fixed it up.
add this code in tabBarStyle:'#00000000'

React Native Navigation. How to add component to bottom stack navigator but not display it

I want to add a component (let's say "Autobus") to bottom stack navigator so it will receive "navigation" argument, and I will be able to navigate to "Autobus" component - navigation.navigate('Autbous'). However, I do not want to actually display "Autobus" component in the "Tab.Navigator".
I have the following code:
import React from 'react'
import { Ionicons } from '#expo/vector-icons'
import { StyleSheet, View, TouchableOpacity } from 'react-native'
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs'
import THEME from '../theme'
import PostsScreen from '../screens/PostsScreen'
import CreateScreen from '../screens/CreateScreen'
import ProfileScreen from '../screens/ProfileScreen'
const Tab = createBottomTabNavigator()
const Tabs = () => {
return (
<Tab.Navigator
initialRouteName='Posts'
screenOptions={{
tabBarShowLabel: false,
tabBarStyle: { ...styles.tab, ...styles.shadow }
}}
>
<Tab.Screen
name='Profile'
component={ProfileScreen}
options={{
tabBarIcon: ({ focused }) => (
<CustomTabIcon focused={focused} iconName='person' />
)
}}
/>
<Tab.Screen
name='Create'
component={CreateScreen}
options={{
// tabBarShowLabel: true,
tabBarIcon: ({ focused }) => (
<CustomTabIcon focused={focused} iconName='add' />
),
tabBarButton: props => <CustomCircleButton {...props} />
}}
/>
<Tab.Screen
name='Posts'
component={PostsScreen}
options={{
tabBarIcon: ({ focused }) => (
<CustomTabIcon focused={focused} iconName='search' />
)
}}
/>
</Tab.Navigator>
)
}
const CustomTabIcon = ({ focused, iconName }) => {
return (
<Ionicons
size={24}
color={THEME.INFO_COLOR}
name={focused ? iconName : `${iconName}-outline`}
/>
)
}
const CustomCircleButton = ({ children, onPress }) => {
return (
<TouchableOpacity
onPress={onPress}
style={{
...styles.center,
...styles.shadow
}}
>
<View style={styles.circle}>{children}</View>
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
tab: {
position: 'absolute',
bottom: 15,
left: 20,
right: 20,
elevation: 0,
backgroundColor: 'white',
borderRadius: 15,
height: 70
},
shadow: {
shadowColor: '#7f5df0',
shadowOffset: {
width: 0,
height: 10
},
shadowOpacity: 0.25,
shadowRadius: 3.5,
elevation: 5
},
center: {
top: -20,
justifyContent: 'center',
alignItems: 'center'
},
circle: {
width: 70,
height: 70,
borderRadius: 35,
backgroundColor: THEME.DANGER_COLOR
}
})
export default Tabs
You need to create stack navigator for nesting navigation(bottom tabs/top tabs/ seperate screens)
read more https://reactnavigation.org/docs/nesting-navigators/
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();
const Tabs = () => {
return (
<Tab.Navigator initialRouteName='Posts'>
<Tab.Screen name='Profile' component={ProfileScreen}/>
<Tab.Screen name='Create' component={CreateScreen}/>
<Tab.Screen name='Posts' component={PostsScreen}/>
</Tab.Navigator>
)
}
const App = () => {
return(
<NavigationContainer>
<Stack.Navigator initialRouteName='Tabs'>
<Stack.Screen name="Tabs" component={Tabs} /> // bottom tabs will be base screen
<Stack.Screen name = "Autobus" commponent={Autobus} />
</Stack.Navigator>
</NavigationContainer>
)
}

React Navigation - trying to hide tab-bar on on certain screens

I am trying to hide the tab bar on the first screen, but nothing I do seems to work.
If I re-render the screen then it disappears, but everytime I load the app again it will be there.
After looking online I found some workarounds and it work hiding the tab bar on the screen that I want it to hide, all except for the StartScreen.
Please can someone give me an idea of what I need to do to hide it on the StartScreen?
Thank you.
import React from "react";
import {
NavigationContainer,
getFocusedRouteNameFromRoute,
} from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import { Ionicons } from "#expo/vector-icons";
import StartScreen from "../screens/StartScreen";
import LoginScreen from "../screens/LoginScreen";
import SignupScreen from "../screens/SignupScreen";
import FindPropertyScreen from "../screens/FindPropertyScreen";
import FindAddressManuallyScreen from "../screens/FindAddressManuallyScreen";
import PropertyDetailsScreen from "../screens/PropertyDetailsScreen";
import DashboardScreen from "../screens/DashboardScreen";
import HomeReviewScreen from "../screens/HomeReviewScreen";
import ContractorScreen from "../screens/ContractorScreen";
import TestScreen from "../screens/TestScreen";
import FinanceScreen from "../screens/FinanceScreen";
export default function Navigator() {
const HomeStack = createStackNavigator();
const HomeStackScreen = ({ navigation, route }) => {
// Screens where Bottom Tabs need to be hidden
const tabHiddenRoutes = [
"StartScreen",
"LoginScreen",
"SignupScreen",
"FindPropertyScreen",
"FindAddressManuallyScreen",
"PropertyDetailsScreen",
];
React.useLayoutEffect(() => {
const routeName = getFocusedRouteNameFromRoute(route);
if (tabHiddenRoutes.includes(getFocusedRouteNameFromRoute(route))) {
navigation.setOptions({ tabBarStyle: { display: "none" } });
} else {
navigation.setOptions({ tabBarStyle: { display: "flex" } });
}
}, [navigation, route]);
return (
<HomeStack.Navigator>
<HomeStack.Screen
name="StartScreen"
component={StartScreen}
options={{
title: "",
headerStyle: {
backgroundColor: "#0061FC",
},
headerTintColor: "#fff",
headerShadowVisible: false,
}}
/>
<HomeStack.Screen
name="LoginScreen"
component={LoginScreen}
options={{
title: "Login",
cardStyle: {
backgroundColor: "#fff",
},
}}
/>
<HomeStack.Screen
name="SignupScreen"
component={SignupScreen}
options={{
title: "Welcome",
cardStyle: {
backgroundColor: "#fff",
},
}}
/>
<HomeStack.Screen
name="FindPropertyScreen"
component={FindPropertyScreen}
options={{
title: "",
headerStyle: {
backgroundColor: "#0061FC",
},
headerTintColor: "#fff",
headerShadowVisible: false,
}}
/>
<HomeStack.Screen
name="FindAddressManuallyScreen"
component={FindAddressManuallyScreen}
options={{
title: "Enter address",
cardStyle: {
backgroundColor: "#fff",
},
}}
/>
<HomeStack.Screen
name="PropertyDetailsScreen"
component={PropertyDetailsScreen}
options={{
title: "Property Details",
cardStyle: {
backgroundColor: "#fff",
},
}}
/>
<HomeStack.Screen
name="DashboardScreen"
component={DashboardScreen}
options={{
title: "Your Dashboard",
cardStyle: {
backgroundColor: "#fff",
},
}}
/>
<HomeStack.Screen
name="TestScreen"
component={TestScreen}
options={{
title: "Test Screen",
cardStyle: {
backgroundColor: "#fff",
},
}}
/>
</HomeStack.Navigator>
);
};
const DashboardStack = createStackNavigator();
function DashboardStackScreen() {
return (
<DashboardStack.Navigator>
<DashboardStack.Screen
name="HomeReviewScreen"
component={HomeReviewScreen}
options={{
title: "",
cardStyle: {
backgroundColor: "#fff",
},
headerTintColor: "#fff",
headerShadowVisible: false,
}}
/>
</DashboardStack.Navigator>
);
}
const Tab = createBottomTabNavigator();
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
headerShown: false,
tabBarIcon: ({ focused, color, size }) => {
if (route.name === "Home") {
return (
<Ionicons
name={focused ? "home" : "home-outline"}
size={size}
color={color}
/>
);
} else if (route.name === "Dashboard") {
return (
<Ionicons
name={focused ? "settings" : "settings-outline"}
size={size}
color={color}
/>
);
} else if (route.name === "Finance") {
return (
<Ionicons
name={focused ? "card" : "card-outline"}
size={size}
color={color}
/>
);
} else if (route.name === "Contractor") {
return (
<Ionicons
name={focused ? "build" : "build-outline"}
size={size}
color={color}
/>
);
}
},
tabBarInactiveTintColor: "gray",
tabBarActiveTintColor: "#0061FC",
tabBarShowLabel: false,
})}
>
<Tab.Screen
name="Home"
component={HomeStackScreen}
// options={({ route }) => ({
// tabBarVisible: ((route) => {
// const routeName = getFocusedRouteNameFromRoute(route) ?? "";
// if (routeName === "StartScreen") {
// return false;
// }
// return true;
// })(route),
// })}
/>
<Tab.Screen
name="Contractor"
component={ContractorScreen}
options={{
title: "",
cardStyle: {
backgroundColor: "#fff",
},
}}
/>
<Tab.Screen name="Finance" component={FinanceScreen} />
<Tab.Screen name="Dashboard" component={DashboardStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
Have you try this rom react navigation doc :
The easiest way to achieve this is to nest the tab navigator inside
the first screen of the stack instead of nesting stack inside tab
navigator
I think the recommended way to do it is to set an id for your navigator
<Tab.Navigator ... id="NavID" />
and then use the navigator id
const tabNavigator = navigation.getParent('NavID')
tabNavigator.setOptions({ tabBarStyle: { display: "flex" } });

How to define different groups of navigation flow in React-Navigation 5

In pre-5 version of React-Navigation, I use the following JSON style configuration to define multiple navigation flows & embed one flow to the other:
// declare a stack navigator named 'dataListFlow'
const dataListFlow = createStackNavigator({
DataList: DataListScreen,
DataDetail: DataDetailScreen,
});
// I use the switch navigator to host two flows: 1. loginFlow 2. mainFlow
const switchNavigator = createSwitchNavigator({
// 1. loginFlow
loginFlow: createStackNavigator({
Signup: SignupScreen,
Signin: SigninScreen,
}),
// 2. mainFlow, NOTE: I embed the dataListFlow into the main flow
mainFlow: createBottomTabNavigator({
dataListFlow: dataListFlow,
dataCreate: dataCreateScreen,
}),
});
// create the app with the switchNavigator declared above
const App = createAppContainer(switchNavigator);
I would like to implement the same with React-Navigation version 5. I have followed this tutorial to create different navigators with React-Navigation 5, but it only shows how to create each type of navigator separately. I wonder how to implement navigation flows that can be embed into one another like what I have done with the older version react-navigation. Could someone please guide me with some code?
Nothing much has changed actually, the syntax and the way to addressing has changed,
So if you see below what i've used is a bottom tab, ive created it separately and now :
const BottomTab = () => {
return (
<Tab.Navigator
tabBarOptions={{
activeTintColor: '#fff',
activeBackgroundColor: '#c47808',
inactiveBackgroundColor: '#ffbd5c',
inactiveTintColor: '#c47808',
style: {
height: Platform.OS == 'ios' ? hp('10.35%') : hp('8.35%'),
},
labelStyle: {
marginBottom: Platform.OS == 'ios' ? 8 : 2,
},
}}
screenOptions={({route}) => ({
tabBarIcon: ({focused, color, size}) => {
return getTabBarIcon(route, focused);
},
})}>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Meetings" component={Meeting} />
<Tab.Screen name="My Profile" component={Profile} />
<Tab.Screen name="Settings" component={Settings} />
</Tab.Navigator>
);
};
Update:
const HomeTab = () => {
return (
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name="Payment" component={Payment} />
<Stack.Screen name="Profile" component={Profile} />
</Stack.Navigator>
);
};
if you see how ive included this in my main stack navigator :
return (
<NavigationContainer linking={deepLinking}>
<Stack.Navigator
initialRouteName="Login"
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="HomeTab" component={HomeTab} />
<Stack.Screen name="BottomTab" component={BottomTab} />
</Stack.Navigator>
</NavigationContainer>
);
i've included it as a simple Stack.Screen and voila it's allscreen are used. Same you can do for if you want to use any other stack navigator and import it as stack.screen inside the main returning compoenent.
UPDATE:
See above updated stackscreennavigator
hope it helps. feel free for doubts
UPDATE 2 :
All my code :
import React, {Component} from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
Image,
Platform,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import LoginScreen from './app/views/auth/LoginScreen';
import SignupEmail from './app/views/auth/SignupEmailScreen';
import SignupDetails from './app/views/auth/SignupDetails';
import Home from './app/views/home/Home';
import Meeting from './app/views/meetings/Meeting';
import Profile from './app/views/profile/Profile';
import Settings from './app/views/settings/Settings';
import ScheduleMeeting from './app/views/meetings/ScheduleMeeting';
import MeetCall from './app/views/meet/MeetCall';
import JitSiCall from './app/views/meet/Jitsi';
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
import Webrtc from './app/views/meet/Webrtc';
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
// this function gives the icons when tab is selected
const getTabBarIcon = (route, focused) => {
const routeName = route.name;
if (routeName === 'Home') {
if (focused) {
return (
<Image
style={{height: 22, width: 23}}
source={require('./app/assets/images/homeF.png')}
/>
);
} else {
return (
<Image
style={{height: 22, width: 23}}
source={require('./app/assets/images/homeUf.png')}
/>
);
}
}
if (routeName === 'Meetings') {
if (focused) {
return (
<Image
style={styles.imageHeight}
source={require('./app/assets/images/meetingsF.png')}
resizeMode="contain"
/>
);
} else {
// console.log(props, 'props');
return (
<Image
style={styles.imageHeight}
source={require('./app/assets/images/meetingsUF.png')}
resizeMode="contain"
/>
);
}
}
if (routeName === 'My Profile') {
if (focused) {
return (
<Image
style={styles.imageHeight}
source={require('./app/assets/images/profileF.png')}
resizeMode="contain"
/>
);
} else {
return (
<Image
style={styles.imageHeight}
source={require('./app/assets/images/profileUf.png')}
resizeMode="contain"
/>
);
}
}
if (routeName === 'Settings') {
if (focused) {
return (
<Image
style={styles.imageHeight}
source={require('./app/assets/images/settingsF.png')}
resizeMode="contain"
/>
);
} else {
return (
<Image
style={styles.imageHeight}
source={require('./app/assets/images/settingsUf.png')}
resizeMode="contain"
/>
);
}
}
};
const BottomTab = () => {
return (
<Tab.Navigator
tabBarOptions={{
activeTintColor: '#fff',
activeBackgroundColor: '#c47808',
inactiveBackgroundColor: '#ffbd5c',
inactiveTintColor: '#c47808',
style: {
height: Platform.OS == 'ios' ? hp('10.35%') : hp('8.35%'),
},
labelStyle: {
marginBottom: Platform.OS == 'ios' ? 8 : 2,
},
}}
screenOptions={({route}) => ({
tabBarIcon: ({focused, color, size}) => {
return getTabBarIcon(route, focused);
},
})}>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Meetings" component={Meeting} />
<Tab.Screen name="My Profile" component={Profile} />
<Tab.Screen name="Settings" component={Settings} />
</Tab.Navigator>
);
};
class App extends Component {
render() {
return (
<NavigationContainer linking={deepLinking}>
<Stack.Navigator
initialRouteName="Login"
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="SignupEmail" component={SignupEmail} />
<Stack.Screen name="SignupDetails" component={SignupDetails} />
<Stack.Screen name="ScheduleMeeting" component={ScheduleMeeting} />
<Stack.Screen name="BottomTab" component={BottomTab} />
<Stack.Screen name="MeetCall" component={MeetCall} />
<Stack.Screen name="JitSiCall" component={JitSiCall} />
<Stack.Screen name="Webrtc" component={Webrtc} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
position: 'absolute',
right: 0,
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
imageHeight: {
height: 22,
width: 20,
paddingTop: 4,
},
});
export default App;