## 1. Project Overview & Quickstart (react-native-community/LICENSE) # LICENSE Open-source repository react-native-community/LICENSE ### Repository Details - **Repository:** [react-native-community/LICENSE](https://github.com/react-native-community/LICENSE) - **Primary Language:** Code *Note: High-volume repository documentation is actively indexed and synchronized by YakaAI.* ## 2. Official Technical Reference & Guides (react-native-community/website)

React Native Directory

https://reactnative.directory

> [!TIP] > Are you looking for an integration with VS Code? Check out our official extension: > * https://github.com/react-native-community/vscode-react-native-directory ## 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 to the directory](#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. > [!TIP] > You can also use the React Native Directory CLI to submit a library directly from the terminal. Run `bunx rn-directory submit` from the package root folder. > - https://github.com/Simek/rn-directory ### New library entry template > [!IMPORTANT] > 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": "", "examples": [ "", "" ], "images": [""], "ios": false, "android": false, "web": false, "windows": false, "macos": false, "tvos": false, "visionos": false, "expoGo": false, "fireos": false, "harmony": false, "horizon": false, "vegaos": false, "newArchitecture": false, "configPlugin": false, "unmaintained": false, "dev": false } ``` > [!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. ### Library fields description #### ⚙️ General - #### ❗ `githubUrl` **(required)** **(string)** - URL to the package GitHub repository (currently other Git hosts are not supported). > [!WARNING] > 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"`. > [!TIP] > Fill `npmPkg` only when the GitHub repository name is different from the name of package published to npm, or the package is a part of monorepo. - #### `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. > [!TIP] > Please do not add logotypes or other branding materials to the `images` array, and please avoid linking multiple assets 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). #### 🖥️ 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). #### ✅ Compatibility > [!TIP] > **Any** library can be used with Expo, if you use dev clients or prebuild. - #### `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/). - #### `fireos` **(boolean)** - works on Amazon Fire OS. - #### `harmony` **(boolean|string)** - works on HarmonyOS. It can also be a string containing npm package name, if a separate/additional package is required for full support. - #### `horizon` **(boolean)** - works on Meta Horizon OS. - #### `vegaos` **(boolean|string)** - works with [Vega OS](https://developer.amazon.com/apps-and-games/vega). It can also be a string containing npm package name, if a separate/additional package is required for full support. #### 🏷️ 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. - #### `configPlugin` **(boolean \| string \[URL to third-party config plugin\])** - Indicates if the library includes an [Expo config plugin](https://docs.expo.dev/config-plugins/introduction/). If the plugin is provided by a third party, supply the URL as a string. This field is optional and will be detected automatically if omitted. - #### `newArchitecture` **(boolean|'new-arch-only')** - signify that a library supports both, or not, the New Architecture and the Old Architecture or only 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. > [!TIP] > Set `newArchitecture` field 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. ## How do I run my own version locally? #### Prerequisites - [Bun (1.2+)](https://bun.sh/) #### Commands ```sh bun install && bun start ``` You should be able to visit `localhost:3000` in your browser. ## How do I run `bun 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. - Set `ONLY_WRITE_LOCAL_DATA_FILE` to `true` in *scripts/build-and-score-data.ts* to skip fetching and updating store blob from Vercel and instead use and update the local `assets/data.json` file. This command creates site data in `./assets/data.json` ```sh GITHUB_TOKEN=<*> bun 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! You can read more details on the public API in the [dedicated documentation file](API.md). ## I don't like how you calculate scores. - Submit a PR with changes to `scripts/calculate-score.ts`. - 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 bunx vercel ```