reactnative-visual
  • @dormakaba/digital-reactnative-visual
  • Getting started
  • Changelog
  • Components
    • Avatar
    • Button
    • Card
    • Checkbox / Radio
    • Icons
    • IconButton
    • Image Cropper
    • Page, Row, Col
    • List, ListItem
    • Modal
    • Notification
    • QR Code Reader
    • Select
    • Snack
    • Swipeable
    • Textfield
    • Typography: H1, P, Label, Hint, Text
  • Page Templates
    • Animated Login View
    • Login Area View
    • Animated Panel List
    • Animated Avatar View
  • Misc
    • Colors
    • VisualProvider
  • Show Cases
    • exivo
Powered by GitBook
On this page
  • Installation
  • Using the components

Getting started

Previous@dormakaba/digital-reactnative-visualNextChangelog

Last updated 6 years ago

This is the documentation for the react-native components used by dormakaba digital.

All the components are created in a pure fashion and are unaware of state management, ...

The repository can be found here:

Installation

The module is provided as an npm module:

npm install @dormakaba/digital-reactnative-visual --save

Install and link the peer dependencies

# install dependencies
npm i react-native-vector-icons --save
npm i react-native-camera --save
npm i react-native-image-crop-picker --save
npm i react-native-svg --save

# link
node node_modules/react-native/local-cli/cli.js link

Copy the fonts and link them

copy to your project `/assets`

# copy assets first and add assets to package.json
"rnpm": {
  "assets": [
    "./assets/fonts/"
  ]
},

# link
node node_modules/react-native/local-cli/cli.js link

Using the components

All components and utils are provided as named exports

import { Textfield, colors } from '@dormakaba/digital-reactnative-visual'

Make sure you embed needed binaries for the image-crop-picker

https://github.com/dormakaba-digital/digital-reactnative-visual/blob/master/README.md
https://github.com/dormakaba-digital/digital-reactnative-visual/tree/master/assets
https://github.com/ivpusic/react-native-image-crop-picker#step-2-1