[RN/ReactNative]IOS에서 react-native-lineargradient 객체 위에 그려지지 않을 때 간단 해결 방법

 

react-native-lineargradient 라이브러리로 UI 작업을 했을 때,

margin값을 음수(-)로 주어 다른 컴포넌트 위에 텍스트나 이미지를 겹쳐보이게 작업하는데,

안드로이드에서는 타 컴포넌트 위에 잘 그려지지만

IOS에서는 아무리 z-index값을 주어도 겹쳐지지 않을 때, 간단하게 해결하는 방법을 적어본다.

 

 ...
 <LinearGradient
      colors={['#F3F3F3', '#F3F3F300']}
      style={{
        flex: 1,
        marginTop: 50,
        overflow: 'visible', // add this
      }}
    >
    {...props}
    </LinearGradient>

위의 코드 예시와 같이, LinearGradient 태그의 style 속성에 overflow : 'visible' 만 추가해주면 해결된다.