ActivityIndicator visual bug on android 8.0

[luicfrr]

Current behaviour

ActivityIndicator is visually bugged on android 8.0 (tested on J5 Prime phisical device and on android Simulator) This bug happens on Buttons with loading prop too.

This error start happening after upgrading to RN 0.72. On RN 0.71 this does not happens.

Expected behaviour

It should not be buggy

How to reproduce?

Just add an empty view with an ActivityIndicator or a loading button:

import { View } from 'react-native'
import {
  ActivityIndicator,
  configureFonts,
  MD2LightTheme as DefaultLightTheme,
  Provider as PaperProvider,
  MD2Theme,
  Button
} from 'react-native-paper'
import { Fonts } from 'react-native-paper/lib/typescript/types'

function Index() {
  const defaultFonts: Fonts = {
    regular: {
      fontFamily: 'Poppins_400Regular',
      fontWeight: "400"
    },
    medium: {
      fontFamily: 'Poppins_500Medium',
      fontWeight: "500"
    },
    light: {
      fontFamily: 'Poppins_300Light',
      fontWeight: "300"
    },
    thin: {
      fontFamily: 'Poppins_100Thin',
      fontWeight: "100"
    }
  }
  const fontConfig = {
    ios: defaultFonts,
    android: defaultFonts
  }
  const currentTheme: MD2Theme = {
    ...DefaultLightTheme,
    mode: 'exact',
    dark: false,
    fonts: configureFonts( {
      isV3: false,
      config: fontConfig
    } ),
    roundness: 8,
    colors: {
      ...DefaultLightTheme.colors
    }
  }

  return <PaperProvider
    theme={ currentTheme }
  >
    <View
      style={ {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#fff',
        alignItems: 'center',
        width: '100%',
        height: '100%',
        position: 'absolute'
      } }
    >
      <ActivityIndicator
        animating={ true }
      />
      <Button
        loading
      >
        Test 1
      </Button>
      <Button
        loading
        mode='contained'
      >
        Test 2
      </Button>
    </View>
  </PaperProvider>
}

Preview

What have you tried so far?

Your Environment

software	version
ios	-
android	8.0
react-native	0.72.6
react-native-paper	5.11.1
node	18.16.0
yarn.	1.22.19
expo sdk	49.0.16

[lukewalczak]

Is the issue visible only on the Android 8? I was trying to reproduce it on the Android 13, but without success?

[luicfrr]

@lukewalczak Yes, this only happens on Android 8. If I remember right, on Android 9 (and above) this error doesn't happens

I didn't tested on lower Android versions as 8 is the minimum version to my app.

[lukewalczak]

Thanks for confirmation! Since you does have running Android 8, would you like to investigate the problem and suggest a solution?

[luicfrr]

Sure, I'll try to find the problem :grin:

[luicfrr]

@lukewalczak I suppose this error is something related to Android 8 itself or to react-native running on this OS.

In my local tests I discovered that: If I remove the borderRadius prop from lineStyle we have no glitch on spinner and the annimation is now running correctly.... but now the spinner became a square 😅 Take a look bellow:

Any thoughts?

EDIT: Maybe this problem is related with this and this issues