@startupjs/ui NPM

startupjs ui

UI components for react-native

Installation

yarn add @startupjs/ui

Configuration

Add to your startupjs.config.js config file ui configuration (pallete, colors, variables and etc).

const getConfig = require('@startupjs/ui/config')
const { u } = require('@startupjs/ui/config/helpers')

module.exports = {
  ui: getConfig({
    // override defaults
    blue: {
      primary: '#4a76a8',
    },
    colors: {
      dark: 'rgba(0, 0, 0, 0.5)'
    },
    MyComponent1: {
      height: u(2)
    },
    MyComponent2: {
      color: config.colors.primary,
      padding: u(1)
    }
  })
}

Add to your root style file styles/index.styl.

@require '../node_modules/@startupjs/ui/styles/index.styl'

Add @startupjs/ui to forceCompileModules of your webpack.web.config.js:

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

  module.exports = getConfig(undefined, {
    forceCompileModules: ['@startupjs/ui']
  })

Install and configure additional modules below:

Collapse

Install library react-native-collapsible

  yarn add react-native-collapsible

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

Install library react-native-svg

  yarn add react-native-svg

Link native code

  cd ios && pod install

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')
    `
  })

Status bar

Install library react-native-status-bar-height

  yarn add react-native-status-bar-height

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

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

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

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

@everything-registry/sub-chunk-865 @zalastax/nolb-_star @startupjs/scrollable-anchors @startupjs/docs @startupjs/mdx @infinitebrahmanuniverse/nolb-_star

20 days ago

26 days ago

25 days ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

9 months ago

7 months ago

9 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

10 months ago

10 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago