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 };

Guruparan Giritharan · Answer 1 · 2020-07-02T08:50:19.517

0

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>

edited Jul 02 '20 at 08:50

answered Jul 02 '20 at 07:40

Guruparan Giritharan

15,660
4
27
50

the Terms & Conditions and Privacy Policy is not showing when I did this. – joyce Jul 02 '20 at 08:27
Can you share your custom styles ? – Guruparan Giritharan Jul 02 '20 at 08:35
@joyce better check your custom style helper and the styles for the wrapper – Guruparan Giritharan Jul 02 '20 at 08:36
I tried removing the styles but the text inside touchable opacity is still not showing. I'm using React Native 0.62.2 – joyce Jul 02 '20 at 08:41
Another solution is to use the onpress of text rather than using touchable opacity {alert(123)}} style={styles.termNcon}> Privacy Policy this will work as well and easy to style too – Guruparan Giritharan Jul 02 '20 at 08:49
@joyce can you try the onpress of text instead of the touchableopacity ? – Guruparan Giritharan Jul 02 '20 at 08:53
it can be but I wanted to add that opacity effect on being pressed of the text. – joyce Jul 02 '20 at 09:21
Seems like the touchable opacity doenst work on ios :( – Guruparan Giritharan Jul 02 '20 at 09:31
even on Android I receive an error says that **Cannot Add a child that doesn't have a YogaNode to a parent with out a measure function** – joyce Jul 03 '20 at 01:27
Yes, i think you will have to go for the onclick alternative :( – Guruparan Giritharan Jul 03 '20 at 03:11

score 0 · Answer 2 · answered Jul 02 '20 at 07:44

0

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

answered Jul 02 '20 at 07:44

Tim

10,459
4
36
47

the Terms & Conditions and Privacy Policy is not showing when I did this. – joyce Jul 02 '20 at 08:26
@joyce try out my demo, it is working fine. Maybe you have another issue – Tim Jul 02 '20 at 08:27
Hmm, interesting. I don't know what's different its the like your demo. – joyce Jul 02 '20 at 08:32
@joyce try to remove your custom styles (termNcon, termNconAgreement ...). Then try it again please. In my demo i did not use your styles, probably that's the issue. – Tim Jul 02 '20 at 08:34
@joyce please update your question and add your current code. – Tim Jul 02 '20 at 08:47

React Native how to wrap component into TouchableOpacity within a Text

2 Answers2