toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix the dots animation

Browse source
This commit is contained in:
Pablo Velez Vidal 2022-11-02 23:52:36 +01:00
parent 5522b20084
commit d4547f3e7a
1 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
app/screens/onboarding/paginator.tsx
View file

@ -25,6 +25,15 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
width: DOT_SIZE / 2,
opacity: 0.25,
},
fixedDot: {
height: DOT_SIZE / 2,
borderRadius: 5,
backgroundColor: theme.buttonBg,
marginHorizontal: DOT_SIZE / 2,
width: DOT_SIZE / 2,
opacity: 0.25,
position: 'absolute',
},
outerDot: {
height: DOT_SIZE,
borderRadius: DOT_SIZE / 2,
@ -83,7 +92,7 @@ const Dot = ({item, index, scrollX, theme, moveToSlide}: DotProps) => {
const opacity = interpolate(
scrollX.value,
inputRange,
[0.25, 1, 0.25],
[0, 1, 0],
);
return {opacity};
@ -104,13 +113,17 @@ const Dot = ({item, index, scrollX, theme, moveToSlide}: DotProps) => {
onPress={() => moveToSlide(index)}
key={item.id}
>
<Animated.View
style={[styles.fixedDot]}
key={'fixed-' + item.id + index.toString()}
/>
<Animated.View
style={[styles.outerDot, outerDotOpacity]}
key={'outer-' + item.id + index.toString()}
/>
<Animated.View
style={[styles.dot, dotOpacity]}
key={item.id + index.toString()}
key={'inner-' + item.id + index.toString()}
/>
</TouchableOpacity>
);