Using 'navigation' in 'cardview

Question

I have a screen with card views.

Each card view has:

• 1x picture
• 1x title
• 1x description
• 1x touchable opacity

I was hoping to figure out a way that each touchable opacity has different navigation. Item 0 will have navigation to screen x, the item 1 will have navigation to screen y.

My doubt is it possible to have different functions for each touchable opacity ?

function ServiceCoverageButtong() {
  const navigation = useNavigation();
  return (
    <View>
      <TouchableOpacity
        style={styles.button}
        onPress={() => navigation.navigate('GeneralInformationSupportScreen')}>
        <Text style={styles.buttonText}>Teste</Text>
      </TouchableOpacity>
    </View>
  );
}

const CardItemNewsProvider = ({item, index}) => {
  return (
    <View style={styles.container} key={index}>
      <Image source={item.imgUrl} style={styles.image} />
      <Text style={styles.header}>{item.title}</Text>
      <Text style={styles.body}>{item.body}</Text>
      <ServiceCoverageButtong />
    </View>
  );
};

How can I create several functions and use the item of CardItemNewsProvider?

I am new to React Native and I am struggling with doing that.

Thanks :)

Answer 1

Yes it's possible. You can pass a prop to your <ServiceCoverageButtong state={"0"}/>

And in your ServiceCoverageButtong() get the state from your props and run a check on what should be returned.

    function ServiceCoverageButtong({state}) {
      const navigation = useNavigation();

if (state == "0") {
      return (
        <View>
          <TouchableOpacity
            style={styles.button}
            onPress={() => navigation.navigate('GeneralInformationSupportScreen')}>
            <Text style={styles.buttonText}>Teste</Text>
          </TouchableOpacity>
        </View>
      );
    }
} else {
return (
        <View>
          <TouchableOpacity
            style={styles.button}
            onPress={() => navigation.navigate('anotherScreen')}>
            <Text style={styles.buttonText}>Teste</Text>
          </TouchableOpacity>
        </View>
      );
    }
}

Answer 2

If you use one component for your buttons, you can just add onPress prop to your DataNewsProvider

let DataNewsProvider = [
    {
      title: NewsHomeCountryTitle,
      body: NewsHomeCountryBody,
      imgUrl: Images.newsYourCountryImage,
      textButton: NewsTextButton,
      onPress: () => navigation.navigate('GeneralInformationSupportScreen'),
    },
    {
      title: NewsWorldwideTitle,
      body: NewsWorldwideBody,
      imgUrl: Images.newsWorldwideImage,
      textButton: NewsTextButton,
      onPress: () => navigation.navigate('anotherScreen'),
    },
  ];

And pass it to your button components TouchableOpacity

const CardItemNewsProvider = ({item, index}) => {
  return (
    <View style={styles.container} key={index}>
      <Image source={item.imgUrl} style={styles.image} />
      <Text style={styles.header}>{item.title}</Text>
      <Text style={styles.body}>{item.body}</Text>
      <ServiceCoverageButtong state={item.stateButton} onPress={item.onPress}/>
    </View>
  );
};

This way you don't need to have additional conditions, and you just pass those functions as it is.

Answer 3

Thanks caslawter!

For anyone interested.

function ServiceCoverageButtong({state}) {
  const navigation = useNavigation();

  if (state === '0') {
    console.log('state', state);
    return (
      <View>
        <TouchableOpacity
          style={styles.button}
          onPress={() =>
            navigation.navigate('GeneralInformationSupportScreen')
          }>
          <Text style={styles.buttonText}>Hi I'm a test</Text>
        </TouchableOpacity>
      </View>
    );
  } else {
    console.log('state', state);
    return (
      <View>
        <TouchableOpacity
          style={styles.button}
          onPress={() => navigation.navigate('anotherScreen')}>
          <Text style={styles.buttonText}>You're really into testing</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const CardItemNewsProvider = ({item, index}) => {
  return (
    <View style={styles.container} key={index}>
      <Image source={item.imgUrl} style={styles.image} />
      <Text style={styles.header}>{item.title}</Text>
      <Text style={styles.body}>{item.body}</Text>
      <ServiceCoverageButtong state={item.stateButton} />
    </View>
  );
};

And another snipet:

  let DataNewsProvider = [
    {
      title: NewsHomeCountryTitle,
      body: NewsHomeCountryBody,
      imgUrl: Images.newsYourCountryImage,
      textButton: NewsTextButton,
      stateButton: '0',
    },
    {
      title: NewsWorldwideTitle,
      body: NewsWorldwideBody,
      imgUrl: Images.newsWorldwideImage,
      textButton: NewsTextButton,
      stateButton: '1',
    },
  ];