From 3454ecb361c2196fb28d71f72ca2845cf0542ce7 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 9 Feb 2021 18:31:42 -0500 Subject: welcome screen done, created base view for upload image --- .../images/suggested-people-preview-large.png | Bin 0 -> 1246502 bytes .../images/suggested-people-preview-small.png | Bin 0 -> 1110201 bytes src/assets/images/tagg-logo.png | Bin 0 -> 34714 bytes .../SuggestedPeopleOnboardingStackNavigator.tsx | 1 + .../SuggestedPeopleOnboardingStackScreen.tsx | 18 ++--- .../SuggestedPeopleUpdatePictureScreen.tsx | 37 ++++++++++ .../SuggestedPeopleWelcomeScreen.tsx | 77 +++++++++++++++++++-- src/screens/suggestedPeopleOnboarding/index.ts | 1 + 8 files changed, 121 insertions(+), 13 deletions(-) create mode 100644 src/assets/images/suggested-people-preview-large.png create mode 100644 src/assets/images/suggested-people-preview-small.png create mode 100644 src/assets/images/tagg-logo.png create mode 100644 src/screens/suggestedPeopleOnboarding/SuggestedPeopleUpdatePictureScreen.tsx (limited to 'src') diff --git a/src/assets/images/suggested-people-preview-large.png b/src/assets/images/suggested-people-preview-large.png new file mode 100644 index 00000000..b80eda27 Binary files /dev/null and b/src/assets/images/suggested-people-preview-large.png differ diff --git a/src/assets/images/suggested-people-preview-small.png b/src/assets/images/suggested-people-preview-small.png new file mode 100644 index 00000000..bb1aef89 Binary files /dev/null and b/src/assets/images/suggested-people-preview-small.png differ diff --git a/src/assets/images/tagg-logo.png b/src/assets/images/tagg-logo.png new file mode 100644 index 00000000..8d67f1f7 Binary files /dev/null and b/src/assets/images/tagg-logo.png differ diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx index 40df8e0f..e957e48c 100644 --- a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx +++ b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx @@ -2,6 +2,7 @@ import {createStackNavigator} from '@react-navigation/stack'; export type SuggestedPeopleOnboardingStackParams = { WelcomeScreen: undefined; + UploadPicture: undefined; }; export const SuggestedPeopleOnboardingStack = createStackNavigator(); diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx index 95070ed2..871bd7c8 100644 --- a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx +++ b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx @@ -1,13 +1,8 @@ -import {StackCardInterpolationProps} from '@react-navigation/stack'; import React from 'react'; import {SuggestedPeopleOnboardingStack} from '.'; import {SuggestedPeopleWelcomeScreen} from '../../screens'; - -const forFade = ({current}: StackCardInterpolationProps) => ({ - cardStyle: { - opacity: current.progress, - }, -}); +import SuggestedPeopleUploadPictureScreen from '../../screens/suggestedPeopleOnboarding/SuggestedPeopleUpdatePictureScreen'; +import {headerBarOptions} from '../main'; const SuggestedPeopleOnboardingStackScreen: React.FC = () => { return ( @@ -18,7 +13,14 @@ const SuggestedPeopleOnboardingStackScreen: React.FC = () => { name="WelcomeScreen" component={SuggestedPeopleWelcomeScreen} options={{ - gestureEnabled: false, + ...headerBarOptions('white', ''), + }} + /> + diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUpdatePictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUpdatePictureScreen.tsx new file mode 100644 index 00000000..834fda9f --- /dev/null +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUpdatePictureScreen.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import {StatusBar, StyleSheet} from 'react-native'; +import {Text} from 'react-native-animatable'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {TaggSquareButton} from '../../components'; +import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; + +const SuggestedPeopleUploadPictureScreen: React.FC = () => { + return ( + <> + + + FOoooooo + {/* {}} title={'done'} /> */} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + width: '100%', + height: '100%', + backgroundColor: '#878787', + alignItems: 'center', + }, + body: { + fontSize: normalize(20), + lineHeight: normalize(25), + textAlign: 'center', + fontWeight: '700', + color: 'white', + marginTop: '5%', + width: SCREEN_WIDTH * 0.8, + }, +}); +export default SuggestedPeopleUploadPictureScreen; diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx index da6adc59..10f3b3a5 100644 --- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx @@ -1,14 +1,81 @@ +import {BlurView} from '@react-native-community/blur'; +import {useNavigation} from '@react-navigation/native'; import React from 'react'; -import {StyleSheet, Text} from 'react-native'; +import {Image, StatusBar, StyleSheet, TouchableOpacity} from 'react-native'; +import {Text} from 'react-native-animatable'; import {SafeAreaView} from 'react-native-safe-area-context'; +import UpArrow from '../../assets/icons/up_arrow.svg'; +import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; const SuggestedPeopleWelcomeScreen: React.FC = () => { + const navigation = useNavigation(); return ( - - Welcome! - + <> + + + + + + + Welcome to the suggested people's page where you can discover new + people!{'\n\n'}Let's get you set up! + + + + navigation.push('UploadPicture')}> + + + ); }; -const styles = StyleSheet.create({}); +const styles = StyleSheet.create({ + backgroundImage: { + width: SCREEN_WIDTH, + height: SCREEN_HEIGHT, + position: 'absolute', + }, + container: { + width: '100%', + height: '100%', + backgroundColor: 'rgba(0,0,0,0.65)', + alignItems: 'center', + }, + logo: { + width: normalize(120), + height: normalize(120), + marginTop: '25%', + }, + body: { + fontSize: normalize(20), + lineHeight: normalize(25), + textAlign: 'center', + fontWeight: '700', + color: 'white', + marginTop: '5%', + width: SCREEN_WIDTH * 0.8, + }, + nextButton: { + position: 'absolute', + color: 'white', + transform: [{rotate: '90deg'}], + width: normalize(70), + aspectRatio: 0.86, + bottom: SCREEN_HEIGHT * 0.1, + right: '5%', + }, +}); export default SuggestedPeopleWelcomeScreen; diff --git a/src/screens/suggestedPeopleOnboarding/index.ts b/src/screens/suggestedPeopleOnboarding/index.ts index 6adbb75d..2a349cf7 100644 --- a/src/screens/suggestedPeopleOnboarding/index.ts +++ b/src/screens/suggestedPeopleOnboarding/index.ts @@ -1 +1,2 @@ export {default as SuggestedPeopleWelcomeScreen} from './SuggestedPeopleWelcomeScreen'; +export {default as SuggestedPeopleUpdatePictureScreen} from './SuggestedPeopleUpdatePictureScreen'; -- cgit v1.2.3-70-g09d2