react-native-community / directory Goto Github PK
View Code? Open in Web Editor NEWA searchable and filterable directory of React Native libraries.
Home Page: https://reactnative.directory
License: MIT License
A searchable and filterable directory of React Native libraries.
Home Page: https://reactnative.directory
License: MIT License
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 :)
I believe the following package should be added:
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.
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
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.
@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!
Should we differentiate between libraries that have "typings" and those that are written in TypeScript? Does that matter?
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.
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.
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
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
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
.
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).
Should just run yarn data:validate
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!
It would be great to show developers using packages how they could develop and maintain their own packages.
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.
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
What should change about this project to make it more useful? Let us know!
Worked around this temporarily with:
const fetchGithubData = async data => {
await new Promise(resolve => setTimeout(resolve, Math.random() * 30000));
๐
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
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... :)
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 โ
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.
fetchReadmeImages
in build-and-score-data.js that can be used to fetch images again.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>
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
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
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.
Sometimes out of curiosity I want to check which is the recent one added in the list. It is not same as Last Updated.
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
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)
@Simek brought this up, it seems worth adding!
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'll close this after trying it. Till then, let it be open.
Awesome module for creating fully fledged music apps -> react-native-track-player
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
}
]
Want to help out with rebranding to react.native.directory? This is the thread for you! Share your ideas or mockups or whatever here!
I'm assuming this is a mistake?
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
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?
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.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.