React-native-shbib-ui NPM

1. Getting Started:

Installation

Install react-native-shbib-ui:

npm install react-native-shbib-ui --save

yarn add react-native-shbib-ui

2. Usage:

App.js

import {Button} from 'react-native-shbib-ui';

<Button />;

3. Components supported:

Avatar

Demo

App.js

import React from 'react';
import {Avatar} from 'react-native-shbib-ui';
import {View} from 'react-native';
export default class AvatarExample extends React.Component {
  render() {
    return (
      <View style={styles.root}>
        <Avatar
          containerStyle={styles.avatarContainer}
          title="AS"
          titleSize={50}
        />
        <Avatar
          containerStyle={styles.avatarContainer}
          title="AS"
          titleColor="orange"
          source={require('./src/Assets/Images/avatar1.jpg')}
        />
        <Avatar
          containerStyle={styles.avatarContainer}
          source={require('./src/Assets/Images/avatar2.jpg')}
          avatarSize={150}
        />
      </View>
    );
  }
}
const styles = {
  root: {
    flex: 1,
    justifyContent: 'center',
  },
  avatarContainer: {
    marginTop: 10,
  },
};

Props

Prop name	Description	Type	Default value
`containerStyle`	Container style for component	object	-
`avatarStyle`	Divider color	object	-
`titleStyle`	Title style	object	-
`source`	Image source	imageSource	-
`title`	Avatar title	string	-
`avatarSize`	Badge value	number	-
`titleSize`	Badge size	number	-
`titleColor`	Value font size	string	-

Tab

Demo

App.js

import React from 'react';
import {Tab} from 'react-native-shbib-ui';
import {View, TouchableOpacity, Text} from 'react-native';
export default class TabExample extends React.Component {
  render() {
    return (
      <Tab
        scrollEnabled={false}
        bounces={false}
        horizontal
        containterStyle={styles.tabContainer}
        renderTabActive={(item, setActiveTab) => (
          <TouchableOpacity onPress={setActiveTab}>
            <View style={styles.tabActive}>
              <Text style={styles.textActive}>{item.title}</Text>
            </View>
          </TouchableOpacity>
        )}
        renderTabNotActive={(item, setActiveTab) => (
          <TouchableOpacity onPress={setActiveTab}>
            <View style={styles.tabNotActive}>
              <Text style={styles.textNotActive}>{item.title}</Text>
            </View>
          </TouchableOpacity>
        )}
        items={[
          {
            title: 'Tab1',
            content: (
              <View style={styles.text}>
                <Text style={styles.textHint}>First Tab</Text>
              </View>
            ),
          },
          {
            title: 'Tab2',
            content: (
              <View style={styles.text}>
                <Text style={styles.textHint}>Second Tab</Text>
              </View>
            ),
          },
          {
            title: 'Tab3',
            content: (
              <View style={styles.text}>
                <Text style={styles.textHint}>Third Tab</Text>
              </View>
            ),
          },
        ]}
      />
    );
  }
}

const styles = {
  tabContainer: {
    marginTop: 50,
  },
  tabActive: {
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomWidth: 4,
    borderBottomColor: 'blue',
    paddingHorizontal: width * 0.1,
    paddingVertical: 20,
  },
  tabNotActive: {
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomWidth: 4,
    borderBottomColor: 'transparent',
    paddingHorizontal: width * 0.1,
    paddingVertical: 20,
  },
  textActive: {
    fontSize: 18,
    color: 'black',
    textAlign: 'center',
    fontWeight: '800',
  },
  textNotActive: {
    fontSize: 18,
    color: 'black',
    textAlign: 'center',
    fontWeight: '800',
    color: 'grey',
  },
  text: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  textHint: {
    fontSize: 25,
  },
};

Props

Prop name	Description	Type	Default value
`containerStyle`	Container style for component	object	-
`items`	Tabs render	array	-
`renderTabActive`	Component render active tab	function	-
`renderTabNotActive`	Component render not active tab	function	-
`horizontal`	Renders items horizontally	boolean	-
`scrollEnabled`		boolean	-
`bounces`		boolean	-

Swiper

Demo

App.js

import React from 'react';
import {View, Image} from 'react-native';
import {Swiper} from 'react-native-shbib-ui';
export default class SwiperExample extends React.Component {
  render() {
    var data = [
      {src: require('Image1.jpg')},
      {src: require('Image2.jpg')},
      {src: require('Image3.jpg')},
    ];
    return (
      <Swiper
        containerStyle={{flex: 1}}
        onScroll={() => {}}
        activeDotColor={'#1976D2'}
        inActiveDotColor={'grey'}
        data={data}
        initIndex={0}
        renderItem={({item, index}) => (
          <View style={{backgroundColor: item.color, flex: 1}}>
            <Image source={item.src} />
          </View>
        )}
      />
    );
  }
}

Props

Prop name	Description	Type	Default value
`containerStyle`	Container style for component	object	-
`data`	Chunk of data(object)	array	-
`renderItem`	Callback which takes a chunk of data and returns a component.	function	-
`onScroll`	Callback that is called when the Item is swiped	function	-
`activeDotColor`	Active dot color	string	-
`inActiveDotColor`	InActive dot color	string	-
`initIndex`	Set default active item	number	-

Stepper

Demo

App.js

import React from 'react';
import {View, Text} from 'react-native';
import {Button, Stepper} from 'react-native-shbib-ui';

export default StepperExample = () => {
  FirstScreen = ({next, back}) => (
    <View style={styles.screenContent}>
      <Text style={styles.text}>First Screen</Text>
      <View style={styles.buttonContent}>
        <Button title={'Prev Step'} onPress={back} />
        <Button title={'Next Step'} onPress={next} />
      </View>
    </View>
  );
  SecondScreen = ({next, back}) => (
    <View style={styles.screenContent}>
      <Text style={styles.text}>Second Screen</Text>
      <View style={styles.buttonContent}>
        <Button title={'Prev Step'} onPress={back} />
        <Button title={'Next Step'} onPress={next} />
      </View>
    </View>
  );
  ThirdScreen = ({next, back}) => (
    <View style={styles.screenContent}>
      <Text style={styles.text}>Third Screen</Text>
      <View style={styles.buttonContent}>
        <Button title={'Prev Step'} onPress={back} />
        <Button title={'Next Step'} onPress={next} />
      </View>
    </View>
  );
  return (
    <View style={styles.root}>
      <Stepper steps={[FirstScreen, SecondScreen, ThirdScreen]} />
    </View>
  );
};
const styles = {
  root: {
    flex: 1,
    justifyContent: 'center',
  },
  screenContent: {
    alignSelf: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 30,
  },
  buttonContent: {
    marginTop: 100,
    flexDirection: 'row',
  },
};

Props

Prop name	Description	Type	Default value
`containerStyle`	Container style for component	object	-
`steps`	Container style for component	array of function	-

Card

Demo

App.js

import React from 'react';
import {View, Text} from 'react-native';
import {Card} from 'react-native-shbib-ui';

export default CardExample = () => {
  const text =
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
  return (
    <View style={styles.root}>
      <Card containerStyle={styles.cardContainer} style={styles.card1Styles}>
        <Text>{text}</Text>
      </Card>
      <Card containerStyle={styles.cardContainer} style={styles.card2Styles}>
        <Text>{text}</Text>
      </Card>
    </View>
  );
};

const styles = {
  root: {
    flex: 1,
    justifyContent: 'center',
  },
  cardContainer: {
    alignSelf: 'center',
  },
  card1Styles: {
    width: 300,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
  },
  card2Styles: {
    marginTop: 20,
    width: 300,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 20,
  },
};

Props

Prop name	Description	Type	Default value
`containerStyle`	Container style for component	object	-

MediaGrid

Demo

App.js

import React from 'react';
import {MediaGrid, Card} from 'react-native-shbib-ui';
import {View} from 'react-native';
export default class MediaGridExample extends React.Component {
  render() {
    var data = [require('Image1.jpg')];
    var data1 = [require('Image1.jpg'), require('Image2.jpg')];
    var data2 = [
      require('Image1.jpg'),
      require('Image2.jpg'),
      require('Image3.jpg'),
    ];
    var data3 = [
      require('Image1.jpg'),
      require('Image2.jpg'),
      require('Image3.jpg'),
      require('Image4.jpg'),
      require('Image5.jpg'),
    ];
    return (
      <View style={styles.root}>
        <Card style={styles.cardStyle}>
          <MediaGrid media={data} />
        </Card>
        <Card style={styles.cardStyle}>
          <MediaGrid media={data1} />
        </Card>
        <Card style={styles.cardStyle}>
          <MediaGrid media={data2} />
        </Card>
        <Card style={styles.cardStyle}>
          <MediaGrid media={data3} />
        </Card>
      </View>
    );
  }
}
const styles = {
  root: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cardStyle: {
    padding: 10,
    marginTop: 10,
  },
};

Props

Prop name	Description	Type	Default value
`containerStyle`	Container style for component	object	-
`data`	Chunk of Image source	imageSource	-

Header

Demo

App.js

import React from 'react';
import {Text} from 'react-native';
import {Header} from 'react-native-shbib-ui';
export default class HeaderExample extends React.Component {
  render() {
    return (
      <Header
        color="#f5f5f5"
        size={70}
        rightComponent={() => <Text>right</Text>}
        centerComponent={() => <Text>center</Text>}
        leftComponent={() => <Text>left</Text>}
      />
    );
  }
}

Props

Prop name	Description	Type	Default value
`containerStyle`	Container style for component	object	-
`style`	Style for header	object	-
`color`	Set background color for header	string	-
`size`	Set size for header	number	-
`customHeader`	Custom design of header	function	-
`leftComponent`	Components render to the left in Header	function	-
`centerComponent`	Components render to the center in Header	function	-
`rightComponent`	Components render to the right in Header	function	-

Button

Demo

App.js

import React from 'react';
import {View} from 'react-native';
import {Button} from 'react-native-shbib-ui';
export default class ButtonExample extends React.Component {
  render() {
    return (
      <View style={styles.root}>
        <Button
          buttonSize={100}
          buttonColor={'#FFA726'}
          rounded
          title={'Rounded'}
        />
        <Button buttonSize={150} buttonColor={'#66BB6A'} title={'Click me'} />
        <Button buttonSize={175} buttonColor={'#26C6DA'} loading />
        <Button
          buttonSize={200}
          disabled
          titleSize={30}
          titleColor={'black'}
          title={'Disabled'}
        />
      </View>
    );
  }
}
const styles = {
  root: {
    flex: 1,
    justifyContent: 'space-around',
  },
};

Props

Prop name	Description	Type	Default value
`containerStyle`	Styling for Component container	object	-
`disabledStyle`	Add additional styling for disabled button	object	-
`buttonStyle`	Add additional styling for button	object	-
`titleStyle`	Add additional styling for title	number	-
`loadingStyle`	Add additional styling for loading component	object	-
`title`	Title for button	string	Button
`onPress`	Handler to be called when the user press	function	false
`loading`	Display a loading spinner	boolean	-
`loadingColor`	Spinner color	string	'white'
`loadingSize`	Spinner size	iOS:string, Android:number	iOS:'small', Android:20
`rounded`	Rounded Button	boolean	false
`disabled`	Disables click option for button	boolean	false
`buttonColor`	Button color	string	-
`buttonSize`	Button size	number
`titleColor`	Title color	string	-
`titleSize`	Title size	number	-
`activeOpacity`	Active opacity for button	number	1

Badge

Demo

App.js

import React from 'react';
import {View} from 'react-native';
import {Badge} from 'react-native-shbib-ui';
export default class BadgeExample extends React.Component {
  render() {
    return (
      <View style={styles.root}>
        <Badge
          valueSize={20}
          valueColor={'white'}
          badgeSize={30}
          badgeColor={'orange'}
        />
        <Badge
          containerStyle={styles.avatarContainer}
          value={'1'}
          valueSize={20}
          valueColor={'white'}
          badgeSize={30}
          badgeColor={'red'}
        />
        <Badge
          containerStyle={styles.avatarContainer}
          value={'10'}
          valueSize={20}
          valueColor={'white'}
          badgeSize={35}
          badgeColor={'green'}
        />
        <Badge
          containerStyle={styles.avatarContainer}
          value={'100'}
          valueSize={20}
          valueColor={'white'}
          badgeSize={40}
          badgeColor={'blue'}
        />
        <Badge
          containerStyle={styles.avatarContainer}
          value={'1000'}
          valueSize={20}
          valueColor={'white'}
          badgeColor={'grey'}
        />
      </View>
    );
  }
}
const styles = {
  root: {
    flex: 1,
    justifyContent: 'center',
  },
  avatarContainer: {
    marginTop: 10,
  },
};

Props

Prop name	Description	Type	Default value
`containerStyle`	Container style for component	object	-
`badgeStyle`	Divider color	object	-
`valueStyle`	Divider border width	object	-
`value`	Badge value	string	-
`badgeSize`	Badge size	number	-
`valueSize`	Value font size	number	20
`badgeColor`	Badge color	string	-
`valueColor`	Value color	string	'white'

Spinner

Demo

App.js

import React from 'react';
import {View} from 'react-native';
import {Spinner} from 'react-native-shbib-ui';
export default class SpinnerExample extends React.Component {
  render() {
    return (
      <View style={styles.root}>
        <Spinner color={'#FFA726'} size={'small'} />
        <Spinner color={'#66BB6A'} size={'large'} />
        <Spinner color={'#26C6DA'} size={'large'} />
        <Spinner color={'black'} />
      </View>
    );
  }
}
const styles = {
  root: {
    flex: 1,
    justifyContent: 'space-around',
  },
};

Props

Prop name	Description	Type	Default value
`containerStyle`	Container style for component	object	-
`color`	Set spinner color	string	-
`size`	Set size for spinner	number	-

Divider

Demo

App.js

import React from 'react';
import {View} from 'react-native';
import {Divider} from 'react-native-shbib-ui';
export default class DividerExample extends React.Component {
  render() {
    return (
      <View style={styles.root}>
        <Divider
          containerStyle={{}}
          color={'red'}
          borderWidth={1}
          width={100}
        />
        <Divider
          containerStyle={{}}
          color={'green'}
          borderWidth={2}
          width={200}
        />
        <Divider
          containerStyle={{}}
          color={'blue'}
          borderWidth={3}
          width={300}
        />
        <Divider
          containerStyle={{}}
          color={'grey'}
          borderWidth={4}
          width={400}
        />
        <Divider containerStyle={{}} color={'black'} borderWidth={5} />
      </View>
    );
  }
}
const styles = {
  root: {
    flex: 1,
    justifyContent: 'space-around',
  },
};

Props

Prop name	Description	Type	Default value
`containerStyle`	Container style for component	object	-
`color`	Divider color	string	-
`borderWidth`	Divider border width	number	1
`width`	Divider width	number	-

CheckBox

Demo

App.js

import React from 'react';
import {View} from 'react-native';
import {CheckBox} from 'react-native-shbib-ui';
export default class CheckBoxExample extends React.Component {
  render() {
    return (
      <View style={styles.root}>
        <CheckBox label={'Check Box1'} labelSize={20} iconSize={25} />
        <CheckBox
          checked={true}
          label={'Check Box2'}
          labelColor={'red'}
          labelSize={20}
          iconColor={'red'}
          iconSize={25}
        />
        <CheckBox
          iconColor={'orange'}
          labelColor={'orange'}
          label={'Check Box3'}
          labelSize={20}
          iconSize={25}
        />
      </View>
    );
  }
}
const styles = {
  root: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
};

Props

Prop name	Description	Type	Default value
`containerStyle`	Container style for component	object	-
`checked`	State value of an item from set of choices	boolean	-
`onPress`	Handler to be called when the user selects / unselects the checkbox	function	-
`iconSize`	Icon size	number	-
`iconColor`	Icon color	string	-
`label`	Checkbox label	string	-
`labelSize`	Label size	number	-
`labelColor`	Label color	string	-

RadioButton

Demo

App.js

import React from 'react';
import {View} from 'react-native';
import {RadioButton} from 'react-native-shbib-ui';
export default class RadioButtonExample extends React.Component {
  render() {
    return (
      <View style={styles.root}>
        <RadioButton label={'Radio button1'} labelSize={20} iconSize={25} />
        <RadioButton
          checked={true}
          label={'Radio button2'}
          labelColor={'red'}
          labelSize={20}
          iconColor={'red'}
          iconSize={25}
        />
        <RadioButton
          iconColor={'orange'}
          labelColor={'orange'}
          label={'Radio button3'}
          labelSize={20}
          iconSize={25}
        />
      </View>
    );
  }
}
const styles = {
  root: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
};

Props

Prop name	Description	Type	Default value
`containerStyle`	Container style for component	object	-
`checked`	State value of an item from set of choices	boolean	-
`onPress`	Handler to be called when the user selects / unselects the radio button	function	-
`iconSize`	Icon size	number	-
`iconColor`	Icon color	string	-
`label`	Radio button label	string	-
`labelSize`	Label size	number	-
`labelColor`	Label color	string	-

Progress

Demo

App.js

import React from 'react';
import {Progress} from './src/react-native-shbib-ui';
import {View} from 'react-native';
export default class ProgressExample extends React.Component {
  render() {
    return (
      <View style={styles.root}>
        <Progress.Bar
          value={30}
          primaryColor="#FFAB40"
          secondaryColor="#FFD180"
          width={150}
          height={20}
        />
        <Progress.Bar
          value={60}
          primaryColor="#FF3D00"
          secondaryColor="#FF9E80"
          width={200}
          height={25}
        />
        <Progress.Bar
          value={40}
          primaryColor="#00E676"
          secondaryColor="#B9F6CA"
          width={250}
          height={30}
        />
        <Progress.Bar
          value={80}
          primaryColor="#1976D2"
          secondaryColor="#BBDEFB"
          width={300}
          height={35}
        />
      </View>
    );
  }
}
const styles = {
  root: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
};

Props

Prop name	Description	Type	Default value
`containerStyle`	Container style for component	object	-
`style`	Progress style	object	-
`value`	Progress fill	number	-
`primaryColor`	Fill color	string	-
`secondaryColor`	Background color	string	-
`width`	Progress width	number	-
`height`	Progress height	number	-