Border does not appear in styling RectButton

[yodaheis]

@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

Originally posted by @yodaheis in https://github.com/kmagiera/react-native-gesture-handler/issues/225#issuecomment-467333032

I would like to bring to your attention border styling related issues on Android. Border doesn't appear on Android while it works well on iOS.

Environment: expo: 32.0.0

[vladkosinov]

Also there is no ability to apply borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius properties to RectButton

[kafkas]

I found that, for IOS, borderWidth works as expected but borderBottomWidth and borderTopWidth do not work. For Android, none of the three works.

[ribbit-rota]

Any update on this one?

[erickjth]

Same here

[leandrosouzaa]

Any update?

[guitexa]

not working on Android

[jakub-gonet]

<RectButton /> is based on native RNGestureHandlerButton component which does implement borderRadius in a way that prevents using individual corners (here's more info about that).

It also doesn't support setting borderWidth, nor borderWidth.

iOS implementation subclasses standard RCTViewManager class and supports every property that <View /> supports.

Hard to say if it will be fixed in the near future, but I'll keep it in my issues-that-should-be-fixed-sometime list 🙂

Code example showing this issue:

import React from 'react';
import { SafeAreaView, Text } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';

const stylesToTest = {
  borderRadius: 20, // works
  borderWidth: 5, // doesn't work on android
  borderColor: 'lightblue', // doesn't work on android
};

export default () => {
  return (
    <SafeAreaView style={styles.container}>
      <RectButton style={[styles.rectangle, stylesToTest]}>
        <Text>Press me!</Text>
      </RectButton>
    </SafeAreaView>
  );
};

const styles = {
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  rectangle: {
    backgroundColor: 'pink',
    width: 100,
    height: 100,
    alignItems: 'center',
    justifyContent: 'center',
  },
};

[jrihan]

same here

[leandrosouzaa]

same here

try add the rect button inside a view.

[pauloels]

same here

[Gitarcitano]

Any update? Having the same problem here!

[euthribeiro]

This is because RectButton preserves the native shape of each platform. To solve this you can wrap your RectButton inside a View and style the View

[a-eid]

I'm wondering if there is any update on this. @jakub-gonet

[DenisDov]

i do that way:

<RectButton
  hitSlop={16}
  style={{
    borderRadius: 14,
    backgroundColor: "white",
  }}
>
  <View
    style={{
      width: 28,
      height: 28,
      borderRadius: 14,
      alignItems: "center",
      justifyContent: "center",
      borderWidth: 1,
      borderColor: "#EAEAEA",
    }}
  >
    <Text>+</Text>
  </View>
</RectButton>