react-native-slot-text 3.0.0 → 3.1.0

package/ContinuousSlot.js

@@ -3,17 +3,19 @@ import { useEffect, useRef, useState } from 'react';
 import { Text, StyleSheet, Animated, useAnimatedValue, Easing } from 'react-native';
 import MaskedView from "@react-native-masked-view/masked-view";
 import { easeGradient } from "react-native-easing-gradient";
-import ReAnimated, { LinearTransition, FadeOutDown, FadeInUp, useSharedValue, withTiming } from 'react-native-reanimated';
+import ReAnimated, { LinearTransition, FadeOutDown, FadeInUp, useSharedValue, withTiming, Easing as ReEasing } from 'react-native-reanimated';
 import { LinearGradient } from "expo-linear-gradient";
 import styles from './styles';
+import { bezier_points } from './constants';
 const GAP = 12;
 const PADDING_FRACTION = .25;
 const AnimatedMaskView = Animated.createAnimatedComponent(MaskedView);
 const ContinuousSlot = (props) => {
+    const easing = bezier_points[props.easing || 'linear'];
     const config = {
         useNativeDriver: true,
         duration: props.animationDuration,
-        easing: Easing.bezier(0, .4, .4, .9)
+        easing: Easing.bezier(...easing)
     };
     const id = useRef(`rn-slottext-slot-${Math.random().toString(36).slice(0, 9)}`);
     const width = useSharedValue(0);
@@ -35,7 +37,7 @@ const ContinuousSlot = (props) => {
             : props.slot[0] === ',' ? 10 : 11];
         width.value = newWidth > width.value
             ? newWidth // Growing
-            : withTiming(newWidth, { duration: props.animationDuration / 4 });
+            : withTiming(newWidth, { duration: props.animationDuration });
         if (typeof props.slot[0] === 'number') {
             Animated.timing(slotOpacity, { toValue: 1, ...config }).start();
             Animated.timing(y, {
@@ -70,7 +72,9 @@ const ContinuousSlot = (props) => {
             1: { color: 'transparent' }
         },
     });
-    return (_jsx(ReAnimated.View, { layout: LinearTransition.duration(props.animationDuration / 4), entering: props.charSizes[0] ? FadeInUp.duration(props.animationDuration / 2) : undefined, exiting: FadeOutDown.duration(props.animationDuration / 2), children: isMeasured
+    return (_jsx(ReAnimated.View, { layout: LinearTransition.duration(props.animationDuration).easing(ReEasing.bezier(...easing).factory()), entering: props.charSizes[0]
+            ? FadeInUp.duration(props.animationDuration / 1.5).easing(ReEasing.bezier(...easing).factory())
+            : undefined, exiting: FadeOutDown.duration(props.animationDuration / 1.5).easing(ReEasing.bezier(...easing).factory()), children: isMeasured
             ?
                 _jsx(ReAnimated.View, { style: { height, width }, children: _jsxs(AnimatedMaskView, { maskElement: _jsx(LinearGradient, { locations: locations, colors: colors, style: StyleSheet.absoluteFill }), style: [styles.mask, { top: maskTop, bottom: maskTop }], children: [_jsx(Animated.View, { style: {
                                     position: 'absolute',

package/ContinuousSlots.js

@@ -54,7 +54,7 @@ const ContinuousSlots = (props) => {
         });
         setSlots(parseFromLeft ? newSlots : newSlots.reverse());
     }, [props.value]);
-    return (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.slotsContainer, children: [props.prefix && (_jsx(Animated.Text, { style: props.fontStyle, layout: LinearTransition, children: props.prefix })), slots.map((slot, i) => (_jsx(ContinuousSlot, { slot: slot, index: i, charSizes: charSizes, fontStyle: props.fontStyle, animationDuration: DEFAULT_DURATION }, `${idRef.current}-${slot[1]}`))), _jsx(Text, { style: [styles.spacer, props.fontStyle], children: "1" })] }), !sizesMeasured &&
+    return (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.slotsContainer, children: [props.prefix && (_jsx(Animated.Text, { style: props.fontStyle, layout: LinearTransition, children: props.prefix })), slots.map((slot, i) => (_jsx(ContinuousSlot, { slot: slot, index: i, charSizes: charSizes, fontStyle: props.fontStyle, easing: props.easing, animationDuration: DEFAULT_DURATION }, `${idRef.current}-${slot[1]}`))), _jsx(Text, { style: [styles.spacer, props.fontStyle], children: "1" })] }), !sizesMeasured &&
                 Array.from({ length: 10 }, (_, i) => i)
                     .concat([',', '.'])
                     .map((char, i) => (_jsx(Fragment, { children: _jsx(Text, { style: [styles.hiddenSlot, props.fontStyle], onLayout: (e) => {

package/Slot.js

@@ -4,8 +4,9 @@ import { View } from 'react-native';
 import { Text } from 'react-native';
 import Animated, { useSharedValue, withTiming, withSequence, useAnimatedStyle, interpolate, runOnJS, Easing } from 'react-native-reanimated';
 import styles from './styles';
-const easing = Easing.bezier(0, 0.4, 0.4, .8);
+import { bezier_points } from './constants';
 const Slot = (props) => {
+    const easing = Easing.bezier(...bezier_points[props.easing || 'linear']);
     const margin = useSharedValue(0);
     const y = useSharedValue(0);
     const incomingY = useSharedValue(0);
@@ -28,12 +29,12 @@ const Slot = (props) => {
             y.value = withTiming(-1 * props.height, { duration: props.animationDuration, easing }, () => {
                 props.onCompleted && runOnJS(props.onCompleted)();
             });
-            margin.value = withTiming(-1 * props.charSizes[currentValue], { duration: props.animationDuration / 2 });
+            margin.value = withTiming(-1 * props.charSizes[currentValue], { duration: props.animationDuration / 2, easing });
         }
         // Adding slot
         else if (currentValue === null) {
-            margin.value = withTiming(props.charSizes[incomingValue], { duration: props.animationDuration / 2 });
-            incomingY.value = withSequence(withTiming(-1 * props.height, { duration: 0 }), withTiming(0, { duration: props.animationDuration, easing }, () => {
+            margin.value = withTiming(props.charSizes[incomingValue], { duration: props.animationDuration / 2, easing });
+            incomingY.value = withSequence(withTiming(-1 * props.height, { duration: 0, easing }), withTiming(0, { duration: props.animationDuration }, () => {
                 props.onCompleted && runOnJS(props.onCompleted)();
             }));
         }
@@ -42,13 +43,13 @@ const Slot = (props) => {
             margin.value = withTiming((props.charSizes[incomingValue] - props.charSizes[currentValue]), { duration: props.animationDuration / 2 });
             if (incomingValue > currentValue) {
                 y.value = withTiming(props.height, { duration: props.animationDuration, easing });
-                incomingY.value = withSequence(withTiming(-1 * props.height, { duration: 0, easing }), withTiming(0, { duration: props.animationDuration }, () => {
+                incomingY.value = withSequence(withTiming(-1 * props.height, { duration: 0 }), withTiming(0, { duration: props.animationDuration }, () => {
                     props.onCompleted && runOnJS(props.onCompleted)();
                 }));
             }
             else if (incomingValue < currentValue) {
                 y.value = withTiming(-1 * props.height, { duration: props.animationDuration, easing });
-                incomingY.value = withSequence(withTiming(1 * props.height, { duration: 0, easing }), withTiming(0, { duration: props.animationDuration }, () => {
+                incomingY.value = withSequence(withTiming(1 * props.height, { duration: 0 }), withTiming(0, { duration: props.animationDuration, easing }, () => {
                     props.onCompleted && runOnJS(props.onCompleted)();
                 }));
             }
@@ -56,13 +57,13 @@ const Slot = (props) => {
     }, [props.slot]);
     useLayoutEffect(() => {
         if (props.commaPositions?.[props.index] === 1) {
-            commaScale.value = withTiming(1, { duration: props.animationDuration });
-            commaWidth.value = withSequence(withTiming(0, { duration: 0 }), withTiming(props.commaWidth, { duration: props.animationDuration }));
+            commaScale.value = withTiming(1, { duration: props.animationDuration, easing });
+            commaWidth.value = withSequence(withTiming(0, { duration: 0 }), withTiming(props.commaWidth, { duration: props.animationDuration, easing }));
         }
         else if (props.commaPositions?.[props.index] === -1) {
-            commaScale.value = withSequence(withTiming(1, { duration: 0 }), withTiming(0, { duration: props.animationDuration }));
+            commaScale.value = withSequence(withTiming(1, { duration: 0 }), withTiming(0, { duration: props.animationDuration, easing }));
             const timeout = setTimeout(() => {
-                commaWidth.value = withTiming(0, { duration: props.animationDuration });
+                commaWidth.value = withTiming(0, { duration: props.animationDuration, easing });
             }, 0);
             return () => clearTimeout(timeout);
         }

package/Slots.js

@@ -59,7 +59,7 @@ const Slots = (props) => {
                         const animationDuration = "animationDuration" in props
                             ? props.animationDuration || DEFAULT_DURATION
                             : DEFAULT_DURATION;
-                        return (_jsxs(Fragment, { children: [_jsx(Slot, { slot: slot, index: i, height: slotHeight, charSizes: charSizes, commaWidth: commaWidth, periodWidth: periodWidth, commaPositions: props.includeComma && commaPositions.length ? commaPositions : undefined, onCompleted: callback, animationDuration: animationDuration, fontStyle: props.fontStyle }), (props.precision || 0) > 0 && props.precision === (slots.length - 1 - i) &&
+                        return (_jsxs(Fragment, { children: [_jsx(Slot, { slot: slot, easing: props.easing, index: i, height: slotHeight, charSizes: charSizes, commaWidth: commaWidth, periodWidth: periodWidth, commaPositions: props.includeComma && commaPositions.length ? commaPositions : undefined, onCompleted: callback, animationDuration: animationDuration, fontStyle: props.fontStyle }), (props.precision || 0) > 0 && props.precision === (slots.length - 1 - i) &&
                                     _jsx(Text, { style: props.fontStyle, children: "." })] }, `${idRef.current}-${keys[i]}`));
                     })] }), !sizesMeasured &&
                 Array.from({ length: 10 }, (_, i) => i)

package/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const bezier_points: {
+    [key: string]: [number, number, number, number];
+};

package/constants.js

@@ -0,0 +1,5 @@
+export const bezier_points = {
+    'in-out': [.23, 0, .23, .99],
+    'linear': [0, 0, 1, 1],
+    'out': [0, .4, .4, .9]
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-slot-text",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "author": "sc-mitton <scm.mitton@gmail.com> (https://github.com/sc-mitton)",
   "main": "index.js",
   "module": "index.ts",

package/types.d.ts

@@ -2,9 +2,11 @@ import type { StyleProp, TextStyle } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 export type Position = -1 | 0 | 1;
 export type SlotValue = [number] | [number | null, number | null];
+type EasingT = 'linear' | 'in-out' | 'out';
 export interface SlotProps {
     slot: SlotValue;
     index: number;
+    easing?: EasingT;
     animationDuration: number;
     fontStyle?: StyleProp<TextStyle>;
     commaWidth: number;
@@ -17,6 +19,7 @@ export interface SlotProps {
 type Shared = 'fontStyle' | 'index' | 'charSizes' | 'animationDuration';
 export interface ContinuousSlotProps extends Pick<SlotProps, Shared> {
     slot: [number | string, string];
+    easing?: EasingT;
 }
 export type CommaPosition = 1 | -1 | 0 | null;
 export interface CommaProps {
@@ -36,5 +39,6 @@ export interface AnimatedNumbersProps {
     precision?: number;
     animationDuration?: number;
     animateIntermediateValues?: true;
+    easing?: EasingT;
 }
 export {};