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'

1. 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

1. 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')} />
    ),
  }],
})

1. 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

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