RectButton's border radius inheriting border radius of other RectButton

[leonardoMoliveira]

I'm using:

React Navigation v5
Gesture Hander v1.6.0
Styled Components v5

I have a home page with many RectButons inside a FlatList with border-radius: 10px

and another page which I can navigate in, with a ScrollView with RectButtons without any border-radius property configured (already tried to set border-radius: 0; but not works)

But the second one "inherits" the border-radius value

First RectButton

import styled from 'styled-components/native';
import { RectButton } from 'react-native-gesture-handler';

export const Page = styled(RectButton)`
  width: 270px;
  padding: 20px;
  margin-right: ${props => (props.last ? '0px' : '20px')};

  border-radius: 10px;
  background: ${colors.white};
`;

Second (other page)

import styled from 'styled-components/native';
import { RectButton } from 'react-native-gesture-handler';

export const Item = styled(RectButton)`
  padding: 10px 0;
`;

When inspecting those elements, both has the correct style properties, but border-radius stills there

[marcosabb]

Any fix? Same behavior here.

[DNature]

Same problem Here. It also does not support passing style as a Prop

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Description, Platforms, Steps To Reproduce, Snack or minimal code example and Package versions sections.

[kmagiera]

I'm not entirely sure what the issue is. It seems like something that you can reproduce easily, in which case it'd be great if you could send a small app / link to a github project where we can repro this too.

By reading the description it seem like by setting radius for one button you get rounded corners in other buttons that does not use this style? As mentioned, would be great to see actual example app on top of the code snippets that were posted such that we don't need to make any guesses which should save us a lot of time when attempting to resolve this. Thanks!

[topovik]

Any fix?

[topovik]

Found solution, add background-color: any color and border-radius: -1px

import styled from 'styled-components/native';
import { RectButton } from 'react-native-gesture-handler';

export const Item = styled(RectButton)`
  padding: 10px 0;
  background-color: red;
  border-radius: -1px;
`;