open-index/open-npm huggingface dataset:
npm package: @react-native-community/react-native-translucent-modal
Description: A library for React Native Translucent Modal On Android
Author: open@23mofang.com
Latest version: 1.1.0

# react-native-translucent-modal
A library for React Native Translucent Modal On Android

Chinese introduction：
[中文文档介绍](/README-zh-rCN.md)

### Background
The `Modal` component provided by `react-native` does not extend to the status bar when displayed on Android. Why? This is related to the native implementation of Android. The `Modal` component corresponds to Android native implementation with `Dialog`, because the dialog itself does not extend to the status bar. How can I make `Modal` appear on Android like on an iOS device? This is what the library provides. It's very simple to use, just one line of code.

### Effect comparison

Before using `react-native-translucent-modal`：

`splash`:

<img src="/screen-shot/screenshot-before.jpg" width = "50%" height = "70%" alt="before1" align=center />

>

`Pop：`

<img src="/screen-shot/screenshot-pop-before.jpg" width = "50%" height = "70%" alt="before1" align=center />

>

After using `react-native-translucent-modal`：

`splash`:

<img src="/screen-shot/screenshot-after.jpg" width = "50%" height = "70%" alt="after1" align=center />

>
`Pop`:

<img src="/screen-shot/screenshot-pop-after.jpg" width = "50%" height = "70%" alt="after1" align=center />

### Setup

1、Use npm

```
$ npm install react-native-translucent-modal --save
```

Or use yarn

```
$ yarn add react-native-translucent-modal
```

2、then link

```
$ react-native link react-native-translucent-modal
```

### Usage

The use of `react-native-translucent-modal` is exactly the same as that of the react-native providing `Modal`. Their properties and methods are exactly the same. You only need to change the import of `Modal`, the other is completely Don't change

```
import { Modal } from "react-native";
```

change to

```
import Modal from 'react-native-translucent-modal';
```

Ok, just change this line of code, your `Modal` can now be extended to the status bar.

On iOS devices, the `Modal` component provided by react native is still used., you can view the `MFTranslucentModal.ios.js` file for detail.


### Thanks 

thanks [react-native-modal-translucent](https://github.com/listenzz/react-native-modal-translucent) library for providing ideas
npm package: @react-native-community/template
Description: The template used by `npx @react-native-community/cli init` to bootstrap a React Native application.
Latest version: 0.85.0

# React Native Community Template

The template used by `npx @react-native-community/cli init` to bootstrap a React Native application.

[![Build Status][build-badge]][build] [![Version][version-badge]][package] [![MIT License][license-badge]][license] [![PRs Welcome][prs-welcome-badge]][prs-welcome]

# Create Latest CLI Project

Using this command create latest react-native project with this template

```
npx @react-native-community/cli@latest init TestApp
```

# Create Specific Version React-Native CLI Project

Add version flag and specify that existing version of react-native to create project.
Note that this command will create a new project from the template using the specific version passed to the flag

    npx @react-native-community/cli init TestApp --version <VERSION>

Replace `<VERSION>` with the version number you need. For example: 0.75.2.

## Contents

- [About](#about)
- [License](#license)

## About

This repository contains the template used by the React Native Community's Command Line Tool (or CLI) to bootstrap a React Native project.

## License

Everything inside this repository is [MIT licensed](./LICENSE).

<!-- badges -->

[build-badge]: https://img.shields.io/github/actions/workflow/status/react-native-community/template/tests.yaml?branch=main&style=flat-square
[build]: https://github.com/react-native-community/template/actions/workflows/tests.yaml
[version-badge]: https://img.shields.io/npm/v/@react-native-community/template.svg?style=flat-square
[package]: https://www.npmjs.com/package/@react-native-community/template
[license-badge]: https://img.shields.io/npm/l/@react-native-community/template.svg?style=flat-square
[license]: https://opensource.org/licenses/MIT
[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs-welcome]: http://makeapullrequest.com
npm package: @react-native-component/react-native-smart-timer-enhance
Description:  A TimerEnhance for React Native app (es6) which replaced TimerMixin (es5) provides timer functions for executing code in the future that are safely cleaned up when the component unmounts
Author: HISAME SHIZUMARU
Latest version: 1.0.2

# react-native-smart-timer-enhance
A TimerEnhance for React Native app (es6) which replaced TimerMixin (es5) provides timer functions for executing code in the future that are safely cleaned up when the component unmounts

Inspired by [react-timer-mixin][0]

## Installation

```
npm install react-native-smart-timer-enhance --save
```

## Full Demo

see [ReactNativeComponentDemos][1]

## Usage

Install the TimerEnhance from npm with `npm install react-native-smart-timer-enhance --save`.
Then, require it from your app's JavaScript files with `import TimerEnhance from 'react-native-smart-timer-enhance'`.

```js
import React, {
    Component,
} from 'react'

import TimerEnhance from 'react-native-smart-timer-enhance'

class TimerEnhanceDemo extends Component {

    componentDidMount() {
        this.setTimeout(() => {
            console.log('setTimeout do not leak!');
        }, 3000);
        this.setInterval( () => {
            console.log('setInterval do not leak!');
        }, 1000)
        this.requestAnimationFrame(this._raf)
    }

    render() {
        return null
    }

    _raf = (...p) => {
        console.log('requestAnimationFrame do not leak!');
        this.requestAnimationFrame(this._raf)
    }
}

export default TimerEnhance(TimerEnhanceDemo)
```

[0]: https://github.com/reactjs/react-timer-mixin
[1]: https://github.com/cyqresig/ReactNativeComponentDemos
npm package: @react-native-cryptocurrencies/react-native-pbkdf2
Description: A Password Based Key Derivation 2 (PBKDF2) algorithm for React Native
Author: Daniel Torres
Latest version: 0.1.3

# React Native PBKDF2
> A Password Based Key Derivation 2 (PBKDF2) algorithm for React Native

[![MIT License](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://tldrlegal.com/license/mit-license)

PBKDF2 (Password-Based Key Derivation Function 2) are key derivation functions with a sliding computational cost, aimed to reduce the vulnerability of encrypted keys to brute force attacks.

PBKDF2 applies a pseudorandom function, such as hash-based message authentication code (HMAC), to the input password or passphrase along with a salt value and repeats the process many times to produce a derived key, which can then be used as a cryptographic key in subsequent operations. The added computational work makes password cracking much more difficult, and is known as key stretching.

## Motivation
The motivation for create this _lib_ is to make a isolated and native way to use PBKDF2 algorithm in React Native. Because it's more simple to usage and maintain. The existent _libs_ today or are not using native code or don't keep a semantic, isolated and clean usage.

The _lib_ [PublicaIO/react-native-pbkdf2](https://github.com/PublicaIO/react-native-pbkdf2), for example, not use the native code and the [react-native-aes](https://github.com/tectiv3/react-native-aes) contain some other methods

> This _lib_ is totally based on [react-native-aes](https://github.com/tectiv3/react-native-aes), but with some improvements like `iteration` param suppport.

## Getting started

`$ yarn add https://github.com/quan-to/react-native-pbkdf2`

### Linking

`$ react-native link react-native-pbkdf2`

### 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-pbkdf2` and add `RNPBKDF2.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRCTPBKDF2.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 rnpbkdf2.PBKDF2Package;` to the imports at the top of the file
  - Add `new PBKDF2Package()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
  	```
  	include ':react-native-pbkdf2'
  	project(':react-native-pbkdf2').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-pbkdf2/android')
  	```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
  	```
      compile project(':react-native-pbkdf2')
  	```


## Usage
```javascript
import PBKDF2 from 'react-native-pbkdf2'

PBKDF2.derivationKey('P4S5W0RD', '032145', 10000)
  .then((derivationKey) => console.log(derivationKey))
  .catch(...)
```
npm package: @react-native-cryptocurrencies/react-native-rncryptor
Description: React Native RNCryptor
Author: richfisher
Latest version: 1.0.1

# React Native RNCryptor
It's an easy-to-use library for encrypting data with AES 256 in React Native. [RNCryptor](http://rncryptor.github.io/JNCryptor/javadoc/) developed popular and easy-to-use AES libs, implementations are available in
[C++](https://github.com/RNCryptor/RNCryptor-cpp),
[C#](https://github.com/RNCryptor/RNCryptor-cs),
[Java](https://github.com/RNCryptor/JNCryptor),
[PHP](https://github.com/RNCryptor/RNCryptor-php),
[Python](https://github.com/RNCryptor/RNCryptor-python),
[Javascript](https://github.com/RNCryptor/rncryptor-js),
and [Ruby](https://github.com/RNCryptor/ruby_rncryptor).

## Getting started

`$ npm install react-native-rncryptor --save`

`$ react-native link react-native-rncryptor`

## Usage
```javascript
import RNCryptor from 'react-native-rncryptor';

RNCryptor.encrypt('a text', 'password').then((encryptedbase64)=>{
  console.log(encryptedbase64)
}).catch((error)=>{
  console.log(error)
})

RNCryptor.decrypt('encrypted base64', 'password').then((plaintext)=>{
  console.log(plaintext)
}).catch((error)=>{
  console.log(error)
})
```

## License
MIT
npm package: @react-native-device-utils/connectivity
Description: ## Permissions
Author: Sara Federico
Latest version: 0.1.21

# @react-native-device-utils/connectivity

## Permissions

The following permissions should be added to AndroidManifest:

- `ACCESS_COARSE_LOCATION`
- `ACCESS_NETWORK_STATE`
- `ACCESS_WIFI_STATE`
- `READ_PHONE_STATE`

## Known Issues

- [iOS Simulator](http://openradar.appspot.com/14585459): doesn't receive network changes when the host machine disconnects then reconnects to wifi
npm package: @react-native-documents/picker
Description: A react native interface to access documents from dropbox, google drive, iCloud...
Author: Vojtech Novak
Latest version: 12.0.1

# @react-native-documents/picker

[![npm version](https://badge.fury.io/js/@react-native-documents%2Fpicker.svg)](https://badge.fury.io/js/@react-native-documents%2Fpicker)
[![npm downloads](https://img.shields.io/npm/dm/@react-native-documents/picker.svg)](https://www.npmjs.com/package/@react-native-documents/picker)

A React Native interface to access documents from the device or cloud storage such as iCloud, Google Drive, and other document providers.

## Documentation

For installation instructions, API reference, and usage examples, visit the official documentation:

**[https://react-native-documents.github.io/](https://react-native-documents.github.io/)**

## Support the Project

Find this package useful? Say thanks by [sponsoring the author on GitHub](https://github.com/sponsors/vonovak)!

## License

MIT
npm package: @react-native-documents/viewer
Description: A react native interface to preview documents
Author: Vojtech Novak
Latest version: 4.0.0

# @react-native-documents/viewer

[![npm version](https://badge.fury.io/js/@react-native-documents%2Fviewer.svg)](https://badge.fury.io/js/@react-native-documents%2Fviewer)
[![npm downloads](https://img.shields.io/npm/dm/@react-native-documents/viewer.svg)](https://www.npmjs.com/package/@react-native-documents/viewer)

A React Native interface to preview documents using native viewers (QuickLook on iOS, Intent on Android).

## Documentation

For installation instructions, API reference, and usage examples, visit the official documentation:

**[https://react-native-documents.github.io/](https://react-native-documents.github.io/)**

## Support the Project

Find this package useful? Say thanks by [sponsoring the author on GitHub](https://github.com/sponsors/vonovak)!

## License

MIT
npm package: @react-native-esbuild/cli
Description: cli tool for @react-native-esbuild
Author: leegeunhyeok
Latest version: 0.1.0-beta.12

# `@react-native-esbuild/cli`

> CLI tool for @react-native-esbuild

[README](https://github.com/leegeunhyeok/react-native-esbuild)
npm package: @react-native-esbuild/core
Description: core of @react-native-esbuild
Author: leegeunhyeok
Latest version: 0.1.0-beta.12

# `@react-native-esbuild/core`

> Core of @react-native-esbuild

## Usage

```ts
import { ReactNativeEsbuildBundler } from '@react-native-esbuild/core';

// Must be called first
ReactNativeEsbuildBundler.bootstrap();

const bundler = new ReactNativeEsbuildBundler();

bundler
  .addPlugin(/* call ReactNativeEsbuildPluginCreator */)
  .addPlugin(/* call ReactNativeEsbuildPluginCreator */)
  .addPlugin(/* call ReactNativeEsbuildPluginCreator */);

// initialize bundler
await bundler.initialize();

// using `esbuild.build()` (write output to file system)
await bundler.bundle(bundleOptions);

// using `esbuild.context()` (in-memory output for dev-server)
await bundler.getBundleResult(bundleOptions);
```
npm package: @react-native-esbuild/dev-server
Description: development server for @react-native-esbuild
Author: leegeunhyeok
Latest version: 0.1.0-alpha.43

# `@react-native-esbuild/dev-server`

> Development server for @react-native-esbuild

## Usage

```ts
import {
  ReactNativeAppServer,
  ReactNativeWebServer,
} from '@react-native-esbuild/dev-server';

const serveOptions = {
  port: '8081',
  host: 'localhost',
};

// For Native (Android, iOS)
const server = await new ReactNativeAppServer(
  serveOptions,
).initialize((bundler) => {
  bundler
    .registerPlugin(/* plugin */)
    .registerPlugin(/* plugin */)
    .registerPlugin(/* plugin */);
});

// For Web
const server = await new ReactNativeWebServer(
  serveOptions,
  bundleOptions,
).initialize((bundler) => {
  bundler
    .registerPlugin(createSvgTransformPlugin())
    .registerPlugin(createReactNativeRuntimeTransformPlugin())
    .registerPlugin(createReactNativeWebPlugin());
});

server.listen(() => console.log('listening!'));
```
npm package: @react-native-esbuild/hmr
Description: HMR implementation for @react-native-esbuild
Author: leegeunhyeok
Latest version: 0.1.0-alpha.43

# `@react-native-esbuild/hmr`

> `react-refresh` based HMR implementation for @react-native-esbuild

## Usage

1. Add import statement to top of entry file(`import 'hmr:runtime';`)
2. Wrap React component module with `wrapWithHmrBoundary`

```js
import {
  getHmrRuntimeInitializeScript,
  wrapWithHmrBoundary,
  HMR_RUNTIME_IMPORT_NAME
} from '@react-native-esbuild/hmr';

// In esbuild plugin
build.onResolve({ filter: new RegExp(HMR_RUNTIME_IMPORT_NAME) }, (args) => {
  return {
    path: args.path,
    namespace: 'hmr-runtime',
  };
});

build.onLoad({ filter: /(?:.*)/, namespace: 'hmr-runtime' }, (args) => {
  return {
    js: await getHmrRuntimeInitializeScript(),
    loader: 'js',
  };
});

build.onLoad({ filter: /* some filter */ }, (args) => {
  if (isEntryFile) {
    code = await fs.readFile(args.path, 'utf-8');
    code = `import ${HMR_RUNTIME_IMPORT_NAME};\n\n` + code;
    // ...

    return {
      contents: code,
      loader: 'js',
    };
  } else {
    // ...

    return {
      // code, component name, module id
      contents: wrapWithHmrBoundary(code, '', args.path),
      loader: 'js',
    };
  }
});
```
npm package: @react-native-esbuild/jest
Description: react-native preset for jest powered by @react-native-esbuild
Author: leegeunhyeok
Latest version: 0.1.0-alpha.43

# `@react-native-esbuild/jest`

> react-native preset for jest powered by @react-native-esbuild

## Usage

```js
exports.default = {
  preset: 'react-native',
  transform: {
    '^.+\\.(t|j)sx?$': '@react-native-esbuild/jest',
  },
};

// With transformer options(for enable custom instrument).
exports.default = {
  preset: 'react-native',
  transform: {
    '^.+\\.(t|j)sx?$': ['@react-native-esbuild/jest', /* TransformerConfig */],
  },
};
```

```ts
/**
 * @see {@link https://github.com/kwonoj/swc-plugin-coverage-instrument}
 */
interface TransformerConfig {
  experimental?: {
    customCoverageInstrumentation?: {
      coverageVariable?: string;
      compact: boolean;
      reportLogic: boolean;
      ignoreClassMethods: string[];
      instrumentLog?: {
        level: string;
        enableTrace: boolean;
      };
    };
  };
}
```
npm package: @react-native-esbuild/plugins
Description: plugins for @react-native-esbuild
Author: leegeunhyeok
Latest version: 0.1.0-alpha.43

# `@react-native-esbuild/plugins`

> Base plugins for @react-native-esbuild

## Custom plugins

[README](https://github.com/leegeunhyeok/react-native-esbuild)
npm package: @react-native-esbuild/transformer
Description: transformer for @react-native-esbuild
Author: leegeunhyeok
Latest version: 0.1.0-alpha.43

# `@react-native-esbuild/transformer`

## Usage

```ts
import {
  stripFlowWithSucrase,
  transformWithBabel,
  transformWithSwc,
} from '@react-native-esbuild/transformer';

await stripFlowWithSucrase(code, context);
await transformWithBabel(code, context, options);
await transformWithSwc(code, context, options);
```
npm package: @react-native-extra/calculate
Description: The library makes it possible to perform a calculation with css units (the supported units are vh, vw, vmax, vmin, rem, px, cm, mm, in, pt, pc), you can also calculate rotation units such as degrees and grads, radians and turns
Author: Yousef Abdulkarim
Latest version: 0.4.2
Deprecated: package has not much use and will not be mainted

ERROR: No README data found!
npm package: @react-native-extra/match-media
Description: Polyfills matchMedia method
Author: Yousef Abdulkarim
Latest version: 0.1.10

<div id="match-media"></div>

# Match media
---
This library is a match media polyfill for react native. 
Note the library can be used on react native for mobile, macos and windwos because it doesnt contain any native code for a specific platform. 

<br>

### How to use the library
---
```ts

import "@react-native-extra/match-media";


const { matches } = matchMedia("(orientation: portrait)");

console.log(matches);

```

<br>

### Media feature support 
---
Here is all media feature support. Beside these media features will yield a false result.

- prefers-reduced-transparency

- prefers-reduced-motion

- inverted-colors

- prefers-color-scheme

- width

- height

- aspect-ratio

- orientation

- resolution

<br>

### Media type 
---
Here is all media type support. Beside these media type will yield a false result.

- all

- screen