2015-03-27 03:12:55 +00:00
|
|
|
---
|
2015-07-27 17:03:46 +00:00
|
|
|
id: linking-libraries-ios
|
2015-09-18 17:54:05 +00:00
|
|
|
title: Linking Libraries
|
2015-03-27 03:12:55 +00:00
|
|
|
layout: docs
|
2015-09-18 17:54:05 +00:00
|
|
|
category: Guides (iOS)
|
2015-07-27 17:03:46 +00:00
|
|
|
permalink: docs/linking-libraries-ios.html
|
2017-03-06 17:50:36 +00:00
|
|
|
banner: ejected
|
2016-11-07 05:03:16 +00:00
|
|
|
next: running-on-simulator-ios
|
Add props for overriding native component
Summary:
Opening a new PR for #10946 (see discussion there).
This PR builds upon #14775 (iOS ViewManager inheritance) and #14261 (more extensible Android WebView).
**Motivation**
When `WebView.android.js` and `WebView.ios.js` use `requireNativeComponent`, they are hard-coded to require `RCTWebView`. This means if you want to re-use the same JS-logic, but require a custom native WebView-implementation, you have to duplicate the entire JS-code files.
The same is true if you want to pass through any custom events or props, which you want to set on the custom native `WebView`.
What I'm trying to solve with this PR is to able to extend native WebView logic, and being able to re-use and extend existing WebView JS-logic.
This is done by adding a new `nativeConfig` prop on WebView. I've also moved the extra `requireNativeComponent` config to `WebView.extraNativeComponentConfig` for easier re-use.
**Test plan**
jacobp100 has been kind enough to help me with docs for this new feature. So that is part of the PR and can be read for some information.
I've also created an example app which demonstrates how to use this functionality: https://github.com/cbrevik/webview-native-config-example
If you've implemented the native side as in the example repo above, it should be fairly easy to use from JavaScript like this:
```javascript
import React, { Component, PropTypes } from 'react';
import { WebView, requireNativeComponent, NativeModules } from 'react-native';
const { CustomWebViewManager } = NativeModules;
export default class CustomWebView extends Component {
static propTypes = {
...WebView.propTypes,
finalUrl: PropTypes.string,
onNavigationCompleted: PropTypes.func,
};
_onNavigationCompleted = (event) => {
const { onNavigationCompleted } = this.props;
onNavigationCompleted && onNavigationCompleted(event);
}
render() {
return (
<WebView
{...this.props}
nativeConfig={{
component: RCTCustomWebView,
props: {
finalUrl: this.props.finalUrl,
onNavigationCompleted: this._onNavigationCompleted,
},
viewManager: CustomWebViewManager
}}
/>
);
}
}
const RCTCustomWebView = requireNativeComponent(
'RCTCustomWebView',
CustomWebView,
WebView.extraNativeComponentConfig
);
```
As you see, you require the custom native implementation at the bottom, and send in that along with any custom props with the `nativeConfig` prop on the `WebView`. You also send in the `viewManager` since iOS requires that for `startLoadWithResult`.
**Discussion**
As noted in the original PR, this could in principle be done with more React Native components, to make it easier for the community to re-use and extend native components.
Closes https://github.com/facebook/react-native/pull/15016
Differential Revision: D5701280
Pulled By: hramos
fbshipit-source-id: 6c3702654339b037ee81d190c623b8857550e972
2017-09-19 22:49:44 +00:00
|
|
|
previous: custom-webview-ios
|
2015-03-27 03:12:55 +00:00
|
|
|
---
|
|
|
|
|
|
|
|
Not every app uses all the native capabilities, and including the code to support
|
2015-03-31 04:22:39 +00:00
|
|
|
all those features would impact the binary size... But we still want to make it
|
2015-03-27 03:12:55 +00:00
|
|
|
easy to add these features whenever you need them.
|
|
|
|
|
|
|
|
With that in mind we exposed many of these features as independent static libraries.
|
|
|
|
|
2015-03-31 04:22:39 +00:00
|
|
|
For most of the libs it will be as simple as dragging two files, sometimes a third
|
2015-03-27 03:12:55 +00:00
|
|
|
step will be necessary, but no more than that.
|
|
|
|
|
|
|
|
_All the libraries we ship with React Native live on the `Libraries` folder in
|
2015-05-18 01:41:40 +00:00
|
|
|
the root of the repository. Some of them are pure JavaScript, and you only need
|
2015-03-27 03:12:55 +00:00
|
|
|
to `require` it. Other libraries also rely on some native code, in that case
|
|
|
|
you'll have to add these files to your app, otherwise the app will throw an
|
|
|
|
error as soon as you try to use the library._
|
|
|
|
|
2017-08-10 10:10:04 +00:00
|
|
|
## Here are the few steps to link your libraries that contain native code
|
2015-03-27 03:12:55 +00:00
|
|
|
|
2015-12-15 16:55:38 +00:00
|
|
|
### Automatic linking
|
|
|
|
|
|
|
|
#### Step 1
|
|
|
|
|
|
|
|
Install a library with native dependencies:
|
|
|
|
```bash
|
2015-12-20 07:40:09 +00:00
|
|
|
$ npm install <library-with-native-dependencies> --save
|
2015-12-15 16:55:38 +00:00
|
|
|
```
|
|
|
|
|
2016-09-23 18:47:51 +00:00
|
|
|
**Note:** _`--save` or `--save-dev` flag is very important for this step. React Native will link
|
2015-12-15 16:55:38 +00:00
|
|
|
your libs based on `dependencies` and `devDependencies` in your `package.json` file._
|
|
|
|
|
2016-09-23 18:47:51 +00:00
|
|
|
#### Step 2
|
2015-12-15 16:55:38 +00:00
|
|
|
|
|
|
|
Link your native dependencies:
|
|
|
|
```bash
|
2016-09-23 18:47:51 +00:00
|
|
|
$ react-native link
|
2015-12-15 16:55:38 +00:00
|
|
|
```
|
|
|
|
|
2017-04-13 11:57:13 +00:00
|
|
|
Done! All libraries with native dependencies should be successfully linked to your iOS/Android project.
|
2015-12-15 16:55:38 +00:00
|
|
|
|
|
|
|
### Manual linking
|
|
|
|
|
|
|
|
#### Step 1
|
2015-03-27 03:12:55 +00:00
|
|
|
|
|
|
|
If the library has native code, there must be a `.xcodeproj` file inside it's
|
|
|
|
folder.
|
2015-10-14 23:44:36 +00:00
|
|
|
Drag this file to your project on Xcode (usually under the `Libraries` group
|
2015-03-27 03:12:55 +00:00
|
|
|
on Xcode);
|
|
|
|
|
2016-02-11 14:16:34 +00:00
|
|
|
![](img/AddToLibraries.png)
|
2015-03-28 19:22:50 +00:00
|
|
|
|
2015-12-15 16:55:38 +00:00
|
|
|
#### Step 2
|
2015-03-27 03:12:55 +00:00
|
|
|
|
|
|
|
Click on your main project file (the one that represents the `.xcodeproj`)
|
|
|
|
select `Build Phases` and drag the static library from the `Products` folder
|
2015-05-07 22:05:28 +00:00
|
|
|
inside the Library you are importing to `Link Binary With Libraries`
|
2015-03-27 03:12:55 +00:00
|
|
|
|
2016-02-11 14:16:34 +00:00
|
|
|
![](img/AddToBuildPhases.png)
|
2015-03-28 19:22:50 +00:00
|
|
|
|
2015-12-15 16:55:38 +00:00
|
|
|
#### Step 3
|
2015-03-27 03:12:55 +00:00
|
|
|
|
2015-03-28 19:22:50 +00:00
|
|
|
Not every library will need this step, what you need to consider is:
|
|
|
|
|
|
|
|
_Do I need to know the contents of the library at compile time?_
|
|
|
|
|
2015-05-18 01:41:40 +00:00
|
|
|
What that means is, are you using this library on the native side or only in
|
|
|
|
JavaScript? If you are only using it in JavaScript, you are good to go!
|
2015-03-28 19:22:50 +00:00
|
|
|
|
2015-03-31 04:22:39 +00:00
|
|
|
This step is not necessary for libraries that we ship with React Native with the
|
2016-05-27 17:14:12 +00:00
|
|
|
exception of `PushNotificationIOS` and `Linking`.
|
2015-03-28 19:22:50 +00:00
|
|
|
|
|
|
|
In the case of the `PushNotificationIOS` for example, you have to call a method
|
2015-12-10 23:27:46 +00:00
|
|
|
on the library from your `AppDelegate` every time a new push notification is
|
2015-03-28 19:22:50 +00:00
|
|
|
received.
|
2015-03-27 03:12:55 +00:00
|
|
|
|
2015-03-28 19:22:50 +00:00
|
|
|
For that we need to know the library's headers. To achieve that you have to go
|
|
|
|
to your project's file, select `Build Settings` and search for `Header Search
|
2015-09-02 22:09:12 +00:00
|
|
|
Paths`. There you should include the path to your library (if it has relevant
|
2015-03-28 19:22:50 +00:00
|
|
|
files on subdirectories remember to make it `recursive`, like `React` on the
|
|
|
|
example).
|
2015-03-27 03:12:55 +00:00
|
|
|
|
2016-02-11 14:16:34 +00:00
|
|
|
![](img/AddToSearchPaths.png)
|