Skip to content

Commit

Permalink
reanimated...3
Browse files Browse the repository at this point in the history
  • Loading branch information
nandorojo committed Mar 1, 2023
1 parent dc42c1f commit 4ec9a4e
Show file tree
Hide file tree
Showing 9 changed files with 13 additions and 13 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<img src="/assets/banner2.png" />

The universal React Native animation library, powered by Reanimated 2.
The universal React Native animation library, powered by Reanimated 3.

```jsx
<MotiView from={{ opacity: 0 }} animate={{ opacity: 1 }} />
Expand All @@ -27,7 +27,7 @@ I spoke at at [Next.js Conf 2021](https://fernandorojo.co/conf) on October 26 ab
- Universal: works on all platforms
- 60 FPS animations on the native thread
- Mount/unmount animations, like `framer-motion`
- Powered by Reanimated 2
- Powered by Reanimated 3
- Web support, out-of-the-box
- Expo support
- Intuitive API
Expand Down
4 changes: 2 additions & 2 deletions docs/docs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Moti is the universal animation package for React Native, made by [Fernando Rojo
- Universal: works on all platforms
- 60 FPS animations run on the native thread
- Mount/unmount animations, like Framer Motion
- Powered by Reanimated 2
- Powered by Reanimated 3
- Intuitive API
- Variant & keyframe animations
- Strong TypeScript support
Expand Down Expand Up @@ -118,7 +118,7 @@ Here are some problems in React Native (+ Web) that are exciting to work on:
- If you're interested in solving this problem, it would be a huge contribution.
- This would also allow us to make simple Toast/Notification components, etc.
- React Native is ideal for building this. Instead of interacting with the DOM, you can just use a JS-based API.
- Reanimated 2's `measure` function could be an interesting use case (but I'm not sure how stable it is.)
- Reanimated 3's `measure` function could be an interesting use case (but I'm not sure how stable it is.)

### Navigation

Expand Down
4 changes: 2 additions & 2 deletions docs/docs/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ id: installation
title: Installation
---

Moti uses [Reanimated 2](https://docs.swmansion.com/react-native-reanimated/) under the hood to drive high-performance animations on iOS, Android and Web.
Moti uses [Reanimated 3](https://docs.swmansion.com/react-native-reanimated/) under the hood to drive high-performance animations on iOS, Android and Web.

## Starter project

Expand All @@ -27,7 +27,7 @@ yarn add moti
npm i moti --legacy-peer-deps
```

## Install Reanimated 2+
## Install Reanimated 3+

Moti requires that you install `react-native-reanimated`. Version 2 and 3 are both compatible.

Expand Down
2 changes: 1 addition & 1 deletion docs/docs/interactions/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -439,4 +439,4 @@ return <MotiView state={state} />

`MotiPressable` provides first-class support for Web, including `hovered` and `pressed` interactions.

Please note that Reanimated 2 uses JS animations on Web. That said, `MotiPressable` still doesn't trigger re-renders on web.
Please note that Reanimated 3 uses JS animations on Web. That said, `MotiPressable` still doesn't trigger re-renders on web.
2 changes: 1 addition & 1 deletion docs/docs/interactions/use-pressable-animated-props.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const animateProps = useMotiPressableAnimatedProps(...)
</MotiView>
```
If you need to do both, please split your usage into two components; one that receives the `animate` prop, and another that receives `animateProps`. This is a limitation in Reanimated 2.
If you need to do both, please split your usage into two components; one that receives the `animate` prop, and another that receives `animateProps`. This is a limitation in Reanimated 3.
```tsx
// ✅ good
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/skeleton.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default Loader

You'll also want to install `expo-linear-gradient`.

_Please note that you must have Reanimated 2 installed. See [installation](/installation) steps for more info._
_Please note that you must have Reanimated 3 installed. See [installation](/installation) steps for more info._

```bash
expo install expo-linear-gradient
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/web.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Moti works on all platforms, including web. Make sure you've installed `react-na

The following applies to React Native Web apps that **do not** use Next.js.

Since Moti uses Reanimated 2, we need its Babel plugin to be applied to Moti. Since Expo Web doesn't transpile modules by default, we'll need to tell it to transpile Moti.
Since Moti uses Reanimated 3, we need its Babel plugin to be applied to Moti. Since Expo Web doesn't transpile modules by default, we'll need to tell it to transpile Moti.

First, install `@expo/webpack-config` to your `devDependencies`:

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"description": "The universal React Native animation library, powered by Reanimated 2. 🦉",
"description": "The universal React Native animation library, powered by Reanimated 3. 🦉",
"private": true,
"workspaces": {
"packages": [
Expand Down
4 changes: 2 additions & 2 deletions packages/moti/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<img src="/assets/banner2.png" />

The universal React Native animation library, powered by Reanimated 2.
The universal React Native animation library, powered by Reanimated 3.

```jsx
<MotiView from={{ opacity: 0 }} animate={{ opacity: 1 }} />
Expand All @@ -27,7 +27,7 @@ I spoke at at [Next.js Conf 2021](https://fernandorojo.co/conf) on October 26 ab
- Universal: works on all platforms
- 60 FPS animations on the native thread
- Mount/unmount animations, like `framer-motion`
- Powered by Reanimated 2
- Powered by Reanimated 3
- Web support, out-of-the-box
- Expo support
- Intuitive API
Expand Down

1 comment on commit 4ec9a4e

@vercel
Copy link

@vercel vercel bot commented on 4ec9a4e Mar 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.