feat: add shared element transitions

[WoLewicki]

Description

PR adding shared element transitions to native-stack. Please consider a draft for now since there is no Android implementation and only basic examples work on iOS. Most of the code is based on the shared element transitions in react-native-navigation since it also uses UIViewController as a container of the screen.

Test code and steps to reproduce

Test1089.tsx

Checklist

• [x] Included code example that can be used to test this change
• [ ] Updated TS types
• [ ] Updated documentation:
  • [ ] https://github.com/software-mansion/react-native-screens/blob/master/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
  • [ ] https://github.com/software-mansion/react-native-screens/blob/master/native-stack/README.md
  • [ ] https://github.com/software-mansion/react-native-screens/blob/master/createNativeStackNavigator/README.md
  • [ ] https://github.com/software-mansion/react-native-screens/blob/master/src/types.tsx
  • [ ] https://github.com/software-mansion/react-native-screens/blob/master/src/native-stack/types.tsx
• [ ] Ensured that CI passes

[nandorojo]

Can't wait for this!

I'm thinking I may be able to get this to work on Web in userland by mapping nativeID to framer-motion's layoutId

[nandorojo]

To follow up, I believe I figured out the Web side for this. I'm thinking of including it as a component in moti if this gets released with reanimated or react-native-screens. I think it could work like this for Web:

// index.tsx
import Animated from 'react-native-reanimated'

export const SharedView = Animated.View

// index.web.tsx
import { unstable_createElement } from 'react-native-web'
import { motion } from 'framer-motion'

const MotionView = (props) => unstable_createElement(motion.div, props);

export function SharedView({ nativeID, ...props }) {
  return <MotionView layoutId={nativeID} {...props} />
}

@WoLewicki I'm sure you have a lot on your plate, but do you think this will end up getting merged? It would be game changing.

[WoLewicki]

We are working on coupling SET platform specifics with reanimated ability to animate all view's props. You can watch the progress here and here. We are planning to prioritize it in the next days.

[nandorojo]

That’s amazing news. You guys continue to innovate!

[hirbod]

That is indeed amazing news!

[nandorojo]

As an update from my end, I did manage to get layout animation working on Web, so once this works on native, I should be able to add cross-platform support to Moti.