Commit Graph

25 Commits

Author SHA1 Message Date
Christian Brevik f426a83d1b 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 16:01:02 -07:00
Vojtech Novak 23236952b3 fix typo
Summary:
properties that has been set before -> properties that have been set before
Closes https://github.com/facebook/react-native/pull/15370

Differential Revision: D5563802

Pulled By: hramos

fbshipit-source-id: 288032555308a7e89ac365ff091b01ca381d4c80
2017-08-04 11:05:02 -07:00
Niranjan Bhaskar e61257cd0a changed param of setSrc() method
Summary:
setSource() method of ReactImageView class accepts a ReadableArray and not a plain String.

<!--
Thank you for sending the PR!

If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos!

Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native.

Happy contributing!
-->
Closes https://github.com/facebook/react-native/pull/15280

Differential Revision: D5526483

Pulled By: javache

fbshipit-source-id: 5bc8ca8e7e030f5a4968cccf8fcb7431612e1836
2017-07-31 03:35:29 -07:00
Seth Fitzsimmons 8e9322c65e react@16 did away with PropTypes; require prop-types instead
Summary:
react@16 (a peerDependency) did away with the PropTypes export in favor of the prop-types module.

This updates all of the remaining references to `React.PropTypes`.
Closes https://github.com/facebook/react-native/pull/14641

Differential Revision: D5287167

Pulled By: javache

fbshipit-source-id: a917e29aa0e5470260568995dfe97f5528ec265e
2017-06-22 13:49:57 -07:00
Hector Ramos c503dae446 Merge Android UI Performance into Performance doc, reorder sidebar
Summary:
Doing some cleanup in preparation for CRNA.
Recommend `FlatList` and React Navigation for perf.
Tag docs that may only apply to apps ejected from CRNA. Currently has no effect.
Closes https://github.com/facebook/react-native/pull/12692

Differential Revision: D4654077

Pulled By: hramos

fbshipit-source-id: 1245d80d66e37d9dca9e9daf23e8b93c65cd1bf7
2017-03-06 10:10:04 -08:00
Felix Oghina d91a5c4ffb add headless js guide
Summary:
**Test plan (required)**

Run the website, check everything renders.
Closes https://github.com/facebook/react-native/pull/10325

Differential Revision: D4008427

Pulled By: bestander

fbshipit-source-id: 2ba78d33efab2bf2267a806bfc8d3b0ec50f54f5
2016-10-12 06:28:35 -07:00
Joel Marcey b1e49832ef Make prev links work in guides and APIs.
Summary:
We had rendering support for prev links, but we never had any previous links in our metadata. Only next links. This adds that support to both Guides and APIs.

**For guides**: `previous` is manually inserted into the metadata of the actual markdown file.
**For APIs/Components**: `previous` is established via code within `extractDocs.js`

> This isn't totally perfect. For example, the transition from the last guide to the first API/component has a next link from the guide, but not a previous link from the API since the way you get the previous links are different from guides and APIs. But this gets us really close.
Closes https://github.com/facebook/react-native/pull/8754

Differential Revision: D3557972

Pulled By: hramos

fbshipit-source-id: e270bb51e7a4f59f61dad28ae0928d27d0af3d4a
2016-07-13 14:58:27 -07:00
Artyom Trityak 590f90fe2e Fix guides docs to es2015 classes and remove flowtype from Animation example
Summary:
1. Animation guide page is the only place where Flowtype is used, it would be better to remove it to prevent some confusion.

2. ES2015 classes in guidelines docs pages and fixed some typos

**Test plan (required)**

Should i write any tests for this?
Closes https://github.com/facebook/react-native/pull/8339

Differential Revision: D3474192

Pulled By: bestander

fbshipit-source-id: 5531d1e399eaed0952732ac2e0bd1effc72d00a8
2016-06-22 18:58:24 -07:00
Erem Zeit 2b191bfab7 Update docs for creating an android native view
Summary:
Doc changes only.  Updating example code to reflect the new requirements discussed in this [issue](https://github.com/facebook/react-native/issues/4605).

In short, in the JS code that registers your new native view, you need to explicitly include the `propTypes` that come default for views or else you get an error.
Closes https://github.com/facebook/react-native/pull/7281

Differential Revision: D3240654

Pulled By: mkonicek

fb-gh-sync-id: f7571ce7435c5b241a17af2822e7e350ce3186cb
fbshipit-source-id: f7571ce7435c5b241a17af2822e7e350ce3186cb
2016-04-29 08:16:23 -07:00
Sebastian Markbage 6f43d1f2cb Codemod import React from 'react-native'
Reviewed By: spicyj

Differential Revision: D3223162

fb-gh-sync-id: 0b1af846afe17cdf8b2c2ca7f31f1197cde752c0
fbshipit-source-id: 0b1af846afe17cdf8b2c2ca7f31f1197cde752c0
2016-04-25 22:08:46 -07:00
Lucas Feliciano 170f4526f5 Fix broken link
Summary:Broken link on docs
Closes https://github.com/facebook/react-native/pull/6173

Differential Revision: D2999841

fb-gh-sync-id: a7162ee94ea24512ad4b992a5820a0fe89eea0ea
shipit-source-id: a7162ee94ea24512ad4b992a5820a0fe89eea0ea
2016-03-02 04:36:33 -08:00
Mateusz Zatorski 3ae99d0fea replace require with es6 import in docs
Reviewed By: svcscm

Differential Revision: D2936839

fb-gh-sync-id: 7a921709a37de5e9aadf324d5438d51851326348
shipit-source-id: 7a921709a37de5e9aadf324d5438d51851326348
2016-02-14 15:03:34 -08:00
Satyajit Sahoo 90be04610c Merge pull request #2973 from corbt/fix_docs
change native-modules link to work on gh-pages
2015-12-14 00:35:42 +05:30
Nader Dabit 201a3d010a fixed various spelling errors 2015-12-10 17:27:46 -06:00
Kyle Corbitt e3543e08f5 bugfix native ui android docs 2015-11-13 19:01:03 +00:00
Krzysztof Magiera 97f1cdaad4 Fix typo in NativeComponentsAndroid.md 2015-10-28 21:12:05 +00:00
Krzysztof Magiera 830b46ea43 Document default values for @ReactProp 2015-10-28 20:48:14 +00:00
Krzysztof Magiera 0b9c704544 Fix items orderting in NativeComponentsAndroid.md 2015-10-28 20:38:25 +00:00
Krzysztof Magiera ec104e9fba Docs for @ReactProp 2015-10-28 20:37:14 +00:00
Krzysztof Magiera 5b426c2a18 Docs for @ReactProp 2015-10-28 20:35:09 +00:00
Krzysztof Magiera 47e791fa3b Update NativeComponentsAndroid.md 2015-10-28 20:16:48 +00:00
Kyle Corbitt 1d9ba1ceb6 change native-modules link to work on gh-pages 2015-09-23 17:47:31 +01:00
Nikita Gusakov e55b373a61 Split iOS and Android docs into different categories 2015-09-18 20:54:05 +03:00
Spencer Ahrens 07e6039b70 Add comments about `nativeOnly` props 2015-09-15 10:46:08 -07:00
Martin Konicek 42eb5464fd Release React Native for Android
This is an early release and there are several things that are known
not to work if you're porting your iOS app to Android.

See the Known Issues guide on the website.

We will work with the community to reach platform parity with iOS.
2015-09-14 18:13:39 +01:00