Skip to content

migrate to reanimated #76

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

migrate to reanimated #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cb63e87
feat: move to reanimated
hosseinmd Jul 16, 2023
099d524
feat: add containerStyle
hosseinmd Jul 16, 2023
db3b9dd
chore: remove rtl
hosseinmd Jul 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@
"@react-native-community/eslint-config": "^2.0.0",
"@release-it/conventional-changelog": "^2.0.0",
"@types/jest": "^26.0.0",
"@types/react": "^16.9.19",
"@types/react-native": "0.62.13",
"@types/react": "^18.2.15",
"@types/react-native": "^0.72.2",
"commitlint": "^11.0.0",
"eslint": "^7.2.0",
"eslint-config-prettier": "^7.0.0",
Expand All @@ -69,15 +69,17 @@
"jest": "^26.0.1",
"pod-install": "^0.1.0",
"prettier": "^2.0.5",
"react": "16.13.1",
"react": "^18.2.0",
"react-native": "0.64.1",
"react-native-builder-bob": "^0.18.0",
"react-native-reanimated": "^2.15.0",
"release-it": "^14.2.2",
"typescript": "^4.1.3"
},
"peerDependencies": {
"react": "*",
"react-native": "*"
"react-native": "*",
"react-native-reanimated": "^2.15.0"
},
"jest": {
"preset": "react-native",
Expand Down
69 changes: 37 additions & 32 deletions src/component/Dot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,17 @@
* Converted to Typescript on 14/07/2020.
* Converted to Functional component. on 21/09/2021
*/
import React, { useEffect, useMemo, useState } from 'react';
import { Animated } from 'react-native';
import React, { memo, useEffect, useState } from 'react';
import Animated, {
interpolate,
interpolateColor,
useAnimatedStyle,
useSharedValue,
withTiming,
} from 'react-native-reanimated';
import usePrevious from 'react-use/lib/usePrevious';
import EmptyDot from './EmptyDot';
import { getDotStyle } from '../util/DotUtils';
import EmptyDot from './EmptyDot';

const Dot: React.FC<{
idx: number;
Expand All @@ -17,8 +23,8 @@ const Dot: React.FC<{
activeColor: string;
inactiveColor?: string;
sizeRatio: number;
}> = (props) => {
const [animVal] = useState(new Animated.Value(0));
}> = memo((props) => {
const animVal = useSharedValue(0);
const [animate, setAnimate] = useState(false);
const [type, setType] = useState(() =>
getDotStyle({
Expand Down Expand Up @@ -71,43 +77,42 @@ const Dot: React.FC<{
useEffect(() => {
if (!animate) return;

animVal.setValue(0);
Animated.timing(animVal, {
toValue: 1,
animVal.value = 0;
animVal.value = withTiming(1, {
duration: 300,
useNativeDriver: false,
}).start();
});
}, [animVal, animate, prevType, type]);

const animStyle = useMemo(() => {
const size = animVal.interpolate({
inputRange: [0, 1],
outputRange: [
(prevType?.size || 3) * props.sizeRatio,
type.size * props.sizeRatio,
],
});
const animStyle = useAnimatedStyle(() => {
const size = interpolate(
animVal.value,
[0, 1],
[(prevType?.size || 3) * props.sizeRatio, type.size * props.sizeRatio]
);

const backgroundColor = animVal.interpolate({
inputRange: [0, 1],
outputRange: [prevDotColor ?? props.activeColor, dotColor],
});
const backgroundColor = interpolateColor(
animVal.value,
[0, 1],
[prevDotColor ?? props.activeColor, dotColor]
);

return {
width: size,
height: size,
backgroundColor,
borderRadius: animVal.interpolate({
inputRange: [0, 1],
outputRange: [
borderRadius: interpolate(
animVal.value,
[0, 1],
[
(prevType?.size || 3) * props.sizeRatio * 0.5,
type.size * props.sizeRatio * 0.5,
],
}),
opacity: animVal.interpolate({
inputRange: [0, 1],
outputRange: [prevType?.opacity || 0.2, type.opacity],
}),
]
),
opacity: interpolate(
animVal.value,
[0, 1],
[prevType?.opacity || 0.2, type.opacity]
),
};
}, [
animVal,
Expand Down Expand Up @@ -137,6 +142,6 @@ const Dot: React.FC<{
]}
/>
);
};
});

export default Dot;
98 changes: 51 additions & 47 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,16 @@
* Converted to Typescript on 14/07/2020.
* Converted to Functional component. on 21/09/2021
*/
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import {
ScrollView,
View,
ViewStyle,
StyleProp,
StyleSheet,
} from 'react-native';
import React, { useCallback, useEffect, useMemo } from 'react';
import { View, ViewStyle, StyleProp, StyleSheet } from 'react-native';
import Animated, {
useAnimatedStyle,
useSharedValue,
withTiming,
} from 'react-native-reanimated';
import usePrevious from 'react-use/lib/usePrevious';
import Dot from './component/Dot';
import EmptyDot, { defaultEmptyDotSize } from './component/EmptyDot';
import usePrevious from 'react-use/lib/usePrevious';

export interface IDotContainerProps {
curPage: number;
Expand All @@ -23,24 +22,33 @@ export interface IDotContainerProps {
activeDotColor: string;
inactiveDotColor?: string;
vertical?: boolean;
containerStyle?: StyleProp<ViewStyle>;
}

const ONE_EMPTY_DOT_SIZE = defaultEmptyDotSize * defaultEmptyDotSize;

const DotContainer: React.FC<IDotContainerProps> = (props) => {
const refScrollView = useRef<ScrollView>(null);
const prevPage = usePrevious(props.curPage);
const DotContainer: React.FC<IDotContainerProps> = ({
curPage,
maxPage,
sizeRatio: sizeRatioProp,
activeDotColor,
inactiveDotColor,
vertical,
containerStyle,
}) => {
const prevPage = usePrevious(curPage);

const x = useSharedValue(0);
const y = useSharedValue(0);

const getSizeRatio = useCallback<() => number>(() => {
if (!props.sizeRatio) return 1.0;
if (!sizeRatioProp) return 1.0;

return Math.max(1.0, props.sizeRatio);
}, [props.sizeRatio]);
return Math.max(1.0, sizeRatioProp);
}, [sizeRatioProp]);

const scrollTo = useCallback<(index: number, animated?: boolean) => void>(
(index, animated = true) => {
if (!refScrollView.current) return;

const sizeRatio = getSizeRatio();
const FIRST_EMPTY_DOT_SPACE = ONE_EMPTY_DOT_SIZE * 2;
const MOVE_DISTANCE = ONE_EMPTY_DOT_SIZE * sizeRatio;
Expand All @@ -50,26 +58,17 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
FIRST_EMPTY_DOT_SPACE + (index - 4) * MOVE_DISTANCE
);

if (props.vertical) {
refScrollView.current.scrollTo({
x: 0,
y: moveTo,
animated,
});
if (vertical) {
y.value = animated ? withTiming(moveTo, { duration: 400 }) : moveTo;
return;
}

refScrollView.current.scrollTo({
x: moveTo,
y: 0,
animated,
});
x.value = animated ? withTiming(moveTo, { duration: 400 }) : moveTo;
},
[getSizeRatio, props.vertical]
[getSizeRatio, vertical, x, y]
);

const getContainerStyle = useCallback<() => StyleProp<ViewStyle>>(() => {
const { vertical } = props;
const sizeRatio = getSizeRatio();
const containerSize = 84 * sizeRatio;

Expand All @@ -78,15 +77,14 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
flexDirection: vertical ? 'column' : 'row',
maxHeight: vertical ? containerSize : undefined,
maxWidth: vertical ? undefined : containerSize,
overflow: 'hidden',
};
}, [getSizeRatio, props]);
}, [getSizeRatio, vertical]);

useEffect(() => {
if (props.maxPage > 4 && prevPage !== props.curPage)
scrollTo(props.curPage);
}, [prevPage, props.curPage, props.maxPage, scrollTo]);
if (maxPage > 4 && prevPage !== curPage) scrollTo(curPage);
}, [prevPage, curPage, maxPage, scrollTo]);

const { curPage, maxPage, activeDotColor, inactiveDotColor } = props;
const list = useMemo(() => [...Array(maxPage).keys()], [maxPage]);

let normalizedPage = curPage;
Expand All @@ -101,9 +99,20 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {

const container = getContainerStyle();

const contentContainerStyle = useAnimatedStyle(() => {
return {
transform: [
{ translateX: x.value },
{
translateY: y.value,
},
],
};
}, [x, y]);

if (maxPage < 5) {
return (
<View style={container}>
<View style={[container, containerStyle]}>
{list.map((i) => {
return (
<Dot
Expand All @@ -123,20 +132,14 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {

return (
<View
style={container}
style={[container, containerStyle]}
onLayout={() => {
// scroll to right index on initial render
scrollTo(props.curPage, false);
scrollTo(curPage, false);
}}
>
<ScrollView
ref={refScrollView}
contentContainerStyle={styles.scrollViewContainer}
bounces={false}
horizontal={!props.vertical}
scrollEnabled={false}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
<Animated.View
style={[styles.scrollViewContainer, contentContainerStyle]}
>
{/* previous empty dummy dot */}
<EmptyDot sizeRatio={sizeRatio} />
Expand All @@ -159,14 +162,15 @@ const DotContainer: React.FC<IDotContainerProps> = (props) => {
{/* previous empty dummy dot */}
<EmptyDot sizeRatio={sizeRatio} />
<EmptyDot sizeRatio={sizeRatio} />
</ScrollView>
</Animated.View>
</View>
);
};

const styles = StyleSheet.create({
scrollViewContainer: {
alignItems: 'center',
flexDirection: 'row',
},
});

Expand Down
Loading