question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Divider does not show at all or has a different thickness every time

See original GitHub issue

Current 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)

Screenshot_1638111194 Screenshot_1638111201

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:closed
  • Created 2 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
ghostcommented, Dec 1, 2021

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,

0reactions
lukewalczakcommented, Dec 1, 2021

Hey @AndrewIsBest69, I guess the issue can be related to the hairLineWidth property in styles, which comes directly from react-native and is based on pixel calculation.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Flutter divider widget not appearing - Stack Overflow
My problem is that I need to add a Divider widget between the 'Administrative' text and the rest of the Card but as...
Read more >
Divider in SwiftUI - Everything you need to know - Sarunw
Adjust SwiftUI Divider Thickness ... SwiftUI divider has a thickness of 0.33 points, and we don't have a way to modify the thickness...
Read more >
How to Fix Vertical Divider Not Showing in Flutter App
When you add Vertical Divider inside Row, Wrap widget, it may not display, or display with irregular height. The main reason of this...
Read more >
Dividers - Material Design
A divider is a thin, lightweight rule that groups content in lists and page layouts.
Read more >
Notion Dividers: A Full Guide on Horizontal & Vertical ... - Gridfiti
To change the thickness of your divider, delete the number “3” from the second set of curly brackets in the code above. Then,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found