search

kyo504 / react-native-marquee

React Native Marquee Text Component
MIT License
196 stars 29 forks source link

Easing InOut #9

Open SethHamilton opened 6 years ago

SethHamilton commented 6 years ago

It would appear that the easing options that go in reverse (inOut or back) result in an exception.

rafaelmaeuer commented 2 years ago

Easing option was removed in v0.4.0 and set to linear: https://github.com/kyo504/react-native-marquee/blob/49db5bfef3cf0880e9f29f34b8fdb99ba937f4b2/index.tsx#L61

Could easing option please be added again? Linear looks a bit cheap...

rafaelmaeuer commented 1 year ago

Easing InOut still missing in v0.5.0, @kyo504 any plans to bring it back or add a parameter to choose easing?

I am using the following package-patch for now:

diff --git a/node_modules/react-native-marquee/src/index.tsx b/node_modules/react-native-marquee/src/index.tsx
index 8c86195..e8379a3 100644
--- a/node_modules/react-native-marquee/src/index.tsx
+++ b/node_modules/react-native-marquee/src/index.tsx
@@ -68,7 +68,7 @@ const createAnimation = (
   },
 ): Animated.CompositeAnimation => {
   const baseAnimation = Animated.timing(animatedValue, {
-    easing: Easing.linear,
+    easing: Easing.inOut(Easing.ease),
     useNativeDriver: true,
     ...config,
   });
@@ -85,7 +85,7 @@ const createAnimation = (
               useNativeDriver: true,
             }),
             Animated.timing(animatedValue, {
-              easing: Easing.linear,
+              easing: Easing.inOut(Easing.ease),
               useNativeDriver: true,
               ...config,
               duration: consecutive.duration,