An open API service indexing awesome lists of open source software.

https://github.com/bobbytes/digital-reactnative-visual

Visual components for reactnative aligned with the dormakaba styleguide
https://github.com/bobbytes/digital-reactnative-visual

Last synced: over 1 year ago
JSON representation

Visual components for reactnative aligned with the dormakaba styleguide

Awesome Lists containing this project

README

          

# introduction

This module provides basic components aligned with the dormakaba styleguide. In addition there are a few view components which includes extended animations like login, list and detail view.



Find detailed documentation here: [https://dormakaba-digital.gitbook.io/reactnative-visual/](https://dormakaba-digital.gitbook.io/reactnative-visual/)

# start

```bash
npm start
npm run ios
```

# create dormakaba icons

Download latest icons from https://design.dormakaba.com

Place the needed files in ./assets/css and ./assets/fonts

- dormakabaIcons.css
- dormakabaIcons.ttf

Then run:

```bash
./node_modules/.bin/generate-icon ../digital-reactnative-visual/assets/css/dormakabaIcons.css --componentName=DokaIcon --fontFamily=dormakabaIcons --p .ico- > ./DokaIcon_new.js
```

copy the glyphmap from `./DokaIcon_new.js` to `./js/DokaIcon.js`

make sure to export the glyphmap so it can be imported by the all icons story `./js/atoms/Icon.stories.js`

# run on device

## ios

a) set host in /storybook/storybook.js

`const StorybookUI = getStorybookUI({ port: 7007, onDeviceUI: false, host: '169.254.243.196' });`

b) start from xcode (being on same network as device)

## android

// check device connected
adb devices

// bridge ports
adb reverse tcp:8081 tcp:8081
adb reverse tcp:7007 tcp:7007

// start
npm run android

# upgrade

rename project to `digital_rn_visual` and move react-native to dependencies in package.json.

run `react-native-git-upgrade` in console an pray.

reverse renaming and dependency move in package.json.