Prerequisites
Ably
- Sign up for an Ably account.
- Create a new app, and get your first API key. You can use the root API key that is provided by default, within the API Keys tab to get started.
Create a New Project
- Create a new React Native project using the React Native CLI:
- Install the Ably Chat SDK and its dependencies:
- For iOS, install the native dependencies:
Step 1: Set Up the Ably and Chat Client Providers
The Ably Pub/Sub SDK and the Ably Chat SDK expose React hooks and context providers. TheAblyProvider and ChatClientProvider should be used at the top level of your application, typically in App.tsx.
In production, you should use token authentication to avoid exposing your API keys publicly.
Replace the contents of your App.tsx file with the following code:
Step 2: Connect to Ably
Clients establish a connection with Ably when they instantiate an SDK. Create a new fileChatApp.tsx and add the following functions:
In the App.tsx file, add the import and use this component:
Run your application:
The application should now be running. You should see the connection status displayed with “Connection: connected!”.
Step 3: Create a Room
Now that you have a connection to Ably, you can create a room. TheChatRoomProvider provides access to a specific chat room.
Update your ChatApp() component to wrap the contents with a ChatRoomProvider:
Next Steps
Continue to explore the documentation with React Native as the selected language:- Understand token authentication before going to production
- Read more about using rooms and sending messages
- Find out more regarding presence