duguyihou / react-native-turbo-image

Performant image component for React Native
https://www.npmjs.com/package/react-native-turbo-image
MIT License
167 stars 9 forks source link

borderWidth not working on Android #284

Closed Hot-key closed 3 months ago

Hot-key commented 3 months ago

Describe the bug On Android, the borderWidth style property does not have any effect on images. The border is not visible even when specified in the style.

To Reproduce

  1. Clone the repository: https://github.com/Hot-key/turbo-image-test
  2. Install dependencies: yarn install or npm install
  3. Run the app on Android: npx react-native run-android
  4. Observe the image without a border

Expected behavior The image should display with a 5-pixel wide black border.

function App(): React.JSX.Element {
  const backgroundStyle = {
    backgroundColor: '#fff',
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <TurboImage
        source={{
          uri: 'https://dummyimage.com/300x300/ff0000/fff',
        }}
        style={styles.image}
        fadeDuration={0}
        rounded
        borderRadius={150}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  image: {
    width: 300,
    height: 300,
    borderWidth: 5,
    borderColor: '#000',
    borderRadius: 150,
  },
});

Screenshots If applicable, add screenshots to help explain your problem. image

Smartphone (please complete the following information):

Additional context

duguyihou commented 3 months ago

hey @Hot-key Thanks for raising this issue. I will release a new version to fix it.

duguyihou commented 3 months ago

simulator_screenshot_A3F989B1-505B-4DF8-8B6A-112143711CB0 Screenshot_20240801_203640

duguyihou commented 3 months ago

I will remove borderRadius as it makes me confused as well. You just set borderRadius in StyleSheet

image

Let me know if you still have issues with the latest version 😃