1

Text within the Badge component will not center (see attached images). I have tried Badge in react-native-paper and react-navigation bottom tab. Both display properly on some simulator devices however not on a physical iPhone 13 Pro Max I am testing on.

react-native-paper demo app my app with react-navigation bottom tab badgemy app using react-native-paper badge

Code sample

Here is a snippet from my app using react-native-paper

        <View style={{flexDirection: 'column'}}>
          <View style={{alignContent: 'center'}}>
            <Badge>{count[0]}</Badge>
          </View>
          <View>
          </View>
        </View>

What have you tried

I have tried to adjust with styling the Badge component. As well as adjusting styling of the Views containing the Badge However nothing seems to help.

It does behave as desired on iOS and Android simulators.

Your Environment

software version

Development environment: OS: macOS 12.4 CPU: (10) arm64 Apple M1 Max react: 17.0.2 react-native: 0.68.1 react-native-paper 4.12.2 react-native-vector-icons: 9.1.0 node v18.4.0 npm 8.12.1

Device info with the issue: iPhone 13 Pro Max iOS ver 15.5

Jaminj
  • 41
  • 3

0 Answers0