ActivityIndicator Bug on First Load

[kceb]

Current behaviour

I'm using ActivityIndicator on a page and every first load I see a momentary glitch where there are two indicators. Video below.

Expected behaviour

I don't expect a double ActivityIndicator

Code sample

Screenshots (if applicable)

https://d.pr/MJK9rn

What have you tried

Using other components and seeing if they exhibit same behavior. (They don't)

I thought it might be a metro server thing, but upon generating a release apk and sideloading, I see the same thing. I'm not using any other animation library that would conflict.

I tried react-native's default ActivityIndicator and it doesn't exhibit this behavior.

Your Environment

software	version
ios or android	Android 5.1 API 22
react-native	"0.63.3"
react-native-paper	4.2.0
node	v14.8.0
npm or yarn	yarn 1.22.4
expo sdk	N/A
react-native-vector-icons	7.1.0

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• npm
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-paper (found: 4.2.0, latest: 4.3.0)
• yarn (found: 1.22.4, latest: 1.22.10)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• npm
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-paper (found: 4.2.0, latest: 4.3.0)
• yarn (found: 1.22.4, latest: 1.22.10)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[RichardLindhout]

It only happens with that specific Android version or also on iOS and newer Android versions?

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[bradser]

FWIW, I saw a similar issue, turns out it was a around an in my code.

[CDBridger]

I see this issue to when I navigate between screens using react-navigation. Would this issue be able to be re opened.

[fr0staman]

I see similar issue with react-native-reanimated and react-navigation.

import { ActivityIndicator } from "react-native-paper";
import Animated, { FadeOutUp } from "react-native-reanimated";

...

return (
  <Animated.View exiting={FadeOutUp}>
    <ActivityIndicator size={"large"} animating={animating} />
  </Animated.View>
)

[fidelusp]

FYI I am also facing the issue

[DenisDov]

In my case, it's related to how the event loop works. I will need to execute await new Promise((resolve) => requestAnimationFrame(resolve)); right before hiding the ActivityIndicator.