Question: Can I use magic move for two components within the same scene?

[nandorojo]

I'm looking to achieve an effect like the example here: https://dribbble.com/shots/3290017-In-chat-Broadcasting

The GIF above shows an image sending, like one does from iMessage, and animating from the text composer to the actual messages list.

Do you have any thoughts on how I could structure the scenes to achieve something like this? If not, I can keep taking a stab at it anyway.

I really love what you've done with the library, it's super cool. Can't wait for the new update you tweeted about.

[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.

[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

[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.