react-native-highlight-underline-text

React Native Highlight Underline Text

• 텍스트 밑줄 그려주는 컴포넌트
• 여러줄 가능

Installation

npm install react-native-highlight-underline-text
yarn add react-native-highlight-underline-text

Example

<Text>Example Text</Text>
<HighlightText ratio={0.3} text="ratio" />
<HighlightText
  isFixed
  underlineSize={10}
  underlineColor="#e3f42d"
  textStyle={{ fontSize: 14, color: '#7d66fe' }}
  text="isFixed + underlineSize + textStyle"
/>

Usage

import HighlightText from 'react-native-highlight-underline-text';

<HighlightText text="Hightlight Underline Text">

<HighlightText
  isFixed={false}
  underlineSize={0}
  bottom={4}
  ratio={0.3}
  underlineColor='#ec2'
  textStyle={{
    color: '#333333',
    fontSize: 30,
  }}
  text="Custom Highlight Underline Text"
/>

Props

Property	Type	Description
isFixed	Boolean	텍스트 크기에 영향받지 않는 밑줄 사이즈 고정 여부
underlineSize	Number	isFixed=true 일때 밑줄 사이즈
bottom	Number	밑줄이 시작되는 텍스트 영역
ratio	Number	isFixed=false 일때 텍스트 크기에 대한 밑줄이 차지하는 비율
underlineColor	String	밑줄 색상
textStyle	StyleProp	텍스트 스타일