[$500] [Wave Collect] [Ideal Nav] Display the home route when the app restarts on mobile platforms

[hayata-suenaga]

Clear the value for the LAST_VISITED_PATH Onyx key on mobile platforms (i.e. iOS and Android) so that when the app restarts on these platforms, the home route is displayed instead of the last visited route.

Internal Slack discussion

Related issues:

• IOU - App resumes in IOU flow when killing app in confirmation page and relaunching app

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e8861874ab17080a
• Upwork Job ID: 1754921316058124288
• Last Price Increase: 2024-02-13
• Automatic offers:
• HezekielT | Contributor | 0

[melvin-bot]

Triggered auto assignment to @dylanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01e8861874ab17080a

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rushatgabhane (External)

[Krishna2323]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Display the home route when the app restarts on mobile platforms.

What is the root cause of that problem?

NA

What changes do you think we should make in order to solve the problem?

We should use AppState to get the state of the app and whenever app is being inactive we can clear LAST_VISITED_PATH using updateLastVisitedPath. We will run this only if the device is an android or ios native device. We can add this logic in App.ts file or in NavigationRoot file.

App/src/libs/actions/App.ts

Line 507 in b5bb986

function updateLastVisitedPath(path: string) {

App/src/libs/actions/App.ts

Lines 138 to 144 in b5bb986

	let appState: AppStateStatus;
	AppState.addEventListener('change', (nextAppState) => {
	if (nextAppState.match(/inactive|background/) && appState === 'active') {
	Log.info('Flushing logs as app is going inactive', true, {}, true);
	}
	appState = nextAppState;
	});

Only run when isNative is true:
const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;

Since there is no simple way to trigger a function when app is being closed we can set the lastVisitedPath in ONYX to an empty string and save the value in a variable and if the app again comes in focus we will set the lastVisitedPath in ONYX to the original value which was there before the app was inactive.

Demo code, can be simplified and tested during the PR

    const [lastVisitedPathBeforeInactive, setLastVisitedPathBeforeInactive] = useState(props.lastVisitedPath);
    const isAppActive = useRef(false);
    const platform = getPlatform();
    const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;


    useEffect(() => {
        if (!isNative) {
            return;
        }
        const appStateSubscription = AppState.addEventListener('change', (nextAppState) => {
            if (nextAppState.match(/inactive|background/)) {
                isAppActive.current = false;
                setLastVisitedPathBeforeInactive(props.lastVisitedPath);
                updateLastVisitedPath('');
            } else {
                isAppActive.current = true;
                updateLastVisitedPath(lastVisitedPathBeforeInactive);
            }
        });

        return () => {
            appStateSubscription.remove();
        };
    }, [props.disableKeyboard, props.lastVisitedPath, lastVisitedPathBeforeInactive, isNative]);

    useEffect(() => {
        if (!isNative) {
            return;
        }
        if (isAppActive.current) {
            updateLastVisitedPath(props.lastVisitedPath);
        }
    }, [props.lastVisitedPath, isNative]);

Result

navigate_to_homepage_after_restart.mp4

app_restart.mp4

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

We want to show the home instead of the last visited route when restarting the native app.

What is the root cause of that problem?

We have a logic here to show the last visited route if exists on all platforms.

App/src/libs/Navigation/NavigationRoot.tsx

Lines 71 to 89 in 7f4cdce

	const initialState = useMemo(
	() => {
	if (!lastVisitedPath) {
	return undefined;
	}
	const path = initialUrl ? getPathFromURL(initialUrl) : null;
	// For non-nullable paths we don't want to set initial state
	if (path) {
	return;
	}
	const {adaptedState} = getAdaptedStateFromPath(lastVisitedPath, linkingConfig.config);
	return adaptedState;
	},
	// eslint-disable-next-line react-hooks/exhaustive-deps
	[],
	);

And now we want to change it.

Based on the OP, we want to clear the last visited route/path onyx when the app is closed, but there is no way to know whether the app is closed.

What changes do you think we should make in order to solve the problem?

Instead of trying to clear it when the app is closed, we can create a new platform-specific file called shouldOpenLastVisitedPath that will return false for native.ts, then return early if shouldOpenLastVisitedPath is false.

if (!lastVisitedPath || !shouldOpenLastVisitedPath()) {
    return undefined;
}

What alternative solutions did you explore? (Optional)

Or we can create a platform-specific file for updateLastVisitedPath that will do nothing for the native file.

App/src/libs/actions/App.ts

Lines 507 to 509 in 7f4cdce

	function updateLastVisitedPath(path: string) {
	Onyx.merge(ONYXKEYS.LAST_VISITED_PATH, path);
	}