React Native Navigation By Condition

Question

How can I navigate to another screen if the condition is true or false?

I tried with if and with ternary operator, but it seems that my function is not seeing my data pending and delivered

How Can I do this?

My function is navigateByCondition

When I click on the button will navigate to another screen based on the condition pending or delivered

Code React Native Bellow:

const delivered = [
  {
    id: 1,
    title: 'Lanche, MADERO',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Delivered',
  },
  {
    id: 2,
    title: 'McDonalds',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Delivered',
  },
  {
    id: 3,
    title: 'Bobs',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Delivered',
  },
  {
    id: 4,
    title: 'Burguer King',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Delivered',
  },

  {
    id: 5,
    title: 'Outback',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Delivered',
  },
  {
    id: 6,
    title: 'Esfiha',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Delivered',
  },
  {
    id: 7,
    title: 'Habibs',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Delivered',
  },
  {
    id: 8,
    title: 'McDonalds',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Delivered',
  },
];

const pending = [
  {
    id: 1,
    title: 'Sushi Garden',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Pending',
  },
  {
    id: 2,
    title: 'Gendai Sushi',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Pending',
  },
];

export default class LastOrders extends Component {
  navigationByCondition = () => {
    const {navigation} = this.props;

    if (pending.status === 'Situação: Pending') {
      navigation.navigate('OrderAccept');
    } else {
      navigation.navigate('OrderDetailDelivered');
    }
  };

  renderItem = ({item}) => (
    <TouchableOpacity onPress={this.navigationByCondition}>
      <View style={styles.productContainer}>
        <Text style={styles.productTitle}>{item.title}</Text>
        <Text style={styles.productDescription}>{item.description}</Text>
        <Text
          style={
            item.status === 'Situação: Pending'
              ? styles.productStatusPending
              : styles.productStatusDelivered
          }>
          {item.status}
        </Text>
      </View>
    </TouchableOpacity>
  );

  render() {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'Entregas Pendentes', data: pending},
            {title: 'Entregas Completas', data: delivered},
          ]}
          renderItem={this.renderItem}
          renderSectionHeader={({section}) => (
            <View>
              <Text style={styles.header}>{section.title}</Text>
            </View>
          )}
          showsVerticalScrollIndicator={false}
          keyExtractor={(item) => item.id}
        />
      </View>
    );
  }
}

Answer 1

You have to pass the item and compare it inside the condition, here you are directly comparing with the array which will always result in false

 navigationByCondition = item => {
    const {navigation} = this.props;

    if (item.status === 'Situação: Pending') {
      navigation.navigate('OrderAccept');
    } else {
      navigation.navigate('OrderDetailDelivered');
    }
  };

You should change the onpress like this

 <TouchableOpacity onPress={()=>this.navigationByCondition(item)}>