diff options
41 files changed, 364 insertions, 25 deletions
diff --git a/package.json b/package.json index 64647d18..d881c6f1 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ }, "dependencies": { "@react-native-community/masked-view": "^0.1.10", + "@react-navigation/bottom-tabs": "^5.7.2", "@react-navigation/native": "^5.6.1", "@react-navigation/stack": "^5.6.2", "react": "16.11.0", diff --git a/src/App.tsx b/src/App.tsx index 6c247f7c..f4dea5bf 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,13 +1,3 @@ -/** - * Sample React Native App - * https://github.com/facebook/react-native - * - * Generated with the TypeScript template - * https://github.com/react-native-community/react-native-template-typescript - * - * @format - */ - import React from 'react'; import Routes from './routes'; import {NavigationContainer} from '@react-navigation/native'; diff --git a/src/assets/navigationIcons/home-clicked.png b/src/assets/navigationIcons/home-clicked.png Binary files differnew file mode 100644 index 00000000..8b6e9766 --- /dev/null +++ b/src/assets/navigationIcons/home-clicked.png diff --git a/src/assets/navigationIcons/home-clicked@2x.png b/src/assets/navigationIcons/home-clicked@2x.png Binary files differnew file mode 100644 index 00000000..51a80de7 --- /dev/null +++ b/src/assets/navigationIcons/home-clicked@2x.png diff --git a/src/assets/navigationIcons/home-clicked@3x.png b/src/assets/navigationIcons/home-clicked@3x.png Binary files differnew file mode 100644 index 00000000..17010413 --- /dev/null +++ b/src/assets/navigationIcons/home-clicked@3x.png diff --git a/src/assets/navigationIcons/home.png b/src/assets/navigationIcons/home.png Binary files differnew file mode 100644 index 00000000..ac20c3c1 --- /dev/null +++ b/src/assets/navigationIcons/home.png diff --git a/src/assets/navigationIcons/home@2x.png b/src/assets/navigationIcons/home@2x.png Binary files differnew file mode 100644 index 00000000..02564b85 --- /dev/null +++ b/src/assets/navigationIcons/home@2x.png diff --git a/src/assets/navigationIcons/home@3x.png b/src/assets/navigationIcons/home@3x.png Binary files differnew file mode 100644 index 00000000..4a6c9cba --- /dev/null +++ b/src/assets/navigationIcons/home@3x.png diff --git a/src/assets/navigationIcons/notifications-clicked.png b/src/assets/navigationIcons/notifications-clicked.png Binary files differnew file mode 100644 index 00000000..0e72b0d5 --- /dev/null +++ b/src/assets/navigationIcons/notifications-clicked.png diff --git a/src/assets/navigationIcons/notifications-clicked@2x.png b/src/assets/navigationIcons/notifications-clicked@2x.png Binary files differnew file mode 100644 index 00000000..29ce7fbf --- /dev/null +++ b/src/assets/navigationIcons/notifications-clicked@2x.png diff --git a/src/assets/navigationIcons/notifications-clicked@3x.png b/src/assets/navigationIcons/notifications-clicked@3x.png Binary files differnew file mode 100644 index 00000000..611f3221 --- /dev/null +++ b/src/assets/navigationIcons/notifications-clicked@3x.png diff --git a/src/assets/navigationIcons/notifications.png b/src/assets/navigationIcons/notifications.png Binary files differnew file mode 100644 index 00000000..5dd46fba --- /dev/null +++ b/src/assets/navigationIcons/notifications.png diff --git a/src/assets/navigationIcons/notifications@2x.png b/src/assets/navigationIcons/notifications@2x.png Binary files differnew file mode 100644 index 00000000..85760ebb --- /dev/null +++ b/src/assets/navigationIcons/notifications@2x.png diff --git a/src/assets/navigationIcons/notifications@3x.png b/src/assets/navigationIcons/notifications@3x.png Binary files differnew file mode 100644 index 00000000..101c7f8a --- /dev/null +++ b/src/assets/navigationIcons/notifications@3x.png diff --git a/src/assets/navigationIcons/profile-clicked.png b/src/assets/navigationIcons/profile-clicked.png Binary files differnew file mode 100644 index 00000000..add50faf --- /dev/null +++ b/src/assets/navigationIcons/profile-clicked.png diff --git a/src/assets/navigationIcons/profile-clicked@2x.png b/src/assets/navigationIcons/profile-clicked@2x.png Binary files differnew file mode 100644 index 00000000..7c1fc99d --- /dev/null +++ b/src/assets/navigationIcons/profile-clicked@2x.png diff --git a/src/assets/navigationIcons/profile-clicked@3x.png b/src/assets/navigationIcons/profile-clicked@3x.png Binary files differnew file mode 100644 index 00000000..ab0d194f --- /dev/null +++ b/src/assets/navigationIcons/profile-clicked@3x.png diff --git a/src/assets/navigationIcons/profile.png b/src/assets/navigationIcons/profile.png Binary files differnew file mode 100644 index 00000000..e79b8547 --- /dev/null +++ b/src/assets/navigationIcons/profile.png diff --git a/src/assets/navigationIcons/search-clicked.png b/src/assets/navigationIcons/search-clicked.png Binary files differnew file mode 100644 index 00000000..8fc8fa5a --- /dev/null +++ b/src/assets/navigationIcons/search-clicked.png diff --git a/src/assets/navigationIcons/search-clicked3x.png b/src/assets/navigationIcons/search-clicked3x.png Binary files differnew file mode 100644 index 00000000..54290168 --- /dev/null +++ b/src/assets/navigationIcons/search-clicked3x.png diff --git a/src/assets/navigationIcons/search-clicked@2x.png b/src/assets/navigationIcons/search-clicked@2x.png Binary files differnew file mode 100644 index 00000000..56b5cb6b --- /dev/null +++ b/src/assets/navigationIcons/search-clicked@2x.png diff --git a/src/assets/navigationIcons/search.png b/src/assets/navigationIcons/search.png Binary files differnew file mode 100644 index 00000000..bf02835d --- /dev/null +++ b/src/assets/navigationIcons/search.png diff --git a/src/assets/navigationIcons/search@2x.png b/src/assets/navigationIcons/search@2x.png Binary files differnew file mode 100644 index 00000000..d079844c --- /dev/null +++ b/src/assets/navigationIcons/search@2x.png diff --git a/src/assets/navigationIcons/search@3x.png b/src/assets/navigationIcons/search@3x.png Binary files differnew file mode 100644 index 00000000..73453cad --- /dev/null +++ b/src/assets/navigationIcons/search@3x.png diff --git a/src/assets/navigationIcons/upload.png b/src/assets/navigationIcons/upload.png Binary files differnew file mode 100644 index 00000000..ec8c685f --- /dev/null +++ b/src/assets/navigationIcons/upload.png diff --git a/src/assets/navigationIcons/upload@2x.png b/src/assets/navigationIcons/upload@2x.png Binary files differnew file mode 100644 index 00000000..66ab56b5 --- /dev/null +++ b/src/assets/navigationIcons/upload@2x.png diff --git a/src/assets/navigationIcons/upload@3x.png b/src/assets/navigationIcons/upload@3x.png Binary files differnew file mode 100644 index 00000000..ca51c710 --- /dev/null +++ b/src/assets/navigationIcons/upload@3x.png diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx new file mode 100644 index 00000000..9497566b --- /dev/null +++ b/src/components/common/NavigationIcon.tsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { + View, + Image, + StyleSheet, + TouchableOpacity, + TouchableOpacityProps, +} from 'react-native'; + +interface NavigationIconProps extends TouchableOpacityProps { + tab: 'Home' | 'Search' | 'Upload' | 'Notifications' | 'Profile'; + disabled?: boolean; +} + +const NavigationIcon = (props: NavigationIconProps) => { + let imgSrc; + switch (props.tab) { + case 'Home': + imgSrc = props.disabled + ? require('../../assets/navigationIcons/home.png') + : require('../../assets/navigationIcons/home-clicked.png'); + break; + case 'Search': + imgSrc = props.disabled + ? require('../../assets/navigationIcons/search.png') + : require('../../assets/navigationIcons/search-clicked.png'); + break; + case 'Upload': + imgSrc = props.disabled + ? require('../../assets/navigationIcons/upload.png') + : require('../../assets/navigationIcons/upload.png'); + break; + case 'Notifications': + imgSrc = props.disabled + ? require('../../assets/navigationIcons/notifications.png') + : require('../../assets/navigationIcons/notifications-clicked.png'); + break; + case 'Profile': + imgSrc = props.disabled + ? require('../../assets/navigationIcons/profile.png') + : require('../../assets/navigationIcons/profile-clicked.png'); + break; + default: + imgSrc = null; + } + return ( + <View style={styles.icon}> + <TouchableOpacity {...props}> + <Image source={imgSrc} /> + </TouchableOpacity> + </View> + ); +}; + +const styles = StyleSheet.create({ + icon: { + flex: 1, + justifyContent: 'center', + shadowColor: '#000000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowRadius: 2, + shadowOpacity: 0.4, + }, +}); + +export default NavigationIcon; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index b7041b6d..d7778f95 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -2,3 +2,4 @@ export {default as CenteredView} from './CenteredView'; export {default as OverlayView} from './OverlayView'; export {default as RadioCheckbox} from './RadioCheckbox'; export {default as TaggInput} from './TaggInput'; +export {default as NavigationIcon} from './NavigationIcon'; diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index 7379c2c2..5d69b38b 100644 --- a/src/routes/Routes.tsx +++ b/src/routes/Routes.tsx @@ -1,26 +1,94 @@ import React from 'react'; import {createStackNavigator} from '@react-navigation/stack'; +import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import { Login, RegistrationOne, RegistrationTwo, Verification, - Profile, + ProfileOnboarding, } from '../screens/onboarding'; +import {Home, Notifications, Profile, Search, Upload} from '../screens/main'; +import {NavigationIcon} from '../components'; export type RootStackParamList = { + // Onboarding Screens Login: undefined; RegistrationOne: undefined; RegistrationTwo: | {firstName: string; lastName: string; email: string} | undefined; Verification: {username: string; email: string; userId: string}; - Profile: {username: string; userId: string}; + ProfileOnboarding: {username: string; userId: string}; + + // Main Screens + Home: undefined; + Notifications: undefined; + Profile: undefined; + Search: undefined; + Upload: undefined; }; const RootStack = createStackNavigator<RootStackParamList>(); +const Tab = createBottomTabNavigator(); + +function MainTabNavigator() { + return ( + <Tab.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} /> + ); + } + }, + })} + tabBarOptions={{ + showLabel: false, + style: { + backgroundColor: 'transparent', + position: 'absolute', + borderTopWidth: 0, + }, + }}> + <Tab.Screen name="Home" component={Home} /> + <Tab.Screen name="Search" component={Search} /> + <Tab.Screen name="Upload" component={Upload} /> + <Tab.Screen name="Notifications" component={Notifications} /> + <Tab.Screen name="Profile" component={Profile} /> + </Tab.Navigator> + ); +} + interface RoutesProps {} const Routes: React.FC<RoutesProps> = ({}) => { @@ -47,8 +115,13 @@ const Routes: React.FC<RoutesProps> = ({}) => { options={{headerShown: false}} /> <RootStack.Screen - name="Profile" - component={Profile} + name="ProfileOnboarding" + component={ProfileOnboarding} + options={{headerShown: false}} + /> + <RootStack.Screen + name="Home" + component={MainTabNavigator} options={{headerShown: false}} /> </RootStack.Navigator> diff --git a/src/screens/main/Home.tsx b/src/screens/main/Home.tsx new file mode 100644 index 00000000..cd2c418a --- /dev/null +++ b/src/screens/main/Home.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import {RootStackParamList} from '../../routes'; +import {RouteProp} from '@react-navigation/native'; +import {StackNavigationProp} from '@react-navigation/stack'; +import {Background} from '../../components'; +import {Text} from 'react-native-animatable'; +import {StyleSheet} from 'react-native'; + +type HomeScreenRouteProp = RouteProp<RootStackParamList, 'Home'>; +type HomeScreenNavigationProp = StackNavigationProp<RootStackParamList, 'Home'>; +interface HomeProps { + route: HomeScreenRouteProp; + navigation: HomeScreenNavigationProp; +} + +/** + * Home Screen for displaying Tagg post suggestions + * for users to discover and browse + */ + +const Home: React.FC<HomeProps> = () => { + return ( + <Background centered style={styles.container}> + <Text> Tagg Home Screen 🏠 </Text> + </Background> + ); +}; +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); +export default Home; diff --git a/src/screens/main/Notifications.tsx b/src/screens/main/Notifications.tsx new file mode 100644 index 00000000..ec881c8e --- /dev/null +++ b/src/screens/main/Notifications.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import {RootStackParamList} from '../../routes'; +import {RouteProp} from '@react-navigation/native'; +import {StackNavigationProp} from '@react-navigation/stack'; +import {Background} from '../../components'; +import {Text} from 'react-native-animatable'; +import {StyleSheet} from 'react-native'; + +type NotificationsScreenRouteProp = RouteProp< + RootStackParamList, + 'Notifications' +>; +type NotificationsScreenNavigationProp = StackNavigationProp< + RootStackParamList, + 'Notifications' +>; +interface NotificationsProps { + route: NotificationsScreenRouteProp; + navigation: NotificationsScreenNavigationProp; +} + +/** + * Navigation Screen for displaying other users' + * actions on the logged in user's posts + */ + +const Notifications: React.FC<NotificationsProps> = () => { + return ( + <Background centered style={styles.container}> + <Text> Notifications will go here 🔔 </Text> + </Background> + ); +}; +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); +export default Notifications; diff --git a/src/screens/main/Profile.tsx b/src/screens/main/Profile.tsx new file mode 100644 index 00000000..a40a9cef --- /dev/null +++ b/src/screens/main/Profile.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import {RootStackParamList} from '../../routes'; +import {RouteProp} from '@react-navigation/native'; +import {StackNavigationProp} from '@react-navigation/stack'; +import {Background} from '../../components'; +import {Text} from 'react-native-animatable'; +import {StyleSheet} from 'react-native'; + +type ProfileScreenRouteProp = RouteProp<RootStackParamList, 'Home'>; +type ProfileScreenNavigationProp = StackNavigationProp< + RootStackParamList, + 'Profile' +>; +interface ProfileProps { + route: ProfileScreenRouteProp; + navigation: ProfileScreenNavigationProp; +} + +/** + * Profile Screen for a user's logged in profile + * including posts, messaging, and settings + */ + +const Profile: React.FC<ProfileProps> = () => { + return ( + <Background centered style={styles.container}> + <Text> Profile Screen 🤩 </Text> + </Background> + ); +}; +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); +export default Profile; diff --git a/src/screens/main/Search.tsx b/src/screens/main/Search.tsx new file mode 100644 index 00000000..caa5d205 --- /dev/null +++ b/src/screens/main/Search.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import {RootStackParamList} from '../../routes'; +import {RouteProp} from '@react-navigation/native'; +import {StackNavigationProp} from '@react-navigation/stack'; +import {Background} from '../../components'; +import {Text} from 'react-native-animatable'; +import {StyleSheet} from 'react-native'; + +type SearchScreenRouteProp = RouteProp<RootStackParamList, 'Search'>; +type SearchScreenNavigationProp = StackNavigationProp< + RootStackParamList, + 'Search' +>; +interface SearchProps { + route: SearchScreenRouteProp; + navigation: SearchScreenNavigationProp; +} + +/** + * Search Screen for user recommendations and a search + * tool to allow user to find other users + */ + +const Search: React.FC<SearchProps> = () => { + return ( + <Background centered style={styles.container}> + <Text> Search for people here 👀 </Text> + </Background> + ); +}; +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); +export default Search; diff --git a/src/screens/main/Upload.tsx b/src/screens/main/Upload.tsx new file mode 100644 index 00000000..4bbe2d0a --- /dev/null +++ b/src/screens/main/Upload.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import {RootStackParamList} from '../../routes'; +import {RouteProp} from '@react-navigation/native'; +import {StackNavigationProp} from '@react-navigation/stack'; +import {Background} from '../../components'; +import {Text} from 'react-native-animatable'; +import {StyleSheet} from 'react-native'; + +type UploadScreenRouteProp = RouteProp<RootStackParamList, 'Upload'>; +type UploadScreenNavigationProp = StackNavigationProp< + RootStackParamList, + 'Upload' +>; +interface UploadProps { + route: UploadScreenRouteProp; + navigation: UploadScreenNavigationProp; +} + +/** + * Upload Screen to allow users to upload posts to Tagg + */ + +const Upload: React.FC<UploadProps> = () => { + return ( + <Background centered style={styles.container}> + <Text> Upload pics ⬆ </Text> + </Background> + ); +}; +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); +export default Upload; diff --git a/src/screens/main/index.ts b/src/screens/main/index.ts new file mode 100644 index 00000000..9bd00c57 --- /dev/null +++ b/src/screens/main/index.ts @@ -0,0 +1,5 @@ +export {default as Home} from './Home'; +export {default as Notifications} from './Notifications'; +export {default as Profile} from './Profile'; +export {default as Search} from './Search'; +export {default as Upload} from './Upload'; diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx index 971595d3..537ce868 100644 --- a/src/screens/onboarding/Login.tsx +++ b/src/screens/onboarding/Login.tsx @@ -118,7 +118,7 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => { let statusCode = response.status; if (statusCode === 200) { - Alert.alert('Successfully logged in! 🥳', `Welcome ${form.username}`); + navigation.navigate('Home'); } else if (statusCode === 401) { Alert.alert( 'Login failed 😔', diff --git a/src/screens/onboarding/Profile.tsx b/src/screens/onboarding/ProfileOnboarding.tsx index d42b1185..191d62b2 100644 --- a/src/screens/onboarding/Profile.tsx +++ b/src/screens/onboarding/ProfileOnboarding.tsx @@ -15,14 +15,17 @@ import {Background} from '../../components'; import ImagePicker from 'react-native-image-crop-picker'; import {REGISTER_ENDPOINT} from '../../constants'; -type ProfileScreenRouteProp = RouteProp<RootStackParamList, 'Profile'>; -type ProfileScreenNavigationProp = StackNavigationProp< +type ProfileOnboardingScreenRouteProp = RouteProp< RootStackParamList, - 'Profile' + 'ProfileOnboarding' >; -interface ProfileProps { - route: ProfileScreenRouteProp; - navigation: ProfileScreenNavigationProp; +type ProfileOnboardingScreenNavigationProp = StackNavigationProp< + RootStackParamList, + 'ProfileOnboarding' +>; +interface ProfileOnboardingProps { + route: ProfileOnboardingScreenRouteProp; + navigation: ProfileOnboardingScreenNavigationProp; } /** @@ -30,7 +33,7 @@ interface ProfileProps { * @param navigation react-navigation navigation object */ -const Profile: React.FC<ProfileProps> = ({route}) => { +const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({route}) => { const {userId, username} = route.params; const [largePic, setLargePic] = React.useState(''); const [smallPic, setSmallPic] = React.useState(''); @@ -250,4 +253,4 @@ const styles = StyleSheet.create({ }, }); -export default Profile; +export default ProfileOnboarding; diff --git a/src/screens/onboarding/Verification.tsx b/src/screens/onboarding/Verification.tsx index 905de276..197bc0ca 100644 --- a/src/screens/onboarding/Verification.tsx +++ b/src/screens/onboarding/Verification.tsx @@ -59,7 +59,7 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => { }); let statusCode = verifyOtpResponse.status; if (statusCode === 200) { - navigation.navigate('Profile', { + navigation.navigate('ProfileOnboarding', { userId: userId, username: username, }); diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts index e89e1d5f..9b2f4cb0 100644 --- a/src/screens/onboarding/index.ts +++ b/src/screens/onboarding/index.ts @@ -2,4 +2,4 @@ export {default as Login} from './Login'; export {default as RegistrationOne} from './RegistrationOne'; export {default as RegistrationTwo} from './RegistrationTwo'; export {default as Verification} from './Verification'; -export {default as Profile} from './Profile'; +export {default as ProfileOnboarding} from './ProfileOnboarding'; @@ -1006,6 +1006,14 @@ resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.10.tgz#5dda643e19e587793bc2034dd9bf7398ad43d401" integrity sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ== +"@react-navigation/bottom-tabs@^5.7.2": + version "5.7.2" + resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-5.7.2.tgz#330c8ade026030830fce7806ce53cbae97a36e28" + integrity sha512-MVU6HrZ4pErzDToD5wRqKoJZITQqBXrexS5rioT3PBxzxaFT9eR0XPXe5D/fz9o1NWMpRN5BoRfLcGc72mtpAQ== + dependencies: + color "^3.1.2" + react-native-iphone-x-helper "^1.2.1" + "@react-navigation/core@^5.11.1": version "5.11.1" resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.11.1.tgz#c4890910ba3d6332ee6873f0adb3d3d13cf4fa4c" |
