forked from piosystems/myCrudMobileApp2
-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
108 lines (97 loc) · 3.18 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import 'reflect-metadata';
import React from 'react';
//import ExamplesHome from './src/modules/examples/ExamplesHome';
import TransactionEntryLanding from './src/modules/clinical-records-entries/TransactionEntryLanding';
import { Icon, Text } from '@rneui/base';
import useCachedResources from './src/global/hooks/useCachedResources';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import AssetEntryLanding from './src/modules/biodata-entries/BiodataEntryLanding';
const App: React.FC = () => {
//Using useCachedResources for dataSource loading, while splash screen is on.
const { isLoadingComplete, dataSource } = useCachedResources();
const Tab = createBottomTabNavigator();
//Create the tab navigator props
//below are some optional props that can be passed to Tab.Navigator. You can try the code with and without options
const tabProps = {
initialRouteName: 'TransactionEntryLandingScreen',
screenOptions: {
lazy: true, //default is true
activeTintColor: 'green',
inactiveTintColor: 'grey',
style: {
backgroundColor: '#eee',
},
backBehavior: 'history'//Behaviour when system back is touched. Options are none, initialRoute, order, history. This seems to be buggy
}
}
const TabNavigator = () =>
(
<Tab.Navigator {...tabProps}>
<Tab.Screen
name="TransactionEntryLandingScreen"
children={() => <TransactionEntryLanding dataSource={dataSource!}/>}
options={{
title: 'Transaction Manager',
tabBarActiveBackgroundColor: 'transparent',
tabBarActiveTintColor: '#800f2f',
headerShown: false,
tabBarLabel: 'Clinical Records',
tabBarIcon: ({ color, size }) => (
<Icon
name="receipt-long"
color={color}
size={size}
/>
)
}}
/>
<Tab.Screen
name="AssetEntryLandingScreen"
children={() => <AssetEntryLanding dataSource={dataSource!}/>}
options={{
title: "Asset Manager",
headerShown: false,
tabBarLabel: 'Personal-Biodata',
tabBarActiveTintColor: '#ea9ab2',
tabBarIcon: ({ color, size }) => (
<Icon
name="inventory"
color={color}
size={size}
/>
)
}}
/>
</Tab.Navigator>
)
//Prepare our conditional display. What we display will depend on whether dataSource is available or not
const Display = () => {
if (dataSource) {
return (
<NavigationContainer>
<TabNavigator />
</NavigationContainer>
)
} else {
return (
<Text>
Cannot get data source
</Text>
)
}
}
//Check if loading is complete before returning a view
if (!isLoadingComplete) {
return null;
} else {
return (
<>
<Display />
{/* Below is just a footer message */}
{/*<Text style={{ padding: 6, fontSize: 14, fontStyle: "italic", textAlign: 'center' }}>Copyright: Pius Onobhayedo</Text>*/}
</>
);
}
}
export default App;