Push Notifications with React Native

Kunal Gupta
Viithiisys
Published in
3 min readDec 28, 2017

I worked on the react native framework as part of my GSOC 2017 project. It is about enhancing the cross platform group chat application. In the course of 3 months I have done a lot of changes, implemented new features, fixed many crucial bugs, worked on not only React Native but also on several other things.

Some quick links for reference :

Two main Modules which I worked upon are:

Push notifications for Android

Used the wix/react-native-notifications for the ios & android notifications

Initial implementation was:

Then:

Grouped notifications into one and show the notifications as a list
Initial implementation of android GCM push notifications
Don’t show message’s count if only 1 message in the android notifications
Use big view styles for 1 conversation

Push Notifications for IOS:

Implementation of ios push notifications
Added log statement and enabled background modes for ios notifications

End to end integration test’s using appium & detox:

Initially I implemented appium, but the test’s were flaky even after good writeup (even after getting it reviewed by experienced people) Hence we decided to move on to detox which is a newer library built specifically for react native and its not flaky.

Add integration testing using appium for the iOS
Replace appium with detox

Rework on the compose box design:

Added a topic field to the compose box, by this now its possible to write a new topic in the stream narrow

Hide mode changer as there is only one compose option: compose text
Hide other icons in the Compose Options

New compose box design

Similarly, implemented this for the private narrow as well Unfortunately this PR didn’t got through as we decided it’s not the best UX to send messages to other people without narrowing to their conversation.

New compose box design for private messages

Display topic input only in stream narrow

Menu for the long press of message-

This added to show menu on long press of a message and have features like reply, narrow etc.

Show action sheet on long press of header

Editing message made possible-

This added an imperative feature of editing a sent message, and was long due for the project.

Implemented editing message

I hope this helped. Let me know if there are any doubts or suggestions for me in the comment section below. :)

--

--