A searchable and filterable directory of React Native libraries.
React Native Directory is a website where you can see all the libraries that are compatible with React Native.
react-native-libraries.json
file (we use the order in that file for "Recently added" sort option).[!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.
{
"githubUrl": "<GITHUB REPOSITORY URL>",
"npmPkg": "<OPTIONAL NPM PACKAGE NAME>",
"nameOverride": "<OPTIONAL PACKAGE DISPLAY NAME>",
"examples": [
"<THE URL TO REPO>",
"<THE URL TO A SNACK>"
],
"images": ["<PUBLIC URL TO RELATED IMAGE>"],
"ios": false,
"android": false,
"web": false,
"expoGo": false,
"windows": false,
"macos": false,
"tvos": false,
"visionos": false,
"unmaintained": false,
"dev": false,
"template": false,
"newArchitecture": false
}
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.
android
ios
web
react-native-web
.expoGo
[!NOTE] Any library can be used with Expo, if you use dev clients and prebuild.
[!IMPORTANT] Adding out-of-tree platforms support requires an example or link to the app which uses the library on the given platform.
windows
react-native-windows
.macos
react-native-macos
.tvos
react-native-tvos
.visionos
react-native-visionos
.unmaintained
(boolean) - signify that a library is no longer maintained.
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 the new architecture
Set this tag only when automatic architecture detection fails for your package, despite it supports 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.
yarn && yarn start
You should be able to visit localhost:3000
in your browser.
yarn data:update
with keys?GITHUB_TOKEN
environment variable into your shell.This command creates site data in ./assets/data.json
GITHUB_TOKEN=<*> yarn data:update
Get a commit on main
and it will be automatically deployed.
Sure, go for it!
https://reactnative.directory/api/libraries
JSON
format.https://reactnative.directory/api/libraries?search=webgl
JSON
format that have the keyword webgl
.https://reactnative.directory/api/libraries?search=webgl&expoGo=true
JSON
format that have the keyword webgl
and work with Expo Go app.https://reactnative.directory/api/libraries?search=webgl&expoGo=true&android=true
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
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.
scripts/calculate-score.js
.GITHUB_TOKEN
environment variable in your Vercel configuration.# once environment variables are configured, install Vercel and deploy
npm i -g vercel
vercel