Technologies
The components of the App are built using the core components of React Native. Below is a complete overview of some of the core technologies used in this project.
React Native
Expo
Flexbox
React Navigation
React Context
Lottie animations
React Native helps in making the development work easier and allowing the developers to focus on the core app features in every new release. It is the most mature cross-platform mobile app development framework on the market, and used by small, medium and large multinational companies alike. With React Native you can build beautiful and fast applications without nearly any limitations. The hymn of React Native — learn once, write anywhere. React Native takes charge of the view controllers and programatically generates native views using javascript. This means that you can have all the speed and power of a native application, with the ease of development that comes with React.
Expo offers a set of tools built on top of / around React Native. These tools make it possible to build most apps without ever needing to write native code. Expo make it possible to build standalone apps and distribute to the app store and play store.
Expo consists of two main pieces:
1) expo-cli: a developer tool for creating projects, viewing logs, opening on your device, publishing, etc.
2) The Expo client: an app on your phone that lets you open and test your projects while you're working on them, without needing to go through XCode or Android Studio. And if you publish it through expo-cli, people can access it at any time through the Expo client on Android or on iOS if signed in to the same account it was published with.
The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).
The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.
The use of Flexbox requires a small learning curve, but can be learned quickly by programmers of any levels. A useful guide is provided by following this link.
React Navigation is a routing package (the most popular routing package for React Native) built specifically for React Native. The reason for its popularity are its easy to understand features, such as:
The ability to define groups of screens (navigation stacks).
The ability to customise navigation bars (screen headers).
The ability to Create different types of screen transitions (horizontal and/or vertical).
...and much more.
And all of this can be implemented from one central routes file. The React Native Share starter kit provides a navigation setup that can be easily replicated in any type of application.
React Context
React Context can help you manage state well in any React application. React's Context API has become the state management tool of choice for many, oftentimes replacing Redux altogether.
Context provides a way to pass data through the component tree without having to pass props down manually at every level. In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
The React Native Share starter kit provides an example of how to set up Context in a simple, easy to understand way.
Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web!
For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand.
Lottie is a great tool to instantly improve the user experience of your application. The React Native Share starter kit provides an implementation for two different Lottie animation effects that can be easily reproduced in your own projects.
Last updated