# alma-design-system-react-native

> ⚛️ Alma Design System - React Native Components

Latest version **1.1.12** (published 2023-08-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install alma-design-system-react-native
pnpm add alma-design-system-react-native
yarn add alma-design-system-react-native
bun add alma-design-system-react-native
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.12 |
| Published | 2023-08-25 |
| First published | 2022-04-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 696.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dasa |
| Maintainers | ignacio_rojas |
| Keywords | android, ios, react native, component library, ui kit, alma design |

## Links

- npm: https://www.npmjs.com/package/alma-design-system-react-native
- npm.io page: https://npm.io/package/alma-design-system-react-native

## Dependencies (6)

- [lodash.merge](https://npm.io/package/lodash.merge.md) ^4.6.2
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [lodash.clonedeep](https://npm.io/package/lodash.clonedeep.md) ^4.5.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.3
- [@dasa-health/alma-icons](https://npm.io/package/@dasa-health/alma-icons.md) ^0.1.3
- [@dasa-health/alma-tokens](https://npm.io/package/@dasa-health/alma-tokens.md) 0.7.1-next.18

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.1.12 (latest) — 2023-08-25
- 1.1.11 — 2023-08-09
- 1.1.10 — 2023-05-12
- 1.1.9 — 2023-05-05
- 1.1.8 — 2023-05-02
- 1.1.7 — 2023-04-03
- 1.1.6 — 2023-03-31
- 1.1.5 — 2023-03-24
- 1.1.4 — 2023-03-10
- 1.1.3 — 2023-02-01
- 1.1.2 — 2022-12-20
- 1.1.1 — 2022-12-20
- 1.0.13 — 2022-12-20
- 1.1.0 — 2022-12-06
- 1.0.12 — 2022-11-30
- … 23 more at https://npm.io/package/alma-design-system-react-native/versions

## README

# Alma DS React Native Components

Alma React Native is the official React Native lib composed with Emotion from Dasa. [Access here all documentation]().

## Getting Started

See all components in [our Storybook]().

## Install Package

```
yarn add @dasa-nexus/alma-design-system-react-native

```

There are required dependencies to use this package that you should have installed on your project:

- React Native Safe Area Context (usually comes with React Navigation)
```
yarn add react-native-safe-area-context
```


- React Native Svg
```
yarn add react-native-svg
```

## How to use

In order to use the `Text` components (`Heading`, `Subtitle`, `Body`, etc) in your RN app, you will need to place the `DasaSans` font in your project, and load it before the render of your app. If you ar using Expo, you can do something like this:

```
import { useFonts } from 'expo-font';
import AppLoading from 'expo-app-loading';

...

  const [fontsLoaded] = useFonts({
    'DasaSans-Bold': require('./[PATH_TO_YOUR_FONTS_FOLDER]]/DasaSans-Bold.otf'),
    'DasaSans-BoldItalic': require('./[PATH_TO_YOUR_FONTS_FOLDER]/DasaSans-BoldItalic.otf'),
    'DasaSans-Italic': require('./[PATH_TO_YOUR_FONTS_FOLDER]/DasaSans-Italic.otf'),
    'DasaSans-Light': require('./[PATH_TO_YOUR_FONTS_FOLDER]/DasaSans-Light.otf'),
    'DasaSans-LightItalic': require('./[PATH_TO_YOUR_FONTS_FOLDER]/DasaSans-LightItalic.otf'),
    'DasaSans-Medium': require('./[PATH_TO_YOUR_FONTS_FOLDER]/DasaSans-Medium.otf'),
    'DasaSans-MediumItalic': require('./[PATH_TO_YOUR_FONTS_FOLDER]/DasaSans-MediumItalic.otf'),
    'DasaSans-Regular': require('./[PATH_TO_YOUR_FONTS_FOLDER]/DasaSans-Regular.otf'),
    'DasaSans-Semibold': require('./[PATH_TO_YOUR_FONTS_FOLDER]/DasaSans-Semibold.otf'),
    'DasaSans-SemiboldItalic': require('./[PATH_TO_YOUR_FONTS_FOLDER]/DasaSans-SemiboldItalic.otf'),
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return <YourApp />;
  }
```

If you are developing an exported RN project (not using expo), you will have to `react-native link` your fonts (please refer to some documentation on how to do this)

# Deploy

## [Publishing the new version on the Nexus](https://nexus.dasaexp.io/#browse/browse:alma-design-system-mobile:%40dasa-nexus%2Falma-design-system-react-native)

 -   Go to the `dev branch` and give a `git pull`
 -   Run the command `yarn build`   
 -   Commit the changes made to the folder `lib`
     -   Example: `chore: updating lib files`       
 -   Run the command `yarn release:patch` or `yarn release:minor` or `yarn release:major` according to the necessity ([Semantic Versioning 2.0.0](https://semver.org/lang/pt-BR/))    
 -   Track dev build on Jenkins (Must be on VPN and have access to Jenkins)
     -   [https://build.dasalabs.io/job/alma-design-system-mobile/job/dev/](https://build.dasalabs.io/job/alma-design-system-mobile/job/dev/)      
 -   Go to Jenkins Tags tab and manually run the version tag
     -   [https://build.dasalabs.io/job/alma-design-system-mobile/view/tags/](https://build.dasalabs.io/job/alma-design-system-mobile/view/tags/)
     

## [Publishing the new version in NPM](https://www.npmjs.com/package/alma-design-system-react-native)

 -   Change the package name in all files that mention it (do a general search)  
     -   `@dasa-nexus/alma-design-system-react-native` → `alma-design-system-react-native`       
 -   Remove field from `package.json`
```
  "publishConfig": {
    "registry": "https://nexus.dasaexp.io/repository/alma-design-system-mobile/"
  },
```
-   Swap the `.npmrc` file token (the token can be found in the file history)
     -   From `//nexus.dasaexp.io/repository/alma-design-system-mobile/:_authToken=NpmToken.*****************`     
     -   To `//registry.npmjs.org/:_authToken=npm_*****************`
-   Run the command `npm publish`

**IMPORTANT: The changes made in the second step must not be committed, but discarded after publication in the public NPM**

---
_Source: https://npm.io/package/alma-design-system-react-native · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._