React Native

Schematic’s React SDK also works for React Native apps. See the React SDK documentation for more details about how to use the React SDK.

Handling Application Backgrounding

When your application is brought back to the foreground, Schematic will automatically reconnect to the WebSocket to resume flag checks and event tracking. This will ensure that your application is always up to date with the latest flag data and event tracking.

However, the SDK implements reconnects with an expontial backoff timer, which may cause a delay before fresh flag values are available. For cases where you need immediate flag updates when returning to the foreground (e.g., after an in-app purchase), you can use one of these methods to re-establish the connection:

• forceReconnect(): Always closes and re-establishes the WebSocket connection, guaranteeing fresh values
• reconnectIfNeeded(): Only reconnects if the current connection is unhealthy (more efficient for frequent foreground events)

An example of using these when the application is brought back to the foreground looks like:

1
import { useSchematic } from "@schematichq/schematic-react";
2
import { useEffect } from "react";
3
import { AppState } from "react-native";
4
5
const SchematicAppStateHandler = () => {
6
    const { client } = useSchematic();
7
8
    useEffect(() => {
9
        const subscription = AppState.addEventListener("change", (state) => {
10
            if (state === "active") {
11
                // Use forceReconnect() for guaranteed fresh values
12
                client.forceReconnect();
13
                // Or use reconnectIfNeeded() to skip if connection is healthy
14
                // client.reconnectIfNeeded();
15
            }
16
        });
17
        return () => subscription.remove();
18
    }, [client]);
19
20
    return null;
21
};