Skip to content

Commit

Permalink
refactor: comic images are cutting.
Browse files Browse the repository at this point in the history
  • Loading branch information
@pushpender-singh-ap
pushpender-singh-ap committed Dec 17, 2024
1 parent 438df57 commit 270ffed
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 40 deletions.
10 changes: 8 additions & 2 deletions ios/InkNest.xcodeproj/project.pbxproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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;
Expand Down
76 changes: 38 additions & 38 deletions src/Components/Gallery/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -77,13 +77,13 @@ const defaultRenderImage = ({
return (
<Image
onSuccess={e => {
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,
Expand Down Expand Up @@ -133,7 +133,7 @@ type Props<T> = 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;
};
Expand All @@ -146,7 +146,7 @@ const springConfig = {
restSpeedThreshold: 4,
};

type ItemRef = { reset: (animated: boolean) => void };
type ItemRef = {reset: (animated: boolean) => void};

const ResizableImage = React.memo(
<T extends any>({
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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},
],
};
});
Expand All @@ -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;
};
Expand All @@ -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) {
Expand All @@ -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;
Expand All @@ -444,7 +444,7 @@ const ResizableImage = React.memo(

scale.value = nextScale;

setAdjustedFocal({ focalX, focalY });
setAdjustedFocal({focalX, focalY});

translation.x.value =
adjustedFocal.x.value +
Expand All @@ -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;
Expand Down Expand Up @@ -558,7 +558,7 @@ const ResizableImage = React.memo(
cancelAnimation(offset.y);
}
})
.onStart(({ velocityY, velocityX }) => {
.onStart(({velocityY, velocityX}) => {
'worklet';
if (!isActive.value) return;

Expand All @@ -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)
Expand Down Expand Up @@ -657,7 +657,7 @@ const ResizableImage = React.memo(
: Math.abs(destY) > 220;
}
})
.onEnd(({ velocityX, velocityY }) => {
.onEnd(({velocityX, velocityY}) => {
'worklet';
if (!isActive.value) return;

Expand Down Expand Up @@ -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;
Expand All @@ -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,
),
);
Expand Down Expand Up @@ -855,8 +855,8 @@ const ResizableImage = React.memo(
),
Gesture.Exclusive(doubleTapGesture, tapGesture),
)}>
<View style={{ width, height }}>
<Animated.View style={[{ width, height }, animatedStyle]}>
<View style={{width, height}}>
<Animated.View style={[{width, height}, animatedStyle]}>
{renderItem(itemProps)}
</Animated.View>
</View>
Expand Down Expand Up @@ -886,7 +886,7 @@ type GalleryProps<T> = EventsCallbacks & {
doubleTapInterval?: number;
maxScale?: number;
style?: ViewStyle;
containerDimensions?: { width: number; height: number };
containerDimensions?: {width: number; height: number};
pinchEnabled?: boolean;
doubleTapEnabled?: boolean;
disableTransitionOnScaledImage?: boolean;
Expand All @@ -895,7 +895,7 @@ type GalleryProps<T> = EventsCallbacks & {
disableSwipeUp?: boolean;
loop?: boolean;
onScaleChange?: (scale: number) => void;
onScaleChangeRange?: { start: number; end: number };
onScaleChangeRange?: {start: number; end: number};
};

const GalleryComponent = <T extends any>(
Expand Down Expand Up @@ -945,7 +945,7 @@ const GalleryComponent = <T extends any>(
const currentIndex = useSharedValue(initialIndex);

const animatedStyle = useAnimatedStyle(() => ({
transform: [{ translateX: rtl ? -translateX.value : translateX.value }],
transform: [{translateX: rtl ? -translateX.value : translateX.value}],
}));

const changeIndex = useCallback(
Expand Down Expand Up @@ -1019,11 +1019,11 @@ const GalleryComponent = <T extends any>(
}
style={[
dimensions,
isFirst ? {} : { marginLeft: emptySpaceWidth },
isFirst ? {} : {marginLeft: emptySpaceWidth},
index === i ? styles.activeItem : styles.inactiveItem,
]}>
{hidden ? null : (
<View style={{ bottom: hp('5%') }}>
<View>
{/* @ts-ignore */}
<ResizableImage
{...{
Expand Down Expand Up @@ -1064,14 +1064,14 @@ const GalleryComponent = <T extends any>(
};

const Gallery = React.forwardRef(GalleryComponent) as <T extends any>(
p: GalleryProps<T> & { ref?: GalleryReactRef },
p: GalleryProps<T> & {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;

0 comments on commit 270ffed

Please sign in to comment.