ui

startupjs ui

UI components for react-native

Installation

yarn add @startupjs/ui

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. Install and configure additional modules below:

Collapse

1. Install library react-native-collapsible

  yarn add react-native-collapsible

2. Add library to forceCompileModules of your webpack.web.config.js.

  const getConfig = require('startupjs/bundler').webpackWebConfig

  module.exports = getConfig(undefined, {
    forceCompileModules: ['react-native-collapsible']
  })

Icon component

1. Install library react-native-svg

  yarn add react-native-svg

2. Link native code

  cd ios && pod install

3. Usage example

  import { Icon } from '@startupjs/ui'
  import { faCoffee } from '@fortawesome/free-solid-svg-icons'

  export default observer(function Card ({
    return pug`
      Icon(icon=faCoffee size='l')
    `
  })

TextInput

Set cursor color of the input on android for the same view as web and ios in %PROJECT%/android/app/src/res/values/styles.xml.

  <resources>
    <!-- ...other configs... -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:textColor">#000000</item>
      <!-- sets cursor color -->
      <item name="colorControlActivated">#2962FF</item>
    </style>
    <!-- ...other configs... -->
  </resources>

Usage

import { Button } from '@startupjs/ui'

Additional materials

• Material design

TODO

• document themed() HOF and theming overall