diff options
Diffstat (limited to 'src')
7 files changed, 98 insertions, 44 deletions
diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx new file mode 100644 index 00000000..40df8e0f --- /dev/null +++ b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackNavigator.tsx @@ -0,0 +1,7 @@ +import {createStackNavigator} from '@react-navigation/stack'; + +export type SuggestedPeopleOnboardingStackParams = { + WelcomeScreen: undefined; +}; + +export const SuggestedPeopleOnboardingStack = createStackNavigator<SuggestedPeopleOnboardingStackParams>(); diff --git a/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx new file mode 100644 index 00000000..95070ed2 --- /dev/null +++ b/src/routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen.tsx @@ -0,0 +1,28 @@ +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, + }, +}); + +const SuggestedPeopleOnboardingStackScreen: React.FC = () => { + return ( + <SuggestedPeopleOnboardingStack.Navigator + initialRouteName="WelcomeScreen" + screenOptions={{headerShown: false}}> + <SuggestedPeopleOnboardingStack.Screen + name="WelcomeScreen" + component={SuggestedPeopleWelcomeScreen} + options={{ + gestureEnabled: false, + }} + /> + </SuggestedPeopleOnboardingStack.Navigator> + ); +}; + +export default SuggestedPeopleOnboardingStackScreen; diff --git a/src/routes/suggestedPeopleOnboarding/index.ts b/src/routes/suggestedPeopleOnboarding/index.ts new file mode 100644 index 00000000..df711493 --- /dev/null +++ b/src/routes/suggestedPeopleOnboarding/index.ts @@ -0,0 +1,2 @@ +export * from './SuggestedPeopleOnboardingStackNavigator'; +export * from './SuggestedPeopleOnboardingStackScreen'; diff --git a/src/screens/index.ts b/src/screens/index.ts index c34cd571..faf3d0b7 100644 --- a/src/screens/index.ts +++ b/src/screens/index.ts @@ -3,3 +3,4 @@ export * from './onboarding'; export * from './profile'; export * from './search'; export * from './suggestedPeople'; +export * from './suggestedPeopleOnboarding'; diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index 4d0a9bd5..2df48d7d 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -1,3 +1,4 @@ +import {useFocusEffect, useNavigation} from '@react-navigation/native'; import React, {useCallback} from 'react'; import { StatusBar, @@ -7,15 +8,13 @@ import { View, } from 'react-native'; import {Image} from 'react-native-animatable'; -import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; -import {TabsGradient, TaggsBar} from '../../components'; import {SafeAreaView} from 'react-native-safe-area-context'; -import {normalize} from '../../utils'; -import Animated from 'react-native-reanimated'; -import {ScreenType} from '../../types'; import {useSelector} from 'react-redux'; +import {TabsGradient} from '../../components'; +import SuggestedPeopleOnboardingStackScreen from '../../routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen'; import {RootState} from '../../store/rootReducer'; -import {useFocusEffect, useNavigation} from '@react-navigation/native'; +import {ScreenType} from '../../types'; +import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; /** * Bare bones for suggested people consisting of: @@ -23,6 +22,12 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native'; */ const SuggestedPeopleScreen: React.FC = () => { + // const {onboarded_sugggested_people} = useSelector( + // (state: RootState) => state.user.profile, + // ); + + const onboarded_sugggested_people = false; + // Can be removed once firstname, username props are received const firstName = 'Sarah'; @@ -48,47 +53,43 @@ const SuggestedPeopleScreen: React.FC = () => { }, [sp_swipe_tutorial, navigation]), ); - return ( - <> - <SafeAreaView> - <StatusBar barStyle={'light-content'} /> - <Image - // !!! Displaying Sarah Miller's image - source={require('../../assets/images/sarah_miller_full.jpeg')} - style={styles.image} - /> - <View style={styles.mainContainer}> - <Text style={styles.title}>Suggested People</Text> - <View style={styles.body}> - {/* First row contaning name, username, add button (w/o functionality) */} - <View style={styles.addUserContainer}> - <View style={styles.nameInfoContainer}> - <Text style={styles.firstName}>{firstName}</Text> - <Text style={styles.username}>{username}</Text> - </View> - <TouchableOpacity - activeOpacity={0.5} - // TODO: Call function to Add Friend - onPress={() => console.log('Call add friend function')}> - <View style={styles.addButton}> - <Text style={styles.addButtonTitle}>{'Add Friend'}</Text> - </View> - </TouchableOpacity> + const mainContent = () => ( + <SafeAreaView> + <StatusBar barStyle={'light-content'} /> + <Image + // !!! Displaying Sarah Miller's image + source={require('../../assets/images/sarah_miller_full.jpeg')} + style={styles.image} + /> + <View style={styles.mainContainer}> + <Text style={styles.title}>Suggested People</Text> + <View style={styles.body}> + {/* Added first row contaning name, username, add button (w/o functionality) */} + <View style={styles.addUserContainer}> + <View style={styles.nameInfoContainer}> + <Text style={styles.firstName}>{firstName}</Text> + <Text style={styles.username}>{username}</Text> </View> - {/* Taggs Bar. Displays only linked profiles for user while viewing their own profile. */} - <TaggsBar - y={Animated.useValue(0)} - // :: For testing purposes, to view user's own profile, pass userXId='' - userXId={''} - profileBodyHeight={0} - screenType={screenType} - /> - {/* TODO: Add MutualFriends here */} + <TouchableOpacity + activeOpacity={0.5} + onPress={() => console.log('Call add friend function')}> + <View style={styles.addButton}> + <Text style={styles.addButtonTitle}>{'Add Friend'}</Text> + </View> + </TouchableOpacity> </View> + {/* TODO: Add TaggsBar here */} + {/* TODO: Add MutualFriends here */} </View> - <TabsGradient /> - </SafeAreaView> - </> + </View> + <TabsGradient /> + </SafeAreaView> + ); + + return onboarded_sugggested_people ? ( + mainContent() + ) : ( + <SuggestedPeopleOnboardingStackScreen /> ); }; diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx new file mode 100644 index 00000000..da6adc59 --- /dev/null +++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import {StyleSheet, Text} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; + +const SuggestedPeopleWelcomeScreen: React.FC = () => { + return ( + <SafeAreaView> + <Text>Welcome!</Text> + </SafeAreaView> + ); +}; + +const styles = StyleSheet.create({}); +export default SuggestedPeopleWelcomeScreen; diff --git a/src/screens/suggestedPeopleOnboarding/index.ts b/src/screens/suggestedPeopleOnboarding/index.ts new file mode 100644 index 00000000..6adbb75d --- /dev/null +++ b/src/screens/suggestedPeopleOnboarding/index.ts @@ -0,0 +1 @@ +export {default as SuggestedPeopleWelcomeScreen} from './SuggestedPeopleWelcomeScreen'; |