Passing params with router.back()

Question

I'm using expo-router and need to pass some params back. How to do that?

I use router push here:

<TouchableOpacity style={styles.qrButton} onPress={()=> {router.push(`/rent-bike/qr-scanner`)}}>
                    <Text style={styles.qrText}>Użyj kodu QR</Text>
                </TouchableOpacity>

Then I scan QR code and want to pass it back to display on same page:

    const handleBarCodeScanned = ({type, data}) => {
        setScanData(true)
        console.log(`data: ${data}`);
        console.log(`type: ${type}`);
        router.back()
    };

I can't see any solutions.

Espinosa

Does this answer your question? How to pass data from a modal with Expo Router using React-Native – Embrangle

Answer 1

How about using router.replace instead of goBack(). That way you can add params: router.replace({pathname: 'some-path', params: {param: qrData }}).

Invite

This sort of works, but the visual effect has the screen moving in from the right instead of from the left – Goad

Answer 2

Go back then update the route parameters.

router.back()
router.setParams({ foo: "bar" })

Brandy

This doesn't work – Cutthroat

Answer 3

I think we can pass params by specifying the screen name we want to return to in the pathname using router.navigate.

router.navigate({ pathname: "backToPath", params: { a: "paramA" }, });

Aphotic

Answer 4

It is not (yet?) possible to add params using a router.back(). You have to use router.navigate() or another expo router functions.

Workaround (not the best, I admit)

I want to setParams when going back to my page in order to tell it to refetch the data. I can use useFocusEffect(() => {}); from expo-router in order to refetch the data every time we quit the page and then return to it (go back to focus on it).

(I admit it is not very efficient.)

Further