Updated React Native Flat App Theme

Now at v8.0.0!

We recently updated our popular UI theme, React Native Flat App Theme with cool new features. The package includes both React Native and CRNA versions.

New Features

Redux

We have integrated Redux Form with the Login, SignUp and Forgot Password screens to manage form state in Redux.

We have added Redux Store to the Flat app, allowing us to fetch data in the Home screen.

NativeBase

We have added the swipeable list component of NativeBase to Profile screen.

Also we have replaced the scrollable tabs components with NativeBase tabs in the Comments and Channels screens.

React Native

React Native’s FlatList component is now added to the Home screen.

Jest

By integrating Jest into the Flat App, we have the following test cases:

• Fast interactive watch mode that runs only test files related to the changed files. It is optimized to give signal quickly.
• Capture snapshots of React trees or other serializable values to simplify testing and to analyze how state changes over time.

Flow

We have also integrated Flow, a static type checker for JavaScript code. Flow infers types and tracks data as it moves through your code. Flow checks your code for errors through static type annotations. These types allow you to tell Flow how you want your code to work, and Flow will make sure it does work that way.

Husky

By integrating Husky into the Flat App, we can prevent bad commit, push and much more 🐶. Husky builds precommit and other git hooks in order to run commands within your package.json before a commit is allowed.

Prettier

Prettier is an opinionated code formatter. It removes all original styling and ensures that all outputted code conforms to a consistent style.

ESlint

We have also integrated ESlint, a pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.

React Navigation

We have replaced React Native Router Flux with React Navigation. React Navigation has navigators that allow us to define our application’s navigation structure. Navigators also render common elements such as headers and tab bars which can be easily configured.

React Navigation includes the following functions to help you create navigators:

• StackNavigator
• TabNavigator
• DrawerNavigator

Calendar

Calendar package has also been upgraded and includes various customizable React Native calendar components.

And of course, we are using upgraded versions of React, React Native and other dependencies. Also, we have modified the entire project structure to get much better efficiency.

Click here to check out the docs.

Scan this QR code using Expo or visit this link to look at the demo app.

Visit our product page for complete details.