[Feature request] [Layout animations] An option to skip entering/exiting animations if the element's parent is mounted/unmounted

[SimpleCreations]

I believe it is a fairly common use case when one would want elements to enter/exit with an animation only if their parent stays unchanged. Examples of such use cases may include:

• A list with existing items. When the user first navigates to the screen with the list, the items shouldn't enter with an animation. They should only animate when the user updates the list (adds/deletes items).
• Multiple tabs, each of which may display an animated callout box. Currently the box's entering/exiting animation would run every time the user switches tabs, while it should only run when the callout box appears/disappears while the user is viewing the tab in which it appears/disappears.

Here is the AnimatedList example with several items added to the list by default and animation duration increased to 1 second:

Simulator.Screen.Recording.-.iPhone.11.Pro.-.2021-10-08.at.20.02.05.mp4

Because of this, currently the application of layout animations is severely limited without applying ugly workarounds (like, in the first case, storing a timestamp when the list item was added and passing undefined to the entering prop if the time is less than the time of mounting the parent).

[Noitidart]

I had a similar issue, I wanted to skip entering (exiting is fine). I couldn't find a workaround. Can you please share your workarounds?

I tried to condtionally set layout after mount but it didn't work:

function Tag() {
  const [layout, setLayout] = useState();

  useEffect(() => {
   setLayout(Layout.duration(3000));
  }, []);

  return <View layout={layout} />
}

This however does not ever animate, its' weird.

[exzos28]

any updates?

[richterd]

My current workaround looks like this:

//This is to save if the mounting/layouting took place
const isAnimationsEnabled = useRef(false)

//This is to check if the layouting took place and return the according animation
const ifEnabled = (animation: any): any => {
    return isAnimationsEnabled.current ? animation : undefined
  }

//This is enabling the animations after layouting
useLayoutEffect(() => {
  isAnimationsEnabled.current = true
}, [])

//This is the JSX code
return (
  <Animated.View entering={ifEnabled(FadeInDown)} exiting={ifEnabled(FadeOutDown)}>
   <Text>Content</Text>
  </Animated.View>
)

[abhijith-sunder]

modified it for my specific use case and it works great, thanks!

[abhijith-sunder]

It would be nice to see a "disabled" prop on the component so animations can be disabled/enabled as required.

[Aure77]

This feature to disable/cancel layout animation when unmount/unfocus screen would be useful, even more when using navigation (navigation transition animation + exiting animation are ugly and sometimes next screen become unresponsive).

[vovacodes]

Has anyone managed to come up with a workaround for the exiting animation in particular? It really is a huge UI issue when stuff starts to jump around on the screen you're navigating away from :(

[MarcusDelvecchio]

By setting parent view to display: 'none' the exiting animation can be avoided. Hope this helps.

[saravanakumargn]

This way we can do this.

const isScreenMountedRef = useRef(false);

useEffect(() => {
  isScreenMountedRef.current = true;
}, []);

<Animated.View entering={isScreenMountedRef.current ? SlideInUp : null}
            exiting={SlideOutUp}>
// code
</Animated.View>

[tobobo]

This workaround also works with useIsMounted from usehooks-ts out of the box.

[MarcusDelvecchio]

Still looking for a workaround to prevent exiting animations on unmount. Has anyone come up with a solution for this?

[bartlomiejbloniarz]

I am working on a solution in #5045. It should be getting merged soon

[MarcusDelvecchio]

In the meantime I stumbled on a work around for hiding exit animations by setting the parent view to display: 'none'. In doing this the child's exiting animation will not be shown and it will simply disappear.

[bartlomiejbloniarz]

#5045 has been merged. It will be available in the next release (and is currently available via nightly). docs