callstack / callstack/react-native-paper

ActivityIndicator visual bug on android 8.0

Open
#4,163 8 comments 0 reactions 0 assignees View on GitHub
ActivityIndicator bug
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

### 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



Test 1


Test 2



}
```

### Preview
![Oct-31-2023 10-40-56](https://github.com/callstack/react-native-paper/assets/60632638/d1a20dd9-6443-4727-80bc-efb3f14f40d6)

### 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

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the minimal ActivityIndicator and loading Button example on Android 8.0 with React Native 0.72.6, then compare the rendering with React Native 0.71. Investigate the Android-specific rendering path implicated by that version change; the issue is done when both controls render correctly on the reported device and simulator.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.