1.0.6 • Published 4 years ago

react-native-shbib-uii v1.0.6

Weekly downloads
-
License
ISC
Repository
-
Last release
4 years ago

npm version

Table of Contents

1. Getting Started:

Installation

Install react-native-shbib-ui:

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

or

yarn add react-native-shbib-ui

2. Usage:

App.js

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

<Button />;

3. Components supported:

Header

Demo

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}
        containerStyle={{}}
        rightComponent={() => <Text>right</Text>}
        centerComponent={() => <Text>center</Text>}
        leftComponent={() => <Text>left</Text>}
      />
    );
  }
}

Props

Prop nameDescriptionTypeDefault value
containerStyleContainer style for componentobject-
styleStyle for headerobject-
colorSet background color for headerstring-
sizeSet size for headernumber-
customHeaderCustom design of headerfunction-
leftComponentComponents render to the left in Headerfunction-
centerComponentComponents render to the center in Headerfunction-
rightComponentComponents render to the right in Headerfunction-

Button

Demo

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={{flex: 1, justifyContent: 'space-around'}}>
        <Button buttonSize={100} buttonColor={'red'} rounded />
        <Button buttonSize={125} buttonColor={'orange'} rounded />
        <Button buttonSize={150} buttonColor={'green'} title={'Click me'} />
        <Button buttonSize={175} buttonColor={'blue'} loading />
        <Button
          buttonSize={200}
          buttonColor={'black'}
          disabled
          titleSize={30}
          titleColor={'black'}
        />
      </View>
    );
  }
}

Props

Prop nameDescriptionTypeDefault value
containerStyleStyling for Component containerobject-
disabledStyleAdd additional styling for disabled buttonobject-
buttonStyleAdd additional styling for buttonobject-
titleStyleAdd additional styling for titlenumber-
loadingStyleAdd additional styling for loading componentobject-
titleTitle for buttonstringButton
onPressHandler to be called when the user pressfunctionfalse
loadingDisplay a loading spinnerboolean-
loadingColorSpinner colorstring'white'
loadingSizeSpinner sizeiOS:string, Android:numberIOS:'small', Android:20
roundedRounded Buttonbooleanfalse
disabledDisables click option for buttonbooleanfalse
buttonColorButton colorstring-
buttonSizeButton sizenumber
titleColorTitle colorstring-
titleSizeTitle sizenumber-
activeOpacityActive opacity for buttonnumber1

Spinner

Demo

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={{flex: 1, justifyContent: 'space-around'}}>
        <Spinner color={'red'} size={'small'} />
        <Spinner color={'green'} size={'large'} />
        <Spinner color={'blue'} size={'large'} />
        <Spinner color={'black'} size={'small'} />
      </View>
    );
  }
}

Props

Prop nameDescriptionTypeDefault value
containerStyleContainer style for componentobject-
colorSet spinner colorstring-
sizeSet size for spinnernumber-

Tab

Demo

Demo

App.js

import React from 'react';
import {Tab} from 'eact-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={{marginTop: 50}}
        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>First Tab</Text>
              </View>
            ),
          },
          {
            title: 'Tab2',
            content: (
              <View style={styles.text}>
                <Text>Second Tab</Text>
              </View>
            ),
          },
          {
            title: 'Tab3',
            content: (
              <View style={styles.text}>
                <Text>Third Tab</Text>
              </View>
            ),
          },
        ]}
      />
    );
  }
}

const styles = {
  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: 15,
    color: 'black',
    textAlign: 'center',
    fontWeight: '800',
  },
  textNotActive: {
    fontSize: 15,
    color: 'black',
    textAlign: 'center',
    fontWeight: '800',
    color: 'grey',
  },
  text: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
};

Props

Prop nameDescriptionTypeDefault value
containerStyleContainer style for componentobject-
itemsTabs renderarray-
renderTabActiveComponent render active tabfunction-
renderTabNotActiveComponent render not active tabfunction-
horizontalRenders items horizontallyboolean-
scrollEnabledboolean-
bouncesboolean-

Divider

Demo

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={{flex: 1, justifyContent: 'space-around'}}>
        <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>
    );
  }
}

Props

Prop nameDescriptionTypeDefault value
containerStyleContainer style for componentobject-
colorDivider colorstring-
borderWidthDivider border widthnumber1
widthDivider widthnumber-

Badge

Demo

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={{flex: 1, justifyContent: 'center'}}>
        <Badge
          valueSize={20}
          valueColor={'white'}
          badgeSize={30}
          badgeColor={'orange'}
        />
        <Badge
          containerStyle={{marginTop: 10}}
          value={'1'}
          valueSize={20}
          valueColor={'white'}
          badgeSize={30}
          badgeColor={'red'}
        />
        <Badge
          containerStyle={{marginTop: 10}}
          value={'10'}
          valueSize={20}
          valueColor={'white'}
          badgeSize={35}
          badgeColor={'green'}
        />
        <Badge
          containerStyle={{marginTop: 10}}
          value={'100'}
          valueSize={20}
          valueColor={'white'}
          badgeSize={40}
          badgeColor={'blue'}
        />
        <Badge
          containerStyle={{marginTop: 10}}
          value={'1000'}
          valueSize={20}
          valueColor={'white'}
          badgeColor={'grey'}
        />
      </View>
    );
  }
}

Props

Prop nameDescriptionTypeDefault value
containerStyleContainer style for componentobject-
badgeStyleDivider colorobject-
valueStyleDivider border widthobject-
valueBadge valuestring-
badgeSizeBadge sizenumber-
valueSizeValue font sizenumber20
badgeColorBadge colorstring-
valueColorValue colorstring'white'

Avatar

Demo

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={{flex: 1, justifyContent: 'center'}}>
        <Avatar title="AS" titleSize={50} />
        <Avatar
          containerStyle={{marginTop: 10}}
          title="AS"
          titleColor="orange"
          source={require('./src/Assets/Images/avatar1.jpg')}
        />
        <Avatar
          containerStyle={{marginTop: 10}}
          source={require('./src/Assets/Images/avatar2.jpg')}
          avatarSize={150}
        />
      </View>
    );
  }
}

Props

Prop nameDescriptionTypeDefault value
containerStyleContainer style for componentobject-
avatarStyleDivider colorobject-
titleStyleDivider border widthobject-
sourceDivider border widthimageSource-
titleDivider border widthstring-
avatarSizeBadge valuenumber-
titleSizeBadge sizenumber-
titleColorValue font sizestring-
1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago