[리액트 네이티브] Text에 borderRadius 적용 안될 때 해결방법

# React Native 에서 Text에 borderRadius 적용 방법

 

- 문제 현상

리액트 네이티브에서 Text 컴포넌트에 borderRadius가 적용되지 않는 현상이 있었다.

 

- 해결 방법

Text를 View로 감싸주고, View에 borderRadius 를 적용해주면 된다.

 

export default function RadiusText() {
  return (
        // Text를 View로 감싸준다
        <View style={styles.textContainer}>
          <Text style={styles.textContent}>카레유</Text>
        </View>
  );
}

const styles = StyleSheet.create({
  // View에 borderRadius 를 적용한다.
  textContainer: { borderRadius: 30, padding: 20 },
  textContent: { fontSize: 12 }
});