Files
flipper/docs/getting-started/ios-native.mdx
Kevin Strider 40fa16aac1 ios-native.mdx (SetUp - Generic iOS Apps)
Summary: Restyle of the page, including changes to spelling, grammar, links, and structure (where relevant).

Reviewed By: lblasa

Differential Revision: D36275804

fbshipit-source-id: 4d6538b0c3123dfd88980b05bee3cbb2b9c3d4f2
2022-05-10 09:09:57 -07:00

158 lines
6.7 KiB
Plaintext

---
id: ios-native
title: Adding Flipper to Generic iOS Apps
sidebar_label: Generic iOS apps
---
import useBaseUrl from "@docusaurus/useBaseUrl";
import Link from "@docusaurus/Link";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
:::note
Swift and Objective-C are supported for Flipper with CocoaPods as build and distribution mechanism.
:::
## CocoaPods
The following configuration assumes CocoaPods 1.9+:
```ruby
project 'MyApp.xcodeproj'
flipperkit_version = '0.144.0'
target 'MyApp' do
platform :ios, '10.0'
# It is likely that you'll only want to include Flipper in debug builds,
# in which case you add the `:configuration` directive:
pod 'FlipperKit', '~>' + flipperkit_version, :configuration => 'Debug'
pod 'FlipperKit/FlipperKitLayoutComponentKitSupport', '~>' + flipperkit_version, :configuration => 'Debug'
pod 'FlipperKit/SKIOSNetworkPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
pod 'FlipperKit/FlipperKitUserDefaultsPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
# ...unfortunately at this time that means you'll need to explicitly mark
# transitive dependencies as being for debug build only as well:
pod 'Flipper-DoubleConversion', :configuration => 'Debug'
pod 'Flipper-Folly', :configuration => 'Debug'
pod 'Flipper-Glog', :configuration => 'Debug'
pod 'Flipper-PeerTalk', :configuration => 'Debug'
pod 'CocoaLibEvent', :configuration => 'Debug'
pod 'boost-for-react-native', :configuration => 'Debug'
pod 'OpenSSL-Universal', :configuration => 'Debug'
pod 'CocoaAsyncSocket', :configuration => 'Debug'
# ...except, of course, those transitive dependencies that your
# application itself depends, e.g.:
pod 'ComponentKit', '~> 0.31'
# If you use `use_frameworks!` in your Podfile,
# uncomment the below $static_framework array and also
# the pre_install section. This will cause Flipper and
# it's dependencies to be built as a static library and all other pods to
# be dynamic.
#
# NOTE Doing this may lead to a broken build if any of these are also
# transitive dependencies of other dependencies and are expected
# to be built as frameworks.
#
# $static_framework = ['FlipperKit', 'Flipper', 'Flipper-Folly',
# 'CocoaAsyncSocket', 'ComponentKit', 'Flipper-DoubleConversion',
# 'Flipper-Glog', 'Flipper-PeerTalk', 'Flipper-RSocket', 'Yoga', 'YogaKit',
# 'CocoaLibEvent', 'OpenSSL-Universal', 'boost-for-react-native', 'Flipper-Fmt']
#
# pre_install do |installer|
# Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {}
# installer.pod_targets.each do |pod|
# if $static_framework.include?(pod.name)
# def pod.build_type;
# Pod::BuildType.static_library
# end
# end
# end
# end
end
```
## For pure Objective-C projects
For pure Objective-C projects, add the following to your settings:
1. `/usr/lib/swift` as the first entry of the `LD_RUNPATH_SEARCH_PATHS`
2. Add the following in `LIBRARY_SEARCH_PATHS`
```bash
"\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"",
"\"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)\"",
```
3. If, after following the above two steps, there are still errors such as `Undefined symbol _swift_getFunctionReplacement`, then set `DEAD_CODE_STRIPPING` to `YES`. The reference for this fix is in the [Swift forum](https://forums.swift.org/t/undefined-symbol-swift-getfunctionreplacement/30495/4)
This is done to overcome a bug with Xcode 11 which fails to compile Swift code when bitcode is enabled. Flipper transitively depends on YogaKit, which is written in Swift.
For more information about this issue, refer to the Swift code [tweet](https://twitter.com/krzyzanowskim/status/1151549874653081601?s=21) and [Github issue](https://github.com/Carthage/Carthage/issues/2825).
Install the dependencies by running `pod install`. You can now import and initialize Flipper in yourAppDelegate.
<Tabs defaultValue="objC" values={[{ label: 'ObjC', value: 'objC'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="objC">
```objc
#import <FlipperKit/FlipperClient.h>
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.h>
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
FlipperClient *client = [FlipperClient sharedClient];
SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
[FlipperKitLayoutComponentKitSupport setUpWithDescriptorMapper: layoutDescriptorMapper];
[client addPlugin: [[FlipperKitLayoutPlugin alloc] initWithRootNode: application
withDescriptorMapper: layoutDescriptorMapper]];
[client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
[client addPlugin: [[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
[client start];
...
}
@end
```
</TabItem>
<TabItem value="swift">
```swift
import UIKit
import FlipperKit
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
let client = FlipperClient.shared()
let layoutDescriptorMapper = SKDescriptorMapper(defaults: ())
FlipperKitLayoutComponentKitSupport.setUpWith(layoutDescriptorMapper)
client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!))
client?.start()
return true
}
}
```
</TabItem>
</Tabs>
## Enabling plugins
Finally, you need to add plugins to your Flipper client. The Layout Inspector plugin is shown above to get you started.
See <Link to={useBaseUrl("/docs/setup/plugins/network")}>Network Plugin</Link> and [Layoutj Inspector Plugin](https://www.internalfb.com/intern/staticdocs/flipper/docs/features/plugins/inspector/) for information on how to add them and enable Litho or ComponentKit support. You can check the sample apps in the [GitHub repo](https://github.com/facebook/flipper) for examples of integrating other plugins.
## Questions or issues
If you have any questions or issues, refer to the <Link to={useBaseUrl("/docs/troubleshooting")}>troubleshooting</Link> page, or post the details on the [Flipper Support](https://fb.workplace.com/groups/flippersupport) Workplace group.