zulip / zulip-mobile

Zulip mobile apps for Android and iOS.

Zulip Mobile

Zulip Mobile is the official mobile Zulip client, supporting both iOS and Android.

Get the app

Release versions of the app are available here:

• Zulip for iOS on the iTunes App Store
• Zulip for Android on the Google Play Store
  • Or if you don't use Google Play, you can download an APK from the official build we post on GitHub, or get the app on F-Droid.

You can also help out by running beta versions of the app, and reporting bugs!

Maintenance mode

This codebase built on React Native is a legacy app, which is in maintenance mode as we focus on building a new Zulip mobile app with Flutter. This means:

• This repository is the source code of the app we're still distributing and recommending for most users, until the new app is fully built and ready to replace it.

• Feedback is still welcome. Some bugs and feature requests will be naturally resolved by the new app; others won't, and we'll transfer them over when the time comes as issues on the new app. We're happy to do the work of identifying which is which — it's usually easy for us, given the time we've spent in both codebases.

• The development work we do in this repo is kept to a minimum: we fix critical bugs, and we add support for a few of the new features being added to Zulip on the web and desktop, those where the leverage from mobile support is highest.

• We aren't able to spend significant time investigating other bugs, or reviewing PRs from contributors. We're investing that time instead in getting the new Flutter app finished and into all our users' hands as soon as possible.

Contributing (old)

If you're interested in contributing to Zulip's mobile apps, see the new Flutter-based app.

Details below are from when this app was in active development. Some details may still be useful, but bear in mind that this app is in maintenance mode as described above.

Discussion

To get involved in Zulip Mobile development, please join us on the Zulip community Zulip server, in the #mobile stream. Come say hello, discuss areas to work on, and ask and answer questions.

Using the beta

One important way to contribute is to run beta versions of the app, and report bugs! To get the beta:

• Android: install the app, then just join the testing program on Google Play.
  • Or if you don't use Google Play, you can download an APK; the latest release on GitHub (including "pre-releases") is the current beta.
• iOS: install TestFlight, then open this public invitation link on your device.

Bug reports are welcome either in the #mobile stream or on this GitHub repo.

Development

Zulip Mobile is written in JavaScript with React Native. To get started with the code, follow this doc:

• Developer Guide

Then see our Contribution Guidelines, and come say hello in the #mobile stream.

For more reading, take a look at our developer docs.

History

Zulip Mobile supersedes two legacy Zulip apps, zulip-ios and zulip-android (more history).

License

Copyright (c) 2016-2024 Kandra Labs, Inc., and contributors, and 2016 Dropbox, Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

The software includes some works released by third parties under other free and open source licenses. Those works are redistributed under the license terms under which the works were received.

zulip-mobile's Issues

Group messages more intelligently

Right now we group together consecutive messages with the same stream/topic or recipients but this can be improved in a few ways:

• Don't group together consecutive messages into the same header if it's been a long time
• Group together nearly-simultaneous consecutive messages by the same user (so that we don't display the username and time twice)

Submit updates to the server when the user reads messages

This is different from, but related to, #8; using the POST /messages/flags endpoint to send the list of messages not flagged as read that the user read on the device. Both are required for users who read messages on the app to not be unhappy with the level of synchronization between the webapp and the mobile app.

As part of implementing this, we will need to track the events coming in from the server that update which messages are shown as read.

Tapping twice quickly on the same 'narrow' results in exceptions

Group recent messages together

When a user sends multiple messages in succession, we should group them together under one message header (like the web app)

Display images (both links and file upload images) inline in message feed

There are two cases that may or may not require different on the app side to implement:

• Auto-display of images corresponding to links included in a message.
• Uploaded image files.

Send presence updates (focusPings) at correct times

Tim thinks if we just do the following, we should be good:

• Send when started or restored from suspended state
• Send once per minute while the app is open.

Feedback on how this affect people 'I think activity in the mobile app doesn't mark me as "online" in the Zulip backend. I'm pretty sure that PMs received while I'm online (in the web app) don't trigger emails, yet I'm pretty sure I've received emails for PMs received while I had the mobile app open.'

Better structure and refactoring

Some issues that I will improve on:

• Rename components from ZulipSomething to just Something
• Rename components that are called SomethingView to SomethingScreen or SomethingScene, when they take up the whole screen
• Rename user reducer into account reducer
• Add more 'container' components, whose job is to wrap more purely presentational/behavioral components. They will get data from Redux and will request data from the api
• Better organization of Flow types, some might go in one file
• Clear distinction of Flow types - data from API vs internal data format

Persist login and auto login on next start

• refactor store creation, add redux-persist
• split userReducers into userReducers and authReducers
• persist authReducers store data
• all reducers use new auth instead of account
• rewire other startup components with new state
• delay app render until store is rehydrated
• create another reducer (appReducer) with global app state like 'loggedIn'
• more flat stores
• on start if auth data exists, try to login
• add logout functionality
• if stored login is invalid, show login screen
• remember dev login too

Add an initial automated test suite

Decide on how deep to pass Immutable

We should discuss and document the outcome of the decision.

Several considerations

• Keep immutables deep, for all components. Pros - simple. Cons - immutables are not as convenient to use for all cases. Good to have a lot of components depend on simple standard types.
• toJS() them everywhere in mapStateToProps - Pros - simple. Cons - is a bad idea. Mentioning it intentionally. Kills performance because breaks shouldComponentUpdate - always is true because new objects. Should not use.
• Strategically use toJS() at some depth. Likely the best solution but needs thinking through.

Use DevAuthBackend in development mode

Makes it easier to test different user accounts. This was recently added to the Android app: zulip/zulip-android-legacy#65

Submit pointer updates to server

This allows the server to keep track of the latest messages that a user has read.

Add support for multiple user accounts

Each account can be on a different realm.

Add an account switcher

Let users switch between multiple accounts

Add tests for Logo and Avatar

I am working on Jest testing and snapshots for Logo.js and Avatar.js. I will be submitting a pull request soon.

Global Error Management

Handle global errors, that might occur at any time.
This is different than one-time handling of same error, like incorrect password on login screen.

• Refactor api functions
• Connection lost - show 'offline' message
• Password incorrect. Reason: User changed password in other app or similar. Action: Go back to login screen
• Maybe use NetInfo for additional offline detection.

https://facebook.github.io/react-native/docs/netinfo.html

Add unread counts to streams

Build version of anchor-based scroll view for Android

The iOS app contains a modified version of RCTScrollView that allows adding elements to both the top and bottom while maintaining scroll position.

We need a version of this for Android.

Get new messages as HTML instead of Markdown

This should be simple. We just need to add an applyMarkdown flag to the API call

Select messages by clicking on them

Related to #4. Clicking on a message in a stream should open the compose view with the stream and thread defaulted to those of the selected message.

Move Xcode configuration to a separate file (`xcconfig`)

Good reference: https://pewpewthespells.com/blog/migrating_code_signing.html

Add logic to communicate with server event queue

Similar to https://github.com/zulip/zulip/blob/master/static/js/server_events.js#L56

Enable hot module reloading in development

This will speed up the edit refresh cycle by maintaining state (such as logged in accounts) between edits.

Support push notifications

Crash when tapping "private messages" on iOS

This is on the RC realm, which is a large organization (and I have quite a few private messages). Will try to reproduce this on the dev realm.

Add icons to navigation bar

Replace 'Streams' and 'Home' with icons

Document how to build the app for Android

I get Error:Android Source Generator: [zulip-mobile] AndroidManifest.xml file not found when I try building it, which probably means I didn't set something up.

Add configurable error and crash reporting

Multi-account support

• Refactor authReducer into accountsReducer
• Account list screen for initial selection
• Persist all successful logins
• Account list for switching between
• Navigation flow on login, can go back from login
• A selector to pick the active account
• When logged in, account becomes the default one, to be reused on next run
• Can remove an account from the list
• Custom Account Picker Item with Remove button
• Tests
• Account list, login on click
• Remember partial accounts
• Account switcher when inside the app

Render message timestamps intelligently

We should probably show a time (such as 8:00) when the message is recent (within the last few days), or a month and day otherwise (such as Apr 25)

Add app icon (for home screen)

Use a clear user agent for requests coming from the React Native app

This is important to make it easy to debug which requests are coming from the app server-side.

Given the style of how Zulip does User-Agent strings for API integrations / the other apps, I think we probably want something in the format of ZulipReactNative/0.1.0 (iOS: 7.1.2). where 0.1.0 is the version of the app itself and 7.1.2 is the iOS version.

Add search feature

UI:

• Magnifying glass to the right of the navigation title
• Clicking it reveals a search text field underneath the navigation bar

Indicators in scroll view

Add indicators in the scroll view for:

• Up-to-date (caught up with latest messages)
• No older messages

Move stream list to modal window

The stream list is currently contained in a sliding drawer (which slides in from the left when the user swipes or clicks a button in the navigation bar).

We could move this feature to a modal window that expands when the user clicks the stream title (or a little arrow next to it). Doing so leaves the left navigation button and left swipe available to be used for a 'back' action.

Polish start & login experience

• After login, when navigating to 'main' reset previous routes
• If only one auth backend, skip backend pickup screen
• Splash screen
• If no protocol is entered, prepend 'https://'
• No 'flashing' of routes

Add forced update feature

This would prevent a user from using the app if the version is too old

We decided the implementation of this should be as follows:

• We check for an error returned by events_register with some specific error code that means "You need to upgrade"
• Additionally, we add a new small endpoint on zulipchat.com (or configurable app endpoint) that is passed the current zulip-mobile app version and returns whether it needs to upgrade or not. Tim can quickly write the backend endpoint as soon as we're ready to work on this.

Add topics to the stream sidebar

App-wide Navigation + Redux with NavigationExperiemental

• Add NavigationExperiemental ot app
• Link Redux store with it
• < Screen > component to serve as container for all full-screen views
• < ModalNavBar > component
• Login flow uses this navigation

Use native navigation libary

https://github.com/wix/react-native-navigation

Network requests have no timeout

There's currently no timeout for network requests. For instance, if a user attempts to login to a non-responding server, the UI will lock up.

Fixing the issue will likely involve wrapping the fetch promise with a timeout in ApiClient.js

Render HTML in messages

The native iOS app uses NSAttributedString which provides a fromHTML option. We don't have that luxury in React Native so we'll either have to write our own parser for a subset of HTML, use an appropriate third-party module, or fallback on a native component for rendering messages.

Add side menu / drawer with list of users

• Presence fetching
• Presence update sending
• Narrowing to PMs with a user via buddy list

Save api keys on device for long-lived sessions

The user currently has to sign in each time when opening the app.

Add GCM and APNS support

The Zulip server sends push notifications for iOS devices; we should add support for displaying this in zulip-mobile.

Display emoji in message bodies properly

This may require including the Zulip (really Android) emoji set in the app so that we don't need to fetch the emoji from the network to display them.

Add side menu / drawer with list of streams

Options should include:

• Narrowing to private messages
• Narrowing to any subscribed stream
• Managing stream subscriptions or opening a new page for subscriptions

Support Google auth

Add ability to automatically push new JS/CSS

A huge advantage of React Native is the ability to update on-the-fly.

See https://github.com/Microsoft/react-native-code-push

Add ability to compose new messages

This is a large task and will require additions to the UI (for a compose bar and text fields) and API logic to send new messages to the server.