Hi,

I have created a React Native bridge plugin for aromajoin/material-showcase-ios. It allow users to provide App Tour. Can you please add below npm node to your React Native packages list:

Node Name: react-native-material-showcase-ios
Link: https://github.com/prscX/react-native-material-showcase-ios

Please let me know in case any discuss is required for the same

Thanks
Pranav

Sometimes out of curiosity I want to check which is the recent one added in the list. It is not same as Last Updated.

There are projects that are not maintaining anymore and I think it would be amazing to add field 'is project maintaining' for warning people who would like to use them.

For example, react-native-swipeout, it is not maintaining and maintainers will not help to resolve any issues, so you have to use it at one's own risk.

I think this website is a really well-needed resource and thanks for creating it.

One of the key bits for me is the project health feature. I think the simplistic score you have currently is a great start, but I was reminded of the great project quality feature that the Cocoapods (iOS dependency manager) directory has. You can see an example of a libraries quality page here:

https://cocoapods.org/pods/AnimationSugar/quality

By default, it starts a library with a score of 50 and then adds and subtracts from that to get the final score. Things like "being very popular" get an addition and others like "using a GPL licence" (which is arguably incompatible with the Apple App Store) result in a subtraction from the base score.

On the page I linked above, press on the "show metrics not applied" to see the full list of possible metrics. They have also documented how this system works and the theory behind it here:

https://guides.cocoapods.org/making/quality-indexes

Overall, I think a system like this would be a great way to measure the health of React Native libraries as well. Let me know your thoughts and I'm happy to help out if this is a direction you want to move in.

I'm no longer working on Expo or React Native work at this time. If anyone would like to take this project over please let me know! Meanwhile I will continue to merge pull requests as they come in. 🙏

Right now, you can sort by compatibility, but that isn't super useful if you're looking to isolate only web compatible libraries. I think filtering by platform would be much more intuitive - what do you think?

Feature Request

The directory displays a Directory Score. This score is not explained anywhere on the site itself. This issue is to create a page that explains how we calculate the score, then links to the code for those who are curious.

The score calculating script is written here: https://github.com/react-native-community/directory/blob/master/scripts/calculate-score.js

Possible implementation

• Make all "Directory score" elements a link to another page (use next routes/pages to create a new page/url)
• The Directory score page should have a written out explanation of what the score is and how it is calculated.
• This would be a great spot to also instruct on how to make a great package, according to this directory's standards.

I believe the following package should be added:

https://github.com/fabriciovergal/react-native-localizable

In #333 we switched over to using the GitHub GraphQL API, which has a different mechanism for rate limiting. We should update our data update scripts to account for this.

Bug

There is an error on react-native-libraries.json probably someone forgot parentheses :D

[
...
{
    "githubUrl": "https://github.com/pietile/pietile-native-kit/tree/master/packages/page-slider",
    "ios": true,
    "android": true,
    "web": false,
    "expo": true
  },
    "githubUrl": "https://github.com/artyorsh/react-native-eva-icons",
    "ios": true,
    "android": true,
    "web": true,
    "expo": true
  }
]

Instabug-react-native is marked as working with Expo, but it requires react-native link, and on talking to their support team, it turns out they don't support Expo at all.

Should just run yarn data:validate

i am trying to send a pull request from my branch to the master branch, it is giving me

fatal: unable to access 'https://github.com/react-community/native-directory.git/': The requested URL returned error: 403

Description

In the LibraryListItemColumnThree component, to calculate the "Updated at" field, to the getTimeSinceToday method the value props.library.github.stats.pushedAt gets passed.

But this field (provided by the GitHub API) is actually not "reliable": what I mean by that is that the field pushedAt is not the datetime of the last commit pushed to master - which to me should define when the repo has been updated.

To prove it I'll use the react-native-push-notification repo - if you check via native.directory (here) you can see that it says that it has been updated for the last time "2 weeks ago" because it uses

"pushed_at": "2017-06-30T17:58:21Z",

as datetime to use for the calculation.

But if you check instead the commit history it will say that the last commit to master was done on May 15th (2017-05-15T18:43:43Z) - which is way more than 2 weeks ago.

I can't actually figure out where the GitHub API gets that value for pushed_at, but yeah it's not the last commit to master.

Proposed solution

While searching around, I managed to use the GraphQL explorer from GitHub itself to search (in APIv4) for the last commit date using this query:

query { 
  repository(owner:"zo0r", name:"react-native-push-notification") {  
    ref(qualifiedName: "master") {
      target {
        ... on Commit {
          id
          committedDate
        }
      }
    }
  }
}

So my proposal would be to use, instead of the APIv3 (REST) for GitHub, actually move to its v4 and, by using GraphQL, fetch all the necessary data plus the datetime of the last commit to master, and then use that one to calculate the "Updated XXXX ago" field.

But it may be "a big deal" so I wanted to open an issue to discuss with you guys if it would be a good idea or if it would be better to stick with v3 - in that case, I guess it would be necessary a secondary GET to the API for the last commit for each repo.

If you greenlight it I'd love to try to do it and PR (but I can't give any ETD atm).

Hi guys!

I'm new to react-native/Expo, I would like to use OpenCV into my mobile app project.
I saw there's a way to do it by creating native modules ( this mean I can't use Expo and I need to use Objective-C/C++ for IOS and Java for Android)

Since I only want to play around with images matrix (data), I was wondering if I can directly work with JavaScript and use OpenCV.js or OpenCV4nodejs. I have not been able to import these library properly. Is it even possible? If yes, can I do it with Expo?

Thanks a lot !!!
Have a nice day

Not really an issue but it would be great to have a form for adding libraries rather than updating the json file currently.

I know this would require a backend db and some sort of authentication so i'm thinking maybe using firebase or a mongo instance for the db and auth using github?

Just some thoughts.

If approved, I'd love the opportunity to take it on and implement it.

I think we should setup a CI to automation check duplicate of modules, i found react-native-tcp, and react-native-social-share are duplicated

I might have overlooked but couldn't find a way to add more topics.

Of course u can review it later if I've added some wrong topics. Bcz I'm finding some really awesome 😍 libraries which aren't there in native.directory so want to add them & I can later use it for my other projects like I use npm 😝

Also a PR from me got merged before but results aren't visible on the website. The component is react-native-bouncy-drawer & when I search bouncy or drawer nothing gets returned 🤔

Can someone explain whats the case ❓

We need a plan for tagging directories as compatible with windows/macos. Once that is in progress/finished, we can enable a filter for the two platforms.

@TheSavior pointed out that react-native-camera wasn't listed here. We should go over the libraries on react-native-community and add them here!

Hi,

I have created a React Native bridge plugin for KeepSafe/TapTargetView. It allow users to provide App Tour. Can you please add below npm node to your React Native packages list:

Node Name: react-native-taptargetview
Link: https://github.com/prscX/react-native-taptargetview

Please let me know in case any discuss is required for the same

Thanks
Pranav

I'm assuming this is a mistake?

Feature Request

It would be great to show developers using packages how they could develop and maintain their own packages.

Possible implementation

• Create a new page (with next pages/routes) that displays information about how to create your own package.
  • Include creating packages for different platforms and native dependencies.
  • Include how to create a package that others can use easily.

• Change repository name
• Update design to match
• Create reactnative.directory as canonical URL

Hi, I'm fairly new to expo and react native and stumbled accross native.directory today. Sorry if this is maybe not the best place to ask this, but what does the expo compatibility flag mean?
Does it mean I can use a component in my expo directly, or only if I detach it?
Would be great if I could link a non expo component to my expo app without detaching it.
Thanks for your help!

react-native-windows is a 3rd party library that adds "windows" (Windows 10, Mobile, Xbox/UWP) as a react-native platform.

A portion of react-native libraries with android/ios code have added support for react-native-windows by adding native windows code as well. It would probably be good to add a "windows": bool flag in addition to the android and ios flags.

Want to help out with rebranding to react.native.directory? This is the thread for you! Share your ideas or mockups or whatever here!

Should we differentiate between libraries that have "typings" and those that are written in TypeScript? Does that matter?

TODO

• Add to schema and README
• Maybe add a filter?
• Display in the library UI

Worked around this temporarily with:

const fetchGithubData = async data => {
  await new Promise(resolve => setTimeout(resolve, Math.random() * 30000));

😅

Hi,

in almost every source file of the implementation is react-native required. This package cannot work with web applications.

So the flag "web" is not correct... :)

heyhey, nice start

some of repos have this buttons, which is more "statuses" then "img shown what pkg do"

will be better to group them by camo.githubusercontent.com (and exclude from main list) and show in separate view

@Simek brought this up, it seems worth adding!

I think that react-native-oauth module can't work with expo.

because react-native-oauth use NativeModules. react-native-oauth/lib/promisify.js

I tried this test code,

import React from 'react';
import { Button } from 'react-native';
import OAuthManager from 'react-native-oauth';

export default class App extends React.Component {

  _auth(){
    console.log('press auth');
    const manager = new OAuthManager('example')
    manager.configure({
      twitter: {
        consumer_key: '***',
        consumer_secret: '***'
      }
    });
    manager.authorize('twitter')
      .then(resp => console.log(resp))
      .catch(err => console.log(err));
  }

  render() {
    return (
      <Button title="Auth" onPress={this._auth} />
    );
  }
}

then an error occurred. It seems to be because of can't import NativeModules.

infoLog.js:17 Running application "main" with appParams: {"rootTag":1,"initialProps":{"exp":{"manifest":{"description":"An empty new project","packagerOpts":{"lanType":"ip","minify":false,"strict":false,"urlRandomness":"sg-8xx","hostType":"lan","urlType":"exp","dev":true},"debuggerHost":"192.168.10.4:19001","bundleUrl":"http://192.168.10.4:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=/home/saho/project/test3/node_modules/expo/tools/hashAssetFiles","slug":"test3","icon":"./assets/icon.png","primaryColor":"#cccccc","isVerified":true,"name":"test3","xde":true,"version":"1.0.0","iconUrl":"http://192.168.10.4:19001/assets/./assets/icon.png","id":"@ishowta/test3","orientation":"portrait","sdkVersion":"22.0.0","ios":{"supportsTablet":true},"env":{},"logUrl":"http://192.168.10.4:19000/logs","privacy":"public","mainModuleName":"node_modules/expo/AppEntry","developer":{"projectRoot":"/home/saho/project/test3","tool":"exp"},"splash":{"resizeMode":"contain","backgroundColor":"#ffffff","image":"./assets/splash.png","imageUrl":"http://192.168.10.4:19001/assets/./assets/splash.png"}},"appOwnership":"expo","initialUri":"exp://192.168.10.4:19000","shell":false}}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
App.js:8 press auth
App.js:18 TypeError: Cannot read property 'authorize' of undefined
    at promisify.js:11
    at tryCallTwo (core.js:45)
    at doResolve (core.js:200)
    at new Promise (core.js:66)
    at promisify.js:6
    at OAuthManager.authorize (react-native-oauth.js:44)
    at Object._auth (App.js:16)
    at Object.proxiedMethod [as onPress] (createPrototypeProxy.js:44)
    at Object.touchableHandlePress (TouchableOpacity.js:127)
    at Object._performSideEffectsForTransition (Touchable.js:746)
YellowBox.js:78 Possible Unhandled Promise Rejection (id: 0):
TypeError: Cannot read property 'configureProvider' of undefined
TypeError: Cannot read property 'configureProvider' of undefined
    at http://192.168.10.4:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=/home/saho/project/test3/node_modules/expo/tools/hashAssetFiles:95420:53
    at tryCallTwo (http://192.168.10.4:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=/home/saho/project/test3/node_modules/expo/tools/hashAssetFiles:16515:5)
    at doResolve (http://192.168.10.4:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=/home/saho/project/test3/node_modules/expo/tools/hashAssetFiles:16654:13)
    at new Promise (http://192.168.10.4:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=/home/saho/project/test3/node_modules/expo/tools/hashAssetFiles:16536:3)
    at http://192.168.10.4:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=/home/saho/project/test3/node_modules/expo/tools/hashAssetFiles:95413:12
    at OAuthManager.configureProvider (http://192.168.10.4:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=/home/saho/project/test3/node_modules/expo/tools/hashAssetFiles:95365:59)
    at http://192.168.10.4:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=/home/saho/project/test3/node_modules/expo/tools/hashAssetFiles:95374:23
    at Array.map (<anonymous>)
    at OAuthManager.configureProviders (http://192.168.10.4:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=/home/saho/project/test3/node_modules/expo/tools/hashAssetFiles:95373:51)
    at OAuthManager.configure (http://192.168.10.4:19001/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=/home/saho/project/test3/node_modules/expo/tools/hashAssetFiles:95268:19)
console.warn @ YellowBox.js:78
onUnhandled @ Promise.js:35
onUnhandled @ rejection-tracking.js:71
(anonymous) @ JSTimers.js:256
_callTimer @ JSTimers.js:148
callTimers @ JSTimers.js:405
__callFunction @ MessageQueue.js:306
(anonymous) @ MessageQueue.js:108
__guard @ MessageQueue.js:269
MessageQueue.callFunctionReturnFlushedQueue @ MessageQueue.js:107
(anonymous) @ debuggerWorker.js:72

What should change about this project to make it more useful? Let us know!

Configure project :app
NDK is missing a "platforms" directory.
If you are using NDK, verify the ndk.dir is set to a valid NDK directory. It is currently set to /Users/sriharikapu/Library/Android/sdk/ndk-bundle.
If you are not using NDK, unset the NDK variable from ANDROID_NDK_HOME or local.properties to remove this warning.

Reading env from: .env

Configure project :react-native-config
NDK is missing a "platforms" directory.
If you are using NDK, verify the ndk.dir is set to a valid NDK directory. It is currently set to /Users/sriharikapu/Library/Android/sdk/ndk-bundle.
If you are not using NDK, unset the NDK variable from ANDROID_NDK_HOME or local.properties to remove this warning.

Configure project :react-native-svg
NDK is missing a "platforms" directory.
If you are using NDK, verify the ndk.dir is set to a valid NDK directory. It is currently set to /Users/sriharikapu/Library/Android/sdk/ndk-bundle.
If you are not using NDK, unset the NDK variable from ANDROID_NDK_HOME or local.properties to remove this warning.

Configure project :react-native-sensitive-info
NDK is missing a "platforms" directory.
If you are using NDK, verify the ndk.dir is set to a valid NDK directory. It is currently set to /Users/sriharikapu/Library/Android/sdk/ndk-bundle.
If you are not using NDK, unset the NDK variable from ANDROID_NDK_HOME or local.properties to remove this warning.

Configure project :react-native-randombytes
NDK is missing a "platforms" directory.
If you are using NDK, verify the ndk.dir is set to a valid NDK directory. It is currently set to /Users/sriharikapu/Library/Android/sdk/ndk-bundle.
If you are not using NDK, unset the NDK variable from ANDROID_NDK_HOME or local.properties to remove this warning.

Configure project :react-native-linear-gradient
NDK is missing a "platforms" directory.
If you are using NDK, verify the ndk.dir is set to a valid NDK directory. It is currently set to /Users/sriharikapu/Library/Android/sdk/ndk-bundle.
If you are not using NDK, unset the NDK variable from ANDROID_NDK_HOME or local.properties to remove this warning.

Configure project :react-native-fingerprint-scanner
NDK is missing a "platforms" directory.
If you are using NDK, verify the ndk.dir is set to a valid NDK directory. It is currently set to /Users/sriharikapu/Library/Android/sdk/ndk-bundle.
If you are not using NDK, unset the NDK variable from ANDROID_NDK_HOME or local.properties to remove this warning.

Configure project :react-native-dialogs
NDK is missing a "platforms" directory.
If you are using NDK, verify the ndk.dir is set to a valid NDK directory. It is currently set to /Users/sriharikapu/Library/Android/sdk/ndk-bundle.
If you are not using NDK, unset the NDK variable from ANDROID_NDK_HOME or local.properties to remove this warning.

Configure project :react-native-camera
NDK is missing a "platforms" directory.
If you are using NDK, verify the ndk.dir is set to a valid NDK directory. It is currently set to /Users/sriharikapu/Library/Android/sdk/ndk-bundle.
If you are not using NDK, unset the NDK variable from ANDROID_NDK_HOME or local.properties to remove this warning.

I don't think that module can work with Expo, because it has native implement required react-native link
https://github.com/timfpark/react-native-location#react-native-link-installation

Want to help manage the repo? We have some open PRs and issues that could use some love! We also want to make this the one-stop source for discovering react-native libraries, so plenty of work to do there! (#188)

Feature Request

Why it is needed

It's great to see a thumbnail of images from the repo inline. The directory used to have this feature, but it was removed when refactoring/redesigning. This tweet also requested it.

Possible implementation

• Add icons that are clickable/hoverable that display a thumbnail from the repo.
• There's a fetchReadmeImages in build-and-score-data.js that can be used to fetch images again.

Design

Here's a mock up of what this could look like:

And here's an svg for the icon:

<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 2H2v12h12V2zM0 0v16h16V0H0z" fill="#82889E"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 7.586l3 3 2-2 3.707 3.707-1.414 1.414L12 11.414l-.586.586 2.293 2.293-1.414 1.414L7 10.414l-5.293 5.293-1.414-1.414L7 7.586z" fill="#82889E"/><path d="M12 5.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" fill="#82889E"/></svg>

Because I use nested media queries and pseudo selectors, I needed to install a plugins that would allow me to use styled-jsx the way I had been using it.

That worked fine!

...until I had to deploy to Heroku, I encountered an exception that said next/babel options are not configurable when trying to apply this:

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": [
            "styled-jsx-plugin-postcss"
          ]
        }
      }
    ]
  ]
}

After spinning my wheels for a couple of hours with no immediate solution, I switched the codebase to use glamor.

Issue for reference: vercel/next.js#3133

I often share this link in Slack & I always tend to do native.directory which opens up HTTP URL.

It'd be cool if it automatically redirects to HTTPS :)

Just tried using react-native-image-resizer in a simple expo project and I got an error. Seems like other people get this error as well.

bamlab/react-native-image-resizer#89

bamlab/react-native-image-resizer#87

Here are some additional examples using Snack:

react-native-gifted-chat - https://snack.expo.io/SyOdDdL8b
react-native-swiper - https://snack.expo.io/BkaD_dIL-
react-native-swipeout - https://snack.expo.io/HyQ25dU8Z
react-native-deck-swiper - https://snack.expo.io/rJBRhOLU-
react-native-material-textfield - https://snack.expo.io/SJIOAOUIb
react-native-radio-buttons - https://snack.expo.io/Bk8-1FILb
react-native-lightbox - https://snack.expo.io/rkzzeFUIW
react-native-autocomplete-input - https://snack.expo.io/rJxdeFIIb
react-native-easy-grid - https://snack.expo.io/S1QYWFILW
react-native-popup-menu - https://snack.expo.io/rkQrMFI8W
react-native-calendar-strip - https://snack.expo.io/By-aQF8LZ

I'll close this after trying it. Till then, let it be open.

Awesome module for creating fully fledged music apps -> react-native-track-player