How to do Layout Transition for web with React Native ( Reanimated not supported )?

Question

I am using a Solito+Next.js framework for this project to share code between all 3 platforms.

The Reanimated Layout Animations API does not have web support yet ( Git issue #2993 ).

CSS transition will not work for layout transition, doing the transition manually for every bit is not worth it.

So I am looking for any API that can make this work. I am betting on using Framer Motion for the web part and stay with the Reanimated Layout Animations for native.

There might be a possibility to create a raper for the web that uses the Framer Motion motion component with a layout prop.

But I am looking for more ideas and options to make this work (even the silly ones).

Here is some of my code so far (I will update on any progress on my side):

import Animated, { Layout, Easing} from 'react-native-reanimated'
...

            <AnimatedSolitoImage
              className="transition-all duration-1000"
              src={logo}
              alt="Logo"
              height={60}
              width={130}
              layout={Layout.easing(Easing.ease)
                .duration(duration * 0.8)
                .delay(duration * 0.2)}
            />

The above code works fine on iOS and Android but it does not animate at all in the web.

Answer 1

I found a nice little solution.

As I said about creating a wrapper with Framer Motion.

Create a file LayoutAnimationRaper/LayoutAnimationRaper.web.tsx like this:

import { motion } from 'framer-motion'

export default function LayoutAnimationRaper({ children }) {
  return <motion.div layout>{children}</motion.div>
}

and a dummy one for native LayoutAnimationRaper/LayoutAnimationRaper.tsx like this:

const LayoutAnimationRaper = ({ children }) => {
  return children
}

export default LayoutAnimationRaper

and just wrap the component you want to animate the layout.

As the previous example:

import LayoutAnimationRaper from '../components/LayoutAnimationRaper/LayoutAnimationRaper'
...
            <LayoutAnimationRaper>
              <AnimatedSolitoImage
                className="transition-all duration-1000"
                src={logo}
                alt="ITW-bg-video"
                height={60}
                width={130}
                layout={Layout.easing(Easing.ease)
                  .duration(duration * 0.8)
                  .delay(duration * 0.2)}
              />
            </LayoutAnimationRaper>

It will animate with Reanimated Layout API for native and Framer Motion motion div with layout prop for web.

Result Layout animation working for:

✅ IOS ✅ Android ✅ Web