I want to create a bidirectional swiper my own, but I have a problem about to seek a way how do i handle the interpolated. here’s my swiper so far
Swiper.js
import React, {useCallback, useRef} from 'react';
import {Animated, View} from 'react-native';
const Swiper = ({
RenderItem = () => null,
data = [],
RenderDotIndicator = false,
containerWidth = 0,
}) => {
const refAnimated = useRef(new Animated.Value(0)).current;
// here I copy the data that I got from props
// so if the data is [1,2] it would be [1,2,1,2]
const [InternalData, setInternalData] = React.useState([...data, ...data]);
// here I want to handle that interpolated only used 2 length instead of 4
const interpolateFunct = (outputRange, index) =>
refAnimated.interpolate({
inputRange: [
(index - 1) * width,
index * width,
(index + 1) * width,
],
outputRange,
extrapolate: 'clamp',
});
const WrappedRenderItem = useCallback(
({item, index}) => (
<View style={{overflow: 'hidden', width: width}}>
{RenderItem({item, index})}
</View>
),
[],
);
const WrappedRenderDotIndicator = useCallback(() => {
const dotItem = data.map((item, index) => {
return (
<Animated.View
key={'dot' + item + index.toString()}
style={{
width: 6,
backgroundColor: '#D3D3D3',
height: 6,
borderRadius: 6 / 2,
marginHorizontal: 5,
transform: [{scale: interpolateFunct([1, 2, 1], index)}],
}}
/>
);
});
return (
<View
style={{
flexDirection: 'row',
alignSelf: 'center',
position: 'absolute',
bottom: 6,
}}
>
{dotItem}
</View>
);
}, [RenderDotIndicator]);
return (
<View>
<Animated.FlatList
ref={refAnimated}
data={InternalData}
renderItem={WrappedRenderItem}
horizontal
pagingEnabled
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {x: refAnimated}}}],
{useNativeDriver: true},
)}
/>
<WrappedRenderDotIndicator />
</View>
);
};
Swiper.displayName = 'Swiper';
export default Swiper;
currently, using the code above, I got this behaviour (notice the dot indicator when I sliding from 2nd to 3rd image, the dot is not reflecting the first one)
https://jmp.sh/JeFQ2CbF (or run snippet below)
<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://jumpshare.com/embed/IFu1Zeev0hccyrbvqm9h" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
How do I handle when sliding from 2nd to 3rd, the dot indicator reflecting the first one?