From dc16576e4a25486500046e1b10e190f2516dc0ee Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 5 Aug 2021 08:12:59 -0700 Subject: Revamp category selection --- src/routes/main/MainStackScreen.tsx | 3 - src/screens/profile/CaptionScreen.tsx | 4 +- src/screens/profile/ChoosingCategoryScreen.tsx | 77 +++++++++++++++++++------- 3 files changed, 61 insertions(+), 23 deletions(-) (limited to 'src') diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 64060554..47e16aed 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -188,9 +188,6 @@ const MainStackScreen: React.FC = ({route}) => { = ({route, navigation}) => { text={'Category'} imageUri={require('../../assets/images/images.png')} onPress={() => - navigation.navigate('ChoosingCategoryScreen', {}) + navigation.navigate('ChoosingCategoryScreen', { + newCustomCategory: momentCategory, + }) } /> ), diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx index 8a7e3007..5e29d4de 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, useEffect} from 'react'; +import React, {FC, Fragment, useEffect, useState} from 'react'; import { Image, ScrollView, @@ -11,11 +11,12 @@ import { } from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; import {useDispatch, useSelector} from 'react-redux'; +import BackIcon from '../../assets/icons/back-arrow.svg'; import FrontArrow from '../../assets/icons/front-arrow.svg'; 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 {headerBarOptions, MainStackParams} from '../../routes'; import {updateMomentCategories} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import { @@ -42,20 +43,51 @@ const ChoosingCategoryScreen: React.FC = ({ const {momentCategories} = useSelector( (state: RootState) => state.momentCategories, ); + const newCustomCategory = route.params.newCustomCategory; + const [selectedCategory, setSelectedCategory] = useState( + newCustomCategory, + ); const dispatch = useDispatch(); const navigation = useNavigation(); const tabBarHeight = useBottomTabBarHeight(); useEffect(() => { - if (route.params.newCustomCategory) { - dispatch( - updateMomentCategories( - momentCategories.concat([route.params.newCustomCategory]), - false, - ), + navigation.setOptions({ + ...headerBarOptions('white', 'Choose Category'), + headerLeft: () => ( + { + navigation.navigate('CaptionScreen', { + selectedCategory: selectedCategory, + }); + }}> + + + ), + }); + }, [navigation, selectedCategory]); + + useEffect(() => { + if (newCustomCategory) { + const isPresent = momentCategories.findIndex( + (item) => newCustomCategory === item, ); + if (isPresent === -1) { + dispatch( + updateMomentCategories( + momentCategories.concat([newCustomCategory]), + false, + ), + ); + } + setSelectedCategory(newCustomCategory); } - }, [route.params.newCustomCategory]); + }, [route.params]); const ListItem: FC<{ title: string; @@ -77,11 +109,15 @@ const ChoosingCategoryScreen: React.FC = ({ {title} - + {selectedCategory === title ? ( + + ) : ( + + )} ); @@ -97,11 +133,7 @@ const ChoosingCategoryScreen: React.FC = ({ - navigation.navigate('CaptionScreen', { - selectedCategory: title, - }) - } + onPress={() => setSelectedCategory(title)} /> ))} = ({ }; const styles = StyleSheet.create({ + backButton: { + marginLeft: 30, + shadowColor: 'black', + shadowRadius: 3, + shadowOpacity: 0.7, + shadowOffset: {width: 0, height: 0}, + }, container: { marginTop: StatusBarHeight, }, -- cgit v1.2.3-70-g09d2 From 7ba1bf283d7dbe8e1da53d1beb8fff14064ad891 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 5 Aug 2021 08:24:58 -0700 Subject: Add new check icon --- src/assets/icons/radio-check-green.svg | 1 + src/screens/profile/ChoosingCategoryScreen.tsx | 23 ++++++++++++++--------- 2 files changed, 15 insertions(+), 9 deletions(-) create mode 100644 src/assets/icons/radio-check-green.svg (limited to 'src') diff --git a/src/assets/icons/radio-check-green.svg b/src/assets/icons/radio-check-green.svg new file mode 100644 index 00000000..39516999 --- /dev/null +++ b/src/assets/icons/radio-check-green.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx index 5e29d4de..e025dce6 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, Fragment, useEffect, useState} from 'react'; +import React, {FC, useEffect, useState} from 'react'; import { Image, ScrollView, @@ -12,8 +12,8 @@ import { import LinearGradient from 'react-native-linear-gradient'; import {useDispatch, useSelector} from 'react-redux'; import BackIcon from '../../assets/icons/back-arrow.svg'; -import FrontArrow from '../../assets/icons/front-arrow.svg'; import PlusIcon from '../../assets/icons/plus-icon.svg'; +import RadioCheck from '../../assets/icons/radio-check-green.svg'; import {SearchBackground, TaggSquareButton} from '../../components'; import {TAGGS_GRADIENT, TAGG_DARK_PURPLEISH_BLUE} from '../../constants'; import {headerBarOptions, MainStackParams} from '../../routes'; @@ -110,13 +110,17 @@ const ChoosingCategoryScreen: React.FC = ({ {selectedCategory === title ? ( - + ) : ( - + )} @@ -201,7 +205,8 @@ const styles = StyleSheet.create({ letterSpacing: normalize(0.3), fontWeight: '600', alignSelf: 'center', - marginLeft: normalize(25), + marginHorizontal: SCREEN_WIDTH * 0.03, + width: SCREEN_WIDTH * 0.7, }, row: { flexDirection: 'row', -- cgit v1.2.3-70-g09d2