From 26049f0077d09067082db017d4aaec2d1f5e2cd1 Mon Sep 17 00:00:00 2001 From: Hector Ramos Date: Tue, 6 Nov 2018 11:22:51 -0800 Subject: [PATCH] Add Code of Conduct, Issue Templates --- .github/ISSUE_TEMPLATE.md | 5 ++ .github/ISSUE_TEMPLATE/bug_report.md | 10 +++ .github/ISSUE_TEMPLATE/new_issue.md | 17 +++++ .github/ISSUE_TEMPLATE/question.md | 22 ++++++ .github/PULL_REQUEST_TEMPLATE.md | 8 ++ CODE_OF_CONDUCT.md | 5 ++ CONTRIBUTING.md | 8 +- README.md | 109 +++++++++++++++++++++------ 8 files changed, 157 insertions(+), 27 deletions(-) create mode 100644 .github/ISSUE_TEMPLATE.md create mode 100644 .github/ISSUE_TEMPLATE/bug_report.md create mode 100644 .github/ISSUE_TEMPLATE/new_issue.md create mode 100644 .github/ISSUE_TEMPLATE/question.md create mode 100644 .github/PULL_REQUEST_TEMPLATE.md create mode 100644 CODE_OF_CONDUCT.md diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..1c9cbaa3 --- /dev/null +++ b/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,5 @@ +`react-native-fbsdk` is a wrapper around the Facebook SDKs for iOS and Android. GitHub Issues in the `facebook/react-native-fbsdk` repository are used exclusively for tracking bugs in the React Native wrapper. + +- To report a bug in the iOS or Android Facebook SDK, please visit https://developers.facebook.com/bugs/. + +- To report an issue with the `react-native-fbsdk` package, please pick a template at https://github.com/facebook/react-native-fbsdk/issues/new/choose. diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 00000000..23409c94 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,10 @@ +--- +name: 🐛 Report a Bug in the Facebook SDK +about: To report a bug in the iOS or Android Facebook SDK, please visit https://developers.facebook.com/bugs/. +--- + +`react-native-fbsdk` is a wrapper around the Facebook SDKs for iOS and Android. GitHub Issues in the `facebook/react-native-fbsdk` repository are used exclusively for tracking bugs in the React Native wrapper. + +- To report a bug in the iOS or Android Facebook SDK, please visit https://developers.facebook.com/bugs/. + +- To report an issue with the `react-native-fbsdk` package, please pick a different template at https://github.com/facebook/react-native-fbsdk/issues/new/choose. diff --git a/.github/ISSUE_TEMPLATE/new_issue.md b/.github/ISSUE_TEMPLATE/new_issue.md new file mode 100644 index 00000000..8b0ac58c --- /dev/null +++ b/.github/ISSUE_TEMPLATE/new_issue.md @@ -0,0 +1,17 @@ +--- +name: 🐛 Report a Bug in the react-native-fbsdk package. +about: Report a reproducible bug or regression in the React Native wrapper. +--- + +## Environment + +Run `react-native info` in your terminal and paste its contents here. + +## Description + +Describe your issue in detail. Include screenshots if needed. If this is a regression, let us know. + +## Reproducible Demo + +Let us know how to reproduce the issue. Include a code sample, share a project, or share an app that reproduces the issue using https://snack.expo.io/. +Please follow the guidelines for providing a MCVE: https://stackoverflow.com/help/mcve diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md new file mode 100644 index 00000000..cdeed36b --- /dev/null +++ b/.github/ISSUE_TEMPLATE/question.md @@ -0,0 +1,22 @@ +--- +name: 💬 Question +about: If you need help with react-native-fbsdk, the right place to go depends on the type of help that you need. +--- + +`react-native-fbsdk` is a wrapper around the Facebook SDKs for iOS and Android. GitHub Issues in the `facebook/react-native-fbsdk` repository are used exclusively for tracking bugs in the React Native wrapper. GitHub may not be the ideal place to ask questions about using React Native, but we have compiled a list of resources that should help. + +### Report a bug in the Facebook SDK for iOS or Android + +`react-native-fbsdk` is a wrapper around the Facebook SDKs for iOS and Android. If you've found a bug in the Facebook SDK itself, please visit https://developers.facebook.com/bugs/. + +### Get help using `react-native-fbsdk` in your app + +Many members of the community use Stack Overflow to ask questions. Read through the [existing questions](https://stackoverflow.com/questions/tagged/react-native-fbsdk?sort=frequent) tagged with **react-native-fbsdk** or [ask your own](http://stackoverflow.com/questions/ask?tags=react-native-fbsdk)! + +### Get help with your React Native app + +There are a lot of developers around the world using React Native. You can find a list of community resources at http://facebook.github.io/react-native/help + +### Chat with React and React Native community members + +If you need an answer right away, check out the [Reactiflux Discord](https://discord.gg/0ZcbPKXt5bZjGY5n) community. There are usually a number of React Native experts there who can help out or point you to somewhere you might want to look. diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 00000000..62a1b6a3 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,8 @@ +Thank you for sending the PR! We appreciate you spending the time to work on these changes. +Help us understand your motivation by explaining why you decided to make this change. + +If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged. + +Test Plan: + +Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos! diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 00000000..0f7ad8bf --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,5 @@ +# Code of Conduct + +Facebook has adopted a Code of Conduct that we expect project participants to adhere to. +Please read the [full text](https://code.fb.com/codeofconduct/) +so that you can understand what actions will and will not be tolerated. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index bfe885d0..c5e400e8 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,14 +2,18 @@ Facebook welcomes contributions to our SDKs. All contributors must sign a CLA (contributor license agreement) here: - https://developers.facebook.com/opensource/cla +https://developers.facebook.com/opensource/cla To contribute on behalf of your employer, sign the company CLA To contribute on behalf of yourself, sign the individual CLA All contributions: -1/ MUST be be licensed using the Apache License, Version 2.0 +1/ MUST be be licensed using the Apache License, Version 2.0 2/ authors MAY retain copyright by adding their copyright notice to the appropriate flies More information on the Apache License can be found here: http://www.apache.org/foundation/license-faq.html + +## Code of Conduct + +Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the [full text](https://code.fb.com/codeofconduct/) so that you can understand what actions will and will not be tolerated. diff --git a/README.md b/README.md index b1361661..f7021761 100644 --- a/README.md +++ b/README.md @@ -1,31 +1,41 @@ # React Native FBSDK + React Native FBSDK is a wrapper around the iOS Facebook SDK and Android Facebook SDK, allowing for Facebook integration in [React Native](https://facebook.github.io/react-native/) apps. Access to native components, from login to sharing, is provided entirely through documented JavaScript modules so you don't have to call a single native function directly. -Functionality is provided through one single npm package so you can use it for both platforms without downloading any extra packages. Follow this guide to use react-native-fbsdk in your react-native app. You can also visit https://developers.facebook.com/docs/react-native for tutorials and reference documentation. +Functionality is provided through one single npm package so you can use it for both platforms without downloading any extra packages. Follow this guide to use react-native-fbsdk in your React Native app. You can also visit https://developers.facebook.com/docs/react-native for tutorials and reference documentation. + +- [Installation](#installation) +- [Usage](#usage) +- [Contributing](#join-the-react-native-community) +- [License](#license) -## GIVE FEEDBACK -Please post questions on sdk set up to stackoverflow for quicker response. Besides it's easier for others searching for similar questions. -Report bugs or issues to https://developers.facebook.com/bugs/ +--- ## Installation + You need to install the sdk with [npm](https://www.npmjs.com/) and configure native Android/iOS project in the react native project. + ### 1. Create React Native project First create a React Native project: -```ruby + +```bash react-native init YourApp ``` ### 2. Install JavaScript packages -Install and link the react-native-fbsdk package: -```ruby +Install and link the `react-native-fbsdk` package: + +```bash npm install react-native-fbsdk react-native link react-native-fbsdk ``` + ### 3. Configure native projects #### 3.1 Android project + Assuming you have [Android Studio](http://developer.android.com/sdk/index.html) installed, open the project with Android Studio. **If your react-native version is below 0.29.0** @@ -34,6 +44,7 @@ Go to `MainActivity.java` under `app/src/main/java/com//` to compl Note that packages must be imported to use. Add an instance variable of type `CallbackManager` in class. + ```java import android.content.Intent; // <--- import import android.os.Bundle; @@ -46,7 +57,9 @@ public class MainActivity extends ReactActivity { CallbackManager mCallbackManager; //... ``` + Register sdk package in method `getPackages()`. + ```java @Override protected List getPackages() { @@ -58,7 +71,9 @@ protected List getPackages() { return Arrays.asList(packages); } ``` + Override `onActivityResult()`. + ```java @Override public void onActivityResult(int requestCode, int resultCode, Intent data) { @@ -66,7 +81,8 @@ public void onActivityResult(int requestCode, int resultCode, Intent data) { mCallbackManager.onActivityResult(requestCode, resultCode, data); } ``` -Before you can run the project, follow the [Getting Started Guide](https://developers.facebook.com/docs/android/getting-started/) for Facebook Android SDK to set up a Facebook app. You can skip the build.gradle changes since that's taken care of by the rnpm link step above, but ***make sure*** you follow the rest of the steps such as calling `FacebookSdk.sdkInitialize` and updating `strings.xml` and `AndroidManifest.xml`. Note that react-native project ***doesn't have*** the Application class, so you'll need to create an implementation of the Application class yourself. + +Before you can run the project, follow the [Getting Started Guide](https://developers.facebook.com/docs/android/getting-started/) for Facebook Android SDK to set up a Facebook app. You can skip the build.gradle changes since that's taken care of by the rnpm link step above, but **_make sure_** you follow the rest of the steps such as calling `FacebookSdk.sdkInitialize` and updating `strings.xml` and `AndroidManifest.xml`. Note that react-native project **_doesn't have_** the Application class, so you'll need to create an implementation of the Application class yourself. **If your react-native version is 0.29 or above** @@ -75,6 +91,7 @@ Go to `MainApplication.java` and `MainActivity.java` under `app/src/main/java/co In `MainApplication.java`, Add an instance variable of type `CallbackManager` and its getter. + ```java import com.facebook.CallbackManager; import com.facebook.FacebookSdk; @@ -93,6 +110,7 @@ public class MainApplication extends Application implements ReactApplication { ``` If you want to use AppEventsLogger to log events, override `onCreate()` method and add + ```java @Override public void onCreate() { @@ -103,6 +121,7 @@ public void onCreate() { ``` Register SDK package in method `getPackages()`. + ```java private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override @@ -123,6 +142,7 @@ private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { In `MainActivity.java` Override `onActivityResult()` method + ```java import android.content.Intent; @@ -137,12 +157,14 @@ public class MainActivity extends ReactActivity { ``` Also you need to add in your `settings.gradle`: + ``` include ':react-native-fbsdk' project(':react-native-fbsdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fbsdk/android') ``` And add react-native-fbsdk to dependencies in your app `build.gradle`: + ``` dependencies { ... @@ -154,15 +176,16 @@ dependencies { Before you can run the project, follow the [Getting Started Guide](https://developers.facebook.com/docs/android/getting-started/) for Facebook Android SDK to set up a Facebook app. You can skip the build.gradle changes since that's taken care of by the rnpm link step above, but **make sure** you follow the rest of the steps such as updating `strings.xml` and `AndroidManifest.xml`. #### 3.2 iOS project + The react-native-fbsdk has been linked by rnpm, the next step will be downloading and linking the native Facebook SDK for iOS. -Make sure you have the latest [Xcode](https://developer.apple.com/xcode/) installed. Open the .xcodeproj in Xcode found in the `ios` subfolder from your project's root directory. Now, follow ***all the steps*** in the [Getting Started Guide](https://developers.facebook.com/docs/ios/getting-started/) for Facebook SDK for iOS. Along with `FBSDKCoreKit.framework`, don't forget to import `FBSDKShareKit.framework` and `FBSDKLoginKit.framework` into your Xcode project. +Make sure you have the latest [Xcode](https://developer.apple.com/xcode/) installed. Open the .xcodeproj in Xcode found in the `ios` subfolder from your project's root directory. Now, follow **_all the steps_** in the [Getting Started Guide](https://developers.facebook.com/docs/ios/getting-started/) for Facebook SDK for iOS. Along with `FBSDKCoreKit.framework`, don't forget to import `FBSDKShareKit.framework` and `FBSDKLoginKit.framework` into your Xcode project. **If you're using react native's RCTLinkingManager** The `AppDelegate.m` file can only have one method for `openUrl`. If you're also using `RCTLinkingManager` to handle deep links, you should handle both results in your `openUrl` method. ``` -- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url +- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation { BOOL handledFB = [[FBSDKApplicationDelegate sharedInstance] application:application @@ -178,28 +201,32 @@ The `AppDelegate.m` file can only have one method for `openUrl`. If you're also ``` #### 3.3 Troubleshooting + 1. I cannot run the Android project. - - Make sure you added the code snippet in step 3.1. - - Make sure you set up a Facebook app and updated the `AndroidManifest.xml` and `res/values/strings.xml` with Facebook app settings. +- Make sure you added the code snippet in step 3.1. +- Make sure you set up a Facebook app and updated the `AndroidManifest.xml` and `res/values/strings.xml` with Facebook app settings. 2. I get a build error stating that one of the Facebook SDK files was not found -- eg. `FBSDKLoginKit/FBSDKLoginKit.h file not found`. - - Make sure that the Facebook SDK frameworks are installed in `~/Documents/FacebookSDK`. - - Make sure that `FBSDK[Core, Login, Share]Kit.framework` show up in the **Link Binary with Libraries** section of your build target's **Build Phases**. - - Make sure that `~/Documents/FacebookSDK` is in the **Framework Search Path** of your build target's **Build Settings**. +- Make sure that the Facebook SDK frameworks are installed in `~/Documents/FacebookSDK`. +- Make sure that `FBSDK[Core, Login, Share]Kit.framework` show up in the **Link Binary with Libraries** section of your build target's **Build Phases**. +- Make sure that `~/Documents/FacebookSDK` is in the **Framework Search Path** of your build target's **Build Settings**. 3. I get build errors like `Warning: Native component for "RCTFBLikeView" does not exist`: - - Make sure that `libRCTFBSDK.a` shows up in the **Link Binary with Libraries** section of your build target's **Build Phases**. +- Make sure that `libRCTFBSDK.a` shows up in the **Link Binary with Libraries** section of your build target's **Build Phases**. 4. I get this build error: `no type or protocol named UIApplicationOpenURLOptionsKey`: - - Your XCode version is too old, upgrade to XCode 8.0+. +- Your XCode version is too old, upgrade to XCode 8.0+. ## Usage + ### [Login](https://developers.facebook.com/docs/facebook-login) + #### Login Button + Access Token + ```js import React, { Component } from 'react'; import { View } from 'react-native'; @@ -231,33 +258,42 @@ export default class Login extends Component { } }); ``` + #### Requesting additional permissions with Login Manager + You can also use the Login Manager with custom UI to perform Login. + ```js // ... -import { LoginManager } from 'react-native-fbsdk'; +import { LoginManager } from "react-native-fbsdk"; // ... // Attempt a login using the Facebook login dialog asking for default permissions. -LoginManager.logInWithReadPermissions(['public_profile']).then( +LoginManager.logInWithReadPermissions(["public_profile"]).then( function(result) { if (result.isCancelled) { - console.log('Login cancelled'); + console.log("Login cancelled"); } else { - console.log('Login success with permissions: ' - +result.grantedPermissions.toString()); + console.log( + "Login success with permissions: " + + result.grantedPermissions.toString() + ); } }, function(error) { - console.log('Login fail with error: ' + error); + console.log("Login fail with error: " + error); } ); ``` + ### [Sharing](https://developers.facebook.com/docs/sharing) + #### Share dialogs + All of the dialogs included are used in a similar way, with differing content types. All content types are defined with [Flow](http://flowtype.org/) Type Annotation in js/models directory. + ```js // ... @@ -300,7 +336,9 @@ shareLinkWithShareDialog() { ``` #### Share Photos + See [SharePhotoContent](/js/models/FBSharePhotoContent.js) and [SharePhoto](/js/models/FBSharePhoto.js) to refer other options. + ```js const FBSDK = require('react-native-fbsdk'); const { @@ -319,7 +357,9 @@ ShareDialog.show(tmp.state.sharePhotoContent); ``` #### Share Videos + See [ShareVideoContent](/js/models/FBShareVideoContent.js) and [ShareVideo](/js/models/FBShareVideo.js) to refer other options. + ```js const FBSDK = require('react-native-fbsdk'); const { @@ -338,7 +378,9 @@ ShareDialog.show(tmp.state.shareVideoContent); ``` #### Share API + Your app must have the `publish_actions` permission approved to share through the share API. You should prefer to use the Share Dialogs for an easier and more consistent experience. + ```js // ... @@ -372,20 +414,26 @@ ShareApi.canShare(this.state.shareLinkContent).then( } ); ``` + ### [Analytics](https://developers.facebook.com/docs/app-events) + #### App events + ```js // ... -import { AppEventsLogger } from 'react-native-fbsdk'; +import { AppEventsLogger } from "react-native-fbsdk"; // ... // Log a $15 purchase. -AppEventsLogger.logPurchase(15, 'USD', {'param': 'value'}) +AppEventsLogger.logPurchase(15, "USD", { param: "value" }); ``` + ### [Graph API](https://developers.facebook.com/docs/graph-api) + #### Graph Requests + ```js // ... @@ -411,8 +459,19 @@ const infoRequest = new GraphRequest( // Start the graph request. new GraphRequestManager().addRequest(infoRequest).start(); ``` + +## Join the React Native community + +- Website: https://facebook.github.io/react-native +- Twitter: https://twitter.com/reactnative +- Discussion: https://discuss.reactjs.org/ + +See the [CONTRIBUTING](./CONTRIBUTING.md) file for how to help out. + ## License + See the LICENSE file. ## Platform Policy + Developers looking to integrate with the Facebook Platform should familiarize themselves with the [Facebook Platform Policy](https://developers.facebook.com/policy/).