diff options
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/Routes.tsx | 34 | ||||
| -rw-r--r-- | src/routes/main/MainStackScreen.tsx | 125 |
2 files changed, 105 insertions, 54 deletions
diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index a5383a47..1cbc9bc5 100644 --- a/src/routes/Routes.tsx +++ b/src/routes/Routes.tsx @@ -1,18 +1,23 @@ -import React, {useEffect} from 'react'; -import NavigationBar from './tabs'; -import Onboarding from './onboarding'; -import {useSelector, useDispatch} from 'react-redux'; +import messaging from '@react-native-firebase/messaging'; +import React, {useEffect, useState} from 'react'; +import DeviceInfo from 'react-native-device-info'; +import SplashScreen from 'react-native-splash-screen'; +import {useDispatch, useSelector} from 'react-redux'; +import {fcmService, getLiveVersion} from '../services'; +import { + updateNewNotificationReceived, + updateNewVersionAvailable, +} from '../store/actions'; import {RootState} from '../store/rootReducer'; import {userLogin} from '../utils'; -import SplashScreen from 'react-native-splash-screen'; -import messaging from '@react-native-firebase/messaging'; -import {updateNewNotificationReceived} from '../store/actions'; -import {fcmService} from '../services'; +import Onboarding from './onboarding'; +import NavigationBar from './tabs'; const Routes: React.FC = () => { const { user: {userId}, } = useSelector((state: RootState) => state.user); + const [newVersionAvailable, setNewVersionAvailable] = useState(false); const dispatch = useDispatch(); /** @@ -47,7 +52,18 @@ const Routes: React.FC = () => { } }); - return userId ? <NavigationBar /> : <Onboarding />; + useEffect(() => { + const checkVersion = async () => { + const liveVersion = await getLiveVersion(); + if (liveVersion && liveVersion !== DeviceInfo.getVersion()) { + setNewVersionAvailable(true); + dispatch(updateNewVersionAvailable(true)); + } + }; + checkVersion(); + }); + + return userId && !newVersionAvailable ? <NavigationBar /> : <Onboarding />; }; export default Routes; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 2531eec7..0b762dff 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -2,6 +2,9 @@ import AsyncStorage from '@react-native-community/async-storage'; import {RouteProp} from '@react-navigation/native'; import {StackNavigationOptions} from '@react-navigation/stack'; import React, {useState} from 'react'; +import {StyleSheet, Text} from 'react-native'; +import {normalize} from 'react-native-elements'; +import BackIcon from '../../assets/icons/back-arrow.svg'; import { AnimatedTutorial, CaptionScreen, @@ -107,16 +110,9 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => { <MainStack.Screen name="Profile" component={ProfileScreen} + initialParams={{screenType}} options={{ - headerShown: true, - headerTransparent: true, - headerBackTitleVisible: false, - headerTitle: '', - headerTintColor: 'white', - headerStyle: {height: AvatarHeaderHeight}, - }} - initialParams={{ - screenType, + ...headerBarOptions('white', ''), }} /> {isSearchTab && @@ -158,94 +154,133 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => { <MainStack.Screen name="CaptionScreen" component={CaptionScreen} - options={{...modalStyle, gestureEnabled: false}} + options={{ + ...modalStyle, + gestureEnabled: false, + }} /> <MainStack.Screen name="SocialMediaTaggs" component={SocialMediaTaggs} + initialParams={{screenType}} options={{ - headerShown: true, - headerTransparent: true, - headerBackTitleVisible: false, - headerTitle: '', - headerTintColor: 'white', + ...headerBarOptions('white', ''), headerStyle: {height: AvatarHeaderHeight}, }} - initialParams={{screenType}} /> <MainStack.Screen name="CategorySelection" component={CategorySelection} options={{ - headerShown: true, - headerTransparent: true, - headerBackTitleVisible: false, - headerTintColor: 'white', - headerTitle: '', + ...headerBarOptions('white', ''), }} /> <MainStack.Screen name="CreateCustomCategory" component={CreateCustomCategory} options={{ - headerShown: true, - headerTransparent: true, - headerBackTitleVisible: false, - headerTintColor: 'white', - headerTitle: '', + ...headerBarOptions('white', ''), }} /> <MainStack.Screen name="IndividualMoment" component={IndividualMoment} + initialParams={{screenType}} options={{ + ...modalStyle, gestureEnabled: false, - cardStyle: { - backgroundColor: 'rgba(0, 0, 0, 0.6)', - }, - cardOverlayEnabled: true, - cardStyleInterpolator: ({current: {progress}}) => ({ - cardStyle: { - opacity: progress.interpolate({ - inputRange: [0, 0.5, 0.9, 1], - outputRange: [0, 0.25, 0.7, 1], - }), - }, - }), }} - initialParams={{screenType}} /> <MainStack.Screen name="MomentCommentsScreen" component={MomentCommentsScreen} initialParams={{screenType}} + options={{ + ...headerBarOptions('black', 'Comments'), + }} /> <MainStack.Screen name="MomentUploadPrompt" component={MomentUploadPromptScreen} + initialParams={{screenType}} options={{ ...modalStyle, }} - initialParams={{screenType}} /> <MainStack.Screen name="FriendsListScreen" component={FriendsListScreen} initialParams={{screenType}} + options={{ + ...headerBarOptions('black', 'Friends'), + }} /> <MainStack.Screen name="EditProfile" component={EditProfile} options={{ - headerShown: true, - headerTitle: 'Edit Profile', - headerTransparent: true, - headerBackTitleVisible: false, - headerTintColor: 'white', + ...headerBarOptions('white', 'Edit Profile'), }} /> </MainStack.Navigator> ); }; +export const headerBarOptions: ( + color: 'white' | 'black', + title: string, +) => StackNavigationOptions = (color, title) => ({ + headerShown: true, + headerTransparent: true, + headerBackTitleVisible: false, + headerBackImage: () => ( + <BackIcon + height={normalize(18)} + width={normalize(18)} + color={color} + style={styles.backButton} + /> + ), + headerTitle: () => ( + <Text style={[styles.headerTitle, {color: color}]}>{title}</Text> + ), +}); + +const modalStyle: StackNavigationOptions = { + cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'}, + gestureDirection: 'vertical', + cardOverlayEnabled: true, + cardStyleInterpolator: ({current: {progress}}) => ({ + cardStyle: { + opacity: progress.interpolate({ + inputRange: [0, 0.5, 0.9, 1], + outputRange: [0, 0.25, 0.7, 1], + }), + }, + }), +}; + +const styles = StyleSheet.create({ + backButton: { + marginLeft: 30, + }, + headerTitle: { + fontSize: normalize(16), + letterSpacing: normalize(1.3), + fontWeight: '700', + }, + whiteHeaderTitle: { + fontSize: normalize(16), + letterSpacing: normalize(1.3), + fontWeight: '700', + color: 'white', + }, + blackHeaderTitle: { + fontSize: normalize(16), + letterSpacing: normalize(1.3), + fontWeight: '700', + color: 'black', + }, +}); + export default MainStackScreen; |