open-index/open-npm huggingface dataset:
npm package: @react-native-google-signin/google-signin
Description: Google sign in for your react native applications
Author: Vojtech Novak
Latest version: 16.1.2

![React Native Google Sign In](img/header.png)

[![npm version](https://img.shields.io/npm/v/@react-native-google-signin/google-signin.svg)](https://www.npmjs.com/package/@react-native-google-signin/google-signin)
[![npm downloads](https://img.shields.io/npm/dm/@react-native-google-signin/google-signin.svg)](https://www.npmjs.com/package/@react-native-google-signin/google-signin)

## Google Sign-In for React Native

`@react-native-google-signin/google-signin` provides Google authentication for React Native and Expo apps.

This is the free (public) version, supporting Android and iOS. It uses the legacy Google Sign-In SDK on Android.

**[Full documentation](https://react-native-google-signin.github.io/docs/install)**

## Looking for a modern implementation not relying on deprecated APIs, and web or macOS support?

[**Universal Sign In**](https://universal-sign-in.com) is the premium version of this package, built on modern Google identity APIs:

- **Cross-platform**: Android (Credential Manager), iOS, web, and macOS from a single API
- **Config Doctor**: CLI tool that diagnoses Android configuration issues — no more hours lost to `DEVELOPER_ERROR`
- **Auto-detect**: Automatic configuration parameter detection for faster setup
- **Advanced security**: Custom nonce support, iOS App Check, and more
- **Maintained**: Your purchase keeps the package rock-solid and up-to-date with new Expo and React Native releases

1 million+ npm downloads and trusted by indie hackers as well as large teams.

[**Get a license**](https://universal-sign-in.com/#pricing) | [**See what's included**](https://react-native-google-signin.github.io/docs/install#premium)

## Licence

MIT
npm package: @react-native-helper/netinfo
Description: @react-native-helper/netinfo make sure the internet connectivity
Author: Abiraman K
Latest version: 0.1.4

# @react-native-helper/netinfo

@react-native-helper/netinfo make sures the internet connectivity

## Installation


```sh
npm install @react-native-helper/netinfo react-native-nitro-modules

> `react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/).
```


## Required dependencies

```sh
npm i @react-native-community/netinfo react-native-design @react-native-async-storage/async-storage moti react-native-autocomplete-dropdown react-native-gesture-handler react-native-svg react-native-vector-icons react-native-reanimated react-native-worklets @rnpack/utils buffer
```

## Usage

Import NetInfoHelper and use

Example:

```js
import NetInfoHelper from '@react-native-helper/netinfo';

...

return (
    ...
    <NetInfoHelper />
    ...
)
```

## Contributing

- [Development workflow](CONTRIBUTING.md#development-workflow)
- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
- [Code of conduct](CODE_OF_CONDUCT.md)


## License

The MIT License.

## Author

<table>
  <tr>
    <td >
      <img src="https://avatars.githubusercontent.com/u/41302126?v=4" width="64" height="64" alt="Abiraman K">
    </td>
    <td>
      <a href="https://abiramank.github.io/" target="_blank">Abiraman K</a>
    </td>
  </tr>
</table>

## Thank you

### Sponsors

Thank you to all our sponsors! [Become a sponsor](https://opencollective.com/react-native-helper#sponsor) and get your image on our README on GitHub.

<a href="https://opencollective.com/react-native-helper#sponsors" target="_blank"><img src="https://opencollective.com/react-native-helper/sponsors.svg?width=890" alt="@react-native-ui-design/dialog"></a>

---
npm package: @react-native-hero/alipay
Description: react native alipay
Author: musicode
Latest version: 0.0.8

# @react-native-hero/alipay

封装支付宝 SDK，支持授权登录、支付功能。

## Getting started

Install the library using either Yarn:

```
yarn add @react-native-hero/alipay
```

or npm:

```
npm install --save @react-native-hero/alipay
```

## Link

- React Native v0.60+

For iOS, use `cocoapods` to link the package.

run the following command:

```
$ cd ios && pod install
```

For android, the package will be linked automatically on build.

- React Native <= 0.59

run the following command to link the package:

```
$ react-native link @react-native-hero/alipay
```

## Setup

### iOS

修改 `AppDelegate.m`：

```oc
// 导入库
#import <RNTAlipay.h>

// 添加此方法
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
            options:(NSDictionary<NSString*, id> *)options {
  // 确保 alipay 最先执行
  if ([RNTAlipay handleOpenURL:application openURL:url options:options]) {
    return YES;
  }
  // 其他库要求实现的 openURL 代码放在 alipay 后面，如果没有用到其他库，直接返回 YES 即可
  return YES;
}
```

## Usage

```js
import {
  auth,
  pay,
} from '@react-native-hero/alipay'


// 授权登录（一般透传后端传来的参数，不用管它是什么意思）
pay({
  authString: 'authString',
  // ios 需传入 appScheme
  // appScheme 为 app 在 info.plist 注册的 scheme
  appScheme: 'appScheme',
})
.then(response => {
  /**
   * 支付成功
   * 示例 data 如下
   * {
      "success": "true",
      "auth_code": "d9d1b5acc26e461dbfcb6974c8ff5E64",
      "result_code": "200",
      "user_id": "2088003646494707"
     }
   */
  response.data
})
.catch(response => {
  // 授权失败
  // code（number 类型） 可能的值如下：
  // 4000: 系统异常。
  // 6001: 用户中途取消。
  // 6002: 网络连接出错。
  response.code
  response.msg
})

// 支付（一般透传后端传来的参数，不用管它是什么意思）
pay({
  orderString: 'orderString',
  // ios 需传入 appScheme
  // appScheme 为 app 在 info.plist 注册的 scheme
  appScheme: 'appScheme',
})
.then(response => {
  /**
   * 支付成功
   * 示例 data 如下
   * {
        "alipay_trade_app_pay_response":{
            "code":"10000",
            "msg":"Success",
            "app_id":"2014072300007148",
            "out_trade_no":"081622560194853",
            "trade_no":"2016081621001004400236957647",
            "total_amount":"9.00",
            "seller_id":"2088702849871851",
            "charset":"utf-8",
            "timestamp":"2016-10-11 17:43:36"
        },
        "sign":"NGfStJf3i3ooWBuCDIQSumOpaGBcQz+aoAqyGh3W6EqA/gmyPYwLJ2REFijY9XPTApI9YglZyMw+ZMhd3kb0mh4RAXMrb6mekX4Zu8Nf6geOwIa9kLOnw0IMCjxi4abDIfXhxrXyj********",
        "sign_type":"RSA2"
    }
   */
  response.data
})
.catch(response => {
  // 支付失败
  // code（number 类型） 可能的值如下：
  // 8000: 正在处理中，支付结果未知（有可能已经支付成功），请查询商家订单列表中订单的支付状态。
  // 4000: 订单支付失败。
  // 5000: 重复请求。
  // 6001: 用户中途取消。
  // 6002: 网络连接出错。
  // 6004: 支付结果未知（有可能已经支付成功），请查询商家订单列表中订单的支付状态。
  response.code
  response.msg
})
```
npm package: @react-native-hero/badge
Description: react native badge
Author: musicode
Latest version: 0.0.2

# @react-native-hero/badge

## Getting started

Install the library using either Yarn:

```
yarn add @react-native-hero/badge
```

or npm:

```
npm install --save @react-native-hero/badge
```

## Link

- React Native v0.60+

For iOS, use `cocoapods` to link the package.

run the following command:

```
$ cd ios && pod install
```

For android, the package will be linked automatically on build.

- React Native <= 0.59

run the following command to link the package:

```
$ react-native link @react-native-hero/badge
```

## Example

```js
import {
  getBadge,
  setBadge,
} from '@react-native-hero/badge'

// set the badge
// make sure you have the notifications permission on ios.
setBadge(1)

// clear the badge
// make sure you have the notifications permission on ios.
setBadge(0)

// read the badge
getBadge().then(data => {
  // ios works
  // but android can't read the badge, so it is always 0
  data.badge
})
```
npm package: @react-native-hero/bugly
Description: tencent bugly
Author: musicode
Latest version: 0.0.2

# bugly

tencent bugly

## Installation


```sh
npm install bugly
```


## Usage


```js
import { multiply } from 'bugly';

// ...

const result = multiply(3, 7);
```


## Contributing

- [Development workflow](CONTRIBUTING.md#development-workflow)
- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
- [Code of conduct](CODE_OF_CONDUCT.md)

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @react-native-hero/code-view
Description: react native code view
Author: musicode
Latest version: 0.1.3

# @react-native-hero/code-view

There are three native views in this module.

* BarCodeView: a barcode generator
* QRCodeView: a qrcode generator
* CodeScanner: a scanner which can recognizes barcode and qrocde

## Getting started

Install the library using either Yarn:

```
yarn add @react-native-hero/code-view
```

or npm:

```
npm install --save @react-native-hero/code-view
```

## Link

- React Native v0.60+

For iOS, use `cocoapods` to link the package.

run the following command:

```
$ cd ios && pod install
```

For android, the package will be linked automatically on build.

- React Native <= 0.59

run the following command to link the package:

```
$ react-native link @react-native-hero/code-view
```

## Setup

### iOS

Add `NSCameraUsageDescription` in your `ios/${ProjectName}/Info.plist`:

```
<key>NSCameraUsageDescription</key>
<string>balabala</string>
```

### Android

Add `jitpack` in your `android/build.gradle` at the end of repositories:

```
allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}
```

## Usage

```js
import {
  BarCodeView,
  QRCodeView,
  CodeScanner,
} from '@react-native-hero/code-view'

// BarCodeView
<BarCodeView
  text="xx",
  style={styles.barcode}
/>

// QRCodeView
<QRCodeView
  text="xx",
  style={styles.qrcode}
/>

// At first, make sure you have the permissions.
// ios: CAMERA
// android: CAMERA

// If you don't have these permissions, you can't use CodeScanner.

// CodeScanner
<CodeScanner
  title="将二维码放入框内，即可自动扫描"
  onScanSuccess={data => {
    data.text
  }}
  style={styles.codeScanner}
/>
npm package: @react-native-hero/dimension
Description: react native dimension
Author: musicode
Latest version: 0.1.2

# @react-native-hero/dimension

## Getting started

Install the library using either Yarn:

```
yarn add @react-native-hero/dimension
```

or npm:

```
npm install --save @react-native-hero/dimension
```

## Link

- React Native v0.60+

For iOS, use `cocoapods` to link the package.

run the following command:

```
$ cd ios && pod install
```

For android, the package will be linked automatically on build.

- React Native <= 0.59

run the following command to link the package:

```
$ react-native link @react-native-hero/dimension
```

## Example

```js
import {
  init,
  addListener,

  statusBarHeight,
  navigationBarHeight,
  screenSize,
  safeArea,

  getStatusBarHeight,
  getNavigationBarHeight,
  getScreenSize,
  getSafeArea,
} from '@react-native-hero/dimension'

// In your App.js, call init()
init()

// The getXxx methods is used to get the latest dimension info asynchronously.
// If your app will not change the dimension info, you can just use the corresponding variables.

getStatusBarHeight().then(data => {
  data.height
})

getNavigationBarHeight().then(data => {
  data.height
})

getScreenSize().then(data => {
  data.width
  data.height
})

getSafeArea().then(data => {
  data.top
  data.right
  data.bottom
  data.left
})

// You have to listen dimension change in android app.
addListener('change', function (data) {
  data.statusBarHeight
  data.navigationBarHeight
  data.screenSize
  data.safeArea
})
```
npm package: @react-native-hero/font-icon
Description: react native font icon
Author: musicode
Latest version: 0.0.5

# @react-native-hero/font-icon

This module is used to add custom fonts.

By the way, you can also add custom font icons.

## Getting started

Install the library using either Yarn:

```
yarn add @react-native-hero/font-icon
```

or npm:

```
npm install --save @react-native-hero/font-icon
```

## Link

- React Native v0.60+

For iOS, use `cocoapods` to link the package.

run the following command:

```
$ cd ios && pod install
```

For android, the package will be linked automatically on build.

- React Native <= 0.59

run the following command to link the package:

```
$ react-native link @react-native-hero/font-icon
```

## Steps

[react-native-asset](https://github.com/unimonkiez/react-native-asset) is recommend.

1. Download your font file, such as `abc.ttf`.

2. Put the font file in the `<project>/assets/fonts` folder.

3. Edit `<project>/react-native.config.js`, add the assets.

```js
module.exports = {
  assets: ['./assets/fonts'],
};
```

4. Run `react-native-asset`.

5. At this point, the font is installed, but you don't know the `fontFamily` of the font.

6. Call `enumFonts()` on ios, you will get a fonts array, and you will find the `fontFamily` from the array.

```js
import {
  enumFonts,
} from '@react-native-hero/font-icon'

enumFonts().then(data => {
  console.log(data.fonts)
})
```

7. Here comes the **core** step, ios needs the `fontFamily`, but android just needs the font file name.

8. If the font file name is not the `fontFamily`, you should to change the file name to the `fontFamily`, then run `react-native-asset` again.

14. If you just need a new font, that's all.

15. If you need a font icon, see the example below.

16. Sorry for my english, may be you can provide a better explanation.

## Example

```js
import {
  createFontelloIcon,
  createIcomoonIcon,
} from '@react-native-hero/font-icon'

// config is a json downloed from fontello
const FontelloIcon = createFontelloIcon(config)

// config is a json downloed from icomoon
const IcomoonIcon = createIcomoonIcon(config)

// then you can use the Icon Component
<FontelloIcon
  size={14}
  color="#666"
  name="like"
  style={{
    marginLeft: 4
  }}
/>
```
npm package: @react-native-hero/fs
Description: react native fs
Author: musicode
Latest version: 0.1.4

# @react-native-hero/fs

## Getting started

Install the library using either Yarn:

```
yarn add @react-native-hero/fs
```

or npm:

```
npm install --save @react-native-hero/fs
```

## Link

- React Native v0.60+

For iOS, use `cocoapods` to link the package.

run the following command:

```
$ cd ios && pod install
```

For android, the package will be linked automatically on build.

- React Native <= 0.59

run the following command to link the package:

```
$ react-native link @react-native-hero/fs
```

## Example

```js
import {
  CODE,
  DIRECTORY,
  exists,
  unlink,
  stat,
  md5,
  preview,
} from '@react-native-hero/fs'

exists(path)
.then(data => {
  if (data.exists) {

  }
})

stat(path)
.then(data => {
  data.name
  data.size
})
.catch(err => {
  if (err.code === CODE.FILE_NOT_FOUND) {
    console.log('file is not found')
  }
})

unlink(path)
.then(data => {
  if (data.success) {

  }
})
.catch(err => {
  if (err.code === CODE.FILE_NOT_FOUND) {
    console.log('file is not found')
  }
})

md5(path)
.then(data => {
  data.md5
})
.catch(err => {
  if (err.code === CODE.FILE_NOT_FOUND) {
    console.log('file is not found')
  }
})

preview({
  path: '/xx/xx.pdf',
  mimeType: 'application/pdf',
})
.then(() => {
  // success
})
.catch(err => {
  if (err.code === CODE.FILE_NOT_FOUND) {
    console.log('file is not found')
  }
  else if (err.code === CODE.PREVIEW_APP_NOT_FOUND) {
    console.log('preview app is not found')
  }
})

// android only
scan({
  path: '/xx/xx.jpg',
  mimeType: 'image/jpeg',
})
.then(data => {
  data.path
})
.catch(err => {
  if (err.code === CODE.SCANNER_NOT_CONNECTED) {
    console.log('scanner is not connected.')
  }
})
```
npm package: @react-native-hero/network
Description: react native network
Author: musicode
Latest version: 0.1.1

# @react-native-hero/network

## Getting started

Install the library using either Yarn:

```
yarn add @react-native-hero/network
```

or npm:

```
npm install --save @react-native-hero/network
```

## Link

- React Native v0.60+

For iOS, use `cocoapods` to link the package.

run the following command:

```
$ cd ios && pod install
```

For android, the package will be linked automatically on build.

- React Native <= 0.59

run the following command to link the package:

```
$ react-native link @react-native-hero/network
```

## Example

```js
import {
  CODE,
  download,
  upload,
  fetch,
} from '@react-native-hero/network'

download(
  // required
  {
    url: 'https://www.example.com/a.jpg',
    path: '/root/home/a.jpg',
  },
  // optional
  function (progress) {
    // [0, 1]
  }
).then(response => {
  response.name
  response.path
  response.size
})
.catch(err => {
  if (err.code === CODE.DOWNLOAD_FAILURE) {
    console.log('download error')
  }
})

upload(
  // required
  {
    url: 'https://www.example.com/upload',
    file: {
      path: '/root/home/a.jpg',
      name: 'file',
      mimeType: 'image/jpeg',
      // optional, default value is the file name of path
      fileName: 'a.jpg',
    },
    // optional, send request params
    data: {
      key1: 'value1',
      key2: 'value2',
    },
    // optional, set request headers
    headers: {

    }
  },
  // optional
  function (progress) {
    // [0, 1]
  }
).then(response => {
  response.status_code
  response.body
})
.catch(err => {
  if (err.code === CODE.UPLOAD_FAILURE) {
    console.log('upload error')
  }
})

fetch({
  url: '',
  methods: 'post',
  // optional, send request params
  data: {
    key1: 'value1',
    key2: 'value2',
  },
  // optional, set request headers
  headers: {

  }
})
.then(response => {
  response.status_code
  response.body
})
.catch(err => {
  if (err.code === CODE.FETCH_FAILURE) {
    console.log('fetch error')
  }
})
```
npm package: @react-native-hero/picker
Description: react native picker
Author: musicode
Latest version: 0.1.6

# @react-native-hero/picker

## Getting started

Install the library using either Yarn:

```
yarn add @react-native-hero/picker
```

or npm:

```
npm install --save @react-native-hero/picker
```

## Link

- React Native v0.60+

For iOS, use `cocoapods` to link the package.

run the following command:

```
$ cd ios && pod install
```

For android, the package will be linked automatically on build.

- React Native <= 0.59

run the following command to link the package:

```
$ react-native link @react-native-hero/picker
```

## Example

```js
import {
  Picker
} from '@react-native-hero/picker'

<Picker
  height={300}
  options={[
    { text: 'displayed text', value: 'support string or number' },
    { text: '2', value: 'string' },
    { text: '3', value: 3 },
  ]}
  onChange={data => {
    data.index
    data.option
  }}
  style={{
    backgroundColor: '#eee'
  }}

  // optional
  selectedIndex={0}
  color="#000"
  fontSize={16}
  rowHeight={44}
/>
```
npm package: @react-native-hero/qiniu
Description: react native qiniu
Author: musicode
Latest version: 0.0.7

# @react-native-hero/qiniu

## Getting started

Install the library using either Yarn:

```
yarn add @react-native-hero/qiniu
```

or npm:

```
npm install --save @react-native-hero/qiniu
```

## Link

- React Native v0.60+

For iOS, use `cocoapods` to link the package.

run the following command:

```
$ cd ios && pod install
```

For android, the package will be linked automatically on build.

- React Native <= 0.59

run the following command to link the package:

```
$ react-native link @react-native-hero/qiniu
```

## Example

```js
import {
  CODE,
  ZONE,
  upload,
} from '@react-native-hero/qiniu'

upload(
  {
    // 上传到云端的文件名
    key: 'key',
    // 上传文件的本地路径
    path: '/xx/xx/1.png',
    // 上传文件的 mime type
    mimeType: 'image/png',
    // 上传凭证，通常由服务器生成传给客户端
    token: '',
    // 机房，传入 ZONE 的枚举值
    zone: ZONE.HUABEI,
  },
  // 如果需要获取上传进度
  // 传入第二个参数，progress 取值范围为 0-1
  // 如果不需要获取上传进度，最好不传此参数，避免 js/native 频繁通信
  function (progress) {
    // [0, 1]
  }
)
.then(data => {
  // 上传成功，data 是七牛服务器返回的数据
})
.catch(err => {
  if (err.code === CODE.UPLOAD_FAILURE) {
    console.log('upload error')
  }
})
```
npm package: @react-native-hero/shadow
Description: react native shadow
Author: musicode
Latest version: 0.1.1

# @react-native-hero/shadow

## Getting started

Install the library using either Yarn:

```
yarn add @react-native-hero/shadow
```

or npm:

```
npm install --save @react-native-hero/shadow
```

## Link

For android, the package will be linked automatically on build.

- React Native <= 0.59

run the following command to link the package:

```
$ react-native link @react-native-hero/shadow
```

## Example

```js
import {
  Shadow
} from '@react-native-hero/shadow'

<Shadow
  width={100}
  height={100}
  shadowRadius={10}
  // The shadow color must be rgba
  shadowColor="rgba(0,0,0,0.5)"

  // optional
  shadowOffsetX={0}
  shadowOffsetY={0}
  borderRadius={0}
  backgroundColor="transparent"
  style={{
    borderWidth: 1,
    borderColor: '#ddd',
  }}
>
  <Text>
    children
  </Text>
</Shadow>
```
npm package: @react-native-hero/spin
Description: react native spin
Author: musicode
Latest version: 0.0.3

# @react-native-hero/spin

## Getting started

Install the library using either Yarn:

```
yarn add @react-native-hero/spin
```

or npm:

```
npm install --save @react-native-hero/spin
```

## Link

For android, the package will be linked automatically on build.

- React Native <= 0.59

run the following command to link the package:

```
$ react-native link @react-native-hero/spin
```

## Example

```js
import {
  SIZE,
  Spin,
} from '@react-native-hero/spin'

<Spin
  size={SIZE.SMALL}
  color="#999"
/>
```
npm package: @react-native-hero/splash-screen
Description: react native splash screen
Author: musicode
Latest version: 0.1.5

# @react-native-hero/splash-screen

## Getting started

Install the library using either Yarn:

```
yarn add @react-native-hero/splash-screen
```

or npm:

```
npm install --save @react-native-hero/splash-screen
```

## Link

- React Native v0.60+

For iOS, use `cocoapods` to link the package.

run the following command:

```
$ cd ios && pod install
```

For android, the package will be linked automatically on build.

- React Native <= 0.59

run the following command to link the package:

```
$ react-native link @react-native-hero/splash-screen
```

## Setup

Make sure you understand the native layout, this module does not support image as a splash screen.

* iOS: LaunchScreen.xib
* Android: android/app/src/main/res/layout/splash_screen_default.xml

### iOS

`AppDelegate.m`

```objective-c
#import <RNTSplashScreen.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  [super application:application didFinishLaunchingWithOptions:launchOptions];
  [RNTSplashScreen show:self.window.rootViewController.view storyboardName:@"LaunchScreen"];
  return YES;
}
```

### Android

`MainActivity.kt`

```kotlin
import com.github.reactnativehero.splashscreen.RNTSplashScreenModule

class MainActivity : ReactActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        RNTSplashScreenModule.show(this)
    }
}
```

## Example

```js
import {
  hide,
} from '@react-native-hero/splash-screen'

// Call hide method after your data or view is ready.
hide()
```
npm package: @react-native-hero/styled-text
Description: react native styled text
Author: musicode
Latest version: 0.0.5

# @react-native-hero/styled-text

## Getting started

Install the library using either Yarn:

```
yarn add @react-native-hero/styled-text
```

or npm:

```
npm install --save @react-native-hero/styled-text
```

## Example

```js
import {
  StyledText,
} from '@react-native-hero/styled-text'

<StyledText
  numberOfLines={2}
  style={{color: 'blue', fontSize: 14}}

  telText="电话"
  telStyle={{color: 'red'}}
  onTelPress={tel => {

  }}
  urlText="链接"
  urlStyle={{color: 'red'}}
  onUrlPress={url => {

  }}
  emailText="邮箱"
  emailStyle={{color: 'red'}}
  onEmailPress={email => {

  }}
  highlightStyle={{color: 'red'}}
>
  请点击https://www.baidu.com，请联系13512345678，请发送邮箱adsadasd@qq.com，高亮<i>关键字</i>
</StyledText>
```
npm package: @react-native-hero/toast
Description: react native toast
Author: musicode
Latest version: 0.0.7

# @react-native-hero/toast

## Getting started

Install the library using either Yarn:

```
yarn add @react-native-hero/toast
```

or npm:

```
npm install --save @react-native-hero/toast
```

## Link

- React Native v0.60+

For iOS, use `cocoapods` to link the package.

run the following command:

```
$ cd ios && pod install
```

For android, the package will be linked automatically on build.

- React Native <= 0.59

run the following command to link the package:

```
$ react-native link @react-native-hero/toast
```

## Example

```js
import {
  TYPE,
  DURATION,
  POSITION,
  show,
} from '@react-native-hero/toast'

show({
  text: 'hello',
  // optional
  // as shown below, these are the default values
  type: TYPE.TEXT,
  duration: DURATION.SHORT,
  position: POSITION.CENTER,
})
```
npm package: @react-native-html/node-parser
Description: Using htmlparser2 to parse the nodes
Author: Derk Nolte
Latest version: 0.0.3

# react-native-html

## install

`yarn add @react-native-html/parser @react-native-html/renderer`

## basic example (typescript)

```
import React, { useRef, useState } from 'react';
import { SafeAreaView, StyleSheet, ScrollView } from 'react-native';
import { HtmlParseAndView, HtmlParseAndViewProps, HtmlStyles } from '@react-native-html/renderer';

const rawHtml = `<div>
  <ul id="top">
    <li>top</li>
    <li><a href="#bottom">go to bottom</a></li>
  </ul>
  <p>Hello, how are you?</p>
  <div id="bottom">bottom</div>`
  <a href="#top">go to top</a>
</div>
`;

export const Example = ({ rawHtml, htmlViewProps, children }: Props) => {
  const scrollRef = useRef<ScrollView | null>(null);

  return (
    <SafeAreaView>
      {children}
      <ScrollView
        ref={instance => {
          setHasScrollViewRef(true);
          scrollRef.current = instance;
        }}
      >
          <HtmlParseAndView
            rawHtml={rawHtml}
            htmlStyles={htmlStyles}
            containerStyle={styles.container}
            scrollRef={scrollRef.current}
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...htmlViewProps}
          />
        )}
      </ScrollView>
    </SafeAreaView>
  );
};

const htmlStyles: HtmlStyles = {
  text: {
    fontSize: 18,
    lineHeight: 18 * 1.4,
  },
  paragraph: {
    marginVertical: 10,
  },
  image: {
    marginVertical: 0,
  },
  list: {
    marginVertical: 5,
  },
  h1: {
    fontSize: 30,
    lineHeight: 30 * 1.4,
    marginTop: 10,
    fontWeight: '500',
  },
  h2: {
    fontSize: 26,
    lineHeight: 26 * 1.4,
    marginTop: 10,
    fontWeight: '500',
  },
  h3: {
    fontSize: 24,
    lineHeight: 24 * 1.4,
    marginTop: 10,
    fontWeight: '500',
  },
  listItem: {
    marginVertical: 2,
  },
  listItemContent: {},
};

const styles = StyleSheet.create({
  container: {
    marginHorizontal: 10,
  },
});
```

## more examples

See example app for more examples

## why?

Other packages exist but:

- minimizing the number of views needed to display the html (not every dom element is a view)
- more control on what gets wrapped inside a <Text /> component
- parsing white spaces as per html specs
- separated parsing and rendering of html enables to cache parsing and/or move parsing to backend (e.g., node-parser)
- support for inline links within html
npm package: @react-native-html/parser
Description: Parses html into data nodes that are structured for easy rendering in react native
Author: Derk Nolte
Latest version: 0.1.0

# react-native-html

## install

`yarn add @react-native-html/parser @react-native-html/renderer`

## basic example (typescript)

```
import React, { useRef, useState } from 'react';
import { SafeAreaView, StyleSheet, ScrollView } from 'react-native';
import { HtmlParseAndView, HtmlParseAndViewProps, HtmlStyles } from '@react-native-html/renderer';

const rawHtml = `<div>
  <ul id="top">
    <li>top</li>
    <li><a href="#bottom">go to bottom</a></li>
  </ul>
  <p>Hello, how are you?</p>
  <div id="bottom">bottom</div>`
  <a href="#top">go to top</a>
</div>
`;

export const Example = ({ rawHtml, htmlViewProps, children }: Props) => {
  const scrollRef = useRef<ScrollView | null>(null);

  return (
    <SafeAreaView>
      {children}
      <ScrollView
        ref={instance => {
          setHasScrollViewRef(true);
          scrollRef.current = instance;
        }}
      >
          <HtmlParseAndView
            rawHtml={rawHtml}
            htmlStyles={htmlStyles}
            containerStyle={styles.container}
            scrollRef={scrollRef.current}
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...htmlViewProps}
          />
        )}
      </ScrollView>
    </SafeAreaView>
  );
};

const htmlStyles: HtmlStyles = {
  text: {
    fontSize: 18,
    lineHeight: 18 * 1.4,
  },
  paragraph: {
    marginVertical: 10,
  },
  image: {
    marginVertical: 0,
  },
  list: {
    marginVertical: 5,
  },
  h1: {
    fontSize: 30,
    lineHeight: 30 * 1.4,
    marginTop: 10,
    fontWeight: '500',
  },
  h2: {
    fontSize: 26,
    lineHeight: 26 * 1.4,
    marginTop: 10,
    fontWeight: '500',
  },
  h3: {
    fontSize: 24,
    lineHeight: 24 * 1.4,
    marginTop: 10,
    fontWeight: '500',
  },
  listItem: {
    marginVertical: 2,
  },
  listItemContent: {},
};

const styles = StyleSheet.create({
  container: {
    marginHorizontal: 10,
  },
});
```

## more examples

See example app for more examples

## why?

Other packages exist but:

- minimizing the number of views needed to display the html (not every dom element is a view)
- more control on what gets wrapped inside a <Text /> component
- parsing white spaces as per html specs
- separated parsing and rendering of html enables to cache parsing and/or move parsing to backend (e.g., node-parser)
- support for inline links within html
npm package: @react-native-html/renderer
Description: Renders nodes from @react-native-html/parser in react native
Author: Derk Nolte
Latest version: 0.0.30

# react-native-html

## install

`yarn add @react-native-html/parser @react-native-html/renderer`

## basic example (typescript)

```
import React, { useRef, useState } from 'react';
import { SafeAreaView, StyleSheet, ScrollView } from 'react-native';
import { HtmlParseAndView, HtmlParseAndViewProps, HtmlStyles } from '@react-native-html/renderer';

const rawHtml = `<div>
  <ul id="top">
    <li>top</li>
    <li><a href="#bottom">go to bottom</a></li>
  </ul>
  <p>Hello, how are you?</p>
  <div id="bottom">bottom</div>`
  <a href="#top">go to top</a>
</div>
`;

export const Example = ({ rawHtml, htmlViewProps, children }: Props) => {
  const scrollRef = useRef<ScrollView | null>(null);

  return (
    <SafeAreaView>
      {children}
      <ScrollView
        ref={instance => {
          setHasScrollViewRef(true);
          scrollRef.current = instance;
        }}
      >
          <HtmlParseAndView
            rawHtml={rawHtml}
            htmlStyles={htmlStyles}
            containerStyle={styles.container}
            scrollRef={scrollRef.current}
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...htmlViewProps}
          />
        )}
      </ScrollView>
    </SafeAreaView>
  );
};

const htmlStyles: HtmlStyles = {
  text: {
    fontSize: 18,
    lineHeight: 18 * 1.4,
  },
  paragraph: {
    marginVertical: 10,
  },
  image: {
    marginVertical: 0,
  },
  list: {
    marginVertical: 5,
  },
  h1: {
    fontSize: 30,
    lineHeight: 30 * 1.4,
    marginTop: 10,
    fontWeight: '500',
  },
  h2: {
    fontSize: 26,
    lineHeight: 26 * 1.4,
    marginTop: 10,
    fontWeight: '500',
  },
  h3: {
    fontSize: 24,
    lineHeight: 24 * 1.4,
    marginTop: 10,
    fontWeight: '500',
  },
  listItem: {
    marginVertical: 2,
  },
  listItemContent: {},
};

const styles = StyleSheet.create({
  container: {
    marginHorizontal: 10,
  },
});
```

## more examples

See example app for more examples

## why?

Other packages exist but:

- minimizing the number of views needed to display the html (not every dom element is a view)
- more control on what gets wrapped inside a <Text /> component
- parsing white spaces as per html specs
- separated parsing and rendering of html enables to cache parsing and/or move parsing to backend (e.g., node-parser)
- support for inline links within html
npm package: @react-native-kakao/channel
Description: React Native Kakao Channel SDK
Author: MJ Studio
Latest version: 2.4.5

<p align="center">
  <a href="https://rnkakao.mjstudio.net">
    <img width="160px" src="https://raw.githubusercontent.com/mym0404/image-archive/master/202404201234177.webp"><br/>
  </a>
  <h1 align="center">React Native Kakao Channel</h1>
  <p align="center">
  <a href="https://www.npmjs.com/package/@react-native-kakao/core"><img src="https://img.shields.io/npm/dm/@react-native-kakao/core.svg?style=flat-square" alt="NPM downloads"></a>
  <a href="https://www.npmjs.com/package/@react-native-kakao/core"><img src="https://img.shields.io/npm/v/@react-native-kakao/core.svg?style=flat-square" alt="NPM version"></a>
  <a href="/LICENSE"><img src="https://img.shields.io/npm/l/@react-native-kakao/core.svg?style=flat-square" alt="License"></a>
  <a href="https://github.com/lerna-lite/lerna-lite"><img src="https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff?style=flat-square" alt="License"></a>
  <h3 align="center">Native Kakao SDK All In One Solution</h3>
  </p>
</p>
<a href="https://rnkakao.mjstudio.net">Documentation</a>


## Documentation

- [Quick Start](https://rnkakao.mjstudio.net)

## Contributing

- [Contributing](https://github.com/mym0404/react-native-kakao/blob/main/CONTRIBUTING.md)
- [Issues](https://github.com/mym0404/react-native-kakao/issues)
- [PRs](https://github.com/mym0404/react-native-kakao/pulls)
- [Documentation](https://rnkakao.mjstudio.net)
- [Code of Conduct](https://github.com/mym0404/react-native-kakao/blob/main/CODE_OF_CONDUCT.md)

## License

- See [LICENSE](/LICENSE)

---

<p align="center">
  <a href="https://mjstudio.net/">
    <img width="75px" src="https://raw.githubusercontent.com/mym0404/image-archive/master/202404201239152.webp">
  </a>
  <p align="center">
    Built and maintained by <a href="https://mjstudio.net/">MJ Studio</a>.
  </p>
</p>
npm package: @react-native-kakao/core
Description: React Native Kakao Core SDK
Author: MJ Studio
Latest version: 2.4.5

<p align="center">
  <a href="https://rnkakao.mjstudio.net">
    <img width="160px" src="https://raw.githubusercontent.com/mym0404/image-archive/master/202404201234177.webp"><br/>
  </a>
  <h1 align="center">React Native Kakao Core</h1>
  <p align="center">
  <a href="https://www.npmjs.com/package/@react-native-kakao/core"><img src="https://img.shields.io/npm/dm/@react-native-kakao/core.svg?style=flat-square" alt="NPM downloads"></a>
  <a href="https://www.npmjs.com/package/@react-native-kakao/core"><img src="https://img.shields.io/npm/v/@react-native-kakao/core.svg?style=flat-square" alt="NPM version"></a>
  <a href="/LICENSE"><img src="https://img.shields.io/npm/l/@react-native-kakao/core.svg?style=flat-square" alt="License"></a>
  <a href="https://github.com/lerna-lite/lerna-lite"><img src="https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff?style=flat-square" alt="License"></a>
  <h3 align="center">Native Kakao SDK All In One Solution</h3>
  </p>
</p>
<a href="https://rnkakao.mjstudio.net">Documentation</a>


## Documentation

- [Quick Start](https://rnkakao.mjstudio.net)

## Contributing

- [Contributing](https://github.com/mym0404/react-native-kakao/blob/main/CONTRIBUTING.md)
- [Issues](https://github.com/mym0404/react-native-kakao/issues)
- [PRs](https://github.com/mym0404/react-native-kakao/pulls)
- [Documentation](https://rnkakao.mjstudio.net)
- [Code of Conduct](https://github.com/mym0404/react-native-kakao/blob/main/CODE_OF_CONDUCT.md)

## License

- See [LICENSE](/LICENSE)

---

<p align="center">
  <a href="https://mjstudio.net/">
    <img width="75px" src="https://raw.githubusercontent.com/mym0404/image-archive/master/202404201239152.webp">
  </a>
  <p align="center">
    Built and maintained by <a href="https://mjstudio.net/">MJ Studio</a>.
  </p>
</p>
npm package: @react-native-kakao/map
Description: React Native Kakao Map SDK
Author: MJ Studio
Latest version: 2.2.7

<p align="center">
  <a href="https://rnkakao.dev">
    <img width="160px" src="https://raw.githubusercontent.com/mym0404/image-archive/master/202404201234177.webp"><br/>
  </a>
  <h1 align="center">React Native Kakao Map</h1>
  <p align="center">
  <a href="https://www.npmjs.com/package/@react-native-kakao/core"><img src="https://img.shields.io/npm/dm/@react-native-kakao/core.svg?style=flat-square" alt="NPM downloads"></a>
  <a href="https://www.npmjs.com/package/@react-native-kakao/core"><img src="https://img.shields.io/npm/v/@react-native-kakao/core.svg?style=flat-square" alt="NPM version"></a>
  <a href="/LICENSE"><img src="https://img.shields.io/npm/l/@react-native-kakao/core.svg?style=flat-square" alt="License"></a>
  <a href="https://github.com/lerna-lite/lerna-lite"><img src="https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff?style=flat-square" alt="License"></a>
  <h3 align="center">Native Kakao SDK All In One Solution</h3>
  </p>
</p>
<a href="https://rnkakao.dev">Documentation</a>


## Documentation

- [Quick Start](https://rnkakao.dev)

## Contributing

- [Contributing](https://github.com/mym0404/react-native-kakao/blob/main/CONTRIBUTING.md)
- [Issues](https://github.com/mym0404/react-native-kakao/issues)
- [PRs](https://github.com/mym0404/react-native-kakao/pulls)
- [Documentation](https://rnkakao.dev)
- [Code of Conduct](https://github.com/mym0404/react-native-kakao/blob/main/CODE_OF_CONDUCT.md)

## License

- See [LICENSE](/LICENSE)

---

<p align="center">
  <a href="https://mjstudio.net/">
    <img width="75px" src="https://raw.githubusercontent.com/mym0404/image-archive/master/202404201239152.webp">
  </a>
  <p align="center">
    Built and maintained by <a href="https://mjstudio.net/">MJ Studio</a>.
  </p>
</p>
npm package: @react-native-kakao/navi
Description: React Native Kakao Navi SDK
Author: MJ Studio
Latest version: 2.4.5

<p align="center">
  <a href="https://rnkakao.mjstudio.net">
    <img width="160px" src="https://raw.githubusercontent.com/mym0404/image-archive/master/202404201234177.webp"><br/>
  </a>
  <h1 align="center">React Native Kakao Navi</h1>
  <p align="center">
  <a href="https://www.npmjs.com/package/@react-native-kakao/core"><img src="https://img.shields.io/npm/dm/@react-native-kakao/core.svg?style=flat-square" alt="NPM downloads"></a>
  <a href="https://www.npmjs.com/package/@react-native-kakao/core"><img src="https://img.shields.io/npm/v/@react-native-kakao/core.svg?style=flat-square" alt="NPM version"></a>
  <a href="/LICENSE"><img src="https://img.shields.io/npm/l/@react-native-kakao/core.svg?style=flat-square" alt="License"></a>
  <a href="https://github.com/lerna-lite/lerna-lite"><img src="https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff?style=flat-square" alt="License"></a>
  <h3 align="center">Native Kakao SDK All In One Solution</h3>
  </p>
</p>
<a href="https://rnkakao.mjstudio.net">Documentation</a>


## Documentation

- [Quick Start](https://rnkakao.mjstudio.net)

## Contributing

- [Contributing](https://github.com/mym0404/react-native-kakao/blob/main/CONTRIBUTING.md)
- [Issues](https://github.com/mym0404/react-native-kakao/issues)
- [PRs](https://github.com/mym0404/react-native-kakao/pulls)
- [Documentation](https://rnkakao.mjstudio.net)
- [Code of Conduct](https://github.com/mym0404/react-native-kakao/blob/main/CODE_OF_CONDUCT.md)

## License

- See [LICENSE](/LICENSE)

---

<p align="center">
  <a href="https://mjstudio.net/">
    <img width="75px" src="https://raw.githubusercontent.com/mym0404/image-archive/master/202404201239152.webp">
  </a>
  <p align="center">
    Built and maintained by <a href="https://mjstudio.net/">MJ Studio</a>.
  </p>
</p>
npm package: @react-native-kakao/share
Description: React Native Kakao Share SDK
Author: MJ Studio
Latest version: 2.4.5

<p align="center">
  <a href="https://rnkakao.mjstudio.net">
    <img width="160px" src="https://raw.githubusercontent.com/mym0404/image-archive/master/202404201234177.webp"><br/>
  </a>
  <h1 align="center">React Native Kakao Share</h1>
  <p align="center">
  <a href="https://www.npmjs.com/package/@react-native-kakao/core"><img src="https://img.shields.io/npm/dm/@react-native-kakao/core.svg?style=flat-square" alt="NPM downloads"></a>
  <a href="https://www.npmjs.com/package/@react-native-kakao/core"><img src="https://img.shields.io/npm/v/@react-native-kakao/core.svg?style=flat-square" alt="NPM version"></a>
  <a href="/LICENSE"><img src="https://img.shields.io/npm/l/@react-native-kakao/core.svg?style=flat-square" alt="License"></a>
  <a href="https://github.com/lerna-lite/lerna-lite"><img src="https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff?style=flat-square" alt="License"></a>
  <h3 align="center">Native Kakao SDK All In One Solution</h3>
  </p>
</p>
<a href="https://rnkakao.mjstudio.net">Documentation</a>


## Documentation

- [Quick Start](https://rnkakao.mjstudio.net)

## Contributing

- [Contributing](https://github.com/mym0404/react-native-kakao/blob/main/CONTRIBUTING.md)
- [Issues](https://github.com/mym0404/react-native-kakao/issues)
- [PRs](https://github.com/mym0404/react-native-kakao/pulls)
- [Documentation](https://rnkakao.mjstudio.net)
- [Code of Conduct](https://github.com/mym0404/react-native-kakao/blob/main/CODE_OF_CONDUCT.md)

## License

- See [LICENSE](/LICENSE)

---

<p align="center">
  <a href="https://mjstudio.net/">
    <img width="75px" src="https://raw.githubusercontent.com/mym0404/image-archive/master/202404201239152.webp">
  </a>
  <p align="center">
    Built and maintained by <a href="https://mjstudio.net/">MJ Studio</a>.
  </p>
</p>
npm package: @react-native-kakao/social
Description: React Native Kakao Social SDK
Author: MJ Studio
Latest version: 2.4.5

<p align="center">
  <a href="https://rnkakao.mjstudio.net">
    <img width="160px" src="https://raw.githubusercontent.com/mym0404/image-archive/master/202404201234177.webp"><br/>
  </a>
  <h1 align="center">React Native Kakao Social</h1>
  <p align="center">
  <a href="https://www.npmjs.com/package/@react-native-kakao/core"><img src="https://img.shields.io/npm/dm/@react-native-kakao/core.svg?style=flat-square" alt="NPM downloads"></a>
  <a href="https://www.npmjs.com/package/@react-native-kakao/core"><img src="https://img.shields.io/npm/v/@react-native-kakao/core.svg?style=flat-square" alt="NPM version"></a>
  <a href="/LICENSE"><img src="https://img.shields.io/npm/l/@react-native-kakao/core.svg?style=flat-square" alt="License"></a>
  <a href="https://github.com/lerna-lite/lerna-lite"><img src="https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff?style=flat-square" alt="License"></a>
  <h3 align="center">Native Kakao SDK All In One Solution</h3>
  </p>
</p>
<a href="https://rnkakao.mjstudio.net">Documentation</a>


## Documentation

- [Quick Start](https://rnkakao.mjstudio.net)

## Contributing

- [Contributing](https://github.com/mym0404/react-native-kakao/blob/main/CONTRIBUTING.md)
- [Issues](https://github.com/mym0404/react-native-kakao/issues)
- [PRs](https://github.com/mym0404/react-native-kakao/pulls)
- [Documentation](https://rnkakao.mjstudio.net)
- [Code of Conduct](https://github.com/mym0404/react-native-kakao/blob/main/CODE_OF_CONDUCT.md)

## License

- See [LICENSE](/LICENSE)

---

<p align="center">
  <a href="https://mjstudio.net/">
    <img width="75px" src="https://raw.githubusercontent.com/mym0404/image-archive/master/202404201239152.webp">
  </a>
  <p align="center">
    Built and maintained by <a href="https://mjstudio.net/">MJ Studio</a>.
  </p>
</p>
npm package: @react-native-kakao/user
Description: React Native Kakao User SDK
Author: MJ Studio
Latest version: 2.4.5

<p align="center">
  <a href="https://rnkakao.mjstudio.net">
    <img width="160px" src="https://raw.githubusercontent.com/mym0404/image-archive/master/202404201234177.webp"><br/>
  </a>
  <h1 align="center">React Native Kakao User</h1>
  <p align="center">
  <a href="https://www.npmjs.com/package/@react-native-kakao/core"><img src="https://img.shields.io/npm/dm/@react-native-kakao/core.svg?style=flat-square" alt="NPM downloads"></a>
  <a href="https://www.npmjs.com/package/@react-native-kakao/core"><img src="https://img.shields.io/npm/v/@react-native-kakao/core.svg?style=flat-square" alt="NPM version"></a>
  <a href="/LICENSE"><img src="https://img.shields.io/npm/l/@react-native-kakao/core.svg?style=flat-square" alt="License"></a>
  <a href="https://github.com/lerna-lite/lerna-lite"><img src="https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff?style=flat-square" alt="License"></a>
  <h3 align="center">Native Kakao SDK All In One Solution</h3>
  </p>
</p>
<a href="https://rnkakao.mjstudio.net">Documentation</a>


## Documentation

- [Quick Start](https://rnkakao.mjstudio.net)

## Contributing

- [Contributing](https://github.com/mym0404/react-native-kakao/blob/main/CONTRIBUTING.md)
- [Issues](https://github.com/mym0404/react-native-kakao/issues)
- [PRs](https://github.com/mym0404/react-native-kakao/pulls)
- [Documentation](https://rnkakao.mjstudio.net)
- [Code of Conduct](https://github.com/mym0404/react-native-kakao/blob/main/CODE_OF_CONDUCT.md)

## License

- See [LICENSE](/LICENSE)

---

<p align="center">
  <a href="https://mjstudio.net/">
    <img width="75px" src="https://raw.githubusercontent.com/mym0404/image-archive/master/202404201239152.webp">
  </a>
  <p align="center">
    Built and maintained by <a href="https://mjstudio.net/">MJ Studio</a>.
  </p>
</p>