# rn-hidoop-ui-lib

> common ui lib for hidoop app

Latest version **0.1.17** (published 2022-06-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install rn-hidoop-ui-lib
pnpm add rn-hidoop-ui-lib
yarn add rn-hidoop-ui-lib
bun add rn-hidoop-ui-lib
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.17 |
| Published | 2022-06-17 |
| First published | 2022-04-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 14 |
| Unpacked size | 11.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | heru.js |
| Maintainers | slrwinter |
| Keywords | react-native, ios, android |

## Links

- npm: https://www.npmjs.com/package/rn-hidoop-ui-lib
- Repository: https://gitlab.com/hidoop-app/hidoop-ui-lib
- Homepage: https://gitlab.com/hidoop-app/hidoop-ui-lib#readme
- Issues: https://gitlab.com/hidoop-app/hidoop-ui-lib/issues
- npm.io page: https://npm.io/package/rn-hidoop-ui-lib

## Dependencies (14)

- [lodash](https://npm.io/package/lodash.md) ^4.17.14
- [moment](https://npm.io/package/moment.md) ^2.24.0
- [accounting](https://npm.io/package/accounting.md) ^0.4.1
- [lottie-ios](https://npm.io/package/lottie-ios.md) 3.2.3
- [moment-timezone](https://npm.io/package/moment-timezone.md) ^0.5.26
- [react-native-svg](https://npm.io/package/react-native-svg.md) ^12.3.0
- [react-native-modal](https://npm.io/package/react-native-modal.md) ^11.1.0
- [lottie-react-native](https://npm.io/package/lottie-react-native.md) 4.1.0
- [react-native-icomoon](https://npm.io/package/react-native-icomoon.md) ^0.1.1
- [react-native-snap-carousel](https://npm.io/package/react-native-snap-carousel.md) ^3.9.1
- [react-native-safe-area-context](https://npm.io/package/react-native-safe-area-context.md) ^3.3.0
- [react-native-modal-datetime-picker](https://npm.io/package/react-native-modal-datetime-picker.md) 9.1.0
- [@react-native-community/datetimepicker](https://npm.io/package/@react-native-community/datetimepicker.md) 3.0.9
- [react-native-keyboard-aware-scroll-view](https://npm.io/package/react-native-keyboard-aware-scroll-view.md) ^0.9.5

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.1.17 (latest) — 2022-06-17
- 0.1.16 — 2022-06-11
- 0.1.15 — 2022-06-07
- 0.1.14 — 2022-06-05
- 0.1.13 — 2022-05-16
- 0.1.12 — 2022-05-11
- 0.1.11 — 2022-05-11
- 0.1.10 — 2022-05-11
- 0.1.9 — 2022-05-10
- 0.1.8 — 2022-05-09
- 0.1.7 — 2022-04-30
- 0.1.6 — 2022-04-30
- 0.1.5 — 2022-04-30
- 0.1.4 — 2022-04-30
- 0.1.3 — 2022-04-30
- … 3 more at https://npm.io/package/rn-hidoop-ui-lib/versions

## README

# rn-hidoop-ui-lib

common ui lib for hidoop app

## Installation

```sh
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](./usage.png)
button:
![usage2](./usage2.png)

```js
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>;
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---
_Source: https://npm.io/package/rn-hidoop-ui-lib · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._