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.

Implementing borders on Buttons

See original GitHub issue

Hey, thank you for making this really cool lib.

I added this to my project and started swapping out TouchableHighlight and TouchableOpacity for RectButton, and noticed that borders weren’t rendering.

Looking at the example, it seems you have borders implemented in some places but not through styles attached to RectButton’s. The MainScreen uses FlatList’s ItemSeparatorComponent to render an ItemSeparator component , and the rows / “Table rows & buttons” example uses a “buttonDelimiter” View in between RectButton’s to represent a bottom border.
Is this the best (or only) way to implement borders?

There was a discussion in #59 and a PR #151 that seem to address issues with borderRadius, but I did not see anything about the border layout props we get in RN (borderWidth, borderColor). Does it have anything to do with the overflow: hidden styles?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

6reactions
yodaheiscommented, Feb 26, 2019

@pcooney10 I’m facing the issue of border not appearing on Android. It does work well on iOS though. style props like borderRadius works, but borderWidth, borderColor does not work on Android

1reaction
pcooney10commented, Jul 13, 2018

Hey @osdnk, didn’t see your response until now.

I am sorry if my original question was wordy, but essentially I am asking if the RectButton component can be styled with borderBottomWidth: 1, borderBottomColor: '#000', etc.

When I said “swapping out TouchableHighlight and TouchableOpacity for RectButton”, I meant I was replacing instances of TouchableHighlight and TouchableOpacity with RectButton.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How To Create Outline Buttons - W3Schools
How TO - Outline Buttons ... Learn how to style outline buttons with CSS. ... Add the border-radius property to create rounded outline...
Read more >
Guide to the Working of CSS Button Border - eduCBA
The borders are used for styling the button in CSS. In this article, we are discussing how to style the buttons using border-radius...
Read more >
CSS Button Border - Linux Hint
We used HTML reference code to give the button background color. Then, we gave the button a border by writing it as a...
Read more >
Button Border Color Issues - Stack Overflow
The issues I am having is getting rid of the right and bottom borders that are darker than the left and top borders....
Read more >
How to create a button with stitched border using HTML and ...
CSS Code: In this section first we will design the button using basic CSS properties and then to create the stitched border we...
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