MobileApp
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.
Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies).
Redux Saga assists in handling asynchronous actions for all of the app's api calls.
"It uses an ES6 feature called Generators to make those asynchronous flows easy to read, write and test. (if you're not familiar with them here are some introductory links) By doing so, these asynchronous flows look like your standard synchronous JavaScript code. (kind of like async/await, but generators have a few more awesome features)."
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