Just wanted to share an update on the project to develop React Native mobile apps. We’d love to find people who are experienced in Redux and React Native who might be interested in helping.
If you’re interested, please join our Mattermost Native Apps channel to discuss.
We’ve written previously about why we chose React Native for our next generation of Mattermost mobile apps.
Here’s what we’re trying to get completed:
1) Getting out a framework with Redux and React Native by October 31 that works with the Mattermost server APIs.
After Oct 31 the Mattermost server APIs are locked as we prepare to release to our open source community.
We’re working in a private repro to start, since in the early days it’s harder to work in larger groups.
- Redux (first several examples, but not all the APIs)
- Redux test framework
- Offline storage (first several examples, but not all the APIs)
- Developer build and tools
- Code style guidelines and checker
- Basic navigation framework
- Common controls, error boxes, buttons, etc.
- iOS specific additions
- Android specific additions
- Framework for theming styles
- i18n support
- Automated builds
- Bare bones documentation
- User Experience
- To see the full mobile web UI and try the existing mobile apps, sign-up for a Mattermost account at https://pre-release.mattermost.com/
- Go to Main Menu > Download Apps to download iOS and Android apps and login with the server URL and your new credentials
- Developer info
- Mattermost iOS app (notifications, native login & web view) -
- Mattermost Android app (notifications, native login & web view)
- Mattermost API documentation
- Mattermost Style Guide
After the framework is open sourced, we hope to work with the community to build the next phase.
2) From Oct 31 to November 28, getting a minimal viable iOS and Android client in React Native and Redux.
BACKLOG for Minimal Viable Product (P2 and P3 indicate lower priority tier):
Log in and “Hello world” hard-coded channel view: Login to server with basic email authentication and automatically log into first team, show Town Square channel with usernames, time stamp, usernames (looks like compact view with no profile pics), and plain text message contents.
Switch channels: Add icon in top left of channel view to open lefthand sidebar to view list of public channels, private groups and direct messages. Scroll up and down channels. Switch channels by tapping on new channels.
Channel notifications: Unread flag and mention count show on app icon, channel names and icon in top left of mobile view. (P2) “Unread post(s) above/below” indicators at the top and bottom of left-hand sidebar when channels with unreads are not in view.
(P2) Push Notifications: Display push notifications on locked screen and when app is in the background, (P3) and remove push notifications after user reads the message on another device. Deep link from push notification to message.
Basic Right Menu with logout: Add options menu button in top right of channel view, opening to right sidebar menu with logout option.
(P3) Status indicators: Enable display of user status in DM headers in center channel and lefthand sidebar and on profile pics in channels
After the initial release, we’d like to knock out some of the following as well:
APPENDIX: BACKLOG FOLLOWING Minimal Viable Product
Replies and RHS: In channel, show replies as replies instead of messages. Open reply threads in RHS. Optionally render profile pics if user has chosen full view.
Message actions: Enable message delete, permalink and flag/unflag.
Markdown & emojis: Enable markdown support, emoji and custom emoji rendering in messages and channel headers header.
Options: Add options menu button from top right of channel view. Add menus and UI for Account Settings, Invites, Team Setting, Manage Members,
Images and files: In channel, show links to non-image files. Add ability to attach a file from mobile. Show previews of image files and PDFs. Show public share link if enabled on server.
Search: Enable search in RHS with flag and mention short cuts.
Channel headers: Enable information icon in channel header to display channel header info.