Integration with Stream

This documentation is legacy. For the current docs, see the guide in the React Native UI Components Docs.

Thanks to react-native-push-notifications, we provide a platform agnostic experience while still using native push on either iOS or Android platforms.

All that’s left: integrating the test app with the Stream Chat client. Open up App.js in the root of your project and check that componentDidMount exists. If the file does not exist add an async componentDidMount method to the class:

//...
import { PushNotificationIOS } from 'react-native';
import PushNotification from 'react-native-push-notification';
import { StreamChat } from 'stream-chat';
import { API_KEY, USER_TOKEN, USER_ID } from 'react-native-dotenv';

export default class App extends Component {

  async componentDidMount() {
    try {
      const client = new StreamChat(API_KEY, null);
  
      await client.setUser({ id: USER_ID }, USER_TOKEN);
  
      PushNotification.configure({
        onRegister(token) {
          await client.addDevice(token.token, token.os === 'ios' ? 'apn' : 'firebase');
        },
        onNotification(notification) {
          notification.finish(PushNotificationIOS.FetchResult.NoData);
        },
        senderID: "YOUR_SENDER_ID",// (Android Only) Grab this from your Firebase Dashboard where you got google-services.json
        requestPermissions: true
      });
    } catch(error) {
      console.log(error)
    }
  }
  
  //...
}

For the sake of this tutorial, we created a .env file to store these values and grab them using react-native-dotenv as shown above – a good idea for your API_KEY in any case, but your USER_ID and USER_TOKEN will likely come from elsewhere in a real-world setting, depending on your use-case.

All that’s left to do is to use the stream-cli to send out a test push notification. You can find out how that works in this section of the docs. Just make sure you use the same user_id in both the cli and this test app.

Android React Native Setup

Importing Data