From f3134bbe9b8bc84a906ca1dac46959b360dd243f Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 16 Jun 2021 01:58:59 -0700 Subject: image cropper dump --- src/routes/main/MainStackNavigator.tsx | 10 +++++++++- src/routes/main/MainStackScreen.tsx | 8 ++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) (limited to 'src/routes') diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 8fce5e2f..757d89f7 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -38,7 +38,10 @@ export type MainStackParams = { }; CaptionScreen: { title?: string; - image?: Image; + image?: { + filename: string; + path: string; + }; screenType: ScreenType; selectedTags?: MomentTagType[]; moment?: MomentType; @@ -107,6 +110,11 @@ export type MainStackParams = { ChatList: undefined; Chat: undefined; NewChatModal: undefined; + ImageCropper: { + image: Image; + screenType: ScreenType; + title: string; + }; }; export const MainStack = createStackNavigator(); diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 3be2ff28..cb23f9fc 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -3,6 +3,7 @@ import {StackNavigationOptions} from '@react-navigation/stack'; import React from 'react'; import {StyleSheet, Text} from 'react-native'; import {normalize} from 'react-native-elements'; +import {ImageCropper} from '../../components/comments'; import BackIcon from '../../assets/icons/back-arrow.svg'; import { AccountType, @@ -325,6 +326,13 @@ const MainStackScreen: React.FC = ({route}) => { gestureEnabled: false, }} /> + ); }; -- cgit v1.2.3-70-g09d2 From dcd2d3f3dc86d784dd8060a150c57afd0a5b642a Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 17 Jun 2021 23:11:05 -0700 Subject: Add pan zoom screen to stack nav --- src/routes/main/MainStackNavigator.tsx | 3 +++ src/routes/main/MainStackScreen.tsx | 9 +++++++++ 2 files changed, 12 insertions(+) (limited to 'src/routes') diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 757d89f7..bee5b54b 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -115,6 +115,9 @@ export type MainStackParams = { screenType: ScreenType; title: string; }; + ZoomInCropper: { + imageURI: string; + }; }; export const MainStack = createStackNavigator(); diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index cb23f9fc..85bf888d 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -40,6 +40,7 @@ import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders import {ScreenType} from '../../types'; import {AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH} from '../../utils'; import {MainStack, MainStackParams} from './MainStackNavigator'; +import {ZoomInCropper} from '../../components/comments/ZoomInCropper'; /** * Profile : To display the logged in user's profile when the userXId passed in to it is (undefined | null | empty string) else displays profile of the user being visited. @@ -210,6 +211,7 @@ const MainStackScreen: React.FC = ({route}) => { options={{ ...modalStyle, gestureEnabled: false, + ...headerBarOptions('white', ''), }} /> = ({route}) => { gestureEnabled: false, }} /> + ); }; -- cgit v1.2.3-70-g09d2 From 11fe0a31a7d9bba4f9fc8cdc79ef9896f4e1decc Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 17 Jun 2021 23:52:28 -0700 Subject: Add buttons, styles to ZoomInCropper Screen --- src/components/comments/ZoomInCropper.tsx | 105 +++++++++++++++++++++++++----- src/components/moments/Moment.tsx | 4 +- src/routes/main/MainStackNavigator.tsx | 4 +- 3 files changed, 95 insertions(+), 18 deletions(-) (limited to 'src/routes') diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx index 1620d777..4e8f9e7c 100644 --- a/src/components/comments/ZoomInCropper.tsx +++ b/src/components/comments/ZoomInCropper.tsx @@ -1,30 +1,103 @@ import {RouteProp} from '@react-navigation/core'; import {StackNavigationProp} from '@react-navigation/stack'; -import React from 'react'; -import {Image, Dimensions, Text} from 'react-native'; +import React, {useEffect, useState} from 'react'; +import {Dimensions, Image, StyleSheet, TouchableOpacity} from 'react-native'; +import {normalize} from 'react-native-elements'; import ImageZoom from 'react-native-image-pan-zoom'; -import {SCREEN_WIDTH} from '../../utils'; +import CloseIcon from '../../assets/ionicons/close-outline.svg'; import {MainStackParams} from '../../routes'; +import {HeaderHeight, SCREEN_WIDTH} from '../../utils'; +import {TaggSquareButton} from '../common'; type ZoomInCropperRouteProps = RouteProp; - +type ZoomInCropperNavigationProps = StackNavigationProp< + MainStackParams, + 'ZoomInCropper' +>; interface ZoomInCropperProps { route: ZoomInCropperRouteProps; + navigation: ZoomInCropperNavigationProps; } -export const ZoomInCropper: React.FC = ({route}) => { +export const ZoomInCropper: React.FC = ({ + route, + navigation, +}) => { + const {screenType, title, image} = route.params; + const [aspectRatio, setAspectRatio] = useState(1); + + useEffect(() => { + navigation.dangerouslyGetParent()?.setOptions({ + tabBarVisible: false, + }); + }, []); + + useEffect(() => { + if (image.sourceURL) { + Image.getSize( + image.sourceURL, + (w, h) => { + setAspectRatio(w / h); + }, + (err) => console.log(err), + ); + } + }, []); return ( - - + navigation.goBack()}> + + + + + + console.log('Navigate to caption screen')} + title={'Next'} + buttonStyle={'normal'} + buttonColor={'blue'} + labelColor={'white'} + style={styles.button} + labelStyle={styles.buttonLabel} /> - + ); }; + +const styles = StyleSheet.create({ + closeButton: { + position: 'absolute', + top: 0, + paddingTop: HeaderHeight, + zIndex: 1, + marginLeft: '5%', + }, + button: { + zIndex: 1, + position: 'absolute', + bottom: normalize(20), + right: normalize(15), + width: normalize(108), + height: normalize(25), + borderRadius: 10, + }, + buttonLabel: { + fontWeight: '700', + fontSize: normalize(15), + lineHeight: normalize(17.8), + letterSpacing: normalize(1.3), + textAlign: 'center', + }, +}); diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx index 557f9d4a..1d4509dd 100644 --- a/src/components/moments/Moment.tsx +++ b/src/components/moments/Moment.tsx @@ -62,7 +62,9 @@ const Moment: React.FC = ({ // image: picture, // }); navigation.navigate('ZoomInCropper', { - imageURI: picture.path, + screenType, + title: title, + image: picture, }); } }) diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index bee5b54b..2c1ded98 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -116,7 +116,9 @@ export type MainStackParams = { title: string; }; ZoomInCropper: { - imageURI: string; + image: Image; + screenType: ScreenType; + title: string; }; }; -- cgit v1.2.3-70-g09d2 From 59f125070b445dd7fdbab665d939f8a48e22d3fb Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 22 Jun 2021 12:01:06 -0700 Subject: Remove old image cropper --- src/routes/main/MainStackNavigator.tsx | 5 ----- src/routes/main/MainStackScreen.tsx | 8 -------- 2 files changed, 13 deletions(-) (limited to 'src/routes') diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 2c1ded98..b58e03cc 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -110,11 +110,6 @@ export type MainStackParams = { ChatList: undefined; Chat: undefined; NewChatModal: undefined; - ImageCropper: { - image: Image; - screenType: ScreenType; - title: string; - }; ZoomInCropper: { image: Image; screenType: ScreenType; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 85bf888d..9e3747f9 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -3,7 +3,6 @@ import {StackNavigationOptions} from '@react-navigation/stack'; import React from 'react'; import {StyleSheet, Text} from 'react-native'; import {normalize} from 'react-native-elements'; -import {ImageCropper} from '../../components/comments'; import BackIcon from '../../assets/icons/back-arrow.svg'; import { AccountType, @@ -328,13 +327,6 @@ const MainStackScreen: React.FC = ({route}) => { gestureEnabled: false, }} /> -