[React Native]Text가 래핑(줄바꿈)되지 않는 이슈

문제가 된 코드와 화면

서버에서 String으로 이루어진 장문의 더미 데이터를 받아서,
<Text />로 이루어진 컴포넌트로 랜더 시킬 때 생긴 이슈입니다.
웹에서 word-break 와 같은 효과를 원했고,
flex-wrap: wrap 을 사용해도 원하는 대로 화면에 나오지 않았습니다.

 

문제가된 화면 | 좌 IOS / 우 Android

 

...


const CpnModelInfoText = {
  ...CpnModelInfoRowText,
  width: 'auto',
  marginRight: 0,
  color: '#444444',
} as TextStyle;

... 

<CpnModelInfoRow>
  <RzTxt text="코스명" textStyle={CpnModelInfoRowText} />
  <RzTxt
    text={courseData.title}
    textStyle={CpnModelInfoText}
  />
</CpnModelInfoRow>

...

해결

flex-shrink 속성을 사용해 원하는 결과를 얻을 수 있었습니다.

 

해결된 화면 좌 IOS / 우 Android

 

더미 데이터 내부에 \n을 포함하고 있어서 위와 같이 줄바꿈 되었지만,
flex-shrink 속성을 사용해 원하는 대로 flex-item 요소의 크기가 축소되었습니다.

const CpnModelInfoText = {
  ...CpnModelInfoRowText,
  width: 'auto',
  marginRight: 0,
  color: '#444444',
  flexShrink: 1, // 추가
} as TextStyle;

---

https://developer.mozilla.org/ko/docs/Web/CSS/flex-shrink

flex-shrink - CSS: Cascading Style Sheets | MDN