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'
Related
I'm attempting to remove the tab bar bottom navigator from certain pages from my application. I have performed several searches with indication to use display:none or other methods, but they are not seeming to work. I have several nested routes inside of the Main route.
This is the tab route:
export function TabRoutes({ navigation }: any) {
const { Navigator, Screen } = createBottomTabNavigator();
const theme = useTheme();
return (
<Navigator
initialRouteName="FeedRt"
screenOptions={{
headerShown: false,
tabBarActiveTintColor: theme.colors.primary,
tabBarStyle: {
backgroundColor: theme.colors.tabBarBackground,
position: 'absolute',
borderTopRightRadius: 16,
borderTopLeftRadius: 16,
borderColor: '#9E9E9E',
borderWidth: RFValue(0.5),
borderStyle: 'solid',
bottom: -10,
height: 90,
paddingHorizontal: 16,
// tabBarStyle: { display: 'none' }
},
}}
>
<Screen
key="FeedRt"
name="FeedRt"
component={FeedRoutes}
options={{
tabBarIcon: ({ focused }) => (
<TabBarIconAndText text="Home" focused={focused} icon="Home" />
),
tabBarLabel: '',
}}
/>
<Screen
key="SearchRt"
name="SearchRt"
component={SearchRoutes}
options={{
tabBarIcon: ({ focused }) => (
<TabBarIconAndText text="Search" focused={focused} icon="Search" />
),
tabBarLabel: '',
}}
/>
<Screen
key="CreatePosts"
name="CreatePosts"
component={EmptyScreen}
listeners={({ navigation }) => ({
tabPress: (event) => {
event.preventDefault();
},
})}
options={{
tabBarIcon: ({ focused }) => (
<ToolTip navigation={navigation}>
<View
style={{
marginTop: 10,
flexDirection: 'row',
backgroundColor: theme.colors.primary,
width: 40,
height: 40,
borderRadius: 20,
justifyContent: 'center',
alignItems: 'center',
}}
>
<PlusSVG />
</View>
</ToolTip>
),
tabBarLabel: '',
}}
/>
<Screen
key="Shorts"
name="Shorts"
component={Shorts}
options={{
tabBarIcon: ({ focused }) => (
<TabBarIconAndText text="Shorts" focused={focused} icon="Shorts" />
),
tabBarLabel: '',
}}
/>
<Screen
key="Profile"
name="Profile"
children={() => <Profile navigation={navigation} myProfile={true} />}
options={{
tabBarIcon: ({ focused }) => (
<TabBarIconAndText text="Profile" focused={focused} icon="Profile" />
),
tabBarLabel: '',
}}
/>
</Navigator>
);
}
I want to remove the tab bar showing in the Comments from the FeedRoute
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
// Screens
import { Feed } from '../screens/FeedScreens/Feed';
import { Comments } from '../screens/FeedScreens/Comments';
export function FeedRoutes() {
const { Navigator, Screen } = createStackNavigator();
return (
<Navigator initialRouteName="Posts" screenOptions={{ headerShown: false }}>
<Screen key="Posts" name="Posts" component={Feed} />
<Screen key="Comments" name="Comments" component={Comments} />
</Navigator>
);
}
And I have this App route witch calls the Main (Tab route):
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
// Screens
import { TabRoutes } from './tab.routes';
import { PostRoutes } from './post.routes';
import { FeedRoutes } from './feed.routes';
export function AppRoutes() {
const { Navigator, Screen } = createStackNavigator();
return (
<Navigator initialRouteName="Main" screenOptions={{ headerShown: false }}>
<Screen key="Main" name="Main" component={TabRoutes} />
<Screen key="Post" name="Post" component={PostRoutes} />
</Navigator>
);
}
Want to remove it from this screen:
Just move Comments route from FeedRoutes to AppRoutes.
replace component={FeedRoutes} to component={Feed} in TabRoutes.
There is no need to create FeedRoutes component.
See more https://reactnavigation.org/docs/hiding-tabbar-in-screens/
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>
)
}
I have used createMaterialBottomTabNavigator and redux to change badge text. Here is the code:
class Router extends React.PureComponent {
constructor(props) {
super(props);
this.state = {}
}
componentDidMount() {
this.props.appAct()
this.props.getCartAct()
}
HomeStack = () => (
<Stack.Navigator headerMode={'none'}>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Product" component={ProductStack} />
</Stack.Navigator>
)
CartStack = () => (
<Stack.Navigator headerMode={'none'}>
<Stack.Screen name="Cart" component={CartScreen} />
<Stack.Screen name="Product" component={ProductStack} />
</Stack.Navigator>
)
render() {
let { internet, showIntro } = this.props;
if (!internet) return <NoInternetScreen />
if (showIntro) return <AppIntro />
return (
<NavigationContainer ref={navigationRef}>
<Tab.Navigator
style={{ backgroundColor: "transparent", overflow: "hidden" }}
initialRouteName="Home"
activeColor="#ac85f2"
inactiveColor={Colors.dark50}
barStyle={{
borderColor: Colors.dark70,
overflow: 'hidden',
borderTopWidth: 1,
borderLeftWidth: 1,
borderRightWidth: 1,
backgroundColor: "#eee"
}}
>
<Tab.Screen
name="Home"
component={HomeStack}
options={{
tabBarLabel: <Text default> home </Text>,
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Cart"
component={CartStack}
options={({ route }) =>
({
tabBarLabel: <Text default> cart </Text>,
tabBarBadge: props.cart.length, // <= here it changes the badge text
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="cart-outline" color={color} size={26} />
),
})
}
/>
</Tab.Navigator>
</NavigationContainer>
)
}
}
function mapStateToProps(state) {
return {
internet: state.appReducer.internet,
showIntro: state.appReducer.showIntro,
cart: state.appReducer.cart,
}
}
function mapDispatchToProps(dispatch) {
return {
appAct: () => dispatch(appAction()),
getCartAct: () => dispatch(getCartAction()),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Router)
The problem is when I try to change cart prop from an action, the whole components re-render. For instance this is my HomeScreen component which re-renders when tabBarBadge changes:
import _ from 'lodash';
import React from 'react';
import { StyleSheet, ScrollView, Image, TouchableOpacity } from 'react-native';
import { Constants, Spacings, View, Text, Carousel, Colors, Button, Card } from 'react-native-ui-lib';
import { connect } from 'react-redux'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { homeAction } from '../actions'
import Loaders from '../components/loaders'
import { HomeCats } from '../components/HomeCats';
const INITIAL_PAGE = 2;
const IMAGES = [
require('../assets/images/s1.jpg'),
require('../assets/images/s2.jpg'),
require('../assets/images/s3.jpg'),
];
const image = require("../assets/images/b2.jpg")
class HomeScreen extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
orientation: Constants.orientation,
width: this.getWidth(),
limitShownPages: false,
numberOfPagesShown: 7,
currentPage: INITIAL_PAGE,
autoplay: false
}
}
componentDidMount() {
console.log("componentDidMount")
console.log('this.props.categories.length', this.props.categories.length)
if (this.props.categories.length < 1) {
this.props.getCategoriesAct()
}
}
getWidth = () => {
return Constants.windowWidth - Spacings.s5 * 2;
}
onChangePage = (currentPage) => {
this.setState({ currentPage });
}
onPagePress = (index) => {
this.carousel.goToPage(index, true);
}
render() {
const { limitShownPages, numberOfPagesShown, autoplay, width } = this.state;
const { loadingCats, categories } = this.props;
return (
<ScrollView showsVerticalScrollIndicator={false} >
<View marginV-20 >
<View marginB-15>
<Carousel
key={numberOfPagesShown}
migrate
ref={(r) => (this.carousel = r)}
//loop
autoplay={autoplay}
onChangePage={this.onChangePage}
pageWidth={width}
itemSpacings={Spacings.s3}
containerMarginHorizontal={Spacings.s2}
initialPage={INITIAL_PAGE}
containerStyle={{ height: 180, }}
containerPaddingVertical={18}
pageControlPosition={'over'}
pageControlProps={{ onPagePress: this.onPagePress, limitShownPages }}
allowAccessibleLayout
>
{
IMAGES.map((image, i) =>
<View flex centerV br20 key={i} style={{
shadowColor: "#eee",
shadowOffset: {
width: 0,
height: 5,
},
shadowOpacity: 0.09,
shadowRadius: 1,
elevation: 15,
}}>
<Image
imageStyle="contain"
style={{ flex: 1, borderRadius: 20, width: "100%" }}
source={image}
/>
</View>
)
}
</Carousel>
</View>
</View>
</ScrollView>
)
}
}
function mapStateToProps(state) {
return {
error: state.homeReducer.error,
loadingCats: state.categoryReducer.loading,
categories: state.categoryReducer.categories,
}
}
function mapDispatchToProps(dispatch) {
return {
homeAct: () => dispatch(homeAction()),
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(HomeScreen)
Is there any way to change tabBarBadge prop without re-rendering other components?
finnally after lots of banging my head to the wall, found the answer:
moved icon and title to a new component:
export const CartTabnavigator = (props) => {
const dispatch = useDispatch()
const color = props.color
useEffect(() => {
console.log("props.cart", props.cart)
dispatch(getCartAction())
}, [])
return (
<View>
<MaterialCommunityIcons name="cart-outline" color={color} size={26} style={{
transform: [
{ scaleX: -1 }
]
}} />
<View style={{ position: 'absolute', right: -5, top: -5, backgroundColor: Colors.red20, borderRadius: 9, width: 15, height: 15, justifyContent: 'center', alignItems: 'center' }}>
<Text white style={{ fontSize: 10, fontFamily: config.font }} >{props.cart.length}</Text>
</View>
</View>
);
}
const mapStateToProps = state => ({
cart: state.cartReducer.cart,
})
function mapDispatchToProps() {
return {}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(CartTabnavigator)
and used it in navigator like:
<Tab.Screen
name="Cart"
component={this.CartStack}
options={({ route }) =>
({
tabBarLabel: <Text default> سبد خرید </Text>,
tabBarIcon: ({ color }) => (
<CartTabNavigator color={color} />
),
})
}
/>
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.
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;