Sola mobile app.

Sola

Mobile app

Sola is a mobile app I developed to operate as a Bible reading companion. It assists in two primary ways: providing context to wherever the user is reading through maps, timelines and videos; and hosting customisable group reading plans. It is a simple, intuitive, and easy to use app which allows users to read the Bible in a more engaging way.

Services

  • App design
  • App development

Stack

  • React Native
  • Node.js
  • Prisma / GraphQL
Examples of passage screens in the Sola mobile app.

For the presentation of maps in Sola I integrated the Mapbox SDK due to its comprehensive map design capabilities. Interactive bottom sheets are used to list the relevant places where the user is reading, and detail further information of each place when selected.

Examples of map screens in the Sola mobile app.
Map icons designed for the Sola mobile app.

A flagship feature of Sola is an interactive timeline showing a visual history of the books, rulers and events of the Bible’s storyline.

The timeline can be navigated by both horizontal scroll gestures and – in a soon to be released update – pinch gestures to perform animated zooming in and out. When scrolling, labels intelligently stick to the left of screen to maintain the ability to identify a span. Zooming allows the user to navigate through the timeline in 5, 10 and 50 year increments, with selected design elements being revealed or hidden to prevent collision and clutter.

Challenges I overcame to allow for smooth animation and interaction include implementing virtualisation to render only visible spans for increased performance; and managing scroll and pinch gestures with the React Native Gesture Handler and React Native Reanimated libraries.

The Bible timeline in the Sola app.
Video screens in the Sola mobile app.

Sola facilitates the creation of customisable Bible reading plans, with the ability to host plans in groups via shareable links. Subscribers then receive any updates from modifications made to the plan by the host.

Screens from the plan creation process in the Sola mobile app.