So I'm working on an app and I've made a counter that allows the user to allocate points into certain categories, and I made a button to go to the next screen, but I do not want this button to appear unless the counter = 0. I'm using TouchableOpacity instead of Button for consistency across Android and iOS, but I'm having trouble setting this conditional for my TouchableOpacity button.

Here's my code so far, just to give an idea of what I'm working on (not sure how much is needed to answer my question. You can scroll down to where I wrote "Here's where I'm having trouble" if the rest of my file isn't really necessary to answer the question, but I've removed some repetitive code to file it down a bit):

import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import ImageDetail from "../components/ImageDetail";

const StatScreen = ({navigation}) => {
  //array destructuring to change current value of variable
  //1st element stored in counter, 2nd element stored in setCounter
  const [counter, setCounter] = useState(10);
  console.log(counter);

  //sets starting strength to 0
  //first element stored in strength, 2nd element stored in setStrength
  const [strength, setStrength] = useState(0);
  console.log(strength);

  return (
    <View>
      {/* Stat Allocation Title */}
      <Text style={styles.text}>Choose Your Stats Wisely! </Text>
      <Text style={styles.text}>Remaining Points to Allocate: {counter} </Text>

        <View style={styles.container}>
          <View style={styles.countContainer}>
    </View>

          {/* Creates button that increases counter and decreases strength by tapping plus sign image */}

          <TouchableOpacity
              style={styles.button}
              onPress={function(){
              //counter  ;
              setCounter(counter   1);
              console.log(counter);
              //strength--
              setStrength(strength - 1);
              console.log(strength);
               }} // close onPress statement
            >
            
          {/* Decrease Stat Image/Button and Text  */}
          <ImageDetail imageSource={require('../../assets/minusSign.png')}/>
          <Text style={styles.subtext}> Decrease </Text> 
          </TouchableOpacity>
            
      {/* STAT NAME (STRENGTH) */}
      <Text style={styles.statName}> STRENGTH: {strength} </Text>

      {/* Creates Button that decreases counter and increases strength by tapping minus sign image */}
      <TouchableOpacity
        style={styles.button}
        onPress={function(){
            //counter--;
            setCounter(counter - 1);
            console.log(counter);
            //strength  ;
            setStrength(strength   1);
            console.log(strength);
        }} //close onPress statement
      >

      { /* Increase Stat Image/Button and Text */ }
      <ImageDetail imageSource={require('../../assets/plusSign.png')}/>
      <Text style={styles.subtext}> Increase </Text>
      </TouchableOpacity> 
    </View> 
  </View>

This is where I'm having trouble:
Outside of the TouchableOpacity button itself is just some pseudocode to show what I'm trying to get to happen.

 { /* When counter = 0, display button to go to CombatScreen */ }

 render(){
  if ({counter} == 0) {
           (
      <TouchableOpacity
        style={styles.press}
        onPress={() => navigation.navigate('Combat')}>
        <Text style={styles.text}>...Ready to Embark?</Text>
      </TouchableOpacity>
            )
}
   

Just some closing code and my Stylesheet:

    </View> //close main view
  ); //close return statement
}; //close const StatScreen function

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    justifyContent: "center",
    paddingHorizontal: -10,
    marginRight: 50,
    marginLeft: 30,
    marginTop: -33
  },
  button: {
    //alignItems: "center",
    //backgroundColor: "#DDDDDD",
    padding: 35,
    //alignItems: "center",
    justifyContent: "center",
  },
  countContainer: {
    alignItems: "center",
    padding: 10
  },
  text:{
    fontSize: 30,
    textAlign: 'center',
    color: '#FDFEFE',
    backgroundColor: '#D2B4DE',
  },
  subtext:{
    textAlign: 'center',
    paddingHorizontal: 10,
    color: '#7D3C98',
  },
  statName:{
    fontSize: 15,
    //textAlign: 'center',
    color: '#7D3C98',
    paddingVertical: 110,
    paddingHorizontal: -20
  }
});

export default StatScreen;

Thanks for your time.

CodePudding user response：

You can do a conditional render by the code below.

return(
    <>
        {
            counter == 0 &&
            <TouchableOpacity
               style={styles.press}
               onPress={() => navigation.navigate('Combat')}
            >
               <Text style={styles.text}>...Ready to Embark?</Text>
            </TouchableOpacity>
        }
    </>
)