Only highlight TEXT background & not the entire component(white spaces) in React Native

Question

When I am applying backgroundColor: 'yellow; styling to the component of the 'Return' statement, extra white space is rendered around & in the empty lines of the text. I only want the text itself to be highlighted. I understand this happens, because we are applying the styling to the entire component. QUESTION is is there a css style property to only highlight the text & not the entire component?

const onCheckBoxStateChange = (checked, index) => {
    initialData[index].active = checked;
    setInitialData([...initialData]);
  };

  return (
    <View>
      <Text style={styles.titleTxt}>{labels.Work_Required_Involves}:</Text>
      {initialData?.map((e, i) => (
        <CheckBox
          key={i}
          style={styles.itemContainer}
          checked={e.active}
          onChange={(checked) => onCheckBoxStateChange(checked, i)}>
          {e.labels ? (
            <Text style={styles.labelTxt}>{e.labels}</Text>
          ) : (
            <Text
              style={[
                styles.labelTxt,
                e.warningLabel && styles.warningLabelStyle,
              ]}>
              {e.warningLabel}
            </Text>
          )}
        </CheckBox>
      ))}
      <Divider />
      <Text style={styles.titleTxt}>
        {labels.Summary_of_Work_Required}: (500 {labels.chars_max})
      </Text>
      <TextInput
        multiline={true}
        value={workSummary}
        onChangeText={setWorkSummary}
        placeholder={labels.Enter_work_summary + '...'}
        style={styles.textInput}
        maxLength={500}
      />
      <Divider />
      <Text style={styles.warningLabelStyle}>
        {labels.DrillingWarningMessage}
      </Text>
      <Text style={styles.titleTxt}>
        {
          labels.I_am_the_owner_or_superintendent_and_I_agree_to_the_work_as_described_above
        }
        .*
      </Text>
      <RadioButton
        title={labels.Approve}
        index={1}
        activeIndex={radioBtnActiveIndex}
        onActiveIndexChange={setRadioBtnActiveIndex}
        unselectedColor={colors.greyDark}
        style={{marginBottom: moderateScale(5)}}
      />
      <RadioButton
        title={labels.Do_Not_Approve}
        index={2}
        activeIndex={radioBtnActiveIndex}
        onActiveIndexChange={setRadioBtnActiveIndex}
        unselectedColor={colors.greyDark}
      />
      <Divider />
      <Text style={styles.titleTxt}>
        {labels.Customer_Superintendent_or_Authorized_Signature}.*
      </Text>
      <Signature
        signatureImage={signatureImage}
        onSignedImageChange={setSignatureImage}
      />
      <Divider />
      <EmailEntry
        title={`${labels.Send_a_copy_of_the_LOP_via_Email}.*`}
        email={email}
        setEmailData={setEmail}
        setIsEmailValid={setIsEmailValid}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  titleTxt: {
    fontSize: moderateScale(14),
    fontFamily: 'TedNext-SemiBold',
    marginBottom: moderateScale(10),
  },
  itemContainer: {
    justifyContent: 'space-between',
    marginBottom: moderateScale(5),
  },
  labelTxt: {
    flex: 1,
    fontSize: moderateScale(12),
    marginEnd: moderateScale(15),
  },
  textInput: {
    fontSize: moderateScale(12),
    borderStyle: 'solid',
    borderColor: colors.greyLight,
    borderWidth: moderateScale(1),
    fontFamily: 'TedNext',
    borderRadius: 5,
    textAlignVertical: 'top',
    maxHeight: moderateScale(100),
    paddingLeft: moderateScale(10),
  },
  warningLabelStyle: {
    backgroundColor: colors.warning,
    color: colors.danger,
    marginEnd: moderateScale(15),
    fontFamily: 'TedNext-SemiBold',
    includeFontPadding: false,
  },
});