border radius in react native not working

Question

I made an app in react native expo. So I applied border radius to one of the <View> in it. So my problem is most of the phones shows the border radius in app But some phones are showing it rectangular <View> as it is, they are not showing border radius to them. Why?

My code:

import React from "react";
import { StyleSheet, Text, View, TouchableOpacity, Image, Dimensions } from "react-native";
import ButtonsCom from "../../components/buttonsCom";
import NavBar2 from "../../components/navBar2";

const animals3 = function () {
   return (
      <View>
         <NavBar2 />

         <View style={style.styleView456}>
            <TouchableOpacity style={{}} activeOpacity={0.8} onPress={() => {}}>
               <View style={style.styleView}>
                  <View style={style.styleView888}>
                     <View style={style.styleView8882}>
                        <Image
                           style={style.imageVio888}
                           source={require("../../../assets/animals/elephant.png")}
                        />
                        <Text
                           style={{
                              marginTop: 100,
                              marginHorizontal: 10,
                              fontSize: 20,
                              fontWeight: "bold",
                           }}
                        >
                           ELEPHANT
                        </Text>
                     </View>
                  </View>
               </View>
            </TouchableOpacity>

            <View style={style.styleView}>
               <ButtonsCom />
            </View>
         </View>
      </View>
   );
};

let ScreenHeight = Dimensions.get("window").height - 90;

const style = StyleSheet.create({
   styleView456: {
      height: ScreenHeight,
      justifyContent: "space-around",
   },
   styleView: {
      flexDirection: "row",
      justifyContent: "space-around",
      paddingTop: 20,
   },
   styleView888: {
      borderColor: "#F5F6FA",
      width: 300,
      height: 500,
      borderRadius: 20,
      alignItems: "center",
      shadowColor: "black",
      shadowOffset: { width: 0, height: 3 },
      shadowRadius: 6,
      elevation: 5,
   },
   imageVio888: {
      width: 270,
      height: 200,
      marginTop: 60,
   },
   styleView8882: {
      alignItems: "center",
   },
});

export default animals3;

So, I have applied border radius to style=style.styleView888

Answer 1

According to docs, you might need to apply overflow: 'hidden' .

https://reactnative.dev/docs/view-style-props