React Native how to wrap component into TouchableOpacity within a Text

Question

I was building terms and condition text and I want my Terms and Conditions to have a TouchableOpacity behavior, same goes to PrivacyPolicy

This is what it looks like below:

Now I want to add TouchableOpacity behavior to Terms & Conditions same with Privacy Policy but when I wrap the Terms & Conditions and Privacy Policy into TouchableOpacity it starts to turn out like this below:

The Terms & Conditions moved into a new line even thou I'm using flexWrap: 'wrap' and there is still space left.

Here is my full code below:

const styles = StyleSheet.create({
  termNConWrapper: {
    ...marginHelper(normalize(4), 0, normalize(5), 0).margin,
    width: wp('80%'),
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  termNconAgreement: {
    ...fontHelper(
      10,
      typographyFonts.openSansRegular,
      typographyColors.description,
      0.07,
      16,
    ).font,
    // textAlign: 'center',
  },
  termNcon: fontHelper(
    10,
    typographyFonts.openSansRegular,
    colors.primary,
    0.1,
    16,
  ).font,
});

const OnboardTermsNCondition = () => (
  <View style={styles.termNConWrapper}>
    <Text style={styles.termNconAgreement}>
      By clicking Sign Up, you acknowledge that you have read and agree to the
    </Text>
    <TouchableOpacity activeOpacity={0.4}>
      <Text style={styles.termNcon}>{' Terms & Conditions '}</Text>
    </TouchableOpacity>
    <Text style={styles.termNconAgreement}>and</Text>
    <TouchableOpacity activeOpacity={0.4}>
      <Text style={styles.termNcon}> Privacy Policy</Text>
    </TouchableOpacity>
    {/* <Text style={styles.termNconAgreement}>
      By clicking Sign Up, you acknowledge that you have read and agree to the
      <Text style={styles.termNcon}>{' Terms & Conditions '}</Text>
      and
      <Text style={styles.termNcon}> Privacy Policy</Text>
    </Text> */}
  </View>
);

Appreciate it if someone could help. Thanks

EDIT: I tried removing the helper styles but still no luck. Here is the full code below:

import React, { memo } from 'react';
// import {  } from 'native-base';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { fontHelper, marginHelper } from 'constants/theme/helpers';
import { typographyFonts, colors, typographyColors } from 'constants/theme';
import { normalize } from 'utils/normalize';
import { widthPercentageToDP as wp } from 'react-native-responsive-screen';

const styles = StyleSheet.create({
  termNConWrapper: {
    // ...marginHelper(normalize(4), 0, normalize(5), 0).margin,
    // width: wp('80%'),
    // flexDirection: 'row',
    // flexWrap: 'wrap',
  },
  termNconAgreement: {
    // ...fontHelper(
    //   10,
    //   typographyFonts.openSansRegular,
    //   typographyColors.description,
    //   0.07,
    //   16,
    // ).font,
    // textAlign: 'center',
  },
  termNcon: {},
});

const OnboardAgreement = () => (
  <View style={styles.termNConWrapper}>
    <Text style={styles.termNconAgreement}>
      By clicking Sign Up, you acknowledge that you have read and agree to the
      <TouchableOpacity activeOpacity={0.4}>
        <Text style={styles.termNcon}>{' Terms & Conditions '}</Text>
      </TouchableOpacity>
      and
      <TouchableOpacity activeOpacity={0.4}>
        <Text style={styles.termNcon}> Privacy Policy</Text>
      </TouchableOpacity>
    </Text>
  </View>
);

const MemoizedOnboardAgreement = memo(OnboardAgreement);

export { MemoizedOnboardAgreement as OnboardAgreement };

Answer 1

You can use a Text as the wrapper instead of the view

  <Text style={styles.termNConWrapper}>
    <Text style={styles.termNconAgreement}>
      By clicking Sign Up, you acknowledge that you have read and agree to the
    </Text>
    <TouchableOpacity activeOpacity={0.4}>
      <Text style={styles.termNcon}>{' Terms & Conditions '}</Text>
    </TouchableOpacity>
    <Text style={styles.termNconAgreement}>and</Text>
    <TouchableOpacity activeOpacity={0.4}>
      <Text style={styles.termNcon}> Privacy Policy</Text>
    </TouchableOpacity>
    {/* <Text style={styles.termNconAgreement}>
      By clicking Sign Up, you acknowledge that you have read and agree to the
      <Text style={styles.termNcon}>{' Terms & Conditions '}</Text>
      and
      <Text style={styles.termNcon}> Privacy Policy</Text>
    </Text> */}
  </Text>

Couldnt check the styles as you have a style helper but it should work.

Or you can use the onPress of Text component which you can use instead of the TouchableOpacity and will make it easier for you to style as well

 <Text onPress={()=>{alert(123)}} style={styles.termNcon}> Privacy Policy</Text>

Answer 2

The easiest solution would be to place everything inside one single Text Component.

Code:

   <Text style={styles.termNconAgreement}>
      By clicking Sign Up, you acknowledge that you have read and agree to the
      <TouchableOpacity activeOpacity={0.4}>
        <Text style={styles.termNcon}>{' Terms & Conditions '}</Text>
      </TouchableOpacity>
      and
      <TouchableOpacity activeOpacity={0.4}>
        <Text style={styles.termNcon}> Privacy Policy</Text>
      </TouchableOpacity>
    </Text>

Output:

Demo:

https://snack.expo.io/HD8NeugqV