Question: Can I use magic move for two components within the same scene? about react-native-magic-move

[IjzerenHein]

That's a really cool example. I don't have any solutions for that yet, and would even want to have something in my app as well (although it's not a must for me).

I've also been working hard on the successor of magic-move, which is an all native solution. It provides a native primitive for doing shared element transitions. You could take a closer look at that.
https://github.com/IjzerenHein/react-native-shared-element

It doesn't support travel paths other than straight-lines yet though

[nandorojo]

Thanks for the quick reply! I saw shared element on Twitter — looks really cool. I’m excited to try it out when expo v35 comes out. If I manage to get this animation working, I’ll be sure to drop an example here. I’m really impressed by magic move and can’t wait to use it on the native side.

[hungtrn75]

I think we can complete this example with animated

[nandorojo]

@hungtrn75 Awesome! Do you have any thoughts on what it would look like to make it happen? I considered measuring the size/position of the input before clicking send, calculating the transform value from there to the messages destination and then animating. It's a bit tricky, though, especially with maintaining 60fps and issues like the user scrolling or closing the keyboard.

[nandorojo]

Got it. I'd love to work on a collaborative example if you'd like. In the meantime, I'm relying on reanimated's Transition API. Not as smooth but still has a nice effect.

Here is a GIF of what it looks like in an example app with GiftedChat: https://giphy.com/gifs/JmJ3G6sn4twEscyOc5

// transition ref
const ref = useRef<TransitioningView>()

// track if component is already "mounted" so it only animates for new messages
const mounted = useRef(false)

// effect that runs whenever a new message comes in
useEffect(() => {
  if (mounted.current) {
    // only animate if you're updating the component; not on initial mount
    ref.current.animateNextTransition()
  } else if (messages.length) {
    // mark the component as mounted when there are already messages
    mounted.current = true
  }
}, [messages])

return (
<Transitioning.View
  transition={
  <Transition.Sequence>
    <Transition.Change interpolation="easeInOut" />
    <Transition.In type="fade" />
  </Transition.Sequence>
  }
  ref={ref}
  style={{ flex: 1 }}
>
  // ...FlatList that takes in the messages array
</Transitioning.View>
)

[hungtrn75]

@nandorojo it's nice effect.

[hungtrn75]

yep, I think the same way. We can make the animation with react-native-reanimated for much greater flexibility.
About some issues, I think:

• prevent the keyboard closing after sending a message
• scroll to end of list message before transforming