expo - Borders with opacity and border radius don't work on Android (React native) - Stack Overflow

admin管理员组

文章数量:1287513

There's a problem with the border on android when using a borderColor with some level of transparency. Not only that, but when combining it with any level of borderRadius turns into another problem.

The borders seem to be one over another when using transparency, this results in weird edges with a different color. Then when adding borderRadius to the element, instead of the border being over the background, it grows outside of the element, so the transparency of the border will be merged with the background color of the container instead of the one on the element.

Here's a reproduction. The first one is a solid border, the second one is a border with some transparency and the third one is a border with transparency an some border-radius.

import { View, SafeAreaView, StyleSheet } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={[styles.box, styles.solidBorder]} />
      <View style={[styles.box, styles.borderWithOpacity]} />
      <View style={[styles.box, styles.borderWithRadius]} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
    gap: 20
  },
  box: {
    backgroundColor: '#FF5E3B',
    height: 60,
    borderWidth: 5
  },
  solidBorder: {
    borderColor: '#000000'
  },
  borderWithOpacity: {
    borderColor: '#00000033'
  },
  borderWithRadius: {
    borderColor: '#00000033',
    borderRadius: 1
  }
});

/@ldiaz-occ/border-error-on-android?platform=android

Is there a workaround? If not, I would have to remove the border or change it to use a solid color.

There's a problem with the border on android when using a borderColor with some level of transparency. Not only that, but when combining it with any level of borderRadius turns into another problem.

The borders seem to be one over another when using transparency, this results in weird edges with a different color. Then when adding borderRadius to the element, instead of the border being over the background, it grows outside of the element, so the transparency of the border will be merged with the background color of the container instead of the one on the element.

Here's a reproduction. The first one is a solid border, the second one is a border with some transparency and the third one is a border with transparency an some border-radius.

import { View, SafeAreaView, StyleSheet } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={[styles.box, styles.solidBorder]} />
      <View style={[styles.box, styles.borderWithOpacity]} />
      <View style={[styles.box, styles.borderWithRadius]} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
    gap: 20
  },
  box: {
    backgroundColor: '#FF5E3B',
    height: 60,
    borderWidth: 5
  },
  solidBorder: {
    borderColor: '#000000'
  },
  borderWithOpacity: {
    borderColor: '#00000033'
  },
  borderWithRadius: {
    borderColor: '#00000033',
    borderRadius: 1
  }
});

https://snack.expo.dev/@ldiaz-occ/border-error-on-android?platform=android

Is there a workaround? If not, I would have to remove the border or change it to use a solid color.

• react-native
• expo

Share Improve this question Follow asked Feb 25 at 6:31 Luis Fernando Diaz GarciaLuis Fernando Diaz Garcia 1122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I don't know why the opacity on a border style doesn't work, but here is a workaround.

It isn't pretty but it basically places a background behind your view where you are able to control the color, opacity and borderRadius:

import { View, SafeAreaView, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function App() {

const [height, setHeight] = useState(null)
const [width, setWidth] = useState(null)

const borderSize = 20

const setSize = (height, width) => {
  setHeight(height + borderSize)
  setWidth(width + borderSize)
}


  return (
    <SafeAreaView style={styles.container}>
    <View style={styles.wrapper}>
      <View onLayout={(event) => setSize(event.nativeEvent.layout.height, event.nativeEvent.layout.width)} style={styles.box} />
      <View style={[styles.borderWithOpacity, {height, width, top: -borderSize / 2, left: -borderSize / 2}]} />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
    gap: 20
  },
  box: {
    backgroundColor: '#FF5E3B',
    height: 100,
    zIndex: 1
  },
  borderWithOpacity: {
    backgroundColor: '#000000',
    opacity: 0.3,
    position: 'absolute',
    zIndex: 0
  },
  wrapper: {
    position: 'relative'
  }
});

本文标签： expoBorders with opacity and border radius don39t work on Android (React native)Stack Overflow