V1(legacy)

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);
  const unsubscribeTokenRefreshListenerRef = useRef<() => void>();

  useEffect(() => {
    // Register FCM token with stream chat server.
    const registerPushToken = async () => {
      // unsubscribe any previous listener
      unsubscribeTokenRefreshListenerRef.current?.();
      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();
      unsubscribeTokenRefreshListenerRef.current?.();
    };
  }, []);

  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>
  );
}