tipsi-ui-kit v0.1.1

tipsi-ui-kit

React Native Tipsi custom UI elements

Components

<Counter />

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

Counter Props

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

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

Carousel.Item Props

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

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

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

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

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.