aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/common/TaggSquareButton.tsx9
-rw-r--r--src/components/moments/Moment.tsx1
-rw-r--r--src/routes/main/MainStackNavigator.tsx2
-rw-r--r--src/screens/profile/CaptionScreen.tsx1
-rw-r--r--src/screens/profile/CategorySelection.tsx2
-rw-r--r--src/screens/profile/ChoosingCategoryScreen.tsx56
6 files changed, 63 insertions, 8 deletions
diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
index 2447276d..b1e65ba6 100644
--- a/src/components/common/TaggSquareButton.tsx
+++ b/src/components/common/TaggSquareButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {FC} from 'react';
import {
GestureResponderEvent,
StyleProp,
@@ -25,6 +25,7 @@ interface TaggSquareButtonProps extends TouchableOpacityProps {
labelColor: 'white' | 'blue';
style?: StyleProp<ViewStyle>;
labelStyle?: StyleProp<TextStyle>;
+ icon?: Element;
}
const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
@@ -55,6 +56,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
{...props}
onPress={props.onPress}
style={[styles.largeButton, buttonColor, props.style]}>
+ {props.icon}
<Text style={[styles.largeLabel, labelColor, props.labelStyle]}>
{props.title}
</Text>
@@ -71,6 +73,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
colors={BACKGROUND_GRADIENT_MAP[0]}
useAngle
angle={90}>
+ {props.icon}
<Text style={[styles.gradientLabel, props.labelStyle]}>
{props.title}
</Text>
@@ -84,6 +87,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
{...props}
onPress={props.onPress}
style={[styles.normalButton, buttonColor, props.style]}>
+ {props.icon}
<Text style={[styles.normalLabel, labelColor, props.labelStyle]}>
{props.title}
</Text>
@@ -94,6 +98,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
const styles = StyleSheet.create({
largeButton: {
+ flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: '70%',
@@ -106,6 +111,7 @@ const styles = StyleSheet.create({
color: '#eee',
},
normalButton: {
+ flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: SCREEN_WIDTH * 0.45,
@@ -118,6 +124,7 @@ const styles = StyleSheet.create({
fontWeight: '500',
},
gradientButton: {
+ flexDirection: 'row',
marginTop: '8%',
borderRadius: 5,
paddingVertical: '5%',
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index ca736b92..12c1fda4 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -1,4 +1,3 @@
-import {useNavigation} from '@react-navigation/native';
import React from 'react';
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
import {Text} from 'react-native-animatable';
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 05f5138f..2dac1777 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -50,7 +50,7 @@ export type MainStackParams = {
moment?: MomentType;
};
ChoosingCategoryScreen: {
- newCustomCategory: string;
+ newCustomCategory?: string;
};
TagFriendsScreen: {
media: {
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 86e30bdc..15566555 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -431,7 +431,6 @@ const styles = StyleSheet.create({
postButton: {
width: SCREEN_WIDTH * 0.8,
height: normalize(37),
- backgroundColor: TAGG_LIGHT_BLUE,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 6,
diff --git a/src/screens/profile/CategorySelection.tsx b/src/screens/profile/CategorySelection.tsx
index 9b8672ea..2f364e59 100644
--- a/src/screens/profile/CategorySelection.tsx
+++ b/src/screens/profile/CategorySelection.tsx
@@ -170,7 +170,7 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
onPress={() => {
navigation.push('CreateCustomCategory', {
existingCategories: momentCategories.concat(selectedCategories),
- fromScreen: 'CategorySelection',
+ fromScreen: route.name,
});
}}>
<PlusIcon width={30} height={30} color="white" />
diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx
index 24db015e..cdc941db 100644
--- a/src/screens/profile/ChoosingCategoryScreen.tsx
+++ b/src/screens/profile/ChoosingCategoryScreen.tsx
@@ -1,6 +1,6 @@
import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
import {RouteProp, useNavigation} from '@react-navigation/native';
-import React, {FC} from 'react';
+import React, {FC, useEffect} from 'react';
import {
Image,
ScrollView,
@@ -11,16 +11,19 @@ import {
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {useSelector} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
import FrontArrow from '../../assets/icons/front-arrow.svg';
-import {SearchBackground} from '../../components';
+import PlusIcon from '../../assets/icons/plus-icon.svg';
+import {SearchBackground, TaggSquareButton} from '../../components';
import {TAGGS_GRADIENT, TAGG_DARK_PURPLEISH_BLUE} from '../../constants';
import {MainStackParams} from '../../routes';
+import {updateMomentCategories} from '../../store/actions';
import {RootState} from '../../store/rootReducer';
import {
getMomentCategoryIconInfo,
normalize,
SCREEN_HEIGHT,
+ SCREEN_WIDTH,
StatusBarHeight,
} from '../../utils';
@@ -39,10 +42,22 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
const {momentCategories} = useSelector(
(state: RootState) => state.momentCategories,
);
+ const dispatch = useDispatch();
const navigation = useNavigation();
const tabBarHeight = useBottomTabBarHeight();
const insetTop = useSafeAreaInsets().top;
+ useEffect(() => {
+ if (route.params.newCustomCategory) {
+ dispatch(
+ updateMomentCategories(
+ momentCategories.concat([route.params.newCustomCategory]),
+ false,
+ ),
+ );
+ }
+ }, [route.params.newCustomCategory]);
+
const ListItem: FC<{
title: string;
onPress: () => void;
@@ -90,6 +105,21 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
}
/>
))}
+ <TaggSquareButton
+ onPress={() =>
+ navigation.navigate('CreateCustomCategory', {
+ existingCategories: momentCategories,
+ fromScreen: route.name,
+ })
+ }
+ title={'Create a new category'}
+ buttonStyle={'large'}
+ buttonColor={'blue'}
+ labelColor={'white'}
+ style={styles.button}
+ labelStyle={styles.buttonText}
+ icon={<PlusIcon style={styles.plusIcon} />}
+ />
</ScrollView>
</View>
</SearchBackground>
@@ -138,6 +168,26 @@ const styles = StyleSheet.create({
row: {
flexDirection: 'row',
},
+ button: {
+ width: SCREEN_WIDTH * 0.9,
+ height: normalize(67),
+ justifyContent: 'center',
+ alignItems: 'center',
+ borderRadius: 8,
+ alignSelf: 'center',
+ marginTop: 40,
+ },
+ buttonText: {
+ color: 'white',
+ fontSize: normalize(15),
+ lineHeight: 18,
+ },
+ plusIcon: {
+ color: 'white',
+ marginRight: normalize(25),
+ width: 30,
+ height: 30,
+ },
});
export default ChoosingCategoryScreen;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 10:18:43 +0000