GSOC '17

Brief report of my work in GSOC 2017

Google summer of code ‘17: Report


I worked on the react native framework, to enhance the cross platform group chat application for the organization Zulip.

I have been contributing to Zulip since my last GSOC and it has been a great experience so far, thanks to the Zulip Organization for selecting me again.

In this course of 3 months I have done a lot of changes, implemented new features, fixed many crucial bugs, worked on not only RN but also on several other things.


(List of main features worked on)
(Details on the above listed)
Push notifications for android & ios

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


Initial implementation was


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


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 ComposeOptions

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

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

Implemented prettier (code formatting)

One of most important part of my contribution, was this. Prettier added a code styling guide and increased the code readability of the project.

Renable prettier and fix all issues related to it was a massive PR to fix all the non-formatted code, and now the code styling of the project is much better

Implement prettier for the project

Hooked up detox E2E & the prettier formatting check

This took a lot of time to use the UI testing checking automatically in the travis CI Now the CI does a release build from scratch and use the generated file to run a end to end test, runs without any flakiness

Currently there aren’t many test running as we need a dev server for the main screen testing

Prettier check test’s if the code in the branch is formatted according the prettier specified format

Added detox smoke test’s in the travis CI
Use prettier-check to check if all files are formatted with prettier

Markdown parser (converts markdown to html for messages)

This converts the markdown to the html which now helps locally echoing the sent message and previewing the written markdown in the Full Screen Editor.

Implement markdown parser to convert markdown to html

Several changes in the settings screen

Separate language to another screen in settings screen
Add online notification switch to settings
Add a setting for enabling offline push notifications
Fetch updates for notification and display settings

Use parser to locally echo the message sent

Uses parser to convert

Implemented the outbox functionallity

Implement reducers and actions for outbox and use it in ComposeBox
Use result of post request for sending message
Fix outbox bugs
Implement action sheet for outbox messages
Use outbox messages to render messages to the chat screen

Message auto saved as drafts

Implement drafts screen

Full screen markdown editor

This is a full screen markdown editor which would be really helpful for writing long big formatted message

Glimpse of the editor

I also extracted this out in a library

Full screen markdown editor

Implemented muting of topics/streams

This added an option to mute/unmute topics/streams

Add API calls for muting/unmuting stream/topic
Added reducers for receiving updates on subscriptions and muted topics Implemented Muting/Unmuting of streams and topics

Pleothera of other fixes

Fix: Muted topics were being displayed in homeView
Fix: NoSuchMethodError for builder.addAction
Fix eventQueueId in appReducers
[WIP] Fix flow, jest unit test errors
Fix chatReducers EVENT_NEW_MESSAGE incorrect implementation
Fix for unauthorized access and push notification
Fix re-rendering of AppContainer due to outbox
Fix: Upgrade expo actionsheet due to BackAndroid being deprecated
Fix android GCM push notifications
Fix react-native-fetch-blob package crash
Fix master branch flow errors
Fetch realm_filters and its event updates
Handle back pressed in android
Fixes #934: Play zulip.mp3 on android push notification
Fix release build through command line errors
Fix unread selectors and fix eslint error
Fix: Downgrade photoview dependency to 1.2.0
Fix: navigation to dev auth screen
Fixes #683: Split users into users and presence
Fix: Receive twentyFourHourTime from the server on intital fetch
Fixes #633: Remove ActionSheetProvider from root in the chat.js
Fix: Renamed mute topic & streams
Use translated strings in message action sheet