If you’ve been involved in mobile development in any way in the past few years, you may have heard of React Native - a framework that lets you build native mobile applications using only JavaScript and React.
A significant number of developers use GitHub as their primary development platform to host their repositories, manage their projects and collaborate with different teams. Although the website is optimized for mobile devices, there is no official native mobile app for the platform. Fortunately, GitHub provides excellent GraphQL and REST APIs that have allowed teams and individuals to create all types of integrations and extensions to enhance the functionality of GitHub to fit their needs.
Every currently available third-party mobile client for GitHub that I tried to use was either too simple, required payment for the most basic of features or didn't provide the best user experience. This gave me enough reason to build GitPoint, an open-source mobile GitHub client, with React Native.
Why React Native
One of the primary concerns with teams needing to build native mobile applications is becoming familiar with all the different technologies. Swift and Objective-C are both languages supported by Apple that allow you to build applications for iOS. Java and Kotlin are some of the programming languages that can be used for Android development.
Tools such as Cordova have aimed to bridge this gap by allowing users to develop cross-platform mobile applications using HTML, CSS and JavaScript. Cordova works by wrapping the application in a WebView that’s configured to embed your application written in web technologies in order to fit the size of the screen.
Instead of relying on WebViews and a bridge to access native resources such as the camera, React Native allows developers to write in the same way they would to build a web application with React, but to produce a mobile application with purely platform-specific native components. React Native apps are virtually indistinguishable from applications built with native components.
Github in Your Pocket
GitHub just recently announced the release of GitHub Desktop 1.0, a completely redesigned GitHub Desktop experience built with Electron. With no current official native mobile, GitPoint aims to similarly extend the workflow of the platform to our mobile devices with a complete native mobile integration.
I started building this application on my free time when I started working at Rangle in January. Without any previous React or React Native experience, I slowly began with a number of the initial screens that showed repository and user data. With no understanding of Redux at this point, everything was still under local state.
Once a few screens were mapped out, the next step was to include a navigation layer to allow users to switch between different screens. Fortunately, React Navigation was shortly announced. Although the concept of pushing screens on a stack and leveraging a flat layer on top such as tab navigation was new to me, I quickly realized mobile navigation is a completely different beast than routing in the web. The library provided a pleasant API experience that made it simple to add stacks and tabs. React Navigation is now the recommended navigation tool in the React Native documentation. It is important to mention that this is a purely JavaScript implementation. React-native-navigation and native-navigation are two other libraries that aim to provide purely native navigation between iOS and Android and are definitely worth mentioning.
At this point, I was happy with using local component state entirely throughout the application until I started noticing two things:
- Passing props throughout a number of components was becoming unwieldy
- GitPoint did not work offline whatsoever
Including a Redux state container at this point made sense. Redux-persist then allowed me to persist and rehydrate my redux store to AsyncStorage so initial notifications and event data still showed without a working internet connection and when initial requests are being fired. If you’re interested in exploring offline persistence for your Redux state, I highly suggest taking a look at both the redux-persist as redux-offline libraries.
Currently, GitPoint leverages GitHub’s REST API v3 with plans to slowly migrate to their GraphQL API v4. Moreover, the majority of the application is styled using React Native Elements, an excellent UI library that provides a number of different components you can use.
Looking Ahead
In roughly two months of launching, the app has garnered over 200,000 Twitter impressions, 5000+ users, 2200+ GitHub stars, 33 contributors, 190+ issues and 150+ pull requests. The reception has been overwhelmingly positive and the community support has been amazing. GitPoint would not be close to where it is now without the help of some amazing contributors.
We have an active community on Gitter and there are a significant number of improvements and features we plan on adding. This includes refactoring changes such as rearchitecting our state logic and leveraging GitHub’s GraphQL API as well as a large number of feature requests we plan on addressing in future releases. A large majority of the contributors have never done React or React Native development before, and it’s amazing to have new developers learn so much as we work on making the platform better. Having a team of contributors happy to be part of a community is just awesome, and there is no better feeling waking up in the morning to read a tweet like this:
If you happen to have questions, feedback, feature requests or anything at all, please don’t hesitate to reach out. We think GitPoint provides a lot to its users already, but we’re only just scratching the surface.
Check out our web application development page for more info!