open-index/open-npm huggingface dataset:
npm package: @react-native-payments/braintree
Description: React Native Payments add-on for processing payments with Braintree.
Author: Naoufal Kadhom
Latest version: 0.4.0

# react-native-payments-addon-braintree
<a href="https://github.com/naoufal/react-native-payments">React Native Payments</a> add-on for processing payments with Braintree.

## Installation
First, download the package:

```bash
$ yarn add react-native-payments-addon-braintree
```

Second, install the [React Native Payments CLI](https://www.npmjs.com/package/react-native-payments-cli):
```bash
$ yarn add react-native-payments-cli
```

Lastly, link the native dependencies with the React Native Payments CLI:
```bash
$ yarn react-native-payments-cli -- link braintree
```

_NOTE: `react-native-payments-cli` adds a Build Phase Script to your Xcode project that depends on <a href="https://github.com/Carthage/Carthage">Carthage</a>._

## Usage
In order to receive chargeable Braintree tokens as part of your `PaymentResponse`, you'll need to add some Braintree specific parameters to your `PaymentMethodData`.

Here's an example of a Braintree enabled Payment Method Data:

```diff
const METHOD_DATA = [{
  supportedMethods: ['apple-pay'],
  data: {
    merchantIdentifier: 'merchant.com.your-app.namespace',
    supportedNetworks: ['visa', 'mastercard', 'amex'],
    countryCode: 'US',
    currencyCode: 'USD',
+   paymentMethodTokenizationParameters: {
+     parameters: {
+       gateway: 'braintree',
+       'braintree:tokenizationKey': 'your_tokenization_key'
+     }
+   }
  }
}];
```

## Resources
- [Creating an Apple Pay Certificate](https://developers.braintreepayments.com/guides/apple-pay/configuration/ios/v4#apple-pay-certificate-request-and-provisioning)
- [Obtaining a Tokentization Key](https://developers.braintreepayments.com/guides/authorization/tokenization-key/ios/v4#obtaining-a-tokenization-key)
npm package: @react-native-payments/cli
Description: ## Installation First, install [Carthage](https://github.com/Carthage/Carthage) (if you don't already have it installed):
Author: Naoufal Kadhom
Latest version: 0.4.0

# react-native-payments-cli

## Installation
First, install [Carthage](https://github.com/Carthage/Carthage) (if you don't already have it installed):

```bash
$ brew install carthage
```

Second, install the package:

```bash
$ yarn add react-native-payments-cli
```

## Commands
### list
Outputs a list of installed add-ons that can be linked.

#### Example
```bash
$ react-native-payments-cli list
```
---

### link
Links an add-ons native dependencies to your project.

#### Example
```bash
$ react-native-payments-cli link stripe
```
npm package: @react-native-payments/stripe
Description: React Native Payments add-on for processing payments with Stripe.
Author: Naoufal Kadhom
Latest version: 0.4.0

# react-native-payments-addon-stripe
<a href="https://github.com/naoufal/react-native-payments">React Native Payments</a> add-on for processing payments with Stripe.

## Installation
First, download the package:

```bash
$ yarn add react-native-payments-addon-stripe
```

Second, install the [React Native Payments CLI](https://www.npmjs.com/package/react-native-payments-cli):
```bash
$ yarn add react-native-payments-cli
```

Lastly, link the native dependencies with the React Native Payments CLI:
```bash
$ yarn react-native-payments-cli -- link stripe
```

_NOTE: `react-native-payments-cli` adds a Build Phase Script to your Xcode project that depends on <a href="https://github.com/Carthage/Carthage">Carthage</a>._

## Usage
In order to receive chargeable Stripe tokens as part of your `PaymentResponse`, you'll need to add some Stripe specific parameters to your `PaymentMethodData`.

Here's an example of a Stripe enabled Payment Method Data:

```diff
const METHOD_DATA = [{
  supportedMethods: ['apple-pay'],
  data: {
    merchantIdentifier: 'merchant.com.your-app.namespace',
    supportedNetworks: ['visa', 'mastercard', 'amex'],
    countryCode: 'US',
    currencyCode: 'USD',
+   paymentMethodTokenizationParameters: {
+     parameters: {
+       gateway: 'stripe',
+       'stripe:publishableKey': 'your_publishable_key',
+       'stripe:version': '5.0.0' // Only required on Android
+     }
+   }
  }
}];
```

## Resources
- [Creating an Apple Pay Certificate](https://stripe.com/docs/apple-pay/apps#csr)
- [About Publishable Keys](https://stripe.com/docs/dashboard#api-keys)
npm package: @react-native-plugin/pack
Description: react-native-plugin/pack
Author: kafudev
Latest version: 0.1.5

# @react-native-plugin/pack

react-native-plugin/pack

## Installation

```sh
npm install @react-native-plugin/pack
```

## Usage

```js
import { multiply } from "@react-native-plugin/pack";

// ...

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

## 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-pure/async-storage-extra
Description: AsyncStorage扩展
Author: m860
Latest version: 2.0.4

# async-storage-extra

AsyncStorage扩展,所有AsyncStorage中的数据都可以同步进行读写,同时数据也会被持久化.可以监听每个key的变化

[![Build Status](https://travis-ci.org/react-native-pure/async-storage-extra.svg?branch=master)](https://travis-ci.org/react-native-pure/async-storage-extra)
[![Coverage Status](https://coveralls.io/repos/github/react-native-pure/async-storage-extra/badge.svg?branch=master)](https://coveralls.io/github/react-native-pure/async-storage-extra?branch=master)

## Install

```bash
$ npm i @react-native-pure/async-storage-extra --save
```

## Simple Usage

```
import Storage from "@react-native-pure/async-storage-extra

const User=new Storage("@user");

User.setItem("name","Mr");
User.setItem("age",10);
User.setItem("birthday",new Date());
User.setItem("other",{});

```

## 绑定Storage中的数据到Component

```
import * as React from "react"
import {View,Text} from "react-native"
import {storage} from "@react-native-pure/async-storage-extra

@storage(
    User.connect(["name","age"],([name,age])=>({name,age}))
)
class User extends React.Component{
    render(){
        return (
            <View>
                <Text>Name : {this.props.name}</Text>
                <Text>Age : {this.props.age}</Text>
            </View>
        );
    }
}

```

### Storage

默认情况下,在初始化Storage时会自动从AsyncStorage中恢复数据,数据恢复完成会触发`onPreload`事件.

PS:当使用setItem,multiSet设置的数据和存在的数据一样时(DeepEqual),将不会触发任何事件和写操作.

- `constructor` **(option:string|[StorageOption](#storageoption)={prefix:"@storage",preload:true})=>void**
- `getItem` **(key:string)=>any**
- `multiGet` **(keys:Array<string>)=>Array<[key,value]>**
- `search` **(pattern:RegExp)=>Array<[key,value]>**
- `setItem` **(key:string,value:any)=>void**
- `multiSet` **(keyValuePairs:Array<[key,value]>)=>void**
- `removeItem` **(key:string)=>void**
- `multiRemove` **(keys:Array<string>)=>void**
- `clear` **()=>void**
- `getAllKeys` **()=>Array<string>**
- `getKeys` **(pattern:RegExp)=>Array<string>**
- `addListener` **(key:string,callback:(value:any)=>void)=>Object**
- `once` **(key:string,callback:(value:any)=>void)=>Object**
- `removeAllListeners` **(key:string)=>void**
- `connect` **(keys:Array<string>,mapStateToProps:(Array)=>Object)=>void**
- `restore` **()=>void** 从AsyncStorage中恢复数据
- `release` **()=>void** 释放内存,Storage中的数据将不可用

### StorageOption

- `prefix` **string**
- `preload` **boolean**
- `onPreload` **(self:[Storage](#storage))=>void**
npm package: @react-native-pure/gallery
Description: 滑动查看图片/视频，支持缩放
Author: kk
Latest version: 1.5.4

# gallery

A pure JavaScript image and video gallery component for react-native apps with common gestures like pan, pinch and doubleTap, supporting both iOS and Android.
Support custom item.

[![Build Status](https://travis-ci.org/react-native-pure/gallery.svg?branch=master)](https://travis-ci.org/react-native-pure/gallery)
[![npm version](https://img.shields.io/npm/v/@react-native-pure/gallery.svg)](https://www.npmjs.com/package/@react-native-pure/gallery)
[![npm license](https://img.shields.io/npm/l/@react-native-pure/gallery.svg)](https://www.npmjs.com/package/@react-native-pure/gallery)
[![npm download](https://img.shields.io/npm/dm/@react-native-pure/gallery.svg)](https://www.npmjs.com/package/@react-native-pure/gallery)
[![npm download](https://img.shields.io/npm/dt/@react-native-pure/gallery.svg)](https://www.npmjs.com/package/@react-native-pure/gallery)


## Install

```bash
$ npm i @react-native-pure/gallery --save
```

## Documentaion

Quite easy to use:

```
import GalleryView from "@react-native-pure/gallery"
import {GalleryFileType} from '@react-native-pure/gallery/src/types'
class Galleray extends React.Component{

    data = [{
        url:'http://www.bz55.com/uploads/allimg/150122/139-150122145421.jpg',
        type:GalleryFileType.image
    }]
    render(){
        return (
             <GalleryViewer dataSource={this.data}/>
        );
    }
}

```


### GalleryProps

- `dataSource` **Array<[GalleryData](#gallerydata)>**
- `style?` **any**
- `initIndex?` *(Number** 初始显示第几张图
- `renderFooter?` **(index: Number) => React.ReactElement<any>** 自定义尾部
- `renderHeader?` **(index: Number) => React.ReactElement<any>** 自定义头部
- `renderItem?` **(data:GalleryData,index: Number) => React.ReactElement<any>** 内容页面渲染
- `renderIndicator?` **(data:GalleryData,index: Number) => React.ReactElement<any>** 是否显示加载动画
- `onChange?` **(index:number)=>void** 当内容切换时触发
- `maxScale?` **Number**最大缩放比例
- `minScale?` **(Number**最小缩放比例
- `onPress?` **(index: Number) =>void**单击
- `onDoubleClick?` **(index: Number) =>void** 双击
- `enableDoubleClickZoom?` **Boolean**是否支持双击，默认支持
- `onResponderGrant?` **((event,gestureState)=>void** 手势开始
- `onResponderMove?` **((event,gestureState)=>void** 手势移动
- `onResponderEnd?` **((event,gestureState)=>void** 手势结束


### GalleryData
- `url` **String** 图片/视频url地址
- `type` ** $Values<typeof [GalleryFileType](gallerygiletype)>** 数据源类型
- `coverImageUrl` **String** 视频封面图地址
- `disableZoom` **Boolean** 禁用缩放，默认false

### GalleryFileType
- `-1` other
- `0` 图片
- `1` 视频
npm package: @react-native-pure/sibling
Description: Sibling component
Author: m860
Latest version: 1.0.0

# sibling

在App中渲染兄弟组件

[![Build Status](https://travis-ci.org/react-native-pure/sibling.svg?branch=master)](https://travis-ci.org/react-native-pure/sibling)
[![Coverage Status](https://coveralls.io/repos/github/react-native-pure/sibling/badge.svg?branch=master)](https://coveralls.io/github/react-native-pure/sibling?branch=master)
[![npm version](https://img.shields.io/npm/v/@react-native-pure/sibling.svg)](https://www.npmjs.com/package/@react-native-pure/sibling)
[![npm license](https://img.shields.io/npm/l/@react-native-pure/sibling.svg)](https://www.npmjs.com/package/@react-native-pure/sibling)
[![npm download](https://img.shields.io/npm/dm/@react-native-pure/sibling.svg)](https://www.npmjs.com/package/@react-native-pure/sibling)
[![npm download](https://img.shields.io/npm/dt/@react-native-pure/sibling.svg)](https://www.npmjs.com/package/@react-native-pure/sibling)

## Install

```
$ npm i @react-native-pure/sibling
```

## Simple Usage

```
import Sibling from "@react-native-pure/sibling"

//添加
const remove=Sibling.append(
    <View>
        ...
    </View>
);

//删除
remove();

```
npm package: @react-native-pure/tag-selector
Description: React Native tag-selector
Author: m860
Latest version: 1.0.0

# tag-selector

tag选择器

## Install

```
$ npm i --save @react-native-pure/tag-selector
```

<!--begin react doc markdown-->
# TagSelector


Tag选择器

## props

- `value?` **Array** 
- `onChange?` **signature** 
- `style?` **any** 
- `renderTag` **signature** 
- `dataSource` **Array** 
- `keyExtractor` **signature** 


## Examples

```javascript
class Test extends React.Component{
    state={
        value:[],
        dataSource:[1,2,3]
    };

    render(){
        return (
            <TagSelector value={this.state.value}
                         renderTag={(value,index,selected)=>{
                             return <Text key={index} style={{color:selected?"red":"blue"}}>{value}</Text>
                         }}
                         onChange={(type,value)=>{
                             if(type==="select"){
                                 this.setState({
                                     value:[...this.state.value,value]
                                 })
                             }
                             if(type==="unselect"){
                                 this.setState({
                                     value:this.state.value.filter(f=>f!==value)
                                 });
                             }
                         }}
                         dataSource={this.state.dataSource}
                         keyExtractor={(value)=>value}/>
        );
    }
}
```

<!--end react doc markdown-->
npm package: @react-native-pure/toast
Description: Toast组件
Author: m860
Latest version: 2.1.0

# toast

A Toast component of pure javascript

[![Build Status](https://travis-ci.org/react-native-pure/toast.svg?branch=master)](https://travis-ci.org/react-native-pure/toast)
[![Coverage Status](https://coveralls.io/repos/github/react-native-pure/toast/badge.svg?branch=master)](https://coveralls.io/github/react-native-pure/toast?branch=master)
[![npm version](https://img.shields.io/npm/v/@react-native-pure/toast.svg)](https://www.npmjs.com/package/@react-native-pure/toast)
[![npm license](https://img.shields.io/npm/l/@react-native-pure/toast.svg)](https://www.npmjs.com/package/@react-native-pure/toast)
[![npm download](https://img.shields.io/npm/dm/@react-native-pure/toast.svg)](https://www.npmjs.com/package/@react-native-pure/toast)
[![npm download](https://img.shields.io/npm/dt/@react-native-pure/toast.svg)](https://www.npmjs.com/package/@react-native-pure/toast)

## Install

```
$ npm install --save @react-native-pure/toast
```

## Simple Usage

```
import Toast from "@react-native-pure/toast"

Toast.show({
    message:"hello toast!"
});

```

## Toast

- `show` **(option:[ToastOption](#toastoption))=>void**

### ToastOption

- `message` **any** 默认是字符串
- `renderMessage?` **(message:any,messageStyle:any)=>React.Node** 默认只能处理字符串的message
- `position?` **"top"|"center"|"bottom"**  默认是`top`
- `duration?` **number** 默认是2000
- `styles?`
    - `message` **any** 消息的样式
    - `container` **any** 容器的样式
- `hideOnPress?` **boolean** 点击是否隐藏,默认是`true`
- `animation?` **"none"|"fade"** 默认是`none`
- `onShow?` **Function** 有动画的时候才执行
- `onShown?` **Function** 动画执行完或者没有动画时执行
- `onHide?` **Function** 有动画的时候才执行
- `onHidden?` **Function** 动画执行完或者没有动画时执行
npm package: @react-native-rag/executorch
Description: React Native ExecuTorch wrapper for React Native RAG
Latest version: 0.8.0

# `@react-native-rag/executorch`

This package provides implementations for the `Embeddings` and `LLM` interfaces from `react-native-rag`, using `react-native-executorch` to run AI models on-device. This enables you to perform inference directly on the user's device, ensuring privacy and offline capabilities.

## Installation

```bash
npm install @react-native-rag/executorch react-native-executorch
```

You also need to install a resource fetcher for your setup (e.g. `react-native-executorch-expo-resource-fetcher` for Expo projects) and call `initExecutorch` in your app before using any ExecuTorch modules:

```typescript
import { initExecutorch } from 'react-native-executorch';
import { ExpoResourceFetcher } from 'react-native-executorch-expo-resource-fetcher';

initExecutorch({ resourceFetcher: ExpoResourceFetcher });
```

## Usage

### `ExecuTorchEmbeddings`

This class allows you to use an ExecuTorch-compatible model to generate text embeddings.

```typescript
import { ALL_MINILM_L6_V2, ALL_MINILM_L6_V2_TOKENIZER } from 'react-native-executorch';
import { ExecuTorchEmbeddings } from '@react-native-rag/executorch';

const embeddings = new ExecuTorchEmbeddings({
  modelSource: ALL_MINILM_L6_V2,
  tokenizerSource: ALL_MINILM_L6_V2_TOKENIZER,
});
```

### `ExecuTorchLLM`

This class allows you to use an ExecuTorch-compatible language model for text generation.

```typescript
import {
  LLAMA3_2_1B,
  LLAMA3_2_TOKENIZER,
  LLAMA3_2_TOKENIZER_CONFIG,
} from 'react-native-executorch';
import { ExecuTorchLLM } from '@react-native-rag/executorch';

const llm = new ExecuTorchLLM({
  modelSource: LLAMA3_2_1B,
  tokenizerSource: LLAMA3_2_TOKENIZER,
  tokenizerConfigSource: LLAMA3_2_TOKENIZER_CONFIG,
});
```

### Integration with `react-native-rag`

You can use these classes directly with the `useRAG` hook:

```typescript
import { useRAG } from 'react-native-rag';
import { ExecuTorchLLM, ExecuTorchEmbeddings } from '@react-native-rag/executorch';
import { MemoryVectorStore } from 'react-native-rag';

const App = () => {
  const { isReady, generate } = useRAG({
    llm,
    vectorStore: new MemoryVectorStore({ embeddings }),
  });

  // ... your component logic
};
```

## React Native RAG is created by Software Mansion

Since 2012 [Software Mansion](https://swmansion.com) is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – [Hire us](https://swmansion.com/contact/projects?utm_source=react-native-rag&utm_medium=readme).

[![swm](https://logo.swmansion.com/logo?color=white&variant=desktop&width=150&tag=react-native-rag-github 'Software Mansion')](https://swmansion.com)
npm package: @react-native-rag/op-sqlite
Description: OP-SQLite wrapper for React Native RAG
Latest version: 0.8.0

# `@react-native-rag/op-sqlite`

This package provides a `VectorStore` implementation that uses `op-sqlite` for persistent storage of vector embeddings in a React Native application. It's designed to be used with the `react-native-rag` library.

## Features

  * **Persistent Storage**: Your vector data is saved on the device, so it's available across app launches.
  * **Efficient Similarity Search**: Leverages the vector search capabilities of `op-sqlite` for fast and accurate retrieval.
  * **Seamless Integration**: Designed to work as a drop-in replacement for other `VectorStore` implementations in `react-native-rag`.

## Installation

First, install the necessary packages:

```bash
npm install @react-native-rag/op-sqlite @op-engineering/op-sqlite
```

You also need to follow the installation instructions for `@op-engineering/op-sqlite`.

## Configuration

To enable the required features for vector search, you must add the following configuration to your `package.json` file:

```json
"op-sqlite": {
  "libsql": true
}
```

This configuration ensures that the `libsql` extension is enabled for `op-sqlite`. Note that `libsql` already includes vector search capabilities, so `sqliteVec` is not needed.

## Usage

To use `OPSQLiteVectorStore`, you need to instantiate it with an `Embeddings` implementation. Here's how you can use it with the `useRAG` hook from `react-native-rag`:

```typescript
import { useRAG } from 'react-native-rag';
import { OPSQLiteVectorStore } from '@react-native-rag/op-sqlite';
import { YourLLM, YourEmbeddings } from './your-implementations'; // Provide your own LLM and Embeddings

const App = () => {
  const { isReady, generate, addDocument } = useRAG({
    llm: new YourLLM(),
    vectorStore: new OPSQLiteVectorStore({
      name: 'my-vector-db',
      embeddings: new YourEmbeddings(),
    }),
  });

  // ... your component logic
};
```

## React Native RAG is created by Software Mansion

Since 2012 [Software Mansion](https://swmansion.com) is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – [Hire us](https://swmansion.com/contact/projects?utm_source=react-native-rag&utm_medium=readme).

[![swm](https://logo.swmansion.com/logo?color=white&variant=desktop&width=150&tag=react-native-rag-github 'Software Mansion')](https://swmansion.com)
npm package: @react-native-replicache/deep-freeze
Description: ## Why is this needed?
Author: Braden Marshall
Latest version: 1.3.0

# Deep Freeze

## Why is this needed?

This package includes some snippets taken from Replicache's internals. It provides a mechanism for us to enforce immutability on the data that comes out of our Replicache store, by giving us stricter types along with some checks when in development mode. In production, it does nothing meaningful.
npm package: @react-native-replicache/react-native-expo-sqlite
Description: > Plug-in React Native compatibility bindings for [Replicache](https://replicache.dev/).
Author: Braden Marshall
Latest version: 1.3.1

# React Native Replicache

> Plug-in React Native compatibility bindings for [Replicache](https://replicache.dev/).

<https://user-images.githubusercontent.com/5165963/219898954-f5e94045-69bf-4c33-84e8-7d152c6f2c32.mov>

## Replicache version compatibility

- 1.0.0 : replicache <= 14.2.2
- 1.3.0 : replicache >= 15

## Why is this needed?

Replicache enables us to build applications that are performant, offline-capable and collaborative. By default, it uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) for client-side persistance. Unfortunately, this technology is not available in React Native and is only supported in web-browsers.

Thankfully, Replicache allows us to provide our own transactional data-store via [`kvStore`](https://doc.replicache.dev/api/interfaces/ReplicacheOptions#kvstoree). The goal of this project is to provide some implementations of such a store, along with some guidance in getting up and running with Replicache in React Native.

## What are the strategies?

React Native has relatively good support for SQLite - which provides the [strict serializable](https://jepsen.io/consistency/models/strict-serializable) transactions that we require.

Here we provide a store implementation backed by [`expo-sqlite`](https://docs.expo.dev/versions/latest/sdk/sqlite/). However, we also offer [more bindings here](https://github.com/Braden1996/react-native-replicache). Be sure to see what best fits your project!

### Any additional considerations?

Some configuration is required to receive [poke](https://doc.replicache.dev/byob/poke) events from the server. In our example, [seen here](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/use-replicache.ts), we use a polyfill for Server Sent Events. These aren't built into React Native, but are really handy for a demo.

You most likely want to use web-sockets for this. This is relatively trivial with Pusher/Ably etc and similar to the web-app so we won't discuss that further here.

## How can I install this?

1. Install the following in your React Native project:
   - `yarn add expo-crypto expo-sqlite @react-native-replicache/react-native-expo-sqlite`
2. Ensure that you've polyfilled `crypto.getRandomValues` on the global namespace.
   - See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/crypto-polyfill.ts).
3. Pass in `createReplicacheExpoSQLiteKVStore` to Replicache's `kvStore` option.
   - See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/use-replicache.ts).
npm package: @react-native-replicache/react-native-op-sqlite
Description: > Plug-in React Native compatibility bindings for [Replicache](https://replicache.dev/).
Author: Braden Marshall
Latest version: 1.3.1

# React Native Replicache

> Plug-in React Native compatibility bindings for [Replicache](https://replicache.dev/).

<https://user-images.githubusercontent.com/5165963/219898954-f5e94045-69bf-4c33-84e8-7d152c6f2c32.mov>

## Replicache version compatibility

- 1.0.0 : replicache <= 14.2.2
- 1.3.0 : replicache >= 15

## Why is this needed?

Replicache enables us to build applications that are performant, offline-capable and collaborative. By default, it uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) for client-side persistance. Unfortunately, this technology is not available in React Native and is only supported in web-browsers.

Thankfully, Replicache allows us to provide our own transactional data-store via [`kvStore`](https://doc.replicache.dev/api/interfaces/ReplicacheOptions#kvstoree). The goal of this project is to provide some implementations of such a store, along with some guidance in getting up and running with Replicache in React Native.

## What are the strategies?

React Native has relatively good support for SQLite - which provides the [strict serializable](https://jepsen.io/consistency/models/strict-serializable) transactions that we require.

Here we provide a store implementation backed by [`op-sqlite`](https://github.com/OP-Engineering/op-sqlite). However, we also offer [more bindings here](https://github.com/Braden1996/react-native-replicache). Be sure to see what best fits your project!

### Any additional considerations?

Some configuration is required to receive [poke](https://doc.replicache.dev/byob/poke) events from the server. In our example, [seen here](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/use-replicache.ts), we use a polyfill for Server Sent Events. These aren't built into React Native, but are really handy for a demo.

You most likely want to use web-sockets for this. This is relatively trivial with Pusher/Ably etc and similar to the web-app so we won't discuss that further here.

## How can I install this?

1. Install the following in your React Native project:
   - `yarn add expo-crypto @op-engineering/op-sqlite @react-native-replicache/react-native-op-sqlite`
2. Ensure that you've polyfilled `crypto.getRandomValues` on the global namespace.
   - See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/crypto-polyfill.ts).
3. Pass in `createReplicacheOPSQLiteKVStore` to Replicache's `kvStore` option.
   - See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/use-replicache.ts).
npm package: @react-native-replicache/replicache-generic-sqlite
Description: > Plug-in React Native compatibility bindings for [Replicache](https://replicache.dev/).
Author: Braden Marshall
Latest version: 1.3.0

# React Native Replicache - Generic SQLite

> Plug-in React Native compatibility bindings for [Replicache](https://replicache.dev/).

<https://user-images.githubusercontent.com/5165963/219898954-f5e94045-69bf-4c33-84e8-7d152c6f2c32.mov>

## Replicache version compatibility

- 1.0.0 : replicache <= 14.2.2
- 1.3.0 : replicache >= 15

## Why is this needed?

This package provides a generic SQLite implementation of [`kvStore`](https://doc.replicache.dev/api/interfaces/ReplicacheOptions#kvstoree) that is agnostic of the underlying SQLite binding. This abstraction enables us to easily support multiple SQLite bindings. It isn't coupled to React Native either, so could work on other platforms - but that remains to be explored.
npm package: @react-native-school/expo-template
Description: A simple Expo template with navigation, testing, and linting setup.
Author: Spencer Carli
Latest version: 1.1.0

# React Native School Expo Template

A simple Expo template with the following features:

- Eslint & Prettier configured
- React Navigation v6
- Testing Configured
- Simple project structure
- Small component library to get started with

It's easy to create a project, strip out the few components included, and still have the architecture in place to quickly start building an app.

## Usage

> Be sure to have the [Expo CLI](https://docs.expo.io/workflow/expo-cli/) installed.

```bash
expo init --template @react-native-school/expo-template
```

- Run on iOS: `yarn ios` or `npm run ios`
- Run on Android: `yarn android` or `npm run android`
- Run on Web: `yarn web` or `npm run web`
- Run Tests: `yarn test` or `npm run test`
- Lint Code: `yarn lint` or `npm run lint`
- Format Code: `yarn format` or `npm run format`

## Screenshots

List Screen
![List Screen](./assets/screenshots/list.png)

Text Screen
![Text Screen](./assets/screenshots/text.png)

Form Screen
![Form Screen](./assets/screenshots/form.png)

Button Screen
![Button Screen](./assets/screenshots/button.png)
npm package: @react-native-school/expo-typescript-template
Description: A simple Expo template with navigation, testing, and linting setup.
Author: Spencer Carli
Latest version: 1.1.0

# React Native School TypeScript Expo Template

A simple Expo template with the following features:

- All TypeScript
- Eslint & Prettier configured
- React Navigation v6
- Testing Configured
- Simple project structure
- Small component library to get started with

It's easy to create a project, strip out the few components included, and still have the architecture in place to quickly start building an app.

## Usage

> Be sure to have the [Expo CLI](https://docs.expo.io/workflow/expo-cli/) installed.

```bash
expo init --template @react-native-school/expo-typescript-template
```

- Run on iOS: `yarn ios` or `npm run ios`
- Run on Android: `yarn android` or `npm run android`
- Run on Web: `yarn web` or `npm run web`
- Compile TypeScript: `yarn tsc`
- Run Tests: `yarn test` or `npm run test`
- Lint Code: `yarn lint` or `npm run lint`
- Format Code: `yarn format` or `npm run format`

## Screenshots

List Screen
![List Screen](./assets/screenshots/list.png)

Text Screen
![Text Screen](./assets/screenshots/text.png)

Form Screen
![Form Screen](./assets/screenshots/form.png)

Button Screen
![Button Screen](./assets/screenshots/button.png)
npm package: @react-native-school/react-native-template
Description: A simple React Native template with testing, navigation, and code formatting setup.
Author: Spencer Carli
Latest version: 1.2.0

# React Native School React Native Template

A simple React Native template with the following features:

- Eslint & Prettier configured
- React Navigation v6
- Testing Configured
- Simple project structure
- Small component library to get started with

It's easy to create a project, strip out the few components included, and still have the architecture in place to quickly start building an app.

## Installation

> Be sure to have the [React Native CLI](https://reactnative.dev/docs/environment-setup) installed.

```bash
npx react-native init AppName --template @react-native-school/react-native-template
```

## Usage

- Run on iOS: `yarn ios` or `npm run ios`
- Run on Android: `yarn android` or `npm run android`
- Run Tests: `yarn test` or `npm run test`
- Lint Code: `yarn lint` or `npm run lint`
- Format Code: `yarn format` or `npm run format`

## Screenshots

List Screen
![List Screen](./screenshots/list.png)

Text Screen
![Text Screen](./screenshots/text.png)

Form Screen
![Form Screen](./screenshots/form.png)

Button Screen
![Button Screen](./screenshots/button.png)
npm package: @react-native-school/react-native-typescript-template
Description: A simple React Native template with testing, navigation, and code formatting setup. Written in TypeScript.
Author: Spencer Carli
Latest version: 1.1.0

# React Native School React Native TypeScript Template

A simple React Native template with the following features:

- All TypeScript
- Eslint & Prettier configured
- React Navigation v6
- Testing Configured
- Simple project structure
- Small component library to get started with

It's easy to create a project, strip out the few components included, and still have the architecture in place to quickly start building an app.

## Installation

> Be sure to have the [React Native CLI](https://reactnative.dev/docs/environment-setup) installed.

```bash
npx react-native init AppName --template @react-native-school/react-native-typescript-template
```

## Usage

- Run on iOS: `yarn ios` or `npm run ios`
- Run on Android: `yarn android` or `npm run android`
- Compile TypeScript: `yarn tsc`
- Run Tests: `yarn test` or `npm run test`
- Lint Code: `yarn lint` or `npm run lint`
- Format Code: `yarn format` or `npm run format`

## Screenshots

List Screen
![List Screen](./screenshots/list.png)

Text Screen
![Text Screen](./screenshots/text.png)

Form Screen
![Form Screen](./screenshots/form.png)

Button Screen
![Button Screen](./screenshots/button.png)
npm package: @react-native-social-share/core
Description: TODO
Author: Tuan Luong
Latest version: 1.1.2

# @react-native-social-share/core

## Getting started

`$ npm install @react-native-social-share/core --save`

### Mostly automatic installation

`$ react-native link react-native-core`

## Share via Facebook
** Require: [react-native-fbsdk](https://github.com/facebook/react-native-fbsdk)

## Share via Twitter
** Require: [@react-native-social-share/twitter](https://github.com/r0b0t3d/react-native-social-share/tree/master/packages/twitter)

## Share via Instagram
** Require: [@react-native-social-share/instagram](https://github.com/r0b0t3d/react-native-social-share/tree/master/packages/instagram)

## Usage
```javascript
import RNSocialShare from '@react-native-social-share/core';

RNSocialShare.shareLink("facebook", options);
```

## Methods
1. `shareLink(provider, options)`
- provider: 'facebook' | 'twitter';
- options:
	+ link: string link to share
	+ description: string (optional)
	+ hashtag: string (optional) (Facebook and Twitter)
	+ peopleIds: string[] (optional) (Facebook only) people ids to tag

```
const options = {
	link: "https://github.com/r0b0t3d/react-native-social-share",
	description: "React Native Social Share",
	peopleIds: "",
	hashtag: "#sharelink",
};
RNSocialShare.shareLink("facebook", options);
```
Note: Instagram do not support share link

2. `sharePhoto(provider, options)`
3. `shareVideo(provider, options)`
- provider: 'facebook' | 'twitter' | 'instagram';
- options:
	+ localFile: string local file to share (required for Twitter sharing)
	+ assetId: string assetId after saving to camera roll (required for Facebook & Instagram)
	+ hashtag: string (optional) (Facebook and Twitter)
	+ peopleIds: string[] (optional) (Facebook only) people ids to tag
```
import CameraRoll from '@react-native-community/

const localFile = "path/to/local/file";
const assetId = CameraRoll.save(localFile, { type: 'photo' });
const options = {
	localFile,
	assetId,
	peopleIds: "",
	hashtag: "#sharefile",
};
RNSocialShare.sharePhoto("facebook", options);
RNSocialShare.shareVideo("facebook", options);
```

Notes: `Facebook` and `Instagram` app must be installed

Twitter video limitation: https://github.com/twitter-archive/twitter-kit-ios/wiki/Compose-Tweets#video-requirements
npm package: @react-native-social-share/instagram
Description: TODO
Author: Tuan Luong
Latest version: 1.1.1

# react-native-instagram

## Getting started

`$ npm install @react-native-social-share/instagram --save`

or

`$ yarn add @react-native-social-share/instagram`


## For react-native < 0.60
### Mostly automatic installation

`$ react-native link @react-native-social-share/instagram`

## Setup
### iOS
**Custom URL Scheme**
In order for your app to use Instagram's custom URL scheme, you mush whitelist the scheme by adding instagram:// to the LSApplicationQueriesSchemes key in your app's Info.plist.

https://developers.facebook.com/docs/instagram/sharing-to-feed/

## Usage
Instagram allows share files that are stored in library. So if you have an local file, you can first save it to library via `CameraRoll`
```javascript
import CameraRoll from '@react-native-community/cameraroll';
import InstagramShare from '@react-native-social-share/instagram';

const localFile = "";
const assetId = CameraRoll.save(localFile, { type: 'photo' });

InstagramShare.shareVideo({ assetId });
InstagramShare.sharePhoto({ assetId });
```
npm package: @react-native-social-share/utils
Description: TODO
Author: Tuan Luong
Latest version: 1.0.12

# react-native-utils

## Getting started

`$ npm install @react-native-social-share/utils --save`

### Mostly automatic installation

`$ react-native link @react-native-social-share/utils`

## Usage
```javascript
import Utils from 'react-native-utils';

// Check whether app installed or not
Utils.isAppInstalled(appIdentifier);

// [Android only] Get uri for local path
Utils.uriForFile(filePath);


```
npm package: @react-native-solutions/gyro-handler
Description: Gyroscope handler which can work with reanimated events
Author: wannameows
Latest version: 0.1.5

# @react-native-solutions/gyro-handler

Gyroscope handler which can work with reanimated events

## Installation

```sh
npm install @react-native-solutions/gyro-handler
```

or

```sh
yarn add @react-native-solutions/gyro-handler
```

## Usage

```js
import { GyroHandler, REAGyroHandler } from "@react-native-solutions/gyro-handler";

// ...

```

## License

MIT
npm package: @react-native-speak/google
Description: Google TTS provider module for react-native-speak
Author: Eric Lewis
Latest version: 1.0.4

# `Google`

A GoogleTTS Speech Provider

## Usage

```javascript
import { GoogleProvider } from '@react-native-speak/google';

const google = new GoogleProvider('SUPERSECRET');

const speech = new Speech([google]);
speech.speak('Hello');
```
npm package: @react-native-speak/polly
Description: Amazon Polly provider module for react-native-speak
Author: Eric Lewis
Latest version: 1.0.3

# `Polly`

An AWS Polly Speech Provider

## Usage

```javascript
import { PollyProvider } from '@react-native-speak/polly';

const polly = new PollyProvider({
  signatureVersion: 'v4',
  region: 'us-east-1',
  accessKeyId: 'ACCESSKEYID',
  secretAccessKey: 'SUPERSECRETSAUCE',
});

const speech = new Speech([polly]);
speech.speak('Hello');
```
npm package: @react-native-team/react-native-screen-tool
Description: ## Getting started
Author: react-native-team
Latest version: 0.0.0
Deprecated: error


# react-native-screen-tool

## Getting started

`$ npm install react-native-screen-tool --save`

### Mostly automatic installation

`$ react-native link react-native-screen-tool`

### Manual installation


#### iOS

1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ `react-native-screen-tool` and add `RNScreenTool.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNScreenTool.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)<

#### Android

1. Open up `android/app/src/main/java/[...]/MainActivity.java`
  - Add `import com.bybon.ScreenTool.RNScreenToolPackage;` to the imports at the top of the file
  - Add `new RNScreenToolPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
  	```
  	include ':react-native-screen-tool'
  	project(':react-native-screen-tool').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-screen-tool/android')
  	```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
  	```
      compile project(':react-native-screen-tool')
  	```


## Usage
```javascript
import RNScreenTool from 'react-native-screen-tool';
import {NativeModules} from 'react-native';

this.listenerScreen = new NativeEventEmitter(NativeModules.RNTEventEmitter);
RNScreenTool.startListeningScreenshot()
this.listenerScreen.addListener('UserDidTakeScreenshot', (e) => {
  //user did take screenshot
  
  //Add text on the screenshot
  RNScreenTool.setImageText('text')
})

RNScreenTool.startMonitoringScreenRecording()
this.listenerScreen.addListener('ScreenCapturedDidChange', (e) => {
  if (e == 1) {
  //screen is being captured 
  } else {
  //screen is not being captured
  }
})
```