feat: frameRate and direction support

Author: catalinmiron

.gitignore

@@ -68,3 +68,4 @@ android/keystores/debug.keystore
 
 # generated by bob
 lib/
+example/web-build/

README.md

@@ -3,8 +3,6 @@
 
 https://github.com/animate-react-native/marquee/assets/2805320/4fb199b2-491c-4621-bf84-85890a8d6f5e
 
-
-
 [![NPM Version](https://img.shields.io/npm/v/@animatereactnative/marquee.svg?style=flat&color=black)](https://www.npmjs.org/package/@animatereactnative/marquee) [![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/) [![npm](https://img.shields.io/npm/l/@animatereactnative/marquee?style=flat-square)](https://www.npmjs.com/package/@animatereactnative/marquee) [![npm](https://img.shields.io/badge/types-included-blue?style=flat-square)](https://www.npmjs.com/package/@animatereactnative/marquee) <a href="https://twitter.com/mironcatalin"><img src="https://img.shields.io/twitter/follow/mironcatalin?label=Follow @mironcatalin&color=black" alt="Follow Miron Catalin"></a>
 
 </div>
@@ -44,12 +42,14 @@ export function Example() {
 
 ## Props
 
-| name       | description                                                                | required | type                   | default |
-| ---------- | -------------------------------------------------------------------------- | -------- | ---------------------- | ------- |
-| `children` | Any component that you'd like to apply infinite scrolling / marquee effect | YES      | `React.ReactNode`      | 1       |
-| `speed`    | Animation speed                                                            | NO       | `number`               | 1       |
-| `spacing`  | Spacing between repeting elements                                          | NO       | `number`               | 0       |
-| `style`    | View style to be applied to Marquee container.                             | NO       | `StyleProp<ViewStyle>` |         |
+| name        | description                                                                                                                                            | required | type                   | default                      |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ---------------------- | ---------------------------- |
+| `children`  | Any component that you'd like to apply infinite scrolling / marquee effect                                                                             | YES      | `React.ReactNode`      | 1                            |
+| `speed`     | Animation speed                                                                                                                                        | NO       | `number`               | 1                            |
+| `spacing`   | Spacing between repeting elements                                                                                                                      | NO       | `number`               | 0                            |
+| `reverse`   | Determine if the animation should be reversed or not. Based on `direction`, `reverse` means left-to-right, right-to-left, top-to-bottom, bottom-to-top | NO       | `boolean`              | false                        |
+| `direction` | Direction of the animation                                                                                                                             | NO       | `"horizontal"`         | `"vertical" or "horizontal"` |
+| `style`     | View style to be applied to Marquee container.                                                                                                         | NO       | `StyleProp<ViewStyle>` |                              |
 
 ## Contributing
 

example/.env

@@ -0,0 +1 @@
+PUBLIC_URL="/marquee"

example/.yarn/install-state.gz

@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "example",
-    "slug": "example",
+    "name": "marquee",
+    "slug": "marquee",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -11,9 +11,7 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true
     },
@@ -25,6 +23,9 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
+    },
+    "experiments": {
+      "baseUrl": "/marquee"
     }
   }
 }

example/app.json

@@ -2,26 +2,31 @@
   "name": "example",
   "version": "1.0.0",
   "main": "node_modules/expo/AppEntry.js",
+  "homepage": "/marquee",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "web": "expo start --web"
+    "web": "expo start --web",
+    "deploy": "expo export:web -c && gh-pages -t -d web-build --nojekyll"
   },
   "dependencies": {
-    "expo": "~49.0.7",
-    "expo-status-bar": "~1.6.0",
+    "expo": "^51.0.38",
+    "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.3",
-    "react-native-reanimated": "~3.3.0",
-    "react-native-web": "~0.19.6"
+    "react-native": "0.74.5",
+    "react-native-reanimated": "~3.10.1",
+    "react-native-web": "~0.19.10"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@expo/webpack-config": "^18.0.1",
+    "@babel/core": "^7.24.0",
+    "@expo/metro-runtime": "~3.2.3",
+    "@expo/webpack-config": "~19.0.1",
+    "@types/gh-pages": "^6",
     "babel-loader": "^8.1.0",
-    "babel-plugin-module-resolver": "^5.0.0"
+    "babel-plugin-module-resolver": "^5.0.0",
+    "gh-pages": "^6.2.0"
   },
   "private": true
 }

example/dist/.nojekyll

@@ -12,10 +12,8 @@ export default function App() {
   return (
     <View style={styles.container}>
       <StatusBar hidden />
-      <Marquee spacing={20} speed={1}>
-        <Heading primary={primary}>
-          @animatereactnative/marquee component
-        </Heading>
+      <Marquee speed={1}>
+        <Heading primary={primary}>@animatereactnative/marquee</Heading>
       </Marquee>
       <Marquee spacing={20} speed={1}>
         <Heading primary={primary}>Powered by AnimateReactNative.com</Heading>
@@ -26,7 +24,13 @@ export default function App() {
       <Marquee spacing={10} speed={0.75} style={{ marginTop: 12 }}>
         <Box size={50} primary={primary} />
       </Marquee>
-      <Marquee spacing={10} speed={4} style={{ marginTop: 12 }}>
+      <Marquee
+        spacing={10}
+        speed={4}
+        style={{ marginTop: 12 }}
+        reverse
+        frameRate={30}
+      >
         <View style={{ flexDirection: 'row' }}>
           {[...Array(5).keys()].map((i) => {
             return (
@@ -42,6 +46,36 @@ export default function App() {
           })}
         </View>
       </Marquee>
+      <View style={{ flexDirection: 'row', height: 300, padding: 10 }}>
+        {[...Array(3).keys()].map((i) => {
+          return (
+            <Marquee
+              spacing={10}
+              speed={1}
+              style={{ marginTop: 12 }}
+              reverse={i === 1}
+              frameRate={60}
+              key={`marquee-${i}`}
+              direction="vertical"
+            >
+              <View>
+                {[...Array(5).keys()].map((i) => {
+                  return (
+                    <Box
+                      key={`box-${i}`}
+                      spacing={i === 4 ? 0 : 10}
+                      size={120}
+                      primary={primary}
+                    >
+                      <Heading primary={!primary}>{i}</Heading>
+                    </Box>
+                  );
+                })}
+              </View>
+            </Marquee>
+          );
+        })}
+      </View>
     </View>
   );
 }

example/package.json

@@ -18,6 +18,7 @@ export function Box({
         height: size,
         borderRadius: 16,
         marginRight: spacing,
+        marginBottom: spacing,
         justifyContent: 'center',
         alignItems: 'center',
         backgroundColor: primary ? '#F0F464' : '#1f1f1f',