Many a times in React Native App development stage, we come at a point when we want to add a features which is not in-built in react native but can be developed by native IOS or Android coding. At that stage we need to develop a Native Module for our app which allow us to extend the native features to react native.
Create a react native project “PinterestAuth” using command below :
1 |
$ react-native init PinterestAuth |
Change directory to “ios” using the below command :
1 |
$ cd PinterestAuth/ios |
Now, using the command below, create a pod file
1 |
$ pod init |
Open the Podfile and add the following dependency in the target section :
1 |
pod 'PinterestSDK', :git => 'https://github.com/pinterest/ios-pdk.git' |
After saving the Podfile run the following command :
1 |
$ pod install |
Now create a Pinterest app by going to this url and note down the APP ID for next steps.
Open project in XCode, right-click .plist
file and select Open As > Source Code. Add the code below between the <dict> </dict> tags :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleURLName</key> <string></string> <key>CFBundleURLSchemes</key> <array> <string>pdk{your-app-id}</string> </array> </dict> </array> <key>LSApplicationQueriesSchemes</key> <array> <string>pinterestsdk.v1</string> </array> |
Replace {your-app-id} with APP ID generated above.
Next, In file AppDelegate.m add the code below :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#import "PDKClient.h" - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { . . . [PDKClient configureSharedInstanceWithAppId:@"4948094164569964648"]; . . . } - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<NSString *,id> *)options { BOOL handled = [[PDKClient sharedInstance] handleCallbackURL:url]; return handled; } |
Right click on “PinterestAuth” folder and create a new Cocoa Touch Class with name “PinterestManage”. Now, we have two files PinterestManager.h and PinterestManager.m.
In the PinterestManager.h add the code below :
1 2 3 4 5 6 |
#import <Foundation/Foundation.h> #import "React/RCTBridgeModule.h" @interface PinterestManager : NSObject <RCTBridgeModule> @end |
Next, we will add the code below to PinterestManager.m :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
#import "PinterestManager.h" #import "PDKClient.h" #import "PDKResponseObject.h" @implementation PinterestManager RCT_EXPORT_MODULE(); RCT_REMAP_METHOD(pinterest, resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) { [[PDKClient sharedInstance] authenticateWithPermissions:@[PDKClientReadPublicPermissions, PDKClientWritePublicPermissions, PDKClientReadRelationshipsPermissions, PDKClientWriteRelationshipsPermissions] fromViewController:nil withSuccess:^(PDKResponseObject *responseObject) { NSString *token = [[PDKClient sharedInstance] oauthToken]; resolve(token); } andFailure:^(NSError *error) { reject(@"get_error", @"Pinterest login error", error); }]; } @end |
In the above code we are creating a Pinterest instance using the instance we are getting the token that is generated after user authenticates and return the token as a promise . In case, there is error, we reject with the error message.
Now, open file index.ios.js and add the code below :
1 2 3 4 5 6 7 8 9 10 11 |
import { NativeModules } from 'react-native'; const PinterestManager = NativeModules.PinterestManager; PinterestManager.pinterest() .then((authToken) => { console.log("authToken : ",authToken); }) .catch((error) => { console.log(error); }) |
Video Tutorial