From 270ffed7a6ad591390fa6009c443a7a8b2340f51 Mon Sep 17 00:00:00 2001 From: Pushpender Singh Date: Tue, 17 Dec 2024 21:01:49 +0530 Subject: [PATCH] refactor: comic images are cutting. --- ios/InkNest.xcodeproj/project.pbxproj | 10 +++- src/Components/Gallery/src/index.tsx | 76 +++++++++++++-------------- 2 files changed, 46 insertions(+), 40 deletions(-) diff --git a/ios/InkNest.xcodeproj/project.pbxproj b/ios/InkNest.xcodeproj/project.pbxproj index b4790ee..d1c313c 100644 --- a/ios/InkNest.xcodeproj/project.pbxproj +++ b/ios/InkNest.xcodeproj/project.pbxproj @@ -740,7 +740,10 @@ "-DFOLLY_CFG_NO_COROUTINES=1", "-DFOLLY_HAVE_CLOCK_GETTIME=1", ); - OTHER_LDFLAGS = "$(inherited) "; + OTHER_LDFLAGS = ( + "$(inherited)", + " ", + ); REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; SDKROOT = iphoneos; SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG"; @@ -820,7 +823,10 @@ "-DFOLLY_CFG_NO_COROUTINES=1", "-DFOLLY_HAVE_CLOCK_GETTIME=1", ); - OTHER_LDFLAGS = "$(inherited) "; + OTHER_LDFLAGS = ( + "$(inherited)", + " ", + ); REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; SDKROOT = iphoneos; USE_HERMES = true; diff --git a/src/Components/Gallery/src/index.tsx b/src/Components/Gallery/src/index.tsx index 7a78c2f..a99d3f7 100644 --- a/src/Components/Gallery/src/index.tsx +++ b/src/Components/Gallery/src/index.tsx @@ -31,15 +31,15 @@ import { GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler'; -import { useVector } from 'react-native-redash'; -import { heightPercentageToDP as hp } from 'react-native-responsive-screen'; +import {useVector} from 'react-native-redash'; +import {heightPercentageToDP as hp} from 'react-native-responsive-screen'; import { clamp, withDecaySpring, withRubberBandClamp, resizeImage, } from './utils'; -import { FasterImageView as Image } from '@candlefinance/faster-image'; +import {FasterImageView as Image} from '@candlefinance/faster-image'; const rtl = I18nManager.isRTL; @@ -77,13 +77,13 @@ const defaultRenderImage = ({ return ( { - const { height: h, width: w } = e.nativeEvent; - setImageDimensions({ height: h, width: w }); + const {height: h, width: w} = e.nativeEvent; + setImageDimensions({height: h, width: w}); }} source={{ - activityColor: "rgba(25, 255, 25)", + activityColor: 'rgba(25, 255, 25)', transitionDuration: 0.3, - resizeMode: "contain", + resizeMode: 'contain', cachePolicy: 'discWithCacheControl', showActivityIndicator: true, url: item, @@ -133,7 +133,7 @@ type Props = EventsCallbacks & { disableSwipeUp?: boolean; loop: boolean; onScaleChange?: (scale: number) => void; - onScaleChangeRange?: { start: number; end: number }; + onScaleChangeRange?: {start: number; end: number}; setRef: (index: number, value: ItemRef) => void; }; @@ -146,7 +146,7 @@ const springConfig = { restSpeedThreshold: 4, }; -type ItemRef = { reset: (animated: boolean) => void }; +type ItemRef = {reset: (animated: boolean) => void}; const ResizableImage = React.memo( ({ @@ -330,7 +330,7 @@ const ResizableImage = React.memo( currentScale: scale.value, }; }, - ({ i, translateX: tx, currentScale }) => { + ({i, translateX: tx, currentScale}) => { const translateIndex = tx / -(width + emptySpaceWidth); if (loop) { let diff = Math.abs((translateIndex % 1) - 0.5); @@ -375,8 +375,8 @@ const ResizableImage = React.memo( (isNextForLast ? getPosition(length) : 0) + (isPrevForFirst ? getPosition(length) : 0), }, - { translateY: offset.y.value + translation.y.value }, - { scale: scale.value }, + {translateY: offset.y.value + translation.y.value}, + {scale: scale.value}, ], }; }); @@ -388,7 +388,7 @@ const ResizableImage = React.memo( originalLayout.x.value = w; originalLayout.y.value = h; - const imgLayout = resizeImage({ width: w, height: h }, { width, height }); + const imgLayout = resizeImage({width: w, height: h}, {width, height}); layout.x.value = imgLayout.width; layout.y.value = imgLayout.height; }; @@ -414,7 +414,7 @@ const ResizableImage = React.memo( const pinchGesture = Gesture.Pinch() .enabled(pinchEnabled) - .onStart(({ focalX, focalY }) => { + .onStart(({focalX, focalY}) => { 'worklet'; if (!isActive.value) return; if (onScaleStart) { @@ -425,12 +425,12 @@ const ResizableImage = React.memo( scaleOffset.value = scale.value; - setAdjustedFocal({ focalX, focalY }); + setAdjustedFocal({focalX, focalY}); origin.x.value = adjustedFocal.x.value; origin.y.value = adjustedFocal.y.value; }) - .onUpdate(({ scale: s, focalX, focalY, numberOfPointers }) => { + .onUpdate(({scale: s, focalX, focalY, numberOfPointers}) => { 'worklet'; if (!isActive.value) return; if (numberOfPointers !== 2) return; @@ -444,7 +444,7 @@ const ResizableImage = React.memo( scale.value = nextScale; - setAdjustedFocal({ focalX, focalY }); + setAdjustedFocal({focalX, focalY}); translation.x.value = adjustedFocal.x.value + @@ -470,13 +470,13 @@ const ResizableImage = React.memo( const nextTransX = scale.value > maxScale ? adjustedFocal.x.value + - ((-1 * maxScale) / scaleOffset.value) * origin.x.value + ((-1 * maxScale) / scaleOffset.value) * origin.x.value : translation.x.value; const nextTransY = scale.value > maxScale ? adjustedFocal.y.value + - ((-1 * maxScale) / scaleOffset.value) * origin.y.value + ((-1 * maxScale) / scaleOffset.value) * origin.y.value : translation.y.value; const diffX = nextTransX + offset.x.value - (newWidth - width) / 2; @@ -558,7 +558,7 @@ const ResizableImage = React.memo( cancelAnimation(offset.y); } }) - .onStart(({ velocityY, velocityX }) => { + .onStart(({velocityY, velocityX}) => { 'worklet'; if (!isActive.value) return; @@ -570,7 +570,7 @@ const ResizableImage = React.memo( isVertical.value = Math.abs(velocityY) > Math.abs(velocityX); initialTranslateX.value = translateX.value; }) - .onUpdate(({ translationX, translationY, velocityY }) => { + .onUpdate(({translationX, translationY, velocityY}) => { 'worklet'; if (!isActive.value) return; if (disableVerticalSwipe && scale.value === 1 && isVertical.value) @@ -657,7 +657,7 @@ const ResizableImage = React.memo( : Math.abs(destY) > 220; } }) - .onEnd(({ velocityX, velocityY }) => { + .onEnd(({velocityX, velocityY}) => { 'worklet'; if (!isActive.value) return; @@ -793,7 +793,7 @@ const ResizableImage = React.memo( .enabled(doubleTapEnabled) .numberOfTaps(2) .maxDelay(doubleTapInterval) - .onEnd(({ x, y, numberOfPointers }) => { + .onEnd(({x, y, numberOfPointers}) => { 'worklet'; if (!isActive.value) return; if (numberOfPointers !== 1) return; @@ -811,19 +811,19 @@ const ResizableImage = React.memo( if (scale.value === 1) { scale.value = withTiming(doubleTapScale); - setAdjustedFocal({ focalX: x, focalY: y }); + setAdjustedFocal({focalX: x, focalY: y}); offset.x.value = withTiming( clampX( adjustedFocal.x.value + - -1 * doubleTapScale * adjustedFocal.x.value, + -1 * doubleTapScale * adjustedFocal.x.value, doubleTapScale, ), ); offset.y.value = withTiming( clampY( adjustedFocal.y.value + - -1 * doubleTapScale * adjustedFocal.y.value, + -1 * doubleTapScale * adjustedFocal.y.value, doubleTapScale, ), ); @@ -855,8 +855,8 @@ const ResizableImage = React.memo( ), Gesture.Exclusive(doubleTapGesture, tapGesture), )}> - - + + {renderItem(itemProps)} @@ -886,7 +886,7 @@ type GalleryProps = EventsCallbacks & { doubleTapInterval?: number; maxScale?: number; style?: ViewStyle; - containerDimensions?: { width: number; height: number }; + containerDimensions?: {width: number; height: number}; pinchEnabled?: boolean; doubleTapEnabled?: boolean; disableTransitionOnScaledImage?: boolean; @@ -895,7 +895,7 @@ type GalleryProps = EventsCallbacks & { disableSwipeUp?: boolean; loop?: boolean; onScaleChange?: (scale: number) => void; - onScaleChangeRange?: { start: number; end: number }; + onScaleChangeRange?: {start: number; end: number}; }; const GalleryComponent = ( @@ -945,7 +945,7 @@ const GalleryComponent = ( const currentIndex = useSharedValue(initialIndex); const animatedStyle = useAnimatedStyle(() => ({ - transform: [{ translateX: rtl ? -translateX.value : translateX.value }], + transform: [{translateX: rtl ? -translateX.value : translateX.value}], })); const changeIndex = useCallback( @@ -1019,11 +1019,11 @@ const GalleryComponent = ( } style={[ dimensions, - isFirst ? {} : { marginLeft: emptySpaceWidth }, + isFirst ? {} : {marginLeft: emptySpaceWidth}, index === i ? styles.activeItem : styles.inactiveItem, ]}> {hidden ? null : ( - + {/* @ts-ignore */} ( }; const Gallery = React.forwardRef(GalleryComponent) as ( - p: GalleryProps & { ref?: GalleryReactRef }, + p: GalleryProps & {ref?: GalleryReactRef}, ) => React.ReactElement; const styles = StyleSheet.create({ - container: { flex: 1 }, - rowContainer: { flex: 1, flexDirection: 'row' }, - activeItem: { zIndex: 1 }, - inactiveItem: { zIndex: 0 }, + container: {flex: 1}, + rowContainer: {flex: 1, flexDirection: 'row'}, + activeItem: {zIndex: 1}, + inactiveItem: {zIndex: 0}, }); export default Gallery;