Building your own React Native app on iOS

Let's take a look at some prerequisites before we can start on our app building journey.

If you are already familiar with mobile development, you may want to use React Native CLI.

Here are some of the dependencies you will need:

• Xcode (12.0 or later)
• CocoaPods
• Node (version 10+)

If you already have these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. You can follow the guide here to get these installed.

To use the Applozic React Native SDK and leverage pre-built components that you can easily customize, you can sign up for Applozic and get your APP_ID from the install section of the console.

Creating a new application and setting up dependencies

reactnative.dev has a very comprehensive guide on creating your first application using React Native's built in CLI. Once you are ready to integrate using the Applozic SDK, follow these steps:

Add pod

1. Setup your Podfile located at /ios/Podfile and add below pod dependency:



2. Navigate to YourApp/ios directory from terminal and run the below command:





Note: If you do not have pod dependency, check out how you can add pod in your react-native here.

Add Bridge files

1. Copy applozic folder from here to /ios/ folder to your project.
2. Open project from /ios/ folder in xcode.
   Please make sure to use .xcworkspace, not .xcproject at this step.
3. Include all .h and .m files to your project from applozic folder in step 1.

Add permissions

Add permissions for Camera, Photo Library, Microphone, Contacts and Location usage.

Note: We won't be asking the users for these permissions unless they use the respective feature. Due to Apple's requirement, we have to add these permissions if we are using any of their APIs related to Camera, Microphone etc.

Open Info.plist from /ios/YOUR_PROJECT_NAME/Info.plist file and paste these permissions anywhere inside the tag.

Setup Application ID

At this step, you should already have signed up for Applozic and obtained your APP_ID.

Open the ALChatManager.h file and replace "applozic-sample-app" with your APP-ID.

You can also follow the Applozic documentation to complete this step.

Integration with NativeModules

1. Import NativeModules



2. Define native module for accessing methods.

Setup APNS Push Notification

1. Open AppDelegate.m file under /ios/YOUR_PROJECT/
2. Follow the Applozic documentation to complete this step.

Setup conversational chat (1-to-1)

To get started with 1-to-1 chat, we first need to authenticate the user and register them to enable login/logout.

Creating a User object

A User object needs to be initialised and then authenticated to use Applozic's features. A user object has a unique field userId which is also only mandatory field. You can create a User object as below:

Registering/Logging in the user

You can check if user is logged in to applozic or not by using:

You can authenticate the user with Applozic using the below method.

Note: If the login request is from a new user then a new user account is created. If the user is an existing user then user authentication details are validated by the server.

Launching a Chat List screen

Launch the main chat screen using the below code:

Launch a chat thread with a specific user

You can launch chat with particular user by passing the userId in the below function:

Launch a chat thread with a specific group

You can launch a chat thread with a particular group by passing applozic generated groupId or with your assigned groupId clientGroupId

Conclusion

At the start of this article, we wanted to create a chat application that will leverage Applozic's React Native SDK to implement features including conversational chat, group chat, and push notifications. We have done all of those and also setup a React Native project that you can work on further and add more features like Audio and Video Call, Rich Messaging, multi-format attachments and many more!