Category: Modules

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 :

$ react-native init PinterestAuth

Change directory to “ios” using the below command :

$ cd PinterestAuth/ios

Now, using the command below, create a pod file

$ pod init

Open the Podfile and add the following dependency in the target section :

pod 'PinterestSDK', :git => 'https://github.com/pinterest/ios-pdk.git'

After saving the Podfile run the following command :

$ 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 :

<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 :

#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 :

#import <Foundation/Foundation.h>
#import "React/RCTBridgeModule.h"

@interface PinterestManager : NSObject <RCTBridgeModule>

@end

Next, we will add the code below to PinterestManager.m :

#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 :

import { NativeModules } from 'react-native';  

const PinterestManager = NativeModules.PinterestManager;

PinterestManager.pinterest()
 .then((authToken) => {
  console.log("authToken : ",authToken);
 })
 .catch((error) => {
   console.log(error);
 })

Video Tutorial