Async-storage: Pod added to podfile after running link

[josmithua]

You want to:

Ask question

Details:

In the manual linking instructions, the iOS instructions do not say to add a pod inside the Podfile. However, when I ran react-native link @react-native-community/async-storage it added the following line:

pod 'react-native-async-storage', :path => '../node_modules/@react-native-community/async-storage'

I presume this is expected behavior? Should the instructions be updated?

[Krizzu]

Hey @sm1th, thanks for the question.

react-native link favors pods linking above manual linking - if it finds that iOS project uses pods, it will use it to link module. Otherwise, manual linking happens. This is the line responsible for it.

I guess it would be great to add a section about manual linking Async Storage through pods.

[josmithua]

Ah, thanks @Krizzu.

The problem now then is when I do a pod install with that line in my Podfile, it installs the deprecated react pod with it:

-> pod install
Analyzing dependencies
Fetching podspec for `react-native-async-storage` from `../node_modules/@react-native-community/async-storage`
Downloading dependencies
Installing React (0.11.0)
Installing react-native-async-storage (1.2.0)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There is 1 dependency from the Podfile and 2 total pods installed.

[!] React has been deprecated

[TheTimeWalker]

You'll have to follow the CocoaPads guide in RN Docs and add the boilerplates for React and others

[josmithua]

Why is this necessary? My app is a greenfield react-native app, and everything worked fine before I had to switch to this package instead of the react-native built-in AsyncStorage.

[TheTimeWalker]

It's necessary if you're using CocoaPods. I guessed since you've used link and it added a pod you've already been using pods before. That's what @Krizzu tried to explain as else the linking would've done the manual linking steps and not added a pod for you. Have you used other libraries that needed CocoaPods or is async-storage the first one you've had to add a PodFile?

I'm not sure what the manual linking steps here are but my guess is that it's similar to other libraries:

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ @react-native-community/async-storage and add AsyncStorage.xcodeproj
3. In XCode, in the project navigator, select your project. Add libAsyncStorage.a to your project's Build Phases ➜ Link Binary With Libraries
4. Under your project → Build Settings → Search Paths → Header Search Paths add: (SRCROOT)/../node_modules/@react-native-community/async-storage/ios

[Krizzu]

@TheTimeWalker Thanks a lot for clarifying this.

@sm1th If you have any more questions, just let us know in this thread. I'll try to come up with manual linking guide later today.

[josmithua]

@TheTimeWalker yes you are correct, I am using pods for a few other dependencies. One of my react-native plugin dependencies requires the addition of a Pod, and a few others create entries in my podfile automatically. Besides those, I don't have any other Pods likes the ones in the RN CocoaPods guide you linked.

So would it be in my best to transition to have everything linked in the Podfile as per the guide to avoid problems in the future and so I can use react-native link painlessly?

[wkoutre]

@sm1th In my opinion and experience (~2.5 years doing RN dev), yes ^^ it's in your best interest to do this.

For reference, the applicable part of my current project's Podfile is:

target 'MyApp' do
 # To use CocoaPods with React Native, you need to add this specific Yoga spec as well

  pod 'React', :path => react_native_path, :subspecs => [
    'Core',
    'CxxBridge', # Include this for RN >= 0.47
    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
    'RCTNetwork',
    'RCTWebSocket', # Needed for debugging
    'RCTAnimation', # Needed for FlatList and animations running on native UI thread
    'RCTImage'
    ]

  pod 'yoga', :path => react_native_path + '/ReactCommon/yoga'

# Third Party Dependencies
# DoubleConversion, Folly, and GLog are for CxxBridge, a podspec of 'React'

  pod 'DoubleConversion', podspec: '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'Folly', podspec: '../node_modules/react-native/third-party-podspecs/Folly.podspec'
  pod 'glog', podspec: '../node_modules/react-native/third-party-podspecs/glog.podspec'

  ... the rest

end

On another note, shouldn't the react-native link @react-native-community/async-storage script also run a pod install if it recognizes the existence of a Podfile and adds the respective line?

Many other dependencies I use do this automatically. Any notable downsides to adding this vs a manual follow-up?

[josmithua]

@wkoutre Thanks for your input! I will use the Podfile from now on. Question though: If I transition to using the Podfile to link the react-native core dependencies, will I have to remove them first, since they were manually added with the react-native cli?

[Krizzu]

@sm1th If you're talking about projects linked in xcode - yeah. Otherwise, you'll end up with duplicated modules - from Pods and from manual linking.

[josmithua]

Thanks @Krizzu. So basically I have to undo the steps in Xcode that @TheTimeWalker mentioned above for every linked library?

[TheTimeWalker]

Yes, you have to revert them as the workspace automatically adds all the libraries from the Pods project file. I think building won't fail if you don't do that, it'll just add unnecessary overhead

[josmithua]

Thanks @TheTimeWalker, I've been trying to make this work for a few hours now but can't seem to. If I create a brand new react-native project, add the Podfile with the React pods, and then build, it builds fine like you said. But as soon as I start removing .xcodeproj files under the Libraries folder (right-click library > Delete > Remove reference), I start getting errors.

[TheTimeWalker]

Have you found a solution to this? I had to do that for my project too and strangely enough, I had no issues with removing old references on my project's Library. Check that you're in the scode workspace and that you're not removing references in the Pods project. Only yours.

[josmithua]

Hi @TheTimeWalker, no I didn't get it to work. I just tried again. Here's the steps I went through:

1. Create a new react-native project: react-native init TestReactNativeApp --template=typescript
2. Add podfile: cd ios && pod init
3. Clear podfile (except global platform definition) and add the default podfile from the integration guide:

# Uncomment the next line to define a global platform for your project
platform :ios, '10.0'

# The target name is most likely the name of your project.
target 'TestReactNativeApp' do

  # Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # Include this for RN >= 0.47
    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # Needed for debugging
    'RCTAnimation', # Needed for FlatList and animations running on native UI thread
    # Add any other subspecs you want to use in your project
  ]
  # Explicitly include Yoga if you are using RN >= 0.42.0
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  # Third party deps podspec link
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

end

1. pod install
2. Open TestReactNativeApp.xcworkspace in Xcode
3. Build and run (works fine)
4. In project navigator, under TestReactNativeApp > Libraries, right click RCTText > Delete > Remove reference
5. Build (works fine), but
6. Run gives error on simulator: No component found for view with name "RCTRawText"

[TheTimeWalker]

Ah! I wouldn't remove every library reference from XCode. These are still probably needed inside or else react-native init wouldn't have these inside if that's not needed. . This is always a case by case basis where some libraries need to be linked into your project directly and some aren't. AsyncStorage for example doesn't appear under your project's library but RN App Auth does. The reference removal was only for cases where you'd have manually linked new libraries like AsyncStorage instead of linking it with CocoaPods.

[josmithua]

Oh.. I thought once they were defined in the Podfile (like RCTText) I could remove them from Libraries. Thanks for clarifying!

So what's the advantage of defining the React pod and subspecs in the Podfile? Is it just so that dependencies like AsyncStorage that depend on React know where to find React and don't install the deprecated version 0.11?

[TheTimeWalker]

Yup, defining them makes it so that CocoaPods knows where to look for local installations instead of fetching and installing these from the repository

[josmithua]

Awesome. Thank you so much @TheTimeWalker and everybody else for your help the past couple weeks! Much appreciated.

[cwagner22]

Why is it so complicated to link the library if I already have a Podfile? After linking and running pod install I have a lot of pods dependencies installed including the deprecated React as mentioned above.
Even after doing that I get: @RNCommunity/AsyncStorage: NativeModule.RCTAsyncStorage is null.
Can't affort the time right now of learning CocoaPods and moving all my dependencies there.