tipsi-ui-kit

React Native Tipsi custom UI elements

Components

<Counter />

Component to change the number by press "+" or "-".

Counter Props

| Name | Desc | Type | Default | --- | --- | --- | --- | | step | Step of counting. | Number | 1 | defaultValue | Uncontrolled value of counter. | Number | 0 | minValue | Max value of counter. | Number | -Infinity | maxValue | Min value of counter. | Number | Infinity | value | Controlled value of counter | Number | undefined | onValueChange | Handle value changes. | Function | () => {}

Example

import React, { PureComponent } from 'react'
import { Counter } from 'tipsi-ui-kit'

class Example extends PureComponent {
  handleValueChange = value => console.log(`Current value is ${value}`)

  render() {
    <Counter
      step={5}
      defaultValue={25}
      onValueChange={this.handleValueChange}
    />
  }
}

Counter Themes

Theme structure:

{
  container: <View />,
  button: <TouchableOpacity />,
  leftButton: <TouchableOpacity />,
  rightButton: <TouchableOpacity />,
  buttonText: <Text />,
  valueWrapper: <View />,
  value: <Text />,
}

Preview

<Dash />

Component to draw customisable dashed lines

Dash Props

| Name | Desc | Type | Default | | --- | --- | --- | --- | | style | Dash container style as for View component | Object | {flexDirection = 'row'} | | dashGap | Gap between two dashes | Number | 3.5 | | dashLength | Length of each dash | Number | 3 | | dashThickness | Thickness of each dash | Number | 1 | | dashColor | Color of each dash | String | #c7d1dc |

Example

import React from 'react'
import { Dash } from 'tipsi-ui-kit'

const Example = () => (
  <Dash
    dashGap={5}
    dashLength={10}
    dashThickness={2}
    dashColor="black"
  />
)

Preview

<Carousel />

Carousel component

Carousel Props

| Name | Desc | Type | Default | | --- | --- | --- | --- | | spacer | Space between last item and right side | Number | 0 | | ...rest | All other props for ScrollView component except horizontal | - | - |

Carousel.Item Props

| Name | Desc | Type | Default | | --- | --- | --- | --- | | active | Show item as active | Boolean | false | | onPress | Handle press action | Function | undefined | | onRemove | Handle remove action | Function | undefined |

Example

import React from 'react'
import { Text } from 'react-native'
import { Carousel } from 'tipsi-ui-kit'

const Example = () => (
  <Carousel spacer={10}>
    <Carousel.Item active>
      <Text>Facebook</Text>
    </Carousel.Item>
    <Carousel.Item>
      <Text>Twitter</Text>
    </Carousel.Item>
    <Carousel.Item active>
      <Text>Instagram</Text>
    </Carousel.Item>
    <Carousel.Item>
      <Text>YouTube</Text>
    </Carousel.Item>
    <Carousel.Item active>
      <Text>Tumblr</Text>
    </Carousel.Item>
  </Carousel>
)

Carousel Themes

theme structure:

{
  container: <ScrollView />,
}

<Carousel.Item /> theme structure:

{
  container: onPress ? <TouchableOpacity /> : <View />,
  active: <View />,
  remove: <TouchableOpacity />,
  removeIcon: <Icon />,
  removeCircle: <View />,
  gap: <View />,
}

Preview

<LabelRating />

LabelRating Props

| Name | Desc | Type | Default | | --- | --- | --- | --- | | title | [isRequired] Title of rating, which is shown on the left side | String | - | | rating | Rating, which is shown on the right side | Number | 0 |

Example

import React from 'react'
import { LabelRating } from 'tipsi-ui-kit'

const Example = () => (
  <LabelRating
    title="WS"
    rating="92"
  />
)

LabelRating Themes

Theme structure:

{
  container: <View />,
  titleWrapper: <View />,
  titleText: <Text />,
  ratingWrapper: <View />,
  ratingText: <Text />,
}

Default themes: primary, success, warning, alert

Preview

<Label />

Label Props

| Name | Desc | Type | Default | | --- | --- | --- | --- | | title | [isRequired] Title of label | String | - |

Example

import React from 'react'
import { View } from 'react-native'
import { Label } from 'tipsi-ui-kit'

const Example = () => (
  <View style={{ flexDirection: 'row' }}>
    <Label title="On Sale" />
  </View>
)

Label Themes

Theme structure:

{
  container: <View />,
  title: <Text />,
}

Default themes: primary, success, warning, alert, black

Preview

<RangeSlider />

Multi handle slider with text labels

RangeSlider Props

| Name | Desc | Type | Default | | --- | --- | --- | --- | | style | RangeSlider container style as for View component | Object | {flexDirection = 'row'} | | startValues | Array of one or two numbers. Start values for slider handles positions. | Array of Numbers | [2, 8] | | sliderLength | Length of slider | Number | 280 | | min | The minimum acceptable value of slider | Number | 0 | | max | The maximum acceptable value of slider | Number | 10 | | step | Min step of dash scale | Number | 1 | | onValuesChangeStart | Call when handle start motion | Function | - | | onValuesChange | Calling while handle do motion | Function | - | | onValuesChangeEnd | Call when handle end motion | Function | - | | customMarker | Custom marker to slider handle | Function | - | | valueRenderer | Function which change slider text if need. | Function | - |

Example

import React from 'react'
import { RangeSlider } from 'tipsi-ui-kit'

const Example = () => (
  <RangeSlider
    min={10}
    max={100}
    step={5}
    values={[25, 75]}
    valueRenderer={value => `$${value}`}
  />
)

RangeSlider Themes

Theme structure:

{
  container: <View />,
  fullTrack: <View />,
  track: <View />,
  selectedTrack: <View />,
  valueContainer: <View />,
  twoMarkersValueContainer: <View />,
  valueWrapper: <View />,
  valueText: <Text />,
  markerContainer: <View />,
  topMarkerContainer: <View />,
  marker: <View />,
  pressedMarker: <View />,
  touch: <View />,
}

Default themes: primary, success, warning, alert

Preview

<Expand />

Expand component

Expand Props

| Name | Desc | Type | Default | --- | --- | --- | --- | | title | Always visible. | String | - | description | In close state cropped to one line. | String | - | defaultExpanded | Default state of component. If it true component will be rendered in open state | Bool | false | icon | Disclosure indicator for close state \n name - icon name for FontAwesome | Object | { name: 'chevron-down', color: ThemeConstants.LIGHT_GRAY, size: 12 } | expandedIcon | Disclosure indicator for close state \n name - icon name for FontAwesome | Object | { name: 'chevron-up', color: ThemeConstants.LIGHT_GRAY, size: 12 } | children | Child element will be shown only in open state | Node | -

Example

import { Expand } from 'tipsi-ui-kit'

<Expand
  title="Winemakers Notes:"
  description="The 2012 vintage in Napa Valley was about as close to ‘normal’ as it gets! "
/>

Theme structure:

{
  container: <View />,
  titleWrapper: <View />,
  descriptionWrapper: <View />,
  childrenWrapper: <View />,
  titleText: <Text />,
  descriptionText: <Text />,
}

Preview

Utils

ThemeRegister

To customize components themes or add your own you can use ThemeRegister manager:

import { ThemeRegister } from 'tipsi-ui-kit'

ThemeRegister.set({
  // Change base component styles
  'LabelRating': {
    titleText: {
      fontSize: 30,
      color: 'black',
    },
  },
  // Change success theme for component
  'LabelRating.success': {
    container: {
      backgroundColor: 'black',
    },
  },
  // Add your own theme for component
  'LabelRating.myOwnTheme': {
    container: {
      backgroundColor: 'black',
    },
  },
})

UIExplorer

To open UIExplorer just start mobile app with the react-native command:

react-native run-ios
# OR
react-native run-android

How to add new UI component

For example let's create Button component:

1. Create a new directory called Button in src directory and create an entry file (index.js) and component file (Button.js) as given below.

// src/Button/Button.js
import React, { Component, PropTypes } from 'react'
import { Button as RNButton } from 'react-native'

export default class Button extends Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
    onPress: PropTypes.func,
  }

  render() {
    return (
      <RNButton
        title={this.props.title}
        onPress={this.props.onPress}
      />
    )
  }
}

// src/Button/index.js
export { default } from './Button'

2. Update src entry file (index.js) to export our new component:

// src/index.js
export { default as StarRating } from './StarRating'
// ...
export { default as Button } from './Button' // Add this line

3. Then write your example in uiexplorer/examples directory like this:

// uiexplorer/examples/Button.js
import React, { Component } from 'react'
import register from '../core/utils/register'
import Button from '../../src/Button'

register.addExample({
  type: 'components',
  title: '<Button />',
  description: 'Button component',
  examples: [{
    title: 'Title',
    description: 'Prop: title (String)',
    render: () => (
      <Button title="Example" />
    ),
  }, {
    title: 'Handle press',
    description: 'Prop: onPress (Function)',
    render: ({ action }) => (
      <Button title="Press me!" onPress={action('onPress')} />
    ),
  }],
})

4. Update uiexplorer/examples entry file (index.js) to export example for our new component:

   // uiexplorer/examples/index.js
   import './StarRating'
   // ...
   import './Button' // Add this line

5. Now you can open UIExplorer and click on <Button /> item to see a result.