export const HOME = 'Home Screen';
export const HOME_TAB = 'Home Tab';
export const DASHBOARD = 'Dashboard';
export const WELCOME = 'Welcome';
export const USER_LOGIN = 'Login';
export const LOGOUT_USER = 'Logout';
export const USER_SIGNUP = 'Sign Up';
export const USER_SIGNUP_STEP_ONE = 'Step One';
export const USER_SIGNUP_STEP_THREE = 'Step Two';
export const USER_SIGNUP_STEP_FOUR = 'Step Three';
export const USER_SIGNUP_STEP_TWO = 'Step Four';
export const USER_SIGNUP_STEP_FIVE = 'Step Five';
export const USER_FORGOT = 'User forget';
export const FORGOT_PASSWORD = 'Forgot Password';
export const RESET_PASSWORD = 'Reset Password';
export const FORGOT_USERNAME = 'Username';
export const SUCCESS_SCREEN = 'Success Page';
export const ONBOARD_SCREEN = 'Boarding Screen';
export const PROFILE_SCREEN = 'Profile Screen';
export const BOTTOM_TAB = 'Bottom Tab';
export const APP_ROOT = 'AppRoot';
import React from 'react';
import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
import { useNavigation, DrawerActions} from '@react-navigation/native';
import { dataId, IosPlatform } from '../../utils';
export const HeaderStyle = () => {
const navigation = useNavigation();
const openSideMenu = () => {
navigation.dispatch(DrawerActions.openDrawer());
};
return {
title: '',
headerStyle: {
backgroundColor: '#FFFFFF',
borderBottomWidth: IosPlatform ? 0.25 : 0.5,
borderColor: 'lightgray',
},
headerLeft: () => (
<View style={Styles.logoView}>
<Image
source={{
//write here image source
}}
resizeMode="cover"
accessible
style={Styles.logoIcon}
/>
</View>
),
headerRight: () => (
<View style={Styles.menuView}>
<TouchableOpacity
testID={dataId.hamburgerMenuButton}
accessible
style={Styles.createBtn}
onPress={openSideMenu}>
<Image
source={{
//write here image source
}}
style={Styles.menuIcon}
/>
</TouchableOpacity>
</View>
),
};
};
const Styles = StyleSheet.create({
logoIcon: {
width: 152,
height: 33.74,
resizeMode: 'contain',
marginBottom: 16,
marginTop: 4.8,
},
menuIcon: {
resizeMode: 'contain',
width: 24,
height: 24,
marginBottom: 16,
marginTop: 4.8,
},
logoView: {
alignSelf: 'flex-start',
marginLeft: 10,
},
menuView: {
flexDirection: 'column',
justifyContent: 'flex-end',
marginRight: 24,
marginTop: 10,
},
});
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { DashboardScreen ProfileScreen,CartScreen} from '../../screens';
import {CART, PROFILE_SCREEN, DASHBOARD } from '../../constants';
import { HeaderStyle } from '../stackStyle';
export const HomeStackNavigator = () => {
const HomeStack = createStackNavigator();
return (
<HomeStack.Navigator
screenOptions={{ headerShown: false }}>
<HomeStack.Screen name={DASHBOARD} component={DashboardScreen} options={HeaderStyle} />
<HomeStack.Screen name={PROFILE_SCREEN} component={ProfileScreen} options={HeaderStyle} />
<HomeStack.Screen name={CART} component={CartScreen} options={HeaderStyle} />
</HomeStack.Navigator>
);
};
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { AboutStackNavigator } from '../claimStack/ClaimStackNavigator';
import { ContactusStackNavigator } from '../myPlanStack/MyPlanStackNavigator';
import { HomeStackNavigator } from '../homeStack/HomeStackNavigator';
import {DASHBOARD, ABOUT_US, CONTACT_US, } from '../../constants';
const Tab = createBottomTabNavigator();
export const BottomTabNavigation = () => {
return (
<Tab.Navigator
initialRouteName={DASHBOARD}
screenOptions={{
headerShown: false,
tabBarHideOnKeyboard: true,
tabBarStyle: {
flex: 1,
flexWrap: 'wrap',
position: 'absolute',
bottom: 0,
paddingTop: 0,
paddingBottom: 0,
backgroundColor: '#FFFFFF',
height: 84,
borderTopWidth: 1,
elevation: 5,
},
}}>
<Tab.Screen
name={DASHBOARD}
component={HomeStackNavigator}
options={{
// Write tab style here
}}
/>
<Tab.Screen
name={ABOUT_US}
component={AboutStackNavigator}
options={{
// Write tab style here
}}
/>
<Tab.Screen
name={CONTACT_US}
component={ContactusStackNavigator}
options={{
// Write tab style here
}}
/>
</Tab.Navigator>
);
};
import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import {
BoardingScreen,
ForgotPasswordScreen,
ForgotUserNameScreen,
LoginScreen,
SignupScreen,
SuccessScreen,
} from '../../screens';
import { HeaderStyle } from '../stackStyle';
import {
SUCCESS_SCREEN,
ONBOARD_SCREEN,
USER_LOGIN,
USER_SIGNUP,
BOTTOM_TAB,
FORGOT_USERNAME,
FORGOT_PASSWORD,
RESET_PASSWORD,
} from '../../constants';
import { SideMenu } from './side-menu/SideMenu';
import { IosPlatform } from '../../utils/index';
import { BottomTabNavigation } from '../bottomStack';
import ResetPasswordScreen from 'screens/resetPasswordScreen/ResetPasswordScreen';
const DrawerStack = createDrawerNavigator();
interface DrawerStackWithSideMenuProps {
routerName: string;
}
export const DrawerStackWithSideMenu = ({ routerName }: DrawerStackWithSideMenuProps) => {
return (
<DrawerStack.Navigator
initialRouteName={routerName}
screenOptions={{
swipeEnabled: false,
drawerPosition: 'right',
drawerType: 'front',
overlayColor: 'rgba(255,255,255,0.5)',
drawerStyle: {
paddingTop: 30,
width: '99.9%',
shadowColor: IosPlatform ? 'lightgray' : 'black',
shadowRadius: 10,
shadowOpacity: 1,
borderColor: IosPlatform ? '' : '#FFFFFF',
borderTopLeftRadius: 16,
borderBottomLeftRadius: 16,
elevation: IosPlatform ? 0 : 10,
},
}}
drawerContent={SideMenu}>
<DrawerStack.Screen name={ONBOARD_SCREEN} component={BoardingScreen} options={{ headerShown: false }} />
<DrawerStack.Screen name={SUCCESS_SCREEN} component={SuccessScreen} options={HeaderStyle} />
<DrawerStack.Screen name={USER_LOGIN} component={LoginScreen} options={HeaderStyle} />
<DrawerStack.Screen name={USER_SIGNUP} component={SignupScreen} options={HeaderStyle} />
<DrawerStack.Screen name={BOTTOM_TAB} component={BottomTabNavigation} options={HeaderStyle} />
<DrawerStack.Screen name={FORGOT_USERNAME} component={ForgotUserNameScreen} options={HeaderStyle}/>
<DrawerStack.Screen name={FORGOT_PASSWORD} component={ForgotPasswordScreen} options={HeaderStyle} />
<DrawerStack.Screen name={RESET_PASSWORD} component={ResetPasswordScreen} options={HeaderStyle} />
</DrawerStack.Navigator>
);
};
import React, {useContext } from 'react';
import { StyleSheet } from 'react-native';
import { BrandColor, FontWeight, Modal } from '@sentaraui/optimahealth_native';
import { NavigationContainer } from '@react-navigation/native';
import { DrawerStackWithSideMenu } from './drawerMenu';
import { WelcomeNavigator } from './welcomeStack';
import {APP_ROOT} from '../constants';
import { GlobalContext } from 'context';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const RootStack = createNativeStackNavigator();
export const AppRootNavigator = () => {
const { auth } = useContext(GlobalContext);
return (
<NavigationContainer>
<RootStack.Navigator initialRouteName={APP_ROOT} screenOptions={{ headerShown: false }}>
{auth === true ? (
<RootStack.Screen name={APP_ROOT} component={DrawerStackWithSideMenu} />
) : (
<WelcomeNavigator />
)}
</RootStack.Navigator>
</NavigationContainer>
);
};