Push Notifications

const client = StreamChat.getInstance(API_KEY, API_SECRET);
await client.updateAppSettings({
  firebase_config: {
    server_key: "server_key",
    notification_template: `{"message":{"notification":{"title":"New messages","body":"You have {{ unread_count }} new message(s) from {{ sender.name }}"},"android":{"ttl":"86400s","notification":{"click_action":"OPEN_ACTIVITY_1"}}}}`,
    data_template: `{"sender":"{{ sender.id }}","channel":{"type": "{{ channel.type }}","id":"{{ channel.id }}"},"message":"{{ message.id }}"}`,
  },
});

// Request Push Notification permission from device.
const requestPermission = async () => {
  const authStatus = await messaging().requestPermission();
  const enabled =
    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
    authStatus === messaging.AuthorizationStatus.PROVISIONAL;

  if (enabled) {
    console.log("Authorization status:", authStatus);
  }
};

const App = () => {
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    let unsubscribeTokenRefreshListener;
    // Register FCM token with stream chat server.
    const registerPushToken = async () => {
      const token = await messaging().getToken();
      await client.addDevice(token, "firebase");

      unsubscribeTokenRefreshListener = messaging().onTokenRefresh(
        async (newToken) => {
          await client.addDevice(newToken, "firebase");
        },
      );
    };

    const init = async () => {
      await client.connectUser({ id: USER_ID }, USER_TOKEN);

      await requestPermission();
      await registerPushToken();

      setIsReady(true);
    };

    init();

    return async () => {
      await client?.disconnectUser();
      unsubscribeTokenRefreshListener?.();
    };
  }, []);

  if (!isReady) {
    return null;
  }

  return (
    <View style={styles.container}>
      <Chat client={client}>{/* Child components of Chat go here */}</Chat>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

import React, { useEffect } from "react";
import messaging from "@react-native-firebase/messaging";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

const Stack = createStackNavigator();

function App() {
  useEffect(() => {
    // `onNotificationOpenedApp` gets called when app is in background, and you press
    // the push notification.
    //
    // Here its assumed a message-notification contains a "channel" property in the data payload.
    //
    // Please check the docs on push template:
    // /chat/docs/javascript/push_template/
    messaging().onNotificationOpenedApp((remoteMessage) => {
      console.log(
        "Notification caused app to open from background state:",
        remoteMessage,
      );
      const channel = JSON.parse(remoteMessage.data.channel);
      const message = remoteMessage.data.message;

      console.log("This message belongs to channel with id - ", channel.id);
      console.log("Message id is", message);

      // You will add your navigation logic, to navigate to relevant channel screen.
    });

    // `getInitialNotification` gets called when app is in quit state, and you press
    // the push notification.
    //
    //
    // Here its assumed that a message-notification contains a "channel" property in the data payload.
    // Please check the docs on push template:
    // /chat/docs/javascript/push_template/
    messaging()
      .getInitialNotification()
      .then((remoteMessage) => {
        if (remoteMessage) {
          console.log(
            "Notification caused app to open from quite state:",
            remoteMessage,
          );
          const channel = JSON.parse(remoteMessage.data.channel);
          const message = remoteMessage.data.message;

          console.log("This message belongs to channel with id - ", channel.id);
          console.log("Message id is", message);

          // You will add your navigation logic, to navigate to relevant channel screen.
        }
      });
  }, []);

  if (loading) {
    return null;
  }

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={initialRoute}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="ChannelListScreen" component={SettingsScreen} />
        <Stack.Screen name="ChannelScreen" component={SettingsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}