Border radius does not working on Android

[mcAnastasiou]

I set border radius on Android and it does not work

 <BlurView style={styles.blur} blurType="light" blurAmount={10} reducedTransparencyFallbackColor="white">
        <Image source={require('assets/images/light/header/back.png')} style={styles.backImage} />
      </BlurView>

blur: { width: 36, height: 36, borderRadius: 18, justifyContent: 'center', alignItems: 'center', },

[ghost]

Try wrapping the <BlurView /> and applying the borderRadius to the parent. Also, you might need to add overflow: hidden.

[tonhao-dev]

Im creating a bottom tab menu with react-navigation and blur in background, this works for me:

JSX

export default function CustomTabBar(
  props: BottomTabBarProps<BottomTabBarOptions>
) {
  return (
    <View style={wrapperStyle}>
      <BlurView
        style={blurStyles}
        blurType="light"
        blurAmount={10}
        blurRadius={10}
        overlayColor="transparent"
      >
        <BottomTabBar {...props} style={bottomTabStyles} />
      </BlurView>
    </View>
  );
}

Styles

import { StyleProp, ViewStyle } from 'react-native';
import { theme } from './theme';

export const wrapperStyle: StyleProp<ViewStyle> = {
  position: 'absolute',
  bottom: 0,
  left: 0,
  right: 0,
  borderTopLeftRadius: 10,
  borderTopRightRadius: 10,
  backgroundColor: 'transparent',
  overflow: 'hidden',
};

export const blurStyles: StyleProp<ViewStyle> = {
  backgroundColor: 'transparent',
};

export const bottomTabStyles: StyleProp<ViewStyle> = {
  height: theme.responsive.value(80),
  backgroundColor: 'white',
  borderTopLeftRadius: 10,
  borderTopRightRadius: 10,
};