Triggering refresh on function component with navigate (React Native)

One of my screens in my app is a function component which looks like this:

export default function DonationsScreen({ navigation }) {
  const [requests, setRequests] = useState("")

  useEffect(() => {
    if (!requests) {
      getRequests()
    }
  }, [])

  // I omit some of the code here

  return (
    <SafeAreaView>
      <SearchBar lightTheme placeholder="Type Here..." />
      <FlatList
        data={requests}
        renderItem={({ item }) =>
          item.donationsLeft > 0 ? (
            <DonationItem request={item} navigation={navigation} />
          ) : null
        }
        keyExtractor={(item) => item.id}
      />
    </SafeAreaView>
  )
}

class DonationItem extends React.Component {
  render() {
    const { navigate } = this.props.navigation
    return (
      <Card title="hello">
        <Button
          buttonStyle={styles.donateButton}
          onPress={() =>
            this.props.navigation.push("Realizar donación", {
              request: this.props.request,
            })
          }
          title="Donar"
        />
      </Card>
    )
  }
}

So that onPress you see in DonationItem navigates to another screen called DonationFormScreen. What is in this screen doesn’t really matter except that there is another navigate called in one of its methods:

this.props.navigation.push('Donación confirmada', {comingFrom: this.state.comingFrom});

And last, “Donación confirmada” is a screen DonationConfirmationScreen:

export default class DonationConfirmationScreen extends React.Component {

    render() {

        return(
        <View style={styles.confirmation}>
            <View style={styles.confirmationContent}>
                <Ionicons name='ios-checkmark-circle' color={'green'} size={130}/>
                <Button
                buttonStyle={styles.button}
                title='Listo' 
                onPress={() => this.props.navigation.navigate("Pedidos")}
                />
            </View>
        </View>
        );
    }
}

As you see this.props.navigation.navigate("Pedidos") is called inside the button and works fine. What I want to do is not only to navigate back to “Pedidos” (which is my DonationsScreen) but also trigger some sort of refresh, because I need getRequests() to be called again. How can I achieve this?

Answer

Thanks to everyone who answered but I ended up using something else since I couldn’t get the other things to work.

const isFocused = useIsFocused();

const [requests, setRequests] = useState('');

useEffect(() => {
  getRequests();
} , [isFocused])

As you see I ended up using isFocused. I had to add this import:

import { useIsFocused } from '@react-navigation/native';

Advertisement

Answer