startupjs ui

UI components for react-native

Installation

yarn add @startupjs/ui

Requirements

@react-native-picker/picker: >=1.16.1
react: 16.9 - 17
react-native: >= 0.61.4 < 0.64.0
react-native-color-picker: ^0.6.0
react-native-collapsible: >= 1.6.0
react-native-gesture-handler: >= 1.10.3
react-native-pager-view: >= 6.2.0
react-native-svg: >= 12.1.0
react-native-tab-view: >= 3.0.0
startupjs: >= 0.33.0

Linking

Link startupjs library (required for all React Native versions)

  npx startupjs link

Configuration

1. Import UI styles in your root style file styles/index.styl. You can also override any default configuration here (palette, colors, variables, etc.):

@require('../node_modules/@startupjs/ui/styles/index.styl')
$UI = merge($UI, {
  colors: {
    primary: '#4a76a8',
    warning: '#880000'
  },
  Button: {
    heights: {
      xxl: 10u
    },
    outlinedBorderWidth: 2px
  }
}, true)

2. Connect styles from external CSS

Import initUi and getUiHead and connect them in the body of the startupjsServer and getHead functions in server/index.js.

import { getUiHead, initUi } from '@startupjs/ui/server'

startupjsServer({
  getHead,
  ...
}, (ee, options) => {
  ...
  initUi(ee, options)
  ...
})

function getHead () {
  return `
    ${getUiHead()}
    other head text
  `
}

App plugin

Register ui plugin for app

import { registerPlugins } from '@startupjs/plugin'
import { uiAppPlugin } from '@startupjs/ui'

...

registerPlugins({
  '@startupjs/app': [
    [uiAppPlugin, { defaultEnabled: true, style: overridesStyle }]
  ]
})

where overridesStyle is the styles to override default components' styles and for the override to work the component must be wrapped into themed() decorator. The override syntax looks requires that component is referred as a class by its name (starting with a capital letter) in the .styl file. For example Button is referred as .Button:

.Button
  color red
  &:part(hover)
    color green
  &:part(active)
    color blue

Usage

import { Button } from '@startupjs/ui'

Additional materials

• Material design

TODO

• document themed() HOF and theming overall