Integrate Macaw UI kit into your react-native project

We launched a new product that has all that you need to launch a mobile application for your social network and much more.

We crafted a special UI kit that gives a more energetic look to your app. Macaw comes with clean design, colorful elements, and stylish content. We spend hundreds of hours to create this beautiful looking UI kit. The screens we created are a perfect fit for your next app. All screens and layers are neatly organized and easy to use.

Macaw has 86 ready to use HQ templates with 8 different categories:

• Walkthroughs
• Login/Sign up
• Profile
• Menu
• Social
• News/Magazine
• Multimedia
• E-commerce

Macaw is created for Sketch, Photoshop, and XD. Elements are 100% scalable vectors. Go and get some color.

For the react-native theme we made sure to have the code well organized so we have the following features:

Structure:

We made multiple screens that have a lot of options to easily customize them. Each element is made into a component so all you have to do is an import.

The product has the sketch & photoshop files for designers and the react-native node module for developers. To integrate this into your project is easy as we have great names for layers and easy to understand the code.

Templates

• 86 high quality app Templates categories

Maven Pro

• Maven Pro is a free downloadable Google Font

8 Categories

• Macaw has eight different categories to choose from

Nicely organised

• All the vector layers are neatly organised in sketch groups accordingly

Macaw UI Kit uses React Native & by using that you are allowed to easily deploy your app to Android & iOS with a single development codebase.

Go to the documentation page to read how to integrate this: http://macawdocs.epicpxls.com/#/

If you want just the design with Sketch, PSD and XD versions you can get it here: https://www.epicpxls.com/items/macaw-ui-kit

How to use

First, you need to have the Macaw UI Kit package. You can get that by buying the product

Place the folder containing the Macaw UI KIT into the root directory of your project. (You can change its location).

Update your package.json file to have in the dependencies section:

"react-native-macaw": "./react-native-macaw"

Run the following command to get the package into package.lock:

yarn install # or npm install

You are now done. But if you use Expo you can start that and just run the simulator to see your project and get started

We offer examples/screens for all the design elements so you can have a look into the react-native-macaw-preview/src/screens folder and get the code for each screen from there

Images used on the project can be changed easily by just updating the component details

Icons that we use are from a simple package that we included into the module and are from FontAwesome

Below is a video of me doing a sample project using the theme. Let me know in the comments if you guys want more details: