refactor: rename to moti

.eslintignore

@@ -1 +1,2 @@
-lib
+lib
+example

example/app.json

@@ -1,23 +1,17 @@
 {
-  "name": "redrip-example",
+  "name": "moti-example",
   "displayName": "BobMonorepo Example",
   "expo": {
-    "name": "redrip-example",
-    "slug": "redrip-example",
-    "description": "Example app for redrip",
+    "name": "moti-example",
+    "slug": "moti-example",
+    "description": "Example app for moti",
     "privacy": "public",
     "version": "1.0.0",
-    "platforms": [
-      "ios",
-      "android",
-      "web"
-    ],
+    "platforms": ["ios", "android", "web"],
     "ios": {
       "supportsTablet": true
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "experiments": {
       "turboModules": true
     }

example/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "redrip-example",
-  "description": "Example app for redrip",
+  "name": "moti-example",
+  "description": "Example app for moti",
   "version": "0.0.1",
   "private": true,
   "main": "__generated__/AppEntry.js",
@@ -13,7 +13,7 @@
     "postinstall": "expo-yarn-workspaces postinstall"
   },
   "dependencies": {
-    "redrip": "*",
+    "moti": "*",
     "@react-spring/native": "^9.0.0-rc.3",
     "expo": "^40.0.0-beta.5",
     "expo-splash-screen": "~0.8.1",

example/src/Drip.Color.tsx

@@ -1,6 +1,6 @@
 import React, { useReducer, useState } from 'react'
 import { Button, StyleSheet } from 'react-native'
-import { View } from 'redrip'
+import { View } from 'moti'
 
 function AnimatedCircle() {
   const colors = ['#41b87a', '#533592']

example/src/Drip.Presence.tsx

@@ -1,7 +1,7 @@
 import { AnimatePresence } from 'framer-motion'
 import React, { useReducer, useState } from 'react'
 import { StyleSheet, Pressable } from 'react-native'
-import * as Redrip from 'redrip'
+import * as Redrip from 'moti'
 
 const { View } = Redrip
 

example/src/Drip.Repeat.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { StyleSheet } from 'react-native'
-import * as Redrip from 'redrip'
+import * as Redrip from 'moti'
 
 const { View } = Redrip
 

example/src/Drip.tsx

@@ -1,6 +1,6 @@
 import { View as NativeView, Button, Text, StyleSheet } from 'react-native'
 import React from 'react'
-import * as Drip from 'redrip';
+import * as Drip from 'moti'
 
 export default function AnimatedStyleUpdateExample() {
   const box = Drip.useAnimationState({

example/src/Ideas.tsx

@@ -20,7 +20,7 @@ import Animated, {
 // import processColor from 'react-native-reanimated/src/reanimated2/Colors'
 import { View, Button } from 'react-native'
 import React, { useRef, useContext } from 'react'
-import { colorKeys } from 'redrip'
+import { colorKeys } from 'moti'
 
 type Animation = typeof withSpring | typeof withDecay | typeof withTiming
 
@@ -293,7 +293,6 @@ function AnimatedStyleUpdateExample(props) {
       height: withTiming(30, config),
       borderRadius: withTiming(4, config),
     }
-
   })
 
   return (

example/src/Measure.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentProps, useReducer, useState } from 'react'
-import * as Drip from 'redrip'
+import * as Drip from 'moti'
 import { Button, View } from 'react-native'
 
 function useLayout() {

example/src/Repeat.tsx

@@ -12,36 +12,36 @@ import Animated, {
   withRepeat,
   withTiming,
 } from 'react-native-reanimated'
-import * as Drip from './src'
+import * as Drip from 'moti'
 
 export default function Repeat() {
   const sv = useSharedValue(false)
   const width = useSharedValue(100)
 
-  const onGestureEvent = useAnimatedGestureHandler<
-    TapGestureHandlerGestureEvent
-  >({
-    onActive: () => {
-      sv.value = !sv.value
-      // width.value = withRepeat(
-      //   withTiming(
-      //     300,
-      //     {
-      //       duration: 3000,
-      //     },
-      //     (finished) => {
-      //       console.log({ finished })
-      //       if (finished) {
-      //       } else {
-      //         console.log('inner animation cancelled')
-      //       }
-      //     }
-      //   ),
-      //   Infinity,
-      //   true
-      // )
-    },
-  })
+  const onGestureEvent = useAnimatedGestureHandler<TapGestureHandlerGestureEvent>(
+    {
+      onActive: () => {
+        sv.value = !sv.value
+        // width.value = withRepeat(
+        //   withTiming(
+        //     300,
+        //     {
+        //       duration: 3000,
+        //     },
+        //     (finished) => {
+        //       console.log({ finished })
+        //       if (finished) {
+        //       } else {
+        //         console.log('inner animation cancelled')
+        //       }
+        //     }
+        //   ),
+        //   Infinity,
+        //   true
+        // )
+      },
+    }
+  )
 
   const style = useAnimatedStyle(() => ({
     width: withDelay(

example/tsconfig.json

@@ -2,13 +2,11 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "redrip": ["../packages/redrip/src"]
+      "moti": ["../packages/moti/src"]
     },
     "jsx": "react-native",
     "target": "esnext",
-    "lib": [
-      "esnext"
-    ],
+    "lib": ["esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "noEmit": true,

example/webpack.config.js

@@ -4,6 +4,8 @@ const fs = require('fs')
 const path = require('path')
 const webpack = require('webpack')
 
+const packageName = 'moti'
+
 const node_modules = path.resolve(__dirname, '..', 'node_modules')
 const packages = path.resolve(__dirname, '..', 'packages')
 
@@ -41,7 +43,7 @@ module.exports = async function (env, argv) {
     .forEach((name) => {
       console.log(name, packages)
       config.resolve.alias[
-        name === 'redrip' ? 'redrip' : `@redrip/${name}`
+        name === packageName ? packageName : `@${packageName}/${name}`
       ] = path.resolve(
         packages,
         name,

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "redrip-ideas",
-  "description": "React native bob monorepo starter",
+  "name": "moti",
+  "description": "The universal React Native animation library, powered by Reanimated 2. 🦉",
   "private": true,
   "workspaces": {
     "packages": [
@@ -24,7 +24,8 @@
     "build": "lerna run prepare",
     "prerelease": "lerna run clean",
     "release": "lerna publish",
-    "example": "yarn --cwd example"
+    "example": "yarn --cwd example",
+    "prepare": "lerna run prepare"
   },
   "resolutions": {
     "react": "~16.13.1",
@@ -33,7 +34,7 @@
   "husky": {
     "hooks": {
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-      "pre-commit": "yarn lint && yarn typescript"
+      "pre-commit": "yarn prepare"
     }
   },
   "commitlint": {
@@ -75,7 +76,9 @@
       }
     }
   },
-  "dependencies": {
+  "dependencies": {},
+  "devDependencies": {
+    "auto": "^10.13.3",
     "@commitlint/config-conventional": "^11.0.0",
     "@manypkg/cli": "^0.17.0",
     "@types/jest": "^26.0.15",

packages/redrip/package.json → packages/moti/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "redrip",
+  "name": "moti",
   "version": "0.0.1",
   "keywords": [
     "react-native",
@@ -10,7 +10,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/nandorojo/redrip-ideas.git",
-    "directory": "packages/redrip"
+    "directory": "packages/moti"
   },
   "bugs": {
     "url": "https://github.com/nandorojo/redrip-ideas/issues"
@@ -40,37 +40,17 @@
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
     "@types/react-native": "^0.63.30",
-    "del-cli": "^3.0.1",
     "expo": "^40.0.0-beta.5",
-    "expo-status-bar": "~1.0.3",
     "framer-motion": "^3.2.1",
-    "lodash.set": "^4.3.2",
     "react": "~16.13.1",
     "react-dom": "^16.13.1",
     "react-native": "0.63.4",
     "react-native-builder-bob": "^0.17.0",
     "react-native-gesture-handler": "~1.8.0",
     "react-native-reanimated": "2.0.0-rc.0",
     "react-native-web": "~0.14.9",
-    "react-navigation-stack": "^2.8.4",
-    "react-spring": "^8.0.27",
     "typescript": "^4.0.3"
   },
-  "peerDependencies": {
-    "@react-spring/native": "^9.0.0-rc.3",
-    "expo": "^40.0.0-beta.5",
-    "expo-status-bar": "~1.0.3",
-    "framer-motion": "^3.2.1",
-    "lodash.set": "^4.3.2",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
-    "react-native-gesture-handler": "~1.8.0",
-    "react-native-reanimated": "2.0.0-rc.0",
-    "react-native-web": "~0.13.12",
-    "react-navigation-stack": "^2.8.4",
-    "react-spring": "^8.0.27"
-  },
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
@@ -85,4 +65,4 @@
       ]
     ]
   }
-}
+}

packages/moti/src/components/index.tsx

@@ -0,0 +1,14 @@
+import motify from '../motify'
+import {
+  View as RView,
+  Text as RText,
+  Image as RImage,
+  ScrollView as RScrollView,
+  SafeAreaView as RSafeAreaView,
+} from 'react-native'
+
+export const View = motify(RView)()
+export const Text = motify(RText)()
+export const Image = motify(RImage)()
+export const ScrollView = motify(RScrollView)()
+export const SafeAreaView = motify(RSafeAreaView)()

packages/redrip/src/constants/package-name.ts → packages/moti/src/constants/package-name.ts

@@ -1,2 +1,2 @@
 // import Package from '../../package.json'
-export const PackageName = 'redrip'
+export const PackageName = 'moti'

packages/moti/src/index.tsx

@@ -0,0 +1,5 @@
+export { default as motify } from './motify'
+export * from './components'
+export * from './constants'
+export * from './motify/types'
+export { default as useAnimationState } from './motify/use-animator'