📖 React Native Template with Tailwind Support🍐

Are you looking for some help in the development of your next mobile app? Look no further, the Digital Art Dealers team has built a React Native template to help bootstrap any project.

We all know creating a new mobile application can be tedious…. Boilerplate code, installing and configuring a mess of third-party libraries, and juggling with the idea of project structure.

The Digital Art Dealers React Native Template resolves all that!

So let’s get started….

Having built a number of React Native projects, we’ve noticed a pattern in libraries, and packages that are necessary and crucial to the development process. That’s why we’ve automated this process by including all them into a template. So what are these libraries, and what do they do?

Munchkin

Building and designing components that we need for our projects from scratch can be time-consuming. Every developer has felt this pain at one point of their career or re-writing a button component for 10th time. For this reason we have also created and included the library into this template.

Make sure to take a look at our sample app or website to learn how Munchkin is helping make the process of React Native development easier at digital art dealers and we invite you to consider our component library next time you’re building a new app.

Nativewind ( Tailwind CSS )

Using React Native’s built-in StyleSheet can make it difficult to maintain styles in some external locations to reuse them. It can also be difficult to manage proper naming conventions throughout our whole codebase.

This is why we felt it necessary to utilize Nativewind and include it in our template. This completely changes the common approach to styling applications as Nativewind creates a universal style system for React Native. This can help us refactor a large number lines of code to something a lot slimmer by removing the necessity for StyleSheet styling. This might not seem like a big issue, but as applications scale in size, it definitely makes a difference in maintainability.

React navigation

React Native in itself does not include navigation support. We feel the best third-party library that supports navigation for React Native Applications is React Navigation. This will provide you with everything you need to add different screens, transitions and navigators types (Drawer, tabs, etc…) to your projects.

Axios

Whether you want to authenticate a user, or simply retrieve data for your application. You will need to make network requests to an API when building out your React Native Applications. That’s where axios comes into play. Axios is a popular isomorphic HTTP client, which means it can run on both the browser and the Node runtime environment. Making it easy to reuse your API codebase when using Node, the browser, and or React Native. This is why axios made the cut into our React Native template.

React Redux and toolkit

As we’ve talked about it on our most recent Blog. State management can be a huge head-ache to handle. React Redux makes the process of state management easier and more approachable. In our template we’ve actually set up everything for you. From reducers, persisters, slices, to the Redux store. Everything is ready for you to just update a couple lines of code and hit the ground running.

React Native Lottie

Every application needs a little beauty to give it a nice feel and look, and React Native Lottie is a library used to create and display animations with simply json files. Sure, you can decide to use React Native’s native component solution Animated or even libraries like react-native-svg But as experienced React Native developers, we can confirm that none of these choices will offer the same look and feel that Lottie will bring to your applications.

DAD project structure

src
- assets - for all images and test input data
- navigation - for all navigation objects
- redux - using redux slices for state
- screens - a place for all our screens
- utils - for all helper functions

And that’s all there is to know about our react native application template. Make sure to give it a try and see how she performs for yourself.

To stay up to date with updates on the template, sign up for our newsletter on our website

Closing thoughts

If you enjoyed this article remember to follow me on GitHub for more react native code, and if you have any questions, send me a message on Twitter.

If you are looking for mobile developers for your next mobile app, book a meeting on our website for 10% off