From 20b0ca39b333e0e3687f25347431643b5b2a95ef Mon Sep 17 00:00:00 2001 From: meganhong <34787696+meganhong@users.noreply.github.com> Date: Mon, 27 Jul 2020 13:05:03 -0700 Subject: TMA-167: Create Navigation Bar (#25) * Renamed Profile in Onboarding and added dummy main screens * Comments for new screens created * change navigation in verification to profileonboarding * added icons and tab navigation * added icons to navigation bar * add clicked icons * added 2x and 3x icon sizes * rename for resizing to work * remove upload clicked as informed by design * changed initialRouteName back to Login * created NavigationIcon component to hold all the nav icons * added default case * changed intialRouteName back to Login * fixed icon names * fixed icon names * add navigation to home page after login Co-authored-by: Megan Hong --- src/screens/main/Home.tsx | 35 ++++++++++++++++++++++++++++++++ src/screens/main/Notifications.tsx | 41 ++++++++++++++++++++++++++++++++++++++ src/screens/main/Profile.tsx | 38 +++++++++++++++++++++++++++++++++++ src/screens/main/Search.tsx | 38 +++++++++++++++++++++++++++++++++++ src/screens/main/Upload.tsx | 37 ++++++++++++++++++++++++++++++++++ src/screens/main/index.ts | 5 +++++ 6 files changed, 194 insertions(+) create mode 100644 src/screens/main/Home.tsx create mode 100644 src/screens/main/Notifications.tsx create mode 100644 src/screens/main/Profile.tsx create mode 100644 src/screens/main/Search.tsx create mode 100644 src/screens/main/Upload.tsx create mode 100644 src/screens/main/index.ts (limited to 'src/screens/main') 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; +type HomeScreenNavigationProp = StackNavigationProp; +interface HomeProps { + route: HomeScreenRouteProp; + navigation: HomeScreenNavigationProp; +} + +/** + * Home Screen for displaying Tagg post suggestions + * for users to discover and browse + */ + +const Home: React.FC = () => { + return ( + + Tagg Home Screen 🏠 + + ); +}; +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 = () => { + return ( + + Notifications will go here 🔔 + + ); +}; +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; +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 = () => { + return ( + + Profile Screen 🤩 + + ); +}; +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; +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 = () => { + return ( + + Search for people here 👀 + + ); +}; +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; +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 = () => { + return ( + + Upload pics ⬆ + + ); +}; +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'; -- cgit v1.2.3-70-g09d2