aboutsummaryrefslogtreecommitdiff
path: root/src/routes/tabs
diff options
context:
space:
mode:
authorLeon Jiang <35908040+leonyjiang@users.noreply.github.com>2020-08-05 14:15:06 -0700
committerGitHub <noreply@github.com>2020-08-05 17:15:06 -0400
commit1279249ee9355f88913578f51e3b0bf7d99672f6 (patch)
tree4a72890af331ffc818fffc9fb5395a80efe2d7de /src/routes/tabs
parentf9cf9b5d89d5e25b227814f0fc759257564cea89 (diff)
[TMA-122] User Profile Screen UI (#27)
* Fix yarn lint issues * Add react-native-svg to project * Create UserType & PostType * Create temporary Post component * Fix import cycle warning, update AuthContext * Update onboarding screen imports * Update config files * Add rn-fetch-blob package * Update types * Add profile fetching to AuthContext * Update post component * Import placeholder images from designs * Add profile UI components * Create screen offset constants * Add new api endpoints * Create screen layout utils * Create Profile screen UI * Remove some unused styling * Restructure ProfileScreen and fix animations * Add gradient back to screen * Update Moment circle styling
Diffstat (limited to 'src/routes/tabs')
-rw-r--r--src/routes/tabs/NavigationBar.tsx73
-rw-r--r--src/routes/tabs/index.ts1
2 files changed, 74 insertions, 0 deletions
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
new file mode 100644
index 00000000..aca968c2
--- /dev/null
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {NavigationIcon} from '../../components';
+import {
+ ProfileScreen,
+ Home,
+ Notifications,
+ Search,
+ Upload,
+} from '../../screens';
+
+const Tabs = createBottomTabNavigator();
+
+const NavigationBar: React.FC = () => {
+ return (
+ <Tabs.Navigator
+ screenOptions={({route}) => ({
+ tabBarIcon: ({focused}) => {
+ if (route.name === 'Home') {
+ return focused ? (
+ <NavigationIcon tab="Home" disabled={false} />
+ ) : (
+ <NavigationIcon tab="Home" disabled={true} />
+ );
+ } else if (route.name === 'Search') {
+ return focused ? (
+ <NavigationIcon tab="Search" disabled={false} />
+ ) : (
+ <NavigationIcon tab="Search" disabled={true} />
+ );
+ } else if (route.name === 'Upload') {
+ return focused ? (
+ <NavigationIcon tab="Upload" disabled={false} />
+ ) : (
+ <NavigationIcon tab="Upload" disabled={true} />
+ );
+ } else if (route.name === 'Notifications') {
+ return focused ? (
+ <NavigationIcon tab="Notifications" disabled={false} />
+ ) : (
+ <NavigationIcon tab="Notifications" disabled={true} />
+ );
+ } else if (route.name === 'Profile') {
+ return focused ? (
+ <NavigationIcon tab="Profile" disabled={false} />
+ ) : (
+ <NavigationIcon tab="Profile" disabled={true} />
+ );
+ }
+ },
+ })}
+ initialRouteName="Profile"
+ tabBarOptions={{
+ showLabel: false,
+ style: {
+ backgroundColor: 'transparent',
+ position: 'absolute',
+ borderTopWidth: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ },
+ }}>
+ <Tabs.Screen name="Home" component={Home} />
+ <Tabs.Screen name="Search" component={Search} />
+ <Tabs.Screen name="Upload" component={Upload} />
+ <Tabs.Screen name="Notifications" component={Notifications} />
+ <Tabs.Screen name="Profile" component={ProfileScreen} />
+ </Tabs.Navigator>
+ );
+};
+
+export default NavigationBar;
diff --git a/src/routes/tabs/index.ts b/src/routes/tabs/index.ts
new file mode 100644
index 00000000..8ea77e8f
--- /dev/null
+++ b/src/routes/tabs/index.ts
@@ -0,0 +1 @@
+export {default} from './NavigationBar';