albertozaranza / astro-native

Astro components for React Native

Astro Native

A design system by Magnetis for React Native 👩‍🚀

Table of contents

• Introduction
• Installation
• Contact us

Introduction

Astro Native is package of components and resources to build mobile applications using React Native based in Astro design system by Magnetis.

Astro is created by designers, developers, product managers, data analysts, data scientists, stakeholders and enthusiasts, which helps us protect the brand concepts, elevate consistency of user experience and increase the speed and efficiency of how we design and build products for our customers.

Open

Magnetis believes that good design and experiences can impact the product market and society itself. Our design and code assets are open so we can contribute to the community and help new product teams.

Accessible

Design is meant to be for all. Astro style and components follow basic recommendations from the WCAG guidelines for accessibility, with tested contrast ratios and good practices in legibility and screen reading solutions. See WCAG.

Installation

Adding dependency

To use Astro Native, first you must add our package to your project dependencies by running:

Using Yarn:

yarn add @magnetis/astro-native @magnetis/astro-galaxy-tokens

Using NPM:

npm install @magnetis/astro-native @magnetis/astro-galaxy-tokens

⚠️ We strongly recommend you to also install @magnetis/astro-galaxy-tokens package, in order to acess and use our colors;

Adding fonts

In order to our components to function correctly, you must download all fonts located in the assets directory of this project and add it on your RN project.

Follow this article to add it to your project.

Ready to use!

Now that you've added Astro Native to your project, just use it!

Contact us

Found a bug? Please see if it was already reported on our issues page. If you can't find a matching report, you can open a new issue including as much information as you can gather. We appreciate it!

Any lingering questions? You can contact us at [email protected].

Thank you for using Astro! 🎉