Rn-hidoop-ui-lib NPM

rn-hidoop-ui-lib

common ui lib for hidoop app

Installation

npm install rn-hidoop-ui-lib

or

yarn add rn-hidoop-ui-lib

Additional packages for specific usage

react-native-svg //Icon, Vector Icons lottie-react-native //loader json lottie-ios

Usage

usage button: usage2

import {
  Text,
  colors,
  width,
  Button,
  GhostButton,
  ButtonText,
  Icon,
  Container,
  Content,
  brand,
  stocks,
  height,
  HeaderBack,
  StackedLabelInput,
  LoadingOverlay,
  loading,
  LottieView,
} from 'rn-hidoop-ui-lib';

// ...

<Container>
  <HeaderBack noShadow />
  <Content style={{ padding: width * 0.03, backgroundColor: 'white' }}>
    <LottieView source={loading} />
    <View>
      <Image
        source={brand}
        style={{ width: '100%', height: height * 0.3 }}
        resizeMode="contain"
      />
      <Image
        source={stocks}
        style={{ width: '50%', height: height * 0.1 }}
        resizeMode="contain"
      />
    </View>
    <View>
      <StackedLabelInput
        label="Stacked Label Input*"
        placeholder="placeholder"
        value={stackedLabel}
        onChangeText={_onChangeStackedLabel}
        onClearText={() => setStackedLabel('')}
        invalidInput={!stackedLabel.length}
      />
      <View style={styles.sectionHr}>
        <Text text="Typography" color={colors.grey.black} size="superGiant" />
        <Text text="superSmall" color={colors.grey.black} size="superSmall" />
        <Text text="extraSmall" color={colors.grey.black} size="extraSmall" />
        <Text text="small" color={colors.grey.black} size="small" />
        <Text text="medium" color={colors.grey.black} size="medium" />
        <Text text="large" color={colors.grey.black} size="large" />
        <Text text="extraLarge" color={colors.grey.black} size="extraLarge" />
        <Text text="superLarge" color={colors.grey.black} size="superLarge" />
        <Text text="Giant" color={colors.grey.black} size="Giant" />
        <Text text="superGiant" color={colors.grey.black} size="superGiant" />
      </View>
      <Text text="black" color={colors.grey.black} variant="black" />
      <Text
        text="blackItalic"
        color={colors.grey.black}
        variant="blackItalic"
      />
      <Text text="bold" color={colors.grey.black} variant="bold" />
      <Text text="boldItalic" color={colors.grey.black} variant="boldItalic" />
      <Text text="extraBold" color={colors.grey.black} variant="extraBold" />
      <Text
        text="extraBoldItalic"
        color={colors.grey.black}
        variant="extraBoldItalic"
      />
      <Text text="extraLight" color={colors.grey.black} variant="extraLight" />
      <Text
        text="extraLightItalic"
        color={colors.grey.black}
        variant="extraLightItalic"
      />
      <Text text="light" color={colors.grey.black} variant="light" />
      <Text
        text="lightItalic"
        color={colors.grey.black}
        variant="lightItalic"
      />
      <Text
        text="mediumItalic"
        color={colors.grey.black}
        variant="mediumItalic"
      />
      <Text text="regular" color={colors.grey.black} variant="regular" />
      <Text text="semibold" color={colors.grey.black} variant="semibold" />
      <Text text="italic" color={colors.grey.black} variant="italic" />
      <Text
        text="semiBoldItalic"
        color={colors.grey.black}
        variant="semiBoldItalic"
      />
      <View style={styles.sectionHr}>
        <Button
          onPress={() => {
            setShowFs(true);
          }}
          title="Button, Show Fullscreen loader"
          style={styles.btn}
        />
        <GhostButton title="GhostButton" style={styles.btn} />
        <ButtonText title="ButtonText" style={styles.btn} />
      </View>
      <View style={styles.sectionHr}>
        <Icon name="arrow-left" color={colors.grey.black} size={width * 0.05} />
        <Icon name="cs" color={colors.grey.black} size={width * 0.05} />
      </View>
    </View>
  </Content>
  <LoadingOverlay
    isVisible={showFs}
    onBackButtonPress={closeFs}
    onBackdropPress={closeFs}
  />
</Container>;