React Native - How to add two different half backgroundColor to <Text></Text>

Question

React Native- How to add two different half backgroundColor to <Text></Text> as given in the image. For example like (black height 50%, white height 50%). The content should be adaptive width.

<Text style={styles.inputLabel}>Lorem ipsum dolor sit am</Text>

Is this posible to create design in react native.

Answer 1

You can do something like below, have a View wrap with another view with absolute position which would have 50% height with a background color.

  <View>
      <View style={{position:'absolute'}}>
        <View style={{height:'50%',backgroundColor:'black',width:'100%',position:'absolute'}}/>
        <Text style={{color:'red',zIndex:1000}}>Some text here 12213 1312  223</Text>
        </View>
  </View>