turbo-native-modules-ios.md

id	turbo-native-modules-ios
title	Turbo Native Modules: iOS

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';

Now it's time to write some iOS platform code to make sure localStorage survives after the application is closed.

Prepare your Xcode Project

We need to prepare your iOS project using Xcode. After completing these 6 steps you'll have RCTNativeLocalStorage that implements the generated NativeLocalStorageSpec interface.

1. Open the CocoaPods generated Xcode Workspace:

cd ios
open TurboModuleExample.xcworkspace

2. Right click on app and select New Group, call the new group NativeLocalStorage.

3. In the NativeLocalStorage group, create New→File from Template.

4. Use the Cocoa Touch Class.

5. Name the Cocoa Touch Class RCTNativeLocalStorage with the Objective-C language.

6. Rename RCTNativeLocalStorage.m → RCTNativeLocalStorage.mm making it an Objective-C++ file.

Implement localStorage with NSUserDefaults

Start by updating RCTNativeLocalStorage.h:

//  RCTNativeLocalStorage.h
//  TurboModuleExample

#import <Foundation/Foundation.h>
// highlight-add-next-line
#import <NativeLocalStorageSpec/NativeLocalStorageSpec.h>

NS_ASSUME_NONNULL_BEGIN

// highlight-remove-next-line
@interface RCTNativeLocalStorage : NSObject
// highlight-add-next-line
@interface RCTNativeLocalStorage : NSObject <NativeLocalStorageSpec>

@end

First, we import the codegen-generated header for the spec; codegen creates it under ios/build/generated/ios/<codegenConfig.name>/<codegenConfig.name>.h.

Next we inherit the NativeLocalStorageSpec protocol generated by Codegen.

:::note If you have used different name for you spec's file, the protocol that is generated by the codegen is <spec_file_name>Spec or you can open the header file and check the generated protocol. :::

Then update our implementation to use NSUserDefaults with a custom suite name.

//  RCTNativeLocalStorage.m
//  TurboModuleExample

#import "RCTNativeLocalStorage.h"

static NSString *const RCTNativeLocalStorageKey = @"local-storage";

@interface RCTNativeLocalStorage()
@property (strong, nonatomic) NSUserDefaults *localStorage;
@end

@implementation RCTNativeLocalStorage

- (id) init {
  if (self = [super init]) {
    _localStorage = [[NSUserDefaults alloc] initWithSuiteName:RCTNativeLocalStorageKey];
  }
  return self;
}

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const facebook::react::ObjCTurboModule::InitParams &)params {
  return std::make_shared<facebook::react::NativeLocalStorageSpecJSI>(params);
}

- (NSString * _Nullable)getItem:(NSString *)key {
  return [self.localStorage stringForKey:key];
}

- (void)setItem:(NSString *)value
          key:(NSString *)key {
  [self.localStorage setObject:value forKey:key];
}

- (void)removeItem:(NSString *)key {
  [self.localStorage removeObjectForKey:key];
}

- (void)clear {
  NSDictionary *keys = [self.localStorage dictionaryRepresentation];
  for (NSString *key in keys) {
    [self removeItem:key];
  }
}

+ (NSString *)moduleName
{
  return @"NativeLocalStorage";
}

@end

Important things to note:

• You can use Xcode to jump to the Codegen @protocol NativeLocalStorageSpec. You can also use Xcode to generate stubs for you.
• When using a different spec file name, replace NativeLocalStorageSpecJSI with the JSI class generated from your spec name. i.e <spec_file_name>SpecJSI

Register the Native Module in your app

The last step consist in updating the package.json to tell React Native about the link between the JS specs of the Native Module and the concrete implementation of those specs in native code.

Modify the package.json as it follows:

     "start": "react-native start",
     "test": "jest"
   },
   "codegenConfig": {
     "name": "NativeLocalStorageSpec",
     "type": "modules",
     "jsSrcsDir": "specs",
     "android": {
       "javaPackageName": "com.sampleapp.specs"
     },
     // highlight-add-start
     "ios": {
        "modulesProvider": {
          "NativeLocalStorage": "RCTNativeLocalStorage"
        }
     }
     // highlight-add-end
   },

   "dependencies": {

At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:

# from the ios folder
bundle exec pod install
open SampleApp.xcworkspace

If you now build your application from Xcode, you should be able to build successfully.

Build and run your code on a Simulator

```bash npm run ios ``` ```bash yarn run ios ```