open-index/open-npm huggingface dataset:
npm package: @react-native-vector-icons/fontawesome-pro-solid
Description: Fontawesome Pro Solid font for react native vector icons
Author: Joel Arvidsson
Latest version: 1.0.0

# React Native Vector Icons - Fontawesome Pro Solid

Fontawesome Pro Solid font for React Native Vector Icons

See the [React Native Vector Icons README](../../README.md) for more details.

> [!IMPORTANT]
> This package does not include the fonts. You must provide them yourself.

## Installation

```sh
npm install @react-native-vector-icons/fontawesome-pro-solid
```

## Custom Fonts

This package requires you to provide the font files. Place your `.ttf` font
file in the following location:

```
rnvi-fonts/fontawesome-pro-solid/fa-solid-900.ttf
```

The font will be automatically copied during the build process for both iOS and
Android.

## Usage

```jsx
import { FontAwesomeProSolid } from '@react-native-vector-icons/fontawesome-pro-solid';

// ...

<FontAwesomeProSolid name="house" color="#ff0000" size={20} />
```

## Versions

Prior to version 12, the version of this font package tracked the upstream version.

The table below tracks which font version is included in each package version.

| RNVI version | Upstream version |
| ------------ | ---------------- |
| &gt; 0.1.0 | 7.1.0 |
| &gt; 0.1.1 | 7.2.0 |

## Contributing

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

## License

MIT
npm package: @react-native-vector-icons/fontawesome-pro-thin
Description: Fontawesome Pro Thin font for react native vector icons
Author: Joel Arvidsson
Latest version: 1.0.0

# React Native Vector Icons - Fontawesome Pro Thin

Fontawesome Pro Thin font for React Native Vector Icons

See the [React Native Vector Icons README](../../README.md) for more details.

> [!IMPORTANT]
> This package does not include the fonts. You must provide them yourself.

## Installation

```sh
npm install @react-native-vector-icons/fontawesome-pro-thin
```

## Custom Fonts

This package requires you to provide the font files. Place your `.ttf` font
file in the following location:

```
rnvi-fonts/fontawesome-pro-thin/fa-thin-100.ttf
```

The font will be automatically copied during the build process for both iOS and
Android.

## Usage

```jsx
import { FontAwesomeProThin } from '@react-native-vector-icons/fontawesome-pro-thin';

// ...

<FontAwesomeProThin name="house" color="#ff0000" size={20} />
```

## Versions

Prior to version 12, the version of this font package tracked the upstream version.

The table below tracks which font version is included in each package version.

| RNVI version | Upstream version |
| ------------ | ---------------- |
| &gt; 0.1.0 | 7.1.0 |
| &gt; 0.1.1 | 7.2.0 |

## Contributing

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

## License

MIT
npm package: @react-native-vector-icons/fontawesome5
Description: Fontawesome5 font for react native vector icons
Author: Joel Arvidsson
Latest version: 13.0.0

# FontAwesome 5

### Table of Content

- [`Usage`](#usage)
- [`Upgrading to Pro`](#upgrading-to-pro)

# Usage

Using the standard icons works just like the standard icons in this library.

```javascript
import { FontAwesome5 } from "@react-native-vector-icons/fontawesome5";

const icon = <FontAwesome5 name="comments" />;
```

Something special about the FontAwesome5 class is that you can also pass props
to change the style of the icon:

```javascript
import { FontAwesome5 } from "@react-native-vector-icons/fontawesome5";

const icon = <FontAwesome5 name="comments" iconStyle="solid" />;
const icon = <FontAwesome5 name="git" iconStyle="brand" />;
```

**Valid types**

| Type        | Description           |
| ----------- | --------------------- |
| **regular** | Uses the Regular font |
| **brand**   | Uses the Brands font  |
| **solid**   | Uses the Solid font   |

No specified type indicates Regular font.

## getImageSource

`getImageSource` works a little different due to its native backend and how the
font is separated into different files. An extra argument to specify the font
style is required.

Use this to select which style the generated image should have:

```javascript
import { FontAwesome5 } from "@react-native-vector-icons/fontawesome5";

FontAwesome5.getImageSource("solid", "comments", 30, "#000").then((source) =>
  this.setState({ image: source }),
);
```

# Upgrading to Pro

Use the `@react-native-vector-icons/fontawesome5-pro` package instead.
npm package: @react-native-vector-icons/fontawesome5-pro
Description: Fontawesome5 Pro font for react native vector icons
Author: Joel Arvidsson
Latest version: 13.0.0

# FontAwesome 5 Pro

## Installing the Pro Fonts

You need your FontAwesome npm token which can be obtained by logging into your
account and then access the `Services` tab.

Run `npx fa-upgrade5` and enter the token
when asked to in order to upgrade to the Pro version. It will install the fonts
in your repo in the `rnvi-fonts/fontawesome5-pro` directory. The top-level `rnvi-fonts` folder name can be customized by
setting it when executing the command: `npx fa-upgrade5 [destination]` and setting the `fontDir` in `package.json`.

### Manually

If the shell script does not work you can install the Pro version manually.
All you really need to do is adding the Pro fonts to the `rnvi-fonts/fontawesome5-pro` directory.

## Usage

Using the standard icons works just like the standard icons in this library.

```javascript
import { FontAwesome5Pro } from "@react-native-vector-icons/fontawesome5-pro";

const icon = <FontAwesome5Pro name="comments" />;
```

Something special about the FontAwesome5Pro class is that you can also pass props
to change the style of the icon:

```javascript
import { FontAwesome5Pro } from "@react-native-vector-icons/fontawesome5-pro";

const icon = <FontAwesome5Pro name="comments" iconStyle="solid" />;
const icon = <FontAwesome5Pro name="git" iconStyle="brand" />;
```

**Valid types**

| Type        | Description           |
| ----------- | --------------------- |
| **regular** | Uses the Regular font |
| **brand**   | Uses the Brands font  |
| **solid**   | Uses the Solid font   |
| **light**   | Uses the Light font   |
| **duotone** | Uses the Duotone font |

No specified type indicates Regular font.

### getImageSource

`getImageSource` works a little different due to its native backend and how the
font is separated into different files. An extra argument to specify the font
style is required.

Use this to select which style the generated image should have:

```javascript
import { FontAwesome5Pro } from "@react-native-vector-icons/fontawesome5-pro";

FontAwesome5Pro.getImageSource("solid", "comments", 30, "#000").then((source) =>
  this.setState({ image: source }),
);
```
npm package: @react-native-vector-icons/fontawesome6
Description: Fontawesome6 font for react native vector icons
Author: Joel Arvidsson
Latest version: 13.0.0

# FontAwesome 6

### Table of Content

- [`Usage`](#usage)
- [`Upgrading to Pro`](#upgrading-to-pro)

# Usage

Using the standard icons works just like the standard icons in this library.

```javascript
import { FontAwesome6 } from "@react-native-vector-icons/fontawesome6";

const icon = <FontAwesome6 name="comments" />;
```

Something special about the FontAwesome6 class is that you can also pass props
to change the style of the icon:

```javascript
import { FontAwesome6 } from "@react-native-vector-icons/fontawesome6";

const icon = <FontAwesome6 name="comments" iconStyle="solid" />;
const icon = <FontAwesome6 name="git" iconStyle="brand" />;
```

**Valid types**

| Type        | Description           |
| ----------- | --------------------- |
| **regular** | Uses the Regular font |
| **brand**   | Uses the Brands font  |
| **solid**   | Uses the Solid font   |

No specified type indicates Regular font.

## getImageSource

`getImageSource` works a little different due to its native backend and how the
font is separated into different files. An extra argument to specify the font
style is required.

Use this to select which style the generated image should have:

```javascript
import { FontAwesome6 } from "@react-native-vector-icons/fontawesome6";

FontAwesome6.getImageSource("solid", "comments", 30, "#000").then((source) =>
  this.setState({ image: source }),
);
```

# Upgrading to Pro

Use the `@react-native-vector-icons/fontawesome6-pro` package instead.
npm package: @react-native-vector-icons/fontawesome6-pro
Description: Fontawesome6 Pro font for react native vector icons
Author: Joel Arvidsson
Latest version: 13.0.0

# FontAwesome 6 Pro

## Installing the Pro Fonts

You need your FontAwesome npm token which can be obtained by logging into your
account and then access the `Services` tab.

Run `npx fa-upgrade6` and enter the token
when asked to in order to upgrade to the Pro version. It will install the fonts
in your repo in the `rnvi-fonts/fontawesome6-pro` directory. The top-level `rnvi-fonts` folder name can be customized by
setting it when executing the command: `npx fa-upgrade6 [destination]` and setting the `fontDir` in `package.json`.

### Manually

If the shell script does not work you can install the Pro version manually.
All you really need to do is adding the Pro fonts to the `rnvi-fonts/fontawesome6-pro` directory.

## Usage

Using the standard icons works just like the standard icons in this library.

```javascript
import { FontAwesome6Pro } from "@react-native-vector-icons/fontawesome6-pro";

const icon = <FontAwesome6Pro name="comments" />;
```

Something special about the FontAwesome6Pro class is that you can also pass props
to change the style of the icon:

```javascript
import { FontAwesome6Pro } from "@react-native-vector-icons/fontawesome6-pro";

const icon = <FontAwesome6Pro name="comments" iconStyle="solid" />;
const icon = <FontAwesome6Pro name="git" iconStyle="brand" />;
```

**Valid types**

| Type           | Description               |
| -------------- | ------------------------- |
| **brand**      | Uses the Brands font      |
| **solid**      | Uses the Solid font       |
| **light**      | Uses the Light font       |
| **thin**       | Uses the Thin font        |
| **duotone**    | Uses the Duotone font     |
| **sharpSolid** | Uses the Sharp Solid font |
| **sharpThin**  | Uses the Sharp Thin font  |
| **sharpLight** | Uses the Sharp Light font |
| **sharp**      | Uses the Sharp font       |

No specified type indicates Regular font.

### getImageSource

`getImageSource` works a little different due to its native backend and how the
font is separated into different files. An extra argument to specify the font
style is required.

Use this to select which style the generated image should have:

```javascript
import { FontAwesome6Pro } from "@react-native-vector-icons/fontawesome6-pro";

FontAwesome6Pro.getImageSource("solid", "comments", 30, "#000").then((source) =>
  this.setState({ image: source }),
);
```
npm package: @react-native-vector-icons/fontello
Description: Fontello font for react native vector icons
Author: Joel Arvidsson
Latest version: 13.0.0

# React Native Vector Icons - Fontello

React Native Vector Icons font package to support using custom fonts created with [Fontello](https://fontello.com)

See the [React Native Vector Icons README](../../README.md) for more details.

## Installation

```sh
npm install @react-native-vector-icons/fontello
```

## Usage

1. Add the config.json somewhere in your project to be imported
2. Add the ttf file into `rnvi-fonts/fontello`. You can customise this location as described in [react-native-vector-icons](../../README.md#custom-fonts)
3. Add this package to your project

```sh
pnpm install @react-native-vector-icons/fontello
```

4. Create the component in your project and use it

```js
import createIconSet from '@react-native-vector-icons/fontello';
import fontelloConfig from './config.json';
const Icon = createIconSet(fontelloConfig);

const icon = <Icon name="comments" />;
```

If you want to customise the font postscript name and filename you can pass extra arguments.

```js
import createIconSet from "@react-native-vector-icons/fontello";
import fontelloConfig from "./config.json";
const Icon = createIconSet(fontelloConfig, "Font Family", "FontFamily.ttf");
```

## Contributing

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

## License

MIT
npm package: @react-native-vector-icons/fontisto
Description: Fontisto font for react native vector icons
Author: Joel Arvidsson
Latest version: 13.0.0

# React Native Vector Icons - Fontisto

Fontisto font for React Native Vector Icons

See the [React Native Vector Icons README](../../README.md) for more details.

## Installation

```sh
npm install @react-native-vector-icons/fontisto
```

## Usage

```jsx
import { Fontisto } from '@react-native-vector-icons/fontisto';

// ...

<Fontisto name="house" color="#ff0000" size={20} />
```

## Versions

Prior to version 12, the version of this font package tracked the upstream version.

The table below tracks which font version is included in each package version.

| RNVI version | Upstream version |
| ------------ | ---------------- |
| &gt; 12.0.0 | 3.0.4 |

## Contributing

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

## License

MIT
npm package: @react-native-vector-icons/foundation
Description: Foundation font for react native vector icons
Author: Joel Arvidsson
Latest version: 13.0.0

# React Native Vector Icons - Foundation

Foundation font for React Native Vector Icons

See the [React Native Vector Icons README](../../README.md) for more details.

## Installation

```sh
npm install @react-native-vector-icons/foundation
```

## Usage

```jsx
import { Foundation } from '@react-native-vector-icons/foundation';

// ...

<Foundation name="house" color="#ff0000" size={20} />
```

## Versions

Prior to version 12, the version of this font package tracked the upstream version.

The table below tracks which font version is included in each package version.

| RNVI version | Upstream version |
| ------------ | ---------------- |
| &gt; 12.0.0 | 2.0.0 |

## Contributing

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

## License

MIT
npm package: @react-native-vector-icons/icomoon
Description: Icomoon font for react native vector icons
Author: Joel Arvidsson
Latest version: 13.0.0

# React Native Vector Icons - IcoMoon

React Native Vector Icons font package to support [IcoMoon fonts](https://icomoon.io/app)

See the [React Native Vector Icons README](../../README.md) for more details.

## Installation

```sh
npm install @react-native-vector-icons/icomoon
```

## Usage

1. Add the config.json somewhere in your project to be imported
1. Add the ttf file into `rnvi-fonts/icomoon`. You can customise this location as described in [react-native-vector-icons](../../README.md#custom-fonts)
1. Add this package to your project

```sh
npm install @react-native-vector-icons/icomoon
```

4. Create the component in your project and use it

```js
import createIconSet from '@react-native-vector-icons/icomoon';
import icoMoonConfig from './IcoMoon-Free.json';
const Icon = createIconSet(icoMoonConfig);

const icon = <Icon name="comments" />;
```

If you want to customise the font postscript name and filename you can pass extra arguments.

```js
import createIconSet from "@react-native-vector-icons/icomoon";
import icoMoonConfig from "./IcoMoon-Free.json";
const Icon = createIconSet(icoMoonConfig, "Font Family", "FontFamily.ttf");
```

## Contributing

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

## License

MIT
npm package: @react-native-vector-icons/ionicons
Description: Ionicons font for react native vector icons
Author: Joel Arvidsson
Latest version: 13.0.0

# React Native Vector Icons - Ionicons

Ionicons font for React Native Vector Icons

See the [React Native Vector Icons README](../../README.md) for more details.

## Installation

```sh
npm install @react-native-vector-icons/ionicons
```

## Usage

```jsx
import { Ionicons } from '@react-native-vector-icons/ionicons';

// ...

<Ionicons name="house" color="#ff0000" size={20} />
```

## Versions

Prior to version 12, the version of this font package tracked the upstream version.

The table below tracks which font version is included in each package version.

| RNVI version | Upstream version |
| ------------ | ---------------- |
| &gt; 12.0.0 | 7.4.0 |
| &gt; 12.0.1 | 8.0.8 |

## Contributing

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

## License

MIT
npm package: @react-native-vector-icons/lucide
Description: Lucide font for react native vector icons
Author: Joel Arvidsson
Latest version: 13.0.0

# React Native Vector Icons - Lucide

Lucide font for React Native Vector Icons

See the [React Native Vector Icons README](../../README.md) for more details.

## Installation

```sh
npm install @react-native-vector-icons/lucide
```

## Usage

```jsx
import { Lucide } from '@react-native-vector-icons/lucide';

// ...

<Lucide name="house" color="#ff0000" size={20} />
```

## Versions

Prior to version 12, the version of this font package tracked the upstream version.

The table below tracks which font version is included in each package version.

| RNVI version | Upstream version |
| ------------ | ---------------- |
| &gt; 12.0.0 | 0.473.0 |
| &gt; 12.0.1 | 0.525.0 |
| &gt; 12.4.1 | 0.576.0 |

## Contributing

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

## License

MIT
npm package: @react-native-vector-icons/material-design-icons
Description: Material Design Icons font for react native vector icons
Author: Joel Arvidsson
Latest version: 13.0.0

# React Native Vector Icons - Material Design Icons

Material Design Icons font for React Native Vector Icons

See the [React Native Vector Icons README](../../README.md) for more details.

## Installation

```sh
npm install @react-native-vector-icons/material-design-icons
```

## Usage

```jsx
import { MaterialDesignIcons } from '@react-native-vector-icons/material-design-icons';

// ...

<MaterialDesignIcons name="house" color="#ff0000" size={20} />
```

## Versions

Prior to version 12, the version of this font package tracked the upstream version.

The table below tracks which font version is included in each package version.

| RNVI version | Upstream version |
| ------------ | ---------------- |
| &gt; 12.0.0 | 7.4.47 |

## Contributing

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

## License

MIT
npm package: @react-native-vector-icons/material-icons
Description: Material Icons font for react native vector icons
Author: Joel Arvidsson
Latest version: 13.0.0

# React Native Vector Icons - Material Icons

Material Icons font for React Native Vector Icons

See the [React Native Vector Icons README](../../README.md) for more details.

## Installation

```sh
npm install @react-native-vector-icons/material-icons
```

## Usage

```jsx
import { MaterialIcons } from '@react-native-vector-icons/material-icons';

// ...

<MaterialIcons name="house" color="#ff0000" size={20} />
```

## Versions

Prior to version 12, the version of this font package tracked the upstream version.

The table below tracks which font version is included in each package version.

| RNVI version | Upstream version |
| ------------ | ---------------- |
| &gt; 12.0.0 | 0.0.1 |

## Contributing

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

## License

MIT
npm package: @react-native-vector-icons/octicons
Description: Octicons font for react native vector icons
Author: Joel Arvidsson
Latest version: 21.0.0

# React Native Vector Icons - Octicons

Octicons font for React Native Vector Icons

See the [React Native Vector Icons README](../../README.md) for more details.

## Installation

```sh
npm install @react-native-vector-icons/octicons
```

## Usage

```jsx
import { Octicons } from '@react-native-vector-icons/octicons';

// ...

<Octicons name="house" color="#ff0000" size={20} />
```

## Versions

Prior to version 12, the version of this font package tracked the upstream version.

The table below tracks which font version is included in each package version.

| RNVI version | Upstream version |
| ------------ | ---------------- |
| &gt; 12.0.0 | 19.15.0 |
| &gt; 12.0.1 | 19.15.3 |
| &gt; 20.4.1 | 19.22.0 |

## Contributing

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

## License

MIT
npm package: @react-native-vector-icons/simple-line-icons
Description: Simple Line Icons font for react native vector icons
Author: Joel Arvidsson
Latest version: 13.0.0

# React Native Vector Icons - Simple Line Icons

Simple Line Icons font for React Native Vector Icons

See the [React Native Vector Icons README](../../README.md) for more details.

## Installation

```sh
npm install @react-native-vector-icons/simple-line-icons
```

## Usage

```jsx
import { SimpleLineIcons } from '@react-native-vector-icons/simple-line-icons';

// ...

<SimpleLineIcons name="house" color="#ff0000" size={20} />
```

## Versions

Prior to version 12, the version of this font package tracked the upstream version.

The table below tracks which font version is included in each package version.

| RNVI version | Upstream version |
| ------------ | ---------------- |
| &gt; 12.0.0 | 2.5.5 |

## Contributing

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

## License

MIT
npm package: @react-native-vector-icons/zocial
Description: Zocial font for react native vector icons
Author: Joel Arvidsson
Latest version: 13.0.0

# React Native Vector Icons - Zocial

Zocial font for React Native Vector Icons

See the [React Native Vector Icons README](../../README.md) for more details.

## Installation

```sh
npm install @react-native-vector-icons/zocial
```

## Usage

```jsx
import { Zocial } from '@react-native-vector-icons/zocial';

// ...

<Zocial name="house" color="#ff0000" size={20} />
```

## Versions

Prior to version 12, the version of this font package tracked the upstream version.

The table below tracks which font version is included in each package version.

| RNVI version | Upstream version |
| ------------ | ---------------- |
| &gt; 12.0.0 | 1.1.1 |

## Contributing

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

## License

MIT
npm package: @react-native-vibe-code/dot
Description: A floating AI chat bubble for [React Native Vibe Code](https://www.reactnativevibecode.com) — vibe code your Expo app in real time.
Latest version: 0.0.2

# @react-native-vibe-code/dot

A floating AI chat bubble for [React Native Vibe Code](https://www.reactnativevibecode.com) — vibe code your Expo app in real time.

## What is this?

**Dot** is a drop-in React Native component that adds a draggable floating button to your app. Tap it to open a chat interface powered by Claude AI that can read and modify your project's code while you see changes live in Expo Go.

It's the same AI coding experience from [reactnativevibecode.com](https://www.reactnativevibecode.com), embedded directly in your running app.

## Install

```bash
npx expo install @react-native-vibe-code/dot
```

Peer dependencies (most Expo apps already have these):

```bash
npx expo install react-native-gesture-handler react-native-reanimated expo-image @ai-sdk/react lucide-react-native @react-native-async-storage/async-storage
```

## Usage

Wrap your root layout with `<Dot>`:

```tsx
import { Dot } from '@react-native-vibe-code/dot'
import { Stack } from 'expo-router'

export default function RootLayout() {
  return (
    <Dot
      projectId={process.env.EXPO_PUBLIC_PROJECT_ID!}
      apiBaseUrl="https://www.reactnativevibecode.com"
    >
      <Stack screenOptions={{ headerShown: false }} />
    </Dot>
  )
}
```

A floating button appears in the corner of your app. Drag it anywhere, tap to open the chat, and describe the changes you want — the AI modifies your code and you see updates live.

## Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `projectId` | `string` | Yes | Your project ID from reactnativevibecode.com |
| `apiBaseUrl` | `string` | Yes | API URL (e.g. `https://www.reactnativevibecode.com`) |
| `children` | `ReactNode` | Yes | Your app content |
| `buttonSize` | `number` | No | Floating button diameter (default: 50) |
| `buttonImage` | `ImageSource` | No | Custom button image (default: star icon) |

## How it works

1. You build your app on [reactnativevibecode.com](https://www.reactnativevibecode.com)
2. Your exported app includes `<Dot>` with your project ID
3. Open the app in Expo Go — the floating button appears
4. Tap the button, describe what you want to change
5. Claude AI modifies your code and the app updates live

## License

MIT
npm package: @react-native-web-charts/echarts
Description: ECharts html for react-native-web-charts
Author: ChuHingYee
Latest version: 1.1.2

# @react-native-web-charts/echarts

the echarts's html for react-native-web-charts

## Installation

```javascript
npm i @react-native-web-charts/echarts --save
```

## Customizing

if you need more Charts or Minimal, you can do that:

### First

clone the repository and modify /src/index.ts file.

### Second

[Run pnpm build --filter echarts and copy the chart.html in your project root](../webview/README.md)

## Meta

[LICENSE (MIT)](../../LICENSE)
npm package: @react-native-web-charts/webview
Description: the react-native component for react-native-web-charts
Author: ChuHingYee
Latest version: 2.0.3

English | [简体中文](https://github.com/ChuHingYee/react-native-web-charts/blob/master/packages/webview/README_zh-CN.md)

# @react-native-web-charts/webview

the charts react-native's component base on react-native-webview

## Installation

### First:

```javascript
npm i react-native-webview @react-native-web-charts/webview --save
```

### Second

#### Android

if you use xxx.html for charts,you need to copy that to android/app/src/main/assets

## Example

```javascript
import React, {useEffect, useState, useRef} from 'react';
import {RNWebChart} from '@react-native-web-charts/webview';
import {html} from '@react-native-web-charts/echarts';
import {WebView} from 'react-native-webview';
import type {WebViewMessageEvent} from 'react-native-webview';

const Example = () => {
  const ref = useRef<WebView | null>(null);
  const [isEmpty, setIsEmpty] = useState(false);
  const handleWebViewMessage = (ev: WebViewMessageEvent) => {
    console.log(ev);
  };
  const webviewOnLoad = () => {
    if (ref.current) {
      ref.current.injectJavaScript(`(function() {
        window.rnChart.chart.setOption({
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }
          ]
        });
        window.rnChart.chart.on('click', function (params) {
          window.rnChart.onClick(params);
        });
      })();`);
    }
  };
  useEffect(() => {
    setTimeout(() => {
      if (ref.current) {
        ref.current.injectJavaScript(`(function() {
          window.rnChart.chart.setOption({series: [
            {
              name: '销量',
              type: 'bar',
              data: [5, ${Math.random() * 50}, ${Math.random() * 50}, ${
          Math.random() * 50
        }, ${Math.random() * 50}, ${Math.random() * 50}]
            }
          ]})
        })();`);
        setTimeout(() => {
          setIsEmpty(true);
        }, 3000);
      }
    }, 3000);
  }, []);
  return (
    <RNWebChart
      containerStyle={{
        height: 300,
      }}
      ref={ref}
      isEmpty={isEmpty}
      emptyText="no data"
      onLoad={webviewOnLoad}
      onMessage={handleWebViewMessage}
      source={
        html:html
      }
    />
  );
};
export default Example;
```

## Options

[check out the API Reference](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md)

## Questions

if you meet some errors when has multiple chart,you can set opacity: 0.99 in webStyle

## Thanks

Thanks 
[react-native-webview](https://github.com/react-native-webview/react-native-webview)
[native-echarts](https://github.com/somonus/react-native-echarts)

## Meta

[LICENSE (MIT)](../../LICENSE)
npm package: @react-native-youtube-bridge/web
Description: Web implementation for react-native-youtube-bridge
Author: saseungmin
Latest version: 2.2.0

# React Native Youtube Bridge Web

> English | [한국어](./README-ko_kr.md)

A YouTube player library for external WebView implementation, designed to work seamlessly with [`react-native-youtube-bridge`](https://github.com/react-native-bridges/react-native-youtube-bridge) in React Native environments.

## Overview

This library is useful when you want to implement external WebView functionality through custom web pages for playing YouTube videos in React Native applications.

## Use Cases

In React Native environments, you can use YouTube iframe in WebView through two different approaches:

```tsx
function App() {
  return (
    <>
      {/* Method 1: Using inline HTML (default) */}
      <YoutubePlayer source={source} useInlineHtml />

      {/* Method 2: Using external WebView page */}
      <YoutubePlayer
        source={source}
        useInlineHtml={false}
        // Default: https://react-native-youtube-bridge.pages.dev
        webViewUrl="https://your-custom-player.com"
      />
    </>
  );
}
```

Currently, the default static site (https://react-native-youtube-bridge.pages.dev) is being used as the external WebView URL.

If you want to use your own custom player page, simply pass the URL to the `webViewUrl` property. You can easily build a React-based custom player page using `@react-native-youtube-bridge/web`.

## Installation

```bash
# npm
npm install @react-native-youtube-bridge/web

# pnpm
pnpm add @react-native-youtube-bridge/web

# yarn
yarn add @react-native-youtube-bridge/web

# bun
bun add @react-native-youtube-bridge/web
```

## Usage

```tsx
import { YoutubePlayer } from '@react-native-youtube-bridge/web';

function CustomPlayerPage() {
  return <YoutubePlayer />;
}

export default CustomPlayerPage;
```

## Contributing

Please refer to the [Contributing Guide](./CONTRIBUTING.md) for detailed information about how to contribute to this project and our development workflow.

## License

[MIT](./LICENSE)
npm package: @react-navigation/material-bottom-tabs
Description: Integration for bottom navigation component from react-native-paper
Latest version: 6.2.29

# `@react-navigation/material-bottom-tabs`

React Navigation integration for [bottom navigation](https://material.io/components/bottom-navigation) component from [`react-native-paper`](https://callstack.github.io/react-native-paper/bottom-navigation.html).

Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/material-bottom-tab-navigator/).
npm package: @react-nevka/eslint
Description: A shareable ESLint configuration which used in @react-nevka packages
Author: Mikhail Goloto
Latest version: 0.1.3

# @react-nevka/eslint

Shareable ESLint configuration for ```@react-nevka``` libraries

## Installation

1. Install this package as devDependency

```sh
# with Yarn
$ yarn add -D @react-nevka/eslint

# with npm
$ npm i -D @react-nevka/eslint

# with pnpm
$ pnpm add -D @react-nevka/eslint
```

2. Use ESLint config in your project

Create a `.eslintrc.js` file in project root with the following content:

```js
module.exports = {
  extends: ["@react-nevka/eslint"],
};
```
npm package: @react-nevka/eslint-config
Description: A shareable ESLint configuration which used in @react-nevka packages
Author: Mikhail Goloto
Latest version: 0.6.2

# @react-nevka/eslint

Shareable ESLint configuration for ```@react-nevka``` libraries

## Installation

1. Install this package as devDependency

```sh
# with Yarn
$ yarn add -D @react-nevka/eslint-config

# with npm
$ npm i -D @react-nevka/eslint-config

# with pnpm
$ pnpm add -D @react-nevka/eslint-config
```

2. Create ESLint configuration file in your project

Create a `.eslintrc.js` file in project root with the following content:

```js
module.exports = {
  root: true,	
  extends: ["@react-nevka/eslint-config"],
};
```
npm package: @react-next-calendar/dnd
Description: [Docs](https://newsiberian.github.io/react-next-calendar/?path=/docs/dnd-basic-usage--basic-usage)
Latest version: 1.0.2

### Drag and Drop plugin for React Next Calendar

[Docs](https://newsiberian.github.io/react-next-calendar/?path=/docs/dnd-basic-usage--basic-usage)

```jsx
import { Calendar } from '@react-next-calendar/core'
import useDragAndDrop from '@react-next-calendar/dnd'

import '@react-next-calendar/core/styles.css'
import '@react-next-calendar/dnd/styles.css'

function MyCalendar(props) {
  const [
    context,
    components,
    selectable,
    elementProps,
  ] = useDragAndDrop(props);

  /* ... */

  return (
    <Calendar
      {...props} 
      context={context}
      components={components}
      selectable={selectable}
      elementProps={elementProps}
    />
  )
}
```