aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/main/NotificationsScreen.tsx2
-rw-r--r--src/screens/onboarding/Login.tsx24
-rw-r--r--src/screens/onboarding/ProfileOnboarding.tsx47
-rw-r--r--src/screens/onboarding/UpdateRequired.tsx84
-rw-r--r--src/screens/onboarding/WelcomeScreen.tsx5
-rw-r--r--src/screens/onboarding/index.ts1
-rw-r--r--src/screens/profile/FriendsListScreen.tsx58
-rw-r--r--src/screens/profile/MomentCommentsScreen.tsx31
-rw-r--r--src/screens/suggestedPeople/SuggestedPeopleScreen.tsx1
9 files changed, 155 insertions, 98 deletions
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index f35bb22c..266ba3f9 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -5,6 +5,7 @@ import React, {useCallback, useEffect, useState} from 'react';
import {
RefreshControl,
SectionList,
+ StatusBar,
StyleSheet,
Text,
View,
@@ -146,6 +147,7 @@ const NotificationsScreen: React.FC = () => {
return (
<SafeAreaView>
+ <StatusBar barStyle={'dark-content'} />
<View style={styles.header}>
<Text style={styles.headerText}>Notifications</Text>
<View style={styles.underline} />
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index 2db039c1..450c5039 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -13,7 +13,7 @@ import {
TouchableOpacity,
} from 'react-native';
import SplashScreen from 'react-native-splash-screen';
-import {useDispatch} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
import {Background, TaggInput, TaggSquareButton} from '../../components';
import {LOGIN_ENDPOINT, usernameRegex} from '../../constants';
import {
@@ -25,8 +25,10 @@ import {
} from '../../constants/strings';
import {OnboardingStackParams} from '../../routes/onboarding';
import {fcmService} from '../../services';
+import {RootState} from '../../store/rootReducer';
import {BackgroundGradientType, UserType} from '../../types';
import {normalize, userLogin} from '../../utils';
+import UpdateRequired from './UpdateRequired';
type VerificationScreenRouteProp = RouteProp<OnboardingStackParams, 'Login'>;
type VerificationScreenNavigationProp = StackNavigationProp<
@@ -45,11 +47,6 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
// ref for focusing on input fields
const inputRef = useRef();
- const NO_USER: UserType = {
- userId: '',
- username: '',
- };
-
// login form state
const [form, setForm] = React.useState({
username: '',
@@ -59,7 +56,7 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
attemptedSubmit: false,
token: '',
});
- const [user, setUser] = useState<UserType>(NO_USER);
+ const {newVersionAvailable} = useSelector((state: RootState) => state.user);
/**
* Redux Store stuff
@@ -167,7 +164,6 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
userLogin(dispatch, {userId: data.UserID, username});
fcmService.sendFcmTokenToServer();
} catch (err) {
- setUser(NO_USER);
console.log(data);
Alert.alert(ERROR_INVALID_LOGIN);
}
@@ -216,6 +212,8 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
style={styles.container}
gradientType={BackgroundGradientType.Light}>
<StatusBar barStyle="light-content" />
+ {/* <Modal visible={newVersionAvailable} /> */}
+ <UpdateRequired visible={newVersionAvailable} />
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.keyboardAvoidingView}>
@@ -259,14 +257,16 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
<TaggSquareButton
onPress={handleLogin}
title={'Login'}
- mode={'normal'}
- color={'white'}
+ buttonStyle={'normal'}
+ buttonColor={'white'}
+ labelColor={'blue'}
/>
<TaggSquareButton
onPress={startRegistrationProcess}
title={'Sign up'}
- mode={'normal'}
- color={'purple'}
+ buttonStyle={'normal'}
+ buttonColor={'purple'}
+ labelColor={'blue'}
/>
</KeyboardAvoidingView>
</Background>
diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx
index 26ad93a7..c173c8e3 100644
--- a/src/screens/onboarding/ProfileOnboarding.tsx
+++ b/src/screens/onboarding/ProfileOnboarding.tsx
@@ -1,38 +1,34 @@
-import React from 'react';
+import AsyncStorage from '@react-native-community/async-storage';
import {RouteProp} from '@react-navigation/native';
-import moment from 'moment';
import {StackNavigationProp} from '@react-navigation/stack';
+import moment from 'moment';
+import React, {useMemo} from 'react';
import {
- Text,
+ Alert,
+ Image,
StatusBar,
StyleSheet,
- Image,
+ Text,
TouchableOpacity,
- Alert,
View,
} from 'react-native';
+import ImagePicker from 'react-native-image-crop-picker';
+import Animated from 'react-native-reanimated';
import {
Background,
+ BirthDatePicker,
TaggBigInput,
- TaggInput,
TaggDropDown,
- BirthDatePicker,
+ TaggInput,
} from '../../components';
-import {OnboardingStackParams} from '../../routes/onboarding';
-import ImagePicker from 'react-native-image-crop-picker';
import {
- EDIT_PROFILE_ENDPOINT,
- websiteRegex,
bioRegex,
- genderRegex,
CLASS_YEAR_LIST,
+ EDIT_PROFILE_ENDPOINT,
+ genderRegex,
TAGG_PURPLE,
+ websiteRegex,
} from '../../constants';
-import AsyncStorage from '@react-native-community/async-storage';
-import {BackgroundGradientType} from '../../types';
-import {PickerSelectProps} from 'react-native-picker-select';
-import Animated from 'react-native-reanimated';
-import {SCREEN_WIDTH} from '../../utils';
import {
ERROR_DOUBLE_CHECK_CONNECTION,
ERROR_PROFILE_CREATION_SHORT,
@@ -41,6 +37,9 @@ import {
ERROR_UPLOAD_LARGE_PROFILE_PIC,
ERROR_UPLOAD_SMALL_PROFILE_PIC,
} from '../../constants/strings';
+import {OnboardingStackParams} from '../../routes/onboarding';
+import {BackgroundGradientType} from '../../types';
+import {SCREEN_WIDTH} from '../../utils';
type ProfileOnboardingScreenRouteProp = RouteProp<
OnboardingStackParams,
@@ -383,6 +382,15 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
}
};
+ const profilePics = useMemo(() => {
+ return (
+ <View style={styles.profile}>
+ <LargeProfilePic />
+ <SmallProfilePic />
+ </View>
+ );
+ }, [form.largePic, form.smallPic]);
+
return (
<Animated.ScrollView bounces={false}>
<Background
@@ -390,10 +398,7 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
gradientType={BackgroundGradientType.Light}
style={styles.container}>
<StatusBar barStyle="light-content" />
- <View style={styles.profile}>
- <LargeProfilePic />
- <SmallProfilePic />
- </View>
+ {profilePics}
<View style={styles.contentContainer}>
<TaggInput
accessibilityHint="Enter a website."
diff --git a/src/screens/onboarding/UpdateRequired.tsx b/src/screens/onboarding/UpdateRequired.tsx
new file mode 100644
index 00000000..adf7ba71
--- /dev/null
+++ b/src/screens/onboarding/UpdateRequired.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import {Image, Linking, Modal, StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {CenteredView, TaggSquareButton} from '../../components';
+import {normalize, SCREEN_WIDTH} from '../../utils';
+
+interface UpdateRequiredProps {
+ visible: boolean;
+}
+
+const UpdateRequired: React.FC<UpdateRequiredProps> = ({visible}) => {
+ return (
+ <Modal animationType={'slide'} transparent={true} visible={visible}>
+ <CenteredView>
+ <View style={styles.contentContainer}>
+ <Image
+ style={styles.logo}
+ source={require('../../assets/images/logo-purple.png')}
+ />
+ <Text style={styles.header}>Update Required</Text>
+ <Text style={styles.body}>
+ You have to update your app to continue using Tagg, please download
+ the latest version from the app store
+ </Text>
+ <TaggSquareButton
+ title={'Update'}
+ onPress={() => {
+ Linking.openURL(
+ 'https://apps.apple.com/us/app/tagg-discover-your-community/id1537853613',
+ );
+ }}
+ buttonStyle={'normal'}
+ buttonColor={'purple'}
+ labelColor={'white'}
+ labelStyle={styles.button}
+ />
+ </View>
+ </CenteredView>
+ </Modal>
+ );
+};
+
+const styles = StyleSheet.create({
+ contentContainer: {
+ marginTop: '20%',
+ width: SCREEN_WIDTH * 0.9,
+ backgroundColor: 'white',
+ borderRadius: 5,
+ padding: '10%',
+ alignItems: 'center',
+ shadowColor: '#000',
+ shadowOffset: {
+ width: 0,
+ height: 2,
+ },
+ shadowOpacity: 0.25,
+ shadowRadius: 3.84,
+ elevation: 5,
+ },
+ logo: {
+ width: normalize(60),
+ height: normalize(60),
+ marginBottom: '10%',
+ },
+ header: {
+ fontSize: normalize(17),
+ fontWeight: '700',
+ lineHeight: 20,
+ marginBottom: '5%',
+ },
+ body: {
+ fontSize: normalize(13),
+ color: 'grey',
+ lineHeight: 20,
+ textAlign: 'center',
+ width: SCREEN_WIDTH * 0.8,
+ marginBottom: '10%',
+ },
+ button: {
+ fontWeight: '700',
+ },
+});
+
+export default UpdateRequired;
diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx
index bfb1a127..ae31f933 100644
--- a/src/screens/onboarding/WelcomeScreen.tsx
+++ b/src/screens/onboarding/WelcomeScreen.tsx
@@ -39,8 +39,9 @@ const WelcomeScreen: React.FC<WelcomeScreenProps> = ({navigation}) => {
<TaggSquareButton
onPress={handleNext}
title={'Next'}
- mode={'large'}
- color={'purple'}
+ buttonStyle={'large'}
+ buttonColor={'purple'}
+ labelColor={'white'}
style={styles.nextButton}
/>
</Background>
diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts
index 14d0e405..596683e5 100644
--- a/src/screens/onboarding/index.ts
+++ b/src/screens/onboarding/index.ts
@@ -14,3 +14,4 @@ export {default as CategorySelection} from './CategorySelection';
export {default as AddWaitlistUserScreen} from './AddWaitlistUserScreen';
export {default as WaitlistSuccessScreen} from './WaitlistSuccessScreen';
export {default as CreateCustomCategory} from './CreateCustomCategory';
+export {default as UpdateRequired} from './UpdateRequired';
diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx
index b2123f44..1cfef058 100644
--- a/src/screens/profile/FriendsListScreen.tsx
+++ b/src/screens/profile/FriendsListScreen.tsx
@@ -1,21 +1,14 @@
+import {RouteProp} from '@react-navigation/native';
import React from 'react';
-import {RouteProp, useNavigation} from '@react-navigation/native';
-import {TabsGradient, Friends} from '../../components';
-import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import {
- SafeAreaView,
- StyleSheet,
- Text,
- TouchableOpacity,
- View,
-} from 'react-native';
-import {ProfileStackParams} from '../../routes';
+import {SafeAreaView, StyleSheet, View} from 'react-native';
import {useSelector} from 'react-redux';
+import {Friends, TabsGradient} from '../../components';
+import {MainStackParams} from '../../routes';
import {RootState} from '../../store/rootReducer';
-import BackIcon from '../../assets/icons/back-arrow.svg';
+import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
type FriendsListScreenRouteProp = RouteProp<
- ProfileStackParams,
+ MainStackParams,
'FriendsListScreen'
>;
interface FriendsListScreenProps {
@@ -24,7 +17,6 @@ interface FriendsListScreenProps {
const FriendsListScreen: React.FC<FriendsListScreenProps> = ({route}) => {
const {userXId, screenType} = route.params;
- const navigation = useNavigation();
const {friends} = userXId
? useSelector((state: RootState) => state.userX[screenType][userXId])
@@ -33,17 +25,9 @@ const FriendsListScreen: React.FC<FriendsListScreenProps> = ({route}) => {
return (
<>
<SafeAreaView>
- <View style={styles.header}>
- <TouchableOpacity
- style={styles.headerButton}
- onPress={() => {
- navigation.pop();
- }}>
- <BackIcon height={'100%'} width={'100%'} color={'white'} />
- </TouchableOpacity>
- <Text style={styles.headerText}>Friends</Text>
+ <View style={styles.body}>
+ <Friends result={friends} screenType={screenType} userId={userXId} />
</View>
- <Friends result={friends} screenType={screenType} userId={userXId} />
</SafeAreaView>
<TabsGradient />
</>
@@ -55,31 +39,11 @@ const styles = StyleSheet.create({
backgroundColor: 'white',
height: '100%',
},
- header: {
- flexDirection: 'column',
- justifyContent: 'center',
- height: SCREEN_HEIGHT * 0.05,
- padding: '3%',
- paddingBottom: 0,
- marginTop: '1%',
- },
- headerText: {
- position: 'absolute',
- alignSelf: 'center',
- fontSize: normalize(18),
- fontWeight: '700',
- lineHeight: normalize(21.48),
- letterSpacing: normalize(1.3),
- },
- headerButton: {
- width: '5%',
- aspectRatio: 1,
- padding: 0,
- marginLeft: '5%',
- alignSelf: 'flex-start',
- marginBottom: '1%',
+ backButton: {
+ marginLeft: 10,
},
body: {
+ marginTop: HeaderHeight,
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT * 0.8,
},
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index ec193db5..b0208f6f 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -1,15 +1,19 @@
import {RouteProp, useNavigation} from '@react-navigation/native';
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {StyleSheet, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
-import BackIcon from '../../assets/icons/back-arrow.svg';
import {TabsGradient} from '../../components';
import {AddComment} from '../../components/';
import CommentsContainer from '../../components/comments/CommentsContainer';
import {ADD_COMMENT_TEXT} from '../../constants/strings';
-import {MainStackParams} from '../../routes/main';
+import {headerBarOptions, MainStackParams} from '../../routes/main';
import {CommentType} from '../../types';
-import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {
+ HeaderHeight,
+ normalize,
+ SCREEN_HEIGHT,
+ SCREEN_WIDTH,
+} from '../../utils';
/**
* Comments Screen for an image uploaded
@@ -39,19 +43,15 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
CommentType | undefined
>(undefined);
+ useEffect(() => {
+ navigation.setOptions({
+ ...headerBarOptions('black', `${commentsLength} Comments`),
+ });
+ }, [commentsLength, navigation]);
+
return (
<View style={styles.background}>
<SafeAreaView>
- <View style={styles.header}>
- <TouchableOpacity
- style={styles.headerButton}
- onPress={() => {
- navigation.pop();
- }}>
- <BackIcon height={'100%'} width={'100%'} color={'white'} />
- </TouchableOpacity>
- <Text style={styles.headerText}>{commentsLength + ' Comments'}</Text>
- </View>
<View style={styles.body}>
<CommentsContainer
objectId={moment_id}
@@ -110,6 +110,7 @@ const styles = StyleSheet.create({
fontWeight: '400',
},
body: {
+ marginTop: HeaderHeight,
width: SCREEN_WIDTH * 0.9,
height: SCREEN_HEIGHT * 0.8,
paddingTop: '3%',
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 80463b79..4d0a9bd5 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -175,5 +175,4 @@ const styles = StyleSheet.create({
},
body: {},
});
-
export default SuggestedPeopleScreen;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 09:17:36 +0000