@setur/rn-setur-ui-kit NPM

React-Native Setur UI Kit

Installation:

npm install @Setur/rn-setur-ui-kit
//or
yarn add @Setur/rn-setur-ui-kit

This framework assumes you have already installed react-native-svg, but if not - you should install it too.

Usage

ThemeProvider

import { ThemeProvider } from '@setur/rn-setur-ui-kit';

const App = ({ children }) => (
  <ThemeProvider>
    {children}
  </ThemeProvider>
);

Components

Text

Usage

import { Text } from '@setur/rn-setur-ui-kit';

const YourExampleTextComponent = props => (
  <Text status='primary' type='h3'>Your Text</Text>
);

prop	Type	Required	Default	Options
children	String	False
status	String	False	`default`	`default`, `disabled`, `hint`, `primary`, `success`, `info`, `warning`, `danger`, `alternative`
type	String	False	`p1`	`h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `s1`, `s2`, `p1`, `p2`, `c1`, `c2`, `label`

TextButton

Usage

import { TextButton } from '@setur/rn-setur-ui-kit';

const YourTextButtonComponent = props => (
  <TextButton>Example Text</TextButton>
);

prop	Type	Required	Default	Options
onPress	Function	True
child	String	True
type	String	True	`primary`	`primary`, `basic`

Button

Usage

import { Button } from '@setur/rn-setur-ui-kit';

const YourButtonComponent = props => (
  <Button status='primary'>Example Text</Button>
);

prop	Type	Required	Default	Options
onPress	Function	True
text	String	True
size	String	True	`medium`	`tiny`, `small`, `medium`, `large`, `giant`
status	String	False	`primary`	`default`, `disabled`, `hint`, `primary`, `success`, `info`, `warning`, `danger`, `alternative`

TextBox

Usage

import { TextBox } from '@setur/rn-setur-ui-kit';

const YourTextBoxComponent = props => (
  <TextBox />
);

prop	Type	Required	Default	Options
inputStyle	Object	False
containerStyle	Object	False
placeholderStyle	Object	False
iconStyle	Object	False
status	String	False	`default`	`disabled`, `hint`, `primary`, `success`, `info`, `warning`, `danger`, `default`
type	String	False	`default`	`password`, `email`, `numeric`, `phone`, `default`
iconName	String	False		https://akveo.github.io/eva-icons/#/

ListItem

Usage

import { ListItem } from '@setur/rn-setur-ui-kit';

const YourListItemComponent = props => (
  <ListItem
    title= 'Title'
    subTitle= 'Example subtitle text'
    iconName='checkmark-outline'
  />
);

prop	Type	Required	Options
onPress	Function	False
title	String	False
subTitle	String	False
rightText	String	False
iconName	String	False	https://akveo.github.io/eva-icons/#/
iconStyle	Object	False

RadioButton

Usage

import { RadioButton } from '@setur/rn-setur-ui-kit';

const YourRadioButtonComponent = props => {
  const [ value, setValue ] = React.useState(0); // initial value index

  return (
    <RadioButton
      valueIndex={value.index}
      onSelect={(value) => setValue(value) }
      radioItems={[ { label: 'example' }, { label: 'example2' } ]}
    />
  );
}

prop	Type	Required	Default	Options
onSelect	Function	False
valueIndex	String	False
radioItems	Array	True		`[ { label: 'example' } ]`
disabled	Boolen	False	false	`true`, `false`

Alert

Usage

import React, { useState } from 'react';
import { Alert } from '@setur/rn-setur-ui-kit';

const YourAlertComponent = props => (

  const [ modal, setModal ] = useState(false)

  <Alert isVisible={modal}
  toggleModal={() => setModal(!modal)}
  header="Alert Header"
  body="Alert Body"
  okText="OK"
  okFunc={() => alert("OK")}
  cancelText="Cancel"
  cancelFunc={() => alert("Cancel")}


/>
);

Simple

  <Alert isVisible={modal}
  toggleModal={() => setModal(!modal)}
  header="Alert Header"
  body="Alert Body"
  />

Custom Footer

  <Alert isVisible={modal}
    toggleModal={() => setModal(!modal)}
    header="Alert With Custom Footer"
    body="Alert Body"
    CustomFooterComponent={<SomeJSXElement/>}
  />

prop	Type	Required	Default	Options
isVisible	Boolean	True	false	`true`, `false`
toggleModal	Function	True	() => {}
header	String	True
body	String	False
okText	String	False	`Ok`
okFunc	Function	False
okStatus	String	False	`primary`	Button Statuses
cancelText	String	False	`Cancel`
cancelFunc	Function	False
cancelStatus	String	False	`hint`	Button Statuses
CustomFooterComponent	Element	False		React.Elements

Selector

Usage

import { Selector } from '@setur/rn-setur-ui-kit';

const YourSelectorComponent = props => {
  const [ selected, setSelected ] = React.useState(1); // initial value 1
  const [ visible, setVisible ] = React.useState(false);

  return (
    <Selector
      data={[ { value: 1, label: 'option1' }, { value: 2, label: 'option2' } ]}
      onChange={val => setSelected(val)}
      isVisible={visible}
      toggleSelector={() => setVisible(prev => !prev)}
    />
  );
}

prop	Type	Required	Default	Options	Detail
toggleSelector	Function	True	() => {}
isVisible	Boolean	True	false	`true`, `false`
data	Object	False	[]	{ value: 1, label: 'option1' }, { value: 2, label: 'option2' }
selected	String		Number	True
onChange	Function	True	() => {}
title	String	False			Header Title
search	Boolean	False	true	`true`, `false`	Search Component visible	,
onChangeSearch	Function	False	() => {}		CallBack Function triggered when search text changes
filter	Boolean	False	true	`true`, `false`	Filter `data` with `search` query

Accordion

Usage

import { Accordion } from '@setur/rn-setur-ui-kit';

const YourAccordionComponent = props => (
  <Accordion title= 'Title'>
    ...Blocks, Elements, Contents
  </Accordion>
);

prop	Type	Required	Default	Options
show	Boolean	False	`false`	`true`, `false`
title	String	True
children	Element	True
contentPaddingHorizontal	String	False	`l`	`Theme.sizes`
contentPaddingvertical	String	False	`l`	`Theme.sizes`
closeIcon	String	False	`arrow-ios-downward-outline`	https://akveo.github.io/eva-icons/#/
openIcon	String	False	`arrow-ios-upward-outline`	https://akveo.github.io/eva-icons/#/

FullScreenModal

Usage

import { FullScreenModal } from '@setur/rn-setur-ui-kit';

const YourFullScreenModalComponent = props => {
  const [ visible, setVisible ] = React.useState(false);

  return (
    <FullScreenModal
      title={props.title}
      isVisible={visible}
      toggleModal={() => setVisible(prev => !prev)}
    > 
    {children} 
   </FullScreenModal>
  );
}