Divider does not show at all or has a different thickness every time
See original GitHub issueCurrent behaviour
When using the Divider component to… well divide stuff, it does not get displayed, or, if you make it very thick, it does, but with a different thickness every time.
Expected behaviour
The divider component should be visible without any extra styling and with the same thickness all the time.
Code sample
<Text>Hello</Text> <Divider style={{ height: 1 }} /> <Text>Hello</Text> <Divider style={{ height: 1 }} /> <Text>Hello</Text> <Divider style={{ height: 1 }} /> <Text>Hello</Text> <Divider style={{ height: 1 }} /> <Text>Hello</Text> <Divider style={{ height: 1 }} />
For some reason, it only happens sometimes on https://snack.expo.dev/ with the divider example - https://snack.expo.dev/?name=Divider&description=https%3A%2F%2Fcallstack.github.io%2Freact-native-paper%2Fdivider.html&code=import * as React from 'react'%3B import { View } from 'react-native'%3B import { Divider%2C Text } from 'react-native-paper'%3B const MyComponent %3D () %3D> ( <View> <Text>Lemon<%2FText> <Divider %2F> <Text>Mango<%2FText> <Divider %2F> <%2FView> )%3B export default MyComponent%3B&dependencies=react-native-paper
Screenshots (if applicable)
What have you tried
I tried increasing the thickness by making the height style property larger and while this gives me a visible divider, it’s thickness is different every time.
Your Environment
software | version |
---|---|
ios or android | Android 11 |
react-native | 0.66.2 |
react-native-paper | 4.10.0 |
node | v16.13.0 |
npm | 8.1.0 |
react-native-vector-icons | 9.0.0 |
yarn | 0.0.0 |
expo | 0.0.0 |
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (1 by maintainers)
Top GitHub Comments
This is a rather dumb mistake by me for not checking a physical device. Turns out my cheap monitor displays the lines on AVD in a different thickness, but if I use the zoom in function on the AVD, the difference isn’t magnified, but stays the same. This is confirmed on a physical device, where everything works normal even without any zoom,
Hey @AndrewIsBest69, I guess the issue can be related to the
hairLineWidth
property in styles, which comes directly fromreact-native
and is based on pixel calculation.