Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/react-native-community/directory
A searchable and filterable directory of React Native libraries.
https://github.com/react-native-community/directory
directory expo react-native react-native-macos react-native-tvos react-native-web react-native-windows registry
Last synced: 3 months ago
JSON representation
A searchable and filterable directory of React Native libraries.
- Host: GitHub
- URL: https://github.com/react-native-community/directory
- Owner: react-native-community
- License: mit
- Created: 2017-06-23T05:02:21.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-04-19T08:35:54.000Z (7 months ago)
- Last Synced: 2024-04-19T11:58:21.661Z (7 months ago)
- Topics: directory, expo, react-native, react-native-macos, react-native-tvos, react-native-web, react-native-windows, registry
- Language: TypeScript
- Homepage: https://reactnative.directory
- Size: 9.28 MB
- Stars: 873
- Watchers: 19
- Forks: 421
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - directory - native-community | 549 | (TypeScript)
README
React Native Directory
https://reactnative.directory
React Native Directory is a website where you can see all the libraries that are compatible with React Native.
## How do I know I'm at the right place?
- You made a repository on GitHub and you want the world to know it works with React Native.
- You want to submit a pull request to improve React Native Directory or libraries dataset.
- You want to report a bug or make a suggestion.
## How do I update the data for a library?
- Find the entry for the library in [`react-native-libraries.json`](https://github.com/react-native-community/directory/blob/main/react-native-libraries.json) file. (Not there? [Add it the library](#how-do-i-add-a-library).)
- Update the entry with the new data. Use the [library fields description](#library-fields-description) as a guide.
- Submit a PR.
## How do I add a library?
- Add it **at the end** of [`react-native-libraries.json`](https://github.com/react-native-community/directory/blob/main/react-native-libraries.json) file (we use the order in that file for "Recently added" sort option).
- Use the [template](#new-library-entry-template) as a guide.
- Submit a PR.
### New library entry template
> [!NOTE]
> Please follow format, fields order and indentation as seen below, skip any of the `false` values and do not fill optional fields, unless it's necessary.
> You can find the detailed descriptions of the fields below the entry template.
```json
{
"githubUrl": "",
"npmPkg": "",
"nameOverride": "",
"examples": [
"",
""
],
"images": [""],
"ios": false,
"android": false,
"web": false,
"expoGo": false,
"windows": false,
"macos": false,
"tvos": false,
"visionos": false,
"unmaintained": false,
"dev": false,
"template": false,
"newArchitecture": false
}
```
### Library fields description
#### ⚙️ General
- #### ❗ `githubUrl` **(required)**
**(string)** - URL to the package GitHub repository (currently other Git hosts are not supported).
> Package also needs to be published to the NPM registry, because it is a source of crucial data for the directory.
- #### `npmPkg`
**(string)** - npm package name, by default GitHub repository name will be used. Example: `"@expo/react-native-action-sheet"`.
> Fill only when the GitHub repository name is different from the name of package published to npm, or the package is a part of monorepo.
- #### `nameOverride`
**(string)** - display name override.
> Fill only when it is different from the GitHub repository name and npm package name.
- #### `examples`
**(array of strings)** - URLs to example projects or Snacks which demonstrates the library.
- #### `images`
**(array of strings)** - URLs to static images or GIFs that shows the library functionality.
> Please do not add logotypes or other branding material, and please avoid linking multiple resources which shows the same feature.
#### 📱 Platforms
- #### `android`
**(boolean)** - works on Android device.
- #### `ios`
**(boolean)** - works on iOS device.
- #### `web`
**(boolean)** - can be used with [`react-native-web`](https://github.com/necolas/react-native-web).
- #### `expoGo`
**(boolean)** - works with [Expo Go](https://docs.expo.dev/get-started/expo-go/) — an open-source sandbox app, without using [dev clients](https://docs.expo.dev/develop/development-builds/introduction/) or [prebuild](https://docs.expo.dev/workflow/continuous-native-generation/).
> [!NOTE]
> **Any** library can be used with Expo, if you use dev clients and prebuild.
#### 🖥️ Out-of-tree Platforms
> [!IMPORTANT]
> Adding out-of-tree platforms support requires an example or link to the app which uses the library on the given platform.
- #### `windows`
**(boolean)** - can be used with [`react-native-windows`](https://github.com/microsoft/react-native-windows).
- #### `macos`
**(boolean)** - can be used with [`react-native-macos`](https://github.com/microsoft/react-native-macos).
- #### `tvos`
**(boolean)** - can be used with [`react-native-tvos`](https://github.com/react-native-tvos/react-native-tvos).
- #### `visionos`
**(boolean)** - can be used with [`react-native-visionos`](https://github.com/callstack/react-native-visionos).
#### 🏷️ Tags
- #### `unmaintained`
**(boolean)** - signify that a library is no longer maintained. You can provide alternative or replacement libraries with the `alternatives` field, if needed.
- #### `dev`
**(boolean)** - signify that a library is a development tool or is only a part of development process.
- #### `template`
**(boolean)** - signify that a library is a new project template.
- #### `newArchitecture`
**(boolean)** - signify that a library supports, or not, the New Architecture. Skipping the field will result in "untested" status, unless automatic support detection returned a result. You can provide additional context with the `newArchitectureNote` field, if needed.
> Set this tag only when automatic architecture detection fails for your package, despite it supports the New Architecture.
### 📝 Additional context for tags
- #### `newArchitectureNote`
**(string)** - provide a note for the New Architecture support status, if a boolean `"true"` or `"false"` is not sufficient to describe the state of New Architecture support.
- #### `alternatives`
**(array of strings)** - provide a list of alternatives to the library. eg: `["expo-camera", "react-native-vision-camera"]`. This is used to provide a list of alternatives to a library if it is unmaintained or does not support the New Architecture.
---
> [!NOTE]
> If your package is within a monorepo on GitHub, eg: https://github.com/expo/expo/tree/main/packages/expo-web-browser,
> then the name, description, homepage, and topics (keywords) will be extracted from `package.json` in the package subdirectory.
> However, GitHub stats will be based on the monorepo, because there isn't really another option.
## How do I run my own version locally?
#### Prerequisites
- Node LTS
#### Commands
```sh
yarn && yarn start
```
You should be able to visit `localhost:3000` in your browser.
## How do I run `yarn data:update` with keys?
- Visit https://github.com/settings/developers to get your keys (don't worry about the callback URL, put whatever you want).
- Load the `GITHUB_TOKEN` environment variable into your shell.
This command creates site data in `./assets/data.json`
```sh
GITHUB_TOKEN=<*> yarn data:update
```
## How do I deploy to production?
Get a commit on `main` and it will be automatically deployed.
## I don't like your website, can I hit an API instead and build my own better stuff?
Sure, go for it!
`https://reactnative.directory/api/libraries`
- Returns a list of all libraries in `JSON` format.
`https://reactnative.directory/api/libraries?search=webgl`
- Returns a list of all libraries in `JSON` format that have the keyword `webgl`.
`https://reactnative.directory/api/libraries?search=webgl&expoGo=true`
- Returns a list of all libraries in `JSON` format that have the keyword `webgl` and work with Expo Go app.
`https://reactnative.directory/api/libraries?search=webgl&expoGo=true&android=true`
- Returns a list of all libraries in `JSON` format that have the keyword `webgl`, work with Expo Go app and Android.
`https://reactnative.directory/api/libraries?search=webgl&expoGo=true&android=true&isPopular=true`
- Returns a list of all libraries in `JSON` format that have the keyword `webgl`, work with Expo Go app, Android and are popular based on the scoring criterion.
All the possible query parameters represents [`Query` type](https://github.com/react-native-community/directory/blob/main/types/index.ts#L14-L36).
## I don't like how you calculate scores.
- Submit a PR with changes to `scripts/calculate-score.js`.
- You have all the power! Tell us what you want.
## How do I deploy my own version of this?
- Site is hosted on Vercel, and this is the easiest way to do it.
- You can deploy your own with your own Vercel account
- You will need to provide `GITHUB_TOKEN` environment variable in your Vercel configuration.
```sh
# once environment variables are configured, install Vercel and deploy
npm i -g vercel
vercel
```