feat: initial release of @animatereactnative/marquee

animate-react-native · Aug 25, 2023 · 4e38662 · 4e38662
1 parent 818f6ea
commit 4e38662
Show file tree

Hide file tree

Showing 11 changed files with 28,699 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -1,31 +1,69 @@
-# @animatereactnative/marquee
+<div align="center">
+<h1>React Native Marquee</h1>
 
-A React Native Marquee component
+https://github.com/catalinmiron/reanimated2-docs/assets/2805320/3b176048-8974-455a-a73d-cf8da29514f3
+
+[![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>
+
+React Native Marquee component, a cross-platform marquee component, powered by Reanimated:
+
+- 🔋 Powered by Reanimated 3
+- 📱 Works with Expo
+- ✅ Cross-platform (iOS, Android, Web)
+- ⚡️ 60-120fps
+- 🪝 Works with any React Native element/component
+- ⌨️ Written in TypeScript
 
 ## Installation
 
 ```sh
 npm install @animatereactnative/marquee
 ```
 
+> Also, you need to install [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated), and follow their installation instructions.
+
 ## Usage
 
 ```js
-import { multiply } from '@animatereactnative/marquee';
+import { Marquee } from '@animatereactnative/marquee';
 
 // ...
 
-const result = await multiply(3, 7);
+export function Example() {
+  return (
+    <Marquee spacing={20} speed={1}>
+      <Heading>Powered by AnimateReactNative.com</Heading>
+    </Marquee>
+  );
+}
 ```
 
+## 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>` |         |
+
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
 
 ## License
 
-MIT
+[MIT](./LICENSE)
 
 ---
 
-Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+<p align="center">
+  <a href="https://www.animatereactnative.com">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://www.animatereactnative.com/animatereactnative_dark.svg">
+      <img alt="AnimateReactNative.com - Premium and Custom React Native animations." src="https://www.animatereactnative.com/animatereactnative_logo.svg" width="50%">
+    </picture>
+  </a>
+</p>
diff --git a/example/babel.config.js b/example/babel.config.js
@@ -7,6 +7,7 @@ module.exports = function (api) {
   return {
     presets: ['babel-preset-expo'],
     plugins: [
+      'react-native-reanimated/plugin',
       [
         'module-resolver',
         {

diff --git a/example/package.json b/example/package.json
@@ -12,15 +12,16 @@
     "expo": "~49.0.7",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
-    "react-native": "0.72.3",
     "react-dom": "18.2.0",
+    "react-native": "0.72.3",
+    "react-native-reanimated": "~3.3.0",
     "react-native-web": "~0.19.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "babel-plugin-module-resolver": "^5.0.0",
     "@expo/webpack-config": "^18.0.1",
-    "babel-loader": "^8.1.0"
+    "babel-loader": "^8.1.0",
+    "babel-plugin-module-resolver": "^5.0.0"
   },
   "private": true
-}
+}
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,27 +1,57 @@
 import * as React from 'react';
 
-import { StyleSheet, View, Text } from 'react-native';
-import { multiply } from '@animatereactnative/marquee';
+import { StyleSheet, View } from 'react-native';
+import { Marquee } from '@animatereactnative/marquee';
+import { Box } from './components/Box';
+import { Heading } from './components/Heading';
+import { StatusBar } from 'expo-status-bar';
 
-export default function App() {
-  const [result, setResult] = React.useState<number | undefined>();
-
-  React.useEffect(() => {
-    multiply(3, 7).then(setResult);
-  }, []);
+const primary = true;
 
+export default function App() {
   return (
     <View style={styles.container}>
-      <Text>Result: {result}</Text>
+      <StatusBar hidden />
+      <Marquee spacing={20} speed={1}>
+        <Heading primary={primary}>
+          @animatereactnative/marquee component
+        </Heading>
+      </Marquee>
+      <Marquee spacing={20} speed={1}>
+        <Heading primary={primary}>Powered by AnimateReactNative.com</Heading>
+      </Marquee>
+      <Marquee spacing={20} speed={2}>
+        <Heading primary={primary}>Built with Reanimated</Heading>
+      </Marquee>
+      <Marquee spacing={10} speed={0.75} style={{ marginTop: 12 }}>
+        <Box size={50} primary={primary} />
+      </Marquee>
+      <Marquee spacing={10} speed={4} style={{ marginTop: 12 }}>
+        <View style={{ flexDirection: 'row' }}>
+          {[...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>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
+    // alignItems: 'center',
     justifyContent: 'center',
+    backgroundColor: !primary ? '#F0F464' : '#1F1F1F',
   },
   box: {
     width: 60,

diff --git a/example/src/components/Box.tsx b/example/src/components/Box.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+export function Box({
+  children,
+  size = 100,
+  spacing = 0,
+  primary = true,
+}: React.PropsWithChildren<{
+  size?: number;
+  spacing?: number;
+  primary?: boolean;
+}>) {
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        borderRadius: 16,
+        marginRight: spacing,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: primary ? '#F0F464' : '#1f1f1f',
+      }}
+    >
+      {children}
+    </View>
+  );
+}
diff --git a/example/src/components/Heading.tsx b/example/src/components/Heading.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+
+export function Heading({
+  children,
+  primary = true,
+}: React.PropsWithChildren<{ primary?: boolean }>) {
+  return (
+    <Text
+      numberOfLines={1}
+      style={{
+        fontWeight: '900',
+        fontSize: 24,
+        textTransform: 'uppercase',
+        color: primary ? '#F0F464' : '#1f1f1f',
+      }}
+    >
+      {children}
+    </Text>
+  );
+}