[React Native] iOS borderRadius 적용되지 않는 이슈

 오늘 ios 작업을 하던 도중 ios에서 borderRadius 속성이 먹지 않는 이슈가 있었습니다.

해당 사항이 안드로이드에서는 잘 적용이 되었는데 ios에서는 적용이 되지 않더군요

구글링을 해보니 아래 문장을 속성에 추가해주면 되는 문제였습니다.

overflow: "hidden"

 

프로젝트의 다른 곳에서도 비슷한 이슈가 발생했는데, 해당 이슈에서는 위 속성을 추가해도 해결이 되지 않았습니다.

이번 문제에선 borderTopLeftRadius 등을 사용하여 각 코너마다 다르게 위 radius를 적용한 경우였는데요, 

이 경우는 View 태그에서만 적용이 되는 것 같습니다.

<View style={petChatStyles.container}>
       <Text style={petChatStyles.text}>{text}</Text>
</View>

이렇게 표현해주던 속성을 아래와 같이 Text를 View로 한 번 더 감싸 표현했습니다.

<View style={petChatStyles.container}>
            <View style={petChatStyles.textContainer}>
                <Text style={petChatStyles.text}>{text}</Text>
            </View>
        </View>

아래는 해당하는 스타일 태그입니다.

textContainer:{
        // flex:1,
        
        // opacity:0.9,

        alignSelf:'flex-start',
        borderTopRightRadius:30,
        borderBottomLeftRadius:30,
        borderBottomRightRadius:30,
        // borderRadius:30,
        

        //borderWidth:1,
        //ßborderColor:'red',

        overflow:'hidden',

    },
    text:{
        fontFamily:'NotoSansKR-DemiLight',
        lineHeight:18,
        paddingHorizontal:24,
        paddingVertical:16,

        fontSize:13,
        color:'rgba(255, 255, 255, 0.9)',
    }