From 6f1417c84982e0705912b57bf9d1aaaf1476d7d9 Mon Sep 17 00:00:00 2001 From: Konstantin Raev Date: Thu, 11 Feb 2016 06:16:34 -0800 Subject: [PATCH] CI now builds docs website and deploys it to /%version% path Summary: Copy of #5760 reverted merge. We need to preserve history of docs changes on the webserver. The goal is to allow users to browse outdated versions of docs. To make things simple all websites will be released to https://facebook.github.io/react-native/releases/version/XX folder when there is a branch cut. I switched from Travis CI to Cirle CI because it works faster and I am more familiar with it. How it works: 1. If code is pushed to `master` branch then CI will build a fresh version of docs and put it in https://github.com/facebook/react-native/tree/gh-pages/releases/next folder. Github will serve this website from https://facebook.github.io/react-native/releases/version/next URL. All relative URLs will work within that website 2. If code is pushed to `0.20-stable` branch then CI will build a fresh version of docs and put it in https://github.com/facebook/react-native/tree/gh-pages/releases/0.20 folder. Github will serve this website from https://facebook.github.io/react-native/releases/v Closes https://github.com/facebook/react-native/pull/5873 Reviewed By: svcscm Differential Revision: D2926901 Pulled By: androidtrunkagent fb-gh-sync-id: 16aea430bac815933d9c603f03921cc6353906f1 shipit-source-id: 16aea430bac815933d9c603f03921cc6353906f1 --- .travis.yml | 20 +--- .../Animated/src/AnimatedImplementation.js | 2 +- Libraries/Components/ScrollView/ScrollView.js | 2 +- .../PushNotificationIOS.js | 2 +- Libraries/ReactIOS/NativeMethodsMixin.js | 6 +- Libraries/Utilities/AlertIOS.js | 2 +- .../browser/eventPlugins/PanResponder.js | 2 +- circle.yml | 16 +++ docs/AndroidUIPerformance.md | 24 ++--- docs/Animations.md | 18 ++-- docs/CommunicationIOS.md | 12 +-- docs/DevelopmentSetupAndroid.md | 4 +- docs/DirectManipulation.md | 2 +- docs/EmbeddedAppAndroid.md | 2 +- docs/EmbeddedAppIOS.md | 4 +- docs/GestureResponderSystem.md | 2 +- docs/GettingStarted.md | 8 +- docs/Images.md | 2 +- docs/KnownIssues.md | 4 +- docs/LinkingLibraries.md | 6 +- docs/NavigatorComparison.md | 4 +- docs/Performance.md | 2 +- docs/RunningOnDeviceIOS.md | 2 +- docs/SignedAPKAndroid.md | 2 +- docs/Style.md | 12 +-- docs/Troubleshooting.md | 2 +- docs/Tutorial.md | 18 ++-- docs/Upgrading.md | 2 +- website/.gitignore | 1 + website/README.md | 10 +- website/core/DocsSidebar.js | 2 +- website/core/HeaderLinks.js | 6 +- website/core/Site.js | 15 ++- website/layout/AutodocsLayout.js | 4 +- website/package.json | 6 +- website/publish-android.sh | 36 ------- website/publish-gh-pages.js | 99 +++++++++++++++++++ website/publish.sh | 33 ------- website/server/convert.js | 11 +++ website/server/extractDocs.js | 2 +- website/server/generate.js | 3 +- website/src/react-native/circle.yml | 4 + website/src/react-native/css/react-native.css | 2 +- website/src/react-native/index.js | 2 +- 44 files changed, 234 insertions(+), 186 deletions(-) delete mode 100755 website/publish-android.sh create mode 100644 website/publish-gh-pages.js delete mode 100755 website/publish.sh create mode 100644 website/src/react-native/circle.yml diff --git a/.travis.yml b/.travis.yml index 9b10d721b..c1d47f6c0 100644 --- a/.travis.yml +++ b/.travis.yml @@ -42,24 +42,11 @@ script: npm test -- '\/(local|private|react-native)-cli\/' - elif [ "$TEST_TYPE" = build_website ] - then - - cd website - $(which npm) install - ./setup.sh - if [ "$TRAVIS_PULL_REQUEST" = false ] && [ "$TRAVIS_BRANCH" = master ]; then - # Automatically publish the website - echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" >~/.netrc - ./publish.sh - else - # Make sure the website builds without error - node server/generate.js - fi - elif [ "$TEST_TYPE" = e2e ] then + ./scripts/e2e-test.sh + else echo "Unknown test type: $TEST_TYPE" exit 1 @@ -71,11 +58,8 @@ env: - TEST_TYPE=js - TEST_TYPE=packager - TEST_TYPE=cli - - TEST_TYPE=build_website - TEST_TYPE=e2e global: - # $GITHUB_TOKEN - - secure: "HlmG8M2DmBUSBh6KH1yVIe/8gR4iibg4WfcHq1x/xYQxGbvleq7NOo04V6eFHnl9cvZCu+PKH0841WLnGR7c4BBf47GVu/o16nXzggPumHKy++lDzxFPlJ1faMDfjg/5vjbAxRUe7D3y98hQSeGHH4tedc8LvTaFLVu7iiGqvjU=" # $APPETIZE_TOKEN - secure: "egsvVSpszTzrNd6bN62DsVAzMiSZI/OHgdizfPryqvqWBf655ztE6XFQSEFNpuIAzSKDDF25ioT8iPfVsbC1iK6HDWHfmqYxML0L+OoU0gi+hV2oKUBFZDZ1fwSnFoWuBdNdMDpLlUxvJp6N1WyfNOB2dxuZUt8eTt48Hi3+Hpc=" # $S3_TOKEN diff --git a/Libraries/Animated/src/AnimatedImplementation.js b/Libraries/Animated/src/AnimatedImplementation.js index 3d70feef8..01b701a77 100644 --- a/Libraries/Animated/src/AnimatedImplementation.js +++ b/Libraries/Animated/src/AnimatedImplementation.js @@ -1556,7 +1556,7 @@ var event = function( * interaction patterns, like drag-and-drop. * * You can see more example usage in `AnimationExample.js`, the Gratuitous - * Animation App, and [Animations documentation guide](http://facebook.github.io/react-native/docs/animations.html). + * Animation App, and [Animations documentation guide](docs/animations.html). * * Note that `Animated` is designed to be fully serializable so that animations * can be run in a high performance way, independent of the normal JavaScript diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index cb07b7409..bdc8978e5 100644 --- a/Libraries/Components/ScrollView/ScrollView.js +++ b/Libraries/Components/ScrollView/ScrollView.js @@ -315,7 +315,7 @@ var ScrollView = React.createClass({ * A RefreshControl component, used to provide pull-to-refresh * functionality for the ScrollView. * - * See [RefreshControl](http://facebook.github.io/react-native/docs/refreshcontrol.html). + * See [RefreshControl](docs/refreshcontrol.html). */ refreshControl: PropTypes.element, diff --git a/Libraries/PushNotificationIOS/PushNotificationIOS.js b/Libraries/PushNotificationIOS/PushNotificationIOS.js index 189bc7ead..a4adace18 100644 --- a/Libraries/PushNotificationIOS/PushNotificationIOS.js +++ b/Libraries/PushNotificationIOS/PushNotificationIOS.js @@ -30,7 +30,7 @@ var DEVICE_LOCAL_NOTIF_EVENT = 'localNotificationReceived'; * To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) * and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). * - * [Manually link](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking) the PushNotificationIOS library + * [Manually link](docs/linking-libraries-ios.html#manual-linking) the PushNotificationIOS library * * - Be sure to add the following to your `Header Search Paths`: * `$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` diff --git a/Libraries/ReactIOS/NativeMethodsMixin.js b/Libraries/ReactIOS/NativeMethodsMixin.js index 33b99994a..c288ea8a0 100644 --- a/Libraries/ReactIOS/NativeMethodsMixin.js +++ b/Libraries/ReactIOS/NativeMethodsMixin.js @@ -56,7 +56,7 @@ function warnForStyleProps(props, validAttributes) { * composite components that aren't directly backed by a native view. This will * generally include most components that you define in your own app. For more * information, see [Direct - * Manipulation](/react-native/docs/direct-manipulation.html). + * Manipulation](docs/direct-manipulation.html). */ var NativeMethodsMixin = { /** @@ -74,7 +74,7 @@ var NativeMethodsMixin = { * Note that these measurements are not available until after the rendering * has been completed in native. If you need the measurements as soon as * possible, consider using the [`onLayout` - * prop](/react-native/docs/view.html#onlayout) instead. + * prop](docs/view.html#onlayout) instead. */ measure: function(callback: MeasureOnSuccessCallback) { UIManager.measure( @@ -108,7 +108,7 @@ var NativeMethodsMixin = { * This function sends props straight to native. They will not participate in * future diff process - this means that if you do not include them in the * next render, they will remain active (see [Direct - * Manipulation](/react-native/docs/direct-manipulation.html)). + * Manipulation](docs/direct-manipulation.html)). */ setNativeProps: function(nativeProps: Object) { if (__DEV__) { diff --git a/Libraries/Utilities/AlertIOS.js b/Libraries/Utilities/AlertIOS.js index ec8c926c6..1da237b0c 100644 --- a/Libraries/Utilities/AlertIOS.js +++ b/Libraries/Utilities/AlertIOS.js @@ -45,7 +45,7 @@ type ButtonsArray = Array<{ class AlertIOS { /** * Creates a popup to alert the user. See - * [Alert](/react-native/docs/alert.html). + * [Alert](docs/alert.html). * * - title: string -- The dialog's title. * - message: string -- An optional message that appears above the text input. diff --git a/Libraries/vendor/react/browser/eventPlugins/PanResponder.js b/Libraries/vendor/react/browser/eventPlugins/PanResponder.js index 36490a843..c633dd724 100644 --- a/Libraries/vendor/react/browser/eventPlugins/PanResponder.js +++ b/Libraries/vendor/react/browser/eventPlugins/PanResponder.js @@ -23,7 +23,7 @@ var currentCentroidY = TouchHistoryMath.currentCentroidY; * recognize simple multi-touch gestures. * * It provides a predictable wrapper of the responder handlers provided by the - * [gesture responder system](/react-native/docs/gesture-responder-system.html). + * [gesture responder system](docs/gesture-responder-system.html). * For each handler, it provides a new `gestureState` object alongside the * native event object: * diff --git a/circle.yml b/circle.yml index 7ea22ee0e..7d396cc43 100644 --- a/circle.yml +++ b/circle.yml @@ -26,12 +26,15 @@ dependencies: - npm install -g npm@3.2 - source scripts/circle-ci-android-setup.sh && getAndroidSDK - ./gradlew :ReactAndroid:downloadBoost :ReactAndroid:downloadDoubleConversion :ReactAndroid:downloadFolly :ReactAndroid:downloadGlog + - cd website && npm install cache_directories: - "ReactAndroid/build/downloads" - "buck" - "buck-out/bin" + - "website/node_modules" override: - npm install + test: pre: # starting emulator in advance because it takes very long to boot @@ -41,6 +44,7 @@ test: - ./gradlew :ReactAndroid:assembleDebug -PdisablePreDex -Pjobs=1: timeout: 360 - source scripts/circle-ci-android-setup.sh && waitForAVD + override: # buck tests - buck/bin/buck test ReactAndroid/src/test/... --config build.threads=1 @@ -57,9 +61,21 @@ test: # run tests on the emulator - ./gradlew :ReactAndroid:connectedAndroidTest -PdisablePreDex --stacktrace --info: timeout: 360 + + # testing docs generation is not broken + - cd website && node ./server/generate.js post: # copy test report for Circle CI to display - mkdir -p $CIRCLE_TEST_REPORTS/junit/ - find . -type f -regex ".*/build/test-results/debug/.*xml" -exec cp {} $CIRCLE_TEST_REPORTS/junit/ \; - find . -type f -regex ".*/outputs/androidTest-results/connected/.*xml" -exec cp {} $CIRCLE_TEST_REPORTS/junit/ \; +deployment: + website: + branch: [/.*-stable/, /master/] + commands: + # generate docs website + - git config --global user.email "bestnader@fb.com" + - git config --global user.name "Website Deployment Script" + - echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" > ~/.netrc + - cd website && GIT_USER=bestander npm run gh-pages diff --git a/docs/AndroidUIPerformance.md b/docs/AndroidUIPerformance.md index 321bb0c46..3dc51532d 100644 --- a/docs/AndroidUIPerformance.md +++ b/docs/AndroidUIPerformance.md @@ -43,7 +43,7 @@ Once the trace starts collecting, perform the animation or interaction you care After opening the trace in your browser (preferably Chrome), you should see something like this: -![Example](/react-native/img/SystraceExample.png) +![Example](img/SystraceExample.png) **HINT**: Use the WASD keys to strafe and zoom @@ -51,7 +51,7 @@ After opening the trace in your browser (preferably Chrome), you should see some The first thing you should do is highlight the 16ms frame boundaries if you haven't already done that. Check this checkbox at the top right of the screen: -![Enable VSync Highlighting](/react-native/img/SystraceHighlightVSync.png) +![Enable VSync Highlighting](img/SystraceHighlightVSync.png) You should see zebra stripes as in the screenshot above. If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable. @@ -65,43 +65,43 @@ On the left side, you'll see a set of threads which correspond to the timeline r This is where standard android measure/layout/draw happens. The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread. The events that you see on this thread should look something like this and have to do with `Choreographer`, `traversals`, and `DispatchUI`: -![UI Thread Example](/react-native/img/SystraceUIThreadExample.png) +![UI Thread Example](img/SystraceUIThreadExample.png) ### JS Thread This is where JS is executed. The thread name will be either `mqt_js` or `<...>` depending on how cooperative the kernel on your device is being. To identify it if it doesn't have a name, look for things like `JSCall`, `Bridge.executeJSCall`, etc: -![JS Thread Example](/react-native/img/SystraceJSThreadExample.png) +![JS Thread Example](img/SystraceJSThreadExample.png) ### Native Modules Thread This is where native module calls (e.g. the `UIManager`) are executed. The thread name will be either `mqt_native_modules` or `<...>`. To identify it in the latter case, look for things like `NativeCall`, `callJavaModuleMethod`, and `onBatchComplete`: -![Native Modules Thread Example](/react-native/img/SystraceNativeModulesThreadExample.png) +![Native Modules Thread Example](img/SystraceNativeModulesThreadExample.png) ### Bonus: Render Thread If you're using Android L (5.0) and up, you will also have a render thread in your application. This thread generates the actual OpenGL commands used to draw your UI. The thread name will be either `RenderThread` or `<...>`. To identify it in the latter case, look for things like `DrawFrame` and `queueBuffer`: -![Render Thread Example](/react-native/img/SystraceRenderThreadExample.png) +![Render Thread Example](img/SystraceRenderThreadExample.png) ## Identifying a culprit A smooth animation should look something like the following: -![Smooth Animation](/react-native/img/SystraceWellBehaved.png) +![Smooth Animation](img/SystraceWellBehaved.png) Each change in color is a frame -- remember that in order to display a frame, all our UI work needs to be done by the end of that 16ms period. Notice that no thread is working close to the frame boundary. An application rendering like this is rendering at 60FPS. If you noticed chop, however, you might see something like this: -![Choppy Animation from JS](/react-native/img/SystraceBadJS.png) +![Choppy Animation from JS](img/SystraceBadJS.png) Notice that the JS thread is executing basically all the time, and across frame boundaries! This app is not rendering at 60FPS. In this case, **the problem lies in JS**. You might also see something like this: -![Choppy Animation from UI](/react-native/img/SystraceBadUI.png) +![Choppy Animation from UI](img/SystraceBadUI.png) In this case, the UI and render threads are the ones that have work crossing frame boundaries. The UI that we're trying to render on each frame is requiring too much work to be done. In this case, **the problem lies in the native views being rendered**. @@ -111,7 +111,7 @@ At this point, you'll have some very helpful information to inform your next ste If you identified a JS problem, look for clues in the specific JS that you're executing. In the scenario above, we see `RCTEventEmitter` being called multiple times per frame. Here's a zoom-in of the JS thread from the trace above: -![Too much JS](/react-native/img/SystraceBadJS2.png) +![Too much JS](img/SystraceBadJS2.png) This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into [shouldComponentUpdate](https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate). @@ -128,7 +128,7 @@ If you identified a native UI problem, there are usually two scenarios: In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this: -![Overloaded GPU](/react-native/img/SystraceBadUI.png) +![Overloaded GPU](img/SystraceBadUI.png) Notice the long amount of time spent in `DrawFrame` that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame. @@ -143,7 +143,7 @@ If these don't help and you want to dig deeper into what the GPU is actually doi In the second scenario, you'll see something more like this: -![Creating Views](/react-native/img/SystraceBadCreateUI.png) +![Creating Views](img/SystraceBadCreateUI.png) Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread. diff --git a/docs/Animations.md b/docs/Animations.md index af8d0031c..15dac519b 100644 --- a/docs/Animations.md +++ b/docs/Animations.md @@ -267,7 +267,7 @@ it provides much less control than `Animated` and other animation libraries, so you may need to use another approach if you can't get `LayoutAnimation` to do what you want. -![](/react-native/img/LayoutAnimationExample.gif) +![](img/LayoutAnimationExample.gif) ```javascript var App = React.createClass({ @@ -376,7 +376,7 @@ var App = React.createClass({ ``` [Run this example](https://rnplay.org/apps/4FUQ-A) -![](/react-native/img/TweenState.gif) +![](img/TweenState.gif) Here we animated the opacity, but as you might guess, we can animate any numeric value. Read more about react-tween-state in its @@ -395,7 +395,7 @@ value and end value. Rebound [is used internally](https://github.com/facebook/react-native/search?utf8=%E2%9C%93&q=rebound) by React Native on `Navigator` and `WarningBox`. -![](/react-native/img/ReboundImage.gif) +![](img/ReboundImage.gif) Notice that Rebound animations can be interrupted - if you release in the middle of a press, it will animate back from the current state to @@ -440,7 +440,7 @@ var App = React.createClass({ transform: [{scaleX: this.state.scale}, {scaleY: this.state.scale}], }; - var imageUri = "https://facebook.github.io/react-native/img/ReboundExample.png"; + var imageUri = "img/ReboundExample.png"; return ( @@ -461,13 +461,13 @@ oscillate around the end value. In the above example, we would add See the below gif for an example of where in your interface you might use this. -![](/react-native/img/Rebound.gif) Screenshot from +![](img/Rebound.gif) Screenshot from [react-native-scrollable-tab-view](https://github.com/brentvatne/react-native-scrollable-tab-view). You can run a similar example [here](https://rnplay.org/apps/qHU_5w). #### A sidenote about setNativeProps -As mentioned [in the Direction Manipulation section](/react-native/docs/direct-manipulation.html), +As mentioned [in the Direction Manipulation section](docs/direct-manipulation.html), `setNativeProps` allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to `setState` and @@ -497,7 +497,7 @@ render: function() { this._photo = component} - source={{uri: "https://facebook.github.io/react-native/img/ReboundExample.png"}} + source={{uri: "img/ReboundExample.png"}} style={{width: 250, height: 200}} /> @@ -516,14 +516,14 @@ frames per second), look into using `setNativeProps` or `shouldComponentUpdate` to optimize them. You may also want to defer any computationally intensive work until after animations are complete, using the -[InteractionManager](/react-native/docs/interactionmanager.html). You +[InteractionManager](docs/interactionmanager.html). You can monitor the frame rate by using the In-App Developer Menu "FPS Monitor" tool. ### Navigator Scene Transitions As mentioned in the [Navigator -Comparison](https://facebook.github.io/react-native/docs/navigator-comparison.html#content), +Comparison](docs/navigator-comparison.html#content), `Navigator` is implemented in JavaScript and `NavigatorIOS` is a wrapper around native functionality provided by `UINavigationController`, so these scene transitions apply only to `Navigator`. In order to re-create diff --git a/docs/CommunicationIOS.md b/docs/CommunicationIOS.md index 3e430636f..dae65bc27 100644 --- a/docs/CommunicationIOS.md +++ b/docs/CommunicationIOS.md @@ -7,7 +7,7 @@ permalink: docs/communication-ios.html next: native-modules-android --- -In [Integrating with Existing Apps guide](http://facebook.github.io/react-native/docs/embedded-app-ios.html) and [Native UI Components guide](https://facebook.github.io/react-native/docs/native-components-ios.html) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques. +In [Integrating with Existing Apps guide](docs/embedded-app-ios.html) and [Native UI Components guide](docs/native-components-ios.html) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques. ## Introduction @@ -80,13 +80,13 @@ There is no way to update only a few properties at a time. We suggest that you b > Currently, JS functions `componentWillReceiveProps` and `componentWillUpdateProps` of the top level RN component will not be called after a prop update. However, you can access the new props in `componentWillMount` function. ### Passing properties from React Native to native -The problem exposing properties of native components is covered in detail in [this article](https://facebook.github.io/react-native/docs/native-components-ios.html#properties). In short, export properties with `RCT_CUSTOM_VIEW_PROPERTY` macro in your custom native component, then just use them in React Native as if the component was an ordinary React Native component. +The problem exposing properties of native components is covered in detail in [this article](docs/native-components-ios.html#properties). In short, export properties with `RCT_CUSTOM_VIEW_PROPERTY` macro in your custom native component, then just use them in React Native as if the component was an ordinary React Native component. ### Limits of properties The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up. -Although we have a flavor of cross-language callbacks ([described here](https://facebook.github.io/react-native/docs/native-modules-ios.html#callbacks)), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS. +Although we have a flavor of cross-language callbacks ([described here](docs/native-modules-ios.html#callbacks)), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS. ## Other ways of cross-language interaction (events and native modules) @@ -96,7 +96,7 @@ React Native enables you to perform cross-language function calls. You can execu ### Calling React Native functions from native (events) -Events are described in detail in [this article](http://facebook.github.io/react-native/docs/native-components-ios.html#events). Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread. +Events are described in detail in [this article](docs/native-components-ios.html#events). Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread. Events are powerful, because they allow us to change React Native components without needing a reference to them. However, there are some pitfalls that you can fall into while using them: @@ -108,7 +108,7 @@ The common pattern we use when embedding native in React Native is to make the n ### Calling native functions from React Native (native modules) -Native modules are Objective-C classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in [this article](https://facebook.github.io/react-native/docs/native-modules-ios.html#content). +Native modules are Objective-C classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in [this article](docs/native-modules-ios.html#content). The fact that native modules are singletons limits the mechanism in context of embedding. Let's say we have a React Native component embedded in a native view and we want to update the native, parent view. Using the native module mechanism, we would export a function that not only takes expected arguments, but also an identifier of the parent native view. The identifier would be used to retrieve a reference to the parent view to update. That said, we would need to keep a mapping from identifiers to native views in the module. @@ -125,7 +125,7 @@ When integrating native and React Native, we also need a way to consolidate two ### Layout of a native component embedded in React Native -This case is covered in [this article](https://facebook.github.io/react-native/docs/native-components-ios.html#styles). Basically, as all our native react views are subclasses of `UIView`, most style and size attributes will work like you would expect out of the box. +This case is covered in [this article](docs/native-components-ios.html#styles). Basically, as all our native react views are subclasses of `UIView`, most style and size attributes will work like you would expect out of the box. ### Layout of a React Native component embedded in native diff --git a/docs/DevelopmentSetupAndroid.md b/docs/DevelopmentSetupAndroid.md index eab90e85a..9eee76088 100644 --- a/docs/DevelopmentSetupAndroid.md +++ b/docs/DevelopmentSetupAndroid.md @@ -55,7 +55,7 @@ React Native Android use [gradle](https://docs.gradle.org) as a build system. We * Android Support Repository 2. Click "Install Packages" -![SDK Manager window](/react-native/img/AndroidSDK1.png) ![SDK Manager window](/react-native/img/AndroidSDK2.png) +![SDK Manager window](img/AndroidSDK1.png) ![SDK Manager window](img/AndroidSDK2.png) ### Install Genymotion @@ -75,7 +75,7 @@ Genymotion is much easier to set up than stock Google emulators. However, it's o 3. [Configure hardware acceleration (HAXM)](http://developer.android.com/tools/devices/emulator.html#vm-mac), otherwise the emulator is going to be slow. 4. Create an Android Virtual Device (AVD): 1. Run `android avd` and click on **Create...** - ![Create AVD dialog](/react-native/img/CreateAVD.png) + ![Create AVD dialog](img/CreateAVD.png) 2. With the new AVD selected, click `Start...` 5. To bring up the developer menu press F2 (or install [Frappé](http://getfrappe.com)) diff --git a/docs/DirectManipulation.md b/docs/DirectManipulation.md index a47a39fe2..3c6fd46ed 100644 --- a/docs/DirectManipulation.md +++ b/docs/DirectManipulation.md @@ -156,7 +156,7 @@ view using `{...this.props}`. The reason for this is that `TouchableOpacity` is actually a composite component, and so in addition to depending on `setNativeProps` on its child, it also requires that the child perform touch handling. To do this, it passes on [various -props](https://facebook.github.io/react-native/docs/view.html#onmoveshouldsetresponder) +props](docs/view.html#onmoveshouldsetresponder) that call back to the `TouchableOpacity` component. `TouchableHighlight`, in contrast, is backed by a native view and only requires that we implement `setNativeProps`. diff --git a/docs/EmbeddedAppAndroid.md b/docs/EmbeddedAppAndroid.md index 88122d52a..eb8cc6fb4 100644 --- a/docs/EmbeddedAppAndroid.md +++ b/docs/EmbeddedAppAndroid.md @@ -166,7 +166,7 @@ To run your app, you need to first start the development server. To do this, sim Now build and run your Android app as normal (e.g. `./gradlew installDebug`). Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display: -![Screenshot](/react-native/img/EmbeddedAppAndroid.png) +![Screenshot](img/EmbeddedAppAndroid.png) ## Sharing a ReactInstance across multiple Activities / Fragments in your app diff --git a/docs/EmbeddedAppIOS.md b/docs/EmbeddedAppIOS.md index 2082070ba..294d4b7fe 100644 --- a/docs/EmbeddedAppIOS.md +++ b/docs/EmbeddedAppIOS.md @@ -98,7 +98,7 @@ React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp); You should now add a container view for the React Native component. It can be any `UIView` in your app. -![Container view example](/react-native/img/EmbeddedAppContainerViewExample.png) +![Container view example](img/EmbeddedAppContainerViewExample.png) However, let's subclass `UIView` for the sake of clean code. Let's name it `ReactView`. Open up `Yourproject.xcworkspace` and create a new class `ReactView` (You can name it whatever you like :)). @@ -186,7 +186,7 @@ If you don't do this, you will see the error - `Could not connect to development Now compile and run your app. You shall now see your React Native app running inside of the `ReactView`. -![Example](/react-native/img/EmbeddedAppExample.png) +![Example](img/EmbeddedAppExample.png) Live reload and all of the debugging tools will work from the simulator (make sure that DEBUG=1 is set under Build Settings -> Preprocessor Macros). You've got a simple React component totally encapsulated behind an Objective-C `UIView` subclass. diff --git a/docs/GestureResponderSystem.md b/docs/GestureResponderSystem.md index 2c8327435..b7c8dbc40 100644 --- a/docs/GestureResponderSystem.md +++ b/docs/GestureResponderSystem.md @@ -68,4 +68,4 @@ However, sometimes a parent will want to make sure that it becomes responder. Th ### PanResponder -For higher-level gesture interpretation, check out [PanResponder](/react-native/docs/panresponder.html). +For higher-level gesture interpretation, check out [PanResponder](docs/panresponder.html). diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md index cc83191d1..dcee2490a 100644 --- a/docs/GettingStarted.md +++ b/docs/GettingStarted.md @@ -27,7 +27,7 @@ We recommend periodically running `brew update && brew upgrade` to keep your pro To write React Native apps for Android, you will need to install the Android SDK (and an Android emulator if you want to work on your app without having to use a physical device). See [Android setup guide](android-setup.html) for instructions on how to set up your Android environment. -_NOTE:_ There is experimental [Windows and Linux support](/react-native/docs/linux-windows-support.html) for Android development. +_NOTE:_ There is experimental [Windows and Linux support](docs/linux-windows-support.html) for Android development. ## Quick start @@ -41,7 +41,7 @@ _NOTE:_ There is experimental [Windows and Linux support](/react-native/docs/lin - Open `index.ios.js` in your text editor of choice and edit some lines. - Hit ⌘-R in your iOS simulator to reload the app and see your change! -_Note: If you are using an iOS device, see the [Running on iOS Device page](http://facebook.github.io/react-native/docs/running-on-device-ios.html#content)._ +_Note: If you are using an iOS device, see the [Running on iOS Device page](docs/running-on-device-ios.html#content)._ **To run the Android app:** @@ -51,11 +51,11 @@ _Note: If you are using an iOS device, see the [Running on iOS Device page](http - Press the menu button (F2 by default, or ⌘-M in Genymotion) and select *Reload JS* to see your change! - Run `adb logcat *:S ReactNative:V ReactNativeJS:V` in a terminal to see your app's logs -_Note: If you are using an Android device, see the [Running on Android Device page](http://facebook.github.io/react-native/docs/running-on-device-android.html#content)._ +_Note: If you are using an Android device, see the [Running on Android Device page](docs/running-on-device-android.html#content)._ Congratulations! You've successfully run and modified your first React Native app. -_If you run into any issues getting started, see the [troubleshooting page](/react-native/docs/troubleshooting.html#content)._ +_If you run into any issues getting started, see the [troubleshooting page](docs/troubleshooting.html#content)._ ## Adding Android to an existing React Native project diff --git a/docs/Images.md b/docs/Images.md index 12ab24fe2..7685626eb 100644 --- a/docs/Images.md +++ b/docs/Images.md @@ -90,7 +90,7 @@ Many of the images you will display in your app will not be available at compile ## Local Filesystem Images -See [CameraRoll](/react-native/docs/cameraroll.html) for an example of +See [CameraRoll](docs/cameraroll.html) for an example of using local resources that are outside of `Images.xcassets`. ### Best Camera Roll Image diff --git a/docs/KnownIssues.md b/docs/KnownIssues.md index a3deb7319..8a2616c02 100644 --- a/docs/KnownIssues.md +++ b/docs/KnownIssues.md @@ -38,7 +38,7 @@ PushNotificationIOS ### Some props are only supported on one platform -There are properties that work on one platform only, either because they can inherently only be supported on that platform or because they haven't been implemented on the other platforms yet. All of these are annotated with `@platform` in JS docs and have a small badge next to them on the website. See e.g. [Image](https://facebook.github.io/react-native/docs/image.html). +There are properties that work on one platform only, either because they can inherently only be supported on that platform or because they haven't been implemented on the other platforms yet. All of these are annotated with `@platform` in JS docs and have a small badge next to them on the website. See e.g. [Image](docs/image.html). ### Platform parity @@ -62,7 +62,7 @@ Another issue with `overflow: 'hidden'` on Android: a view is not clipped by the ### View shadows -The `shadow*` [view styles](/react-native/docs/view.html#style) apply on iOS, and the `elevation` view prop is available on Android. Setting `elevation` on Android is equivalent to using the [native elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation), and has the same limitations (most significantly, it only works on Android 5.0+). Setting `elevation` on Android also affects the z-order for overlapping views. +The `shadow*` [view styles](docs/view.html#style) apply on iOS, and the `elevation` view prop is available on Android. Setting `elevation` on Android is equivalent to using the [native elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation), and has the same limitations (most significantly, it only works on Android 5.0+). Setting `elevation` on Android also affects the z-order for overlapping views. ### Android M permissions diff --git a/docs/LinkingLibraries.md b/docs/LinkingLibraries.md index 8fc6fe6e5..0ce084953 100644 --- a/docs/LinkingLibraries.md +++ b/docs/LinkingLibraries.md @@ -65,7 +65,7 @@ folder. Drag this file to your project on Xcode (usually under the `Libraries` group on Xcode); -![](/react-native/img/AddToLibraries.png) +![](img/AddToLibraries.png) #### Step 2 @@ -73,7 +73,7 @@ Click on your main project file (the one that represents the `.xcodeproj`) select `Build Phases` and drag the static library from the `Products` folder inside the Library you are importing to `Link Binary With Libraries` -![](/react-native/img/AddToBuildPhases.png) +![](img/AddToBuildPhases.png) #### Step 3 @@ -97,4 +97,4 @@ Paths`. There you should include the path to your library (if it has relevant files on subdirectories remember to make it `recursive`, like `React` on the example). -![](/react-native/img/AddToSearchPaths.png) +![](img/AddToSearchPaths.png) diff --git a/docs/NavigatorComparison.md b/docs/NavigatorComparison.md index cc6c5c6c8..80262d1a3 100644 --- a/docs/NavigatorComparison.md +++ b/docs/NavigatorComparison.md @@ -7,8 +7,8 @@ permalink: docs/navigator-comparison.html next: known-issues --- -The differences between [Navigator](/react-native/docs/navigator.html) -and [NavigatorIOS](/react-native/docs/navigatorios.html) are a common +The differences between [Navigator](docs/navigator.html) +and [NavigatorIOS](docs/navigatorios.html) are a common source of confusion for newcomers. Both `Navigator` and `NavigatorIOS` are components that allow you to diff --git a/docs/Performance.md b/docs/Performance.md index 1dfbb5444..efded1896 100644 --- a/docs/Performance.md +++ b/docs/Performance.md @@ -72,7 +72,7 @@ out of the box than `Navigator`. The reason for this is that the animations for the transitions are done entirely on the main thread, and so they are not interrupted by frame drops on the JavaScript thread. ([Read about why you should probably use Navigator -anyways.](/react-native/docs/navigator-comparison.html)) +anyways.](docs/navigator-comparison.html)) Similarly, you can happily scroll up and down through a ScrollView when the JavaScript thread is locked up because the ScrollView lives on the diff --git a/docs/RunningOnDeviceIOS.md b/docs/RunningOnDeviceIOS.md index c90f3b04e..619b048fc 100644 --- a/docs/RunningOnDeviceIOS.md +++ b/docs/RunningOnDeviceIOS.md @@ -31,7 +31,7 @@ When you run your app on device, we pack all the JavaScript code and the images ## Disabling in-app developer menu -When building your app for production, your app's scheme should be set to `Release` as detailed in [the debugging documentation](/react-native/docs/debugging.html#debugging-react-native-apps) in order to disable the in-app developer menu. +When building your app for production, your app's scheme should be set to `Release` as detailed in [the debugging documentation](docs/debugging.html#debugging-react-native-apps) in order to disable the in-app developer menu. ## Troubleshooting diff --git a/docs/SignedAPKAndroid.md b/docs/SignedAPKAndroid.md index d35e95d82..b32defa06 100644 --- a/docs/SignedAPKAndroid.md +++ b/docs/SignedAPKAndroid.md @@ -78,7 +78,7 @@ If you need to change the way the JavaScript bundle and/or drawable resources ar #### If you *don't* have a `react.gradle` file: -You can [upgrade](/react-native/docs/upgrading.html) to the latest version of React Native to get this file. Alternatively, you can bundle the JavaScript package and drawable resources manually by doing the following in a terminal: +You can [upgrade](docs/upgrading.html) to the latest version of React Native to get this file. Alternatively, you can bundle the JavaScript package and drawable resources manually by doing the following in a terminal: ```sh $ mkdir -p android/app/src/main/assets diff --git a/docs/Style.md b/docs/Style.md index 9f7229c94..fb6cb7a6d 100644 --- a/docs/Style.md +++ b/docs/Style.md @@ -33,7 +33,7 @@ var styles = StyleSheet.create({ `StyleSheet.create` construct is optional but provides some key advantages. It ensures that the values are **immutable** and **opaque** by transforming them into plain numbers that reference an internal table. By putting it at the end of the file, you also ensure that they are only created once for the application and not on every render. -All the attribute names and values are a subset of what works on the web. For layout, React Native implements [Flexbox](/react-native/docs/flexbox.html). +All the attribute names and values are a subset of what works on the web. For layout, React Native implements [Flexbox](docs/flexbox.html). ## Using Styles @@ -95,8 +95,8 @@ var List = React.createClass({ You can checkout latest support of CSS Properties in following Links. -- [View Properties](/react-native/docs/view.html#style) -- [Image Properties](/react-native/docs/image.html#style) -- [Text Properties](/react-native/docs/text.html#style) -- [Flex Properties](/react-native/docs/flexbox.html#content) -- [Transform Properties](/react-native/docs/transforms.html#content) +- [View Properties](docs/view.html#style) +- [Image Properties](docs/image.html#style) +- [Text Properties](docs/text.html#style) +- [Flex Properties](docs/flexbox.html#content) +- [Transform Properties](docs/transforms.html#content) diff --git a/docs/Troubleshooting.md b/docs/Troubleshooting.md index 6db929a2c..b0063ae19 100644 --- a/docs/Troubleshooting.md +++ b/docs/Troubleshooting.md @@ -78,7 +78,7 @@ pod 'React', :path => '../node_modules/react-native', :subspecs => [ ``` Next, make sure you have run `pod install` and that a `Pods/` directory has been created in your project with React installed. CocoaPods will instruct you to use the generated `.xcworkspace` file henceforth to be able to use these installed dependencies. -If you are adding React manually, make sure you have included all the relevant dependencies, like `RCTText.xcodeproj`, `RCTImage.xcodeproj` depending on the ones you are using. Next, the binaries built by these dependencies have to be linked to your app binary. Use the `Linked Frameworks and Binaries` section in the Xcode project settings. More detailed steps are here: [Linking Libraries](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#content). +If you are adding React manually, make sure you have included all the relevant dependencies, like `RCTText.xcodeproj`, `RCTImage.xcodeproj` depending on the ones you are using. Next, the binaries built by these dependencies have to be linked to your app binary. Use the `Linked Frameworks and Binaries` section in the Xcode project settings. More detailed steps are here: [Linking Libraries](docs/linking-libraries-ios.html#content). ##### Argument list too long: recursive header expansion failed diff --git a/docs/Tutorial.md b/docs/Tutorial.md index b5dc1d16c..1e0be8a20 100644 --- a/docs/Tutorial.md +++ b/docs/Tutorial.md @@ -16,7 +16,7 @@ We assume you have experience writing applications with React. If not, you can l ## Setup -React Native requires the basic setup explained at [React Native Getting Started](https://facebook.github.io/react-native/docs/getting-started.html#content). +React Native requires the basic setup explained at [React Native Getting Started](docs/getting-started.html#content). After installing these dependencies there are two simple commands to get a React Native project all set up for development. @@ -111,8 +111,8 @@ And lastly we need to apply this style to the Image component: Press `⌘+R` / `Reload JS` and the image should now render.
- - + +
@@ -189,8 +189,8 @@ Styling the text is pretty straightforward: Go ahead and press `⌘+R` / `Reload JS` and you'll see the updated view.
- - + +
### Fetching real data @@ -282,8 +282,8 @@ Now modify the render function to render a loading view if we don't have any mov Now press `⌘+R` / `Reload JS` and you should see "Loading movies..." until the response comes back, then it will render the first movie it fetched from Rotten Tomatoes.
- - + +
## ListView @@ -367,8 +367,8 @@ Finally, we add styles for the `ListView` component to the `styles` JS object: And here's the final result:
- - + +
There's still some work to be done to make it a fully functional app such as: adding navigation, search, infinite scroll loading, etc. Check the [Movies Example](https://github.com/facebook/react-native/tree/master/Examples/Movies) to see it all working. diff --git a/docs/Upgrading.md b/docs/Upgrading.md index 51b46bfe7..4034b4f73 100644 --- a/docs/Upgrading.md +++ b/docs/Upgrading.md @@ -50,7 +50,7 @@ Xcode project format is pretty complex and sometimes it's tricky to upgrade and ### From 0.13 to 0.14 -The major change in this version happened to the CLI ([see changelog](https://github.com/facebook/react-native/releases/tag/v0.14.0-rc)) and static images ([see docs](http://facebook.github.io/react-native/docs/images.html)). To use the new asset system in existing Xcode project, do the following: +The major change in this version happened to the CLI ([see changelog](https://github.com/facebook/react-native/releases/tag/v0.14.0-rc)) and static images ([see docs](docs/images.html)). To use the new asset system in existing Xcode project, do the following: Add new "Run Script" step to your project's build phases: diff --git a/website/.gitignore b/website/.gitignore index 850f11c1b..9ece29446 100644 --- a/website/.gitignore +++ b/website/.gitignore @@ -1,3 +1,4 @@ src/react-native/docs/** core/metadata.js *.log +/build/ diff --git a/website/README.md b/website/README.md index 5c162aab6..3c633b912 100644 --- a/website/README.md +++ b/website/README.md @@ -17,14 +17,8 @@ Anytime you change the contents, just refresh the page and it's going to be upda # Publish the website -First setup your environment by having two folders, one `react-native` and one `react-native-gh-pages`. The publish script expects those exact names. - ```sh -./setup.sh +cd website +npm run publish-website ``` -Then, after you've done changes, just run the command and it'll automatically build the static version of the site and publish it to gh-pages. - -```sh -./publish.sh -``` diff --git a/website/core/DocsSidebar.js b/website/core/DocsSidebar.js index 2c18c7c8e..d8640e40d 100644 --- a/website/core/DocsSidebar.js +++ b/website/core/DocsSidebar.js @@ -72,7 +72,7 @@ var DocsSidebar = React.createClass({ if (metadata.permalink.match(/^https?:/)) { return metadata.permalink; } - return '/react-native/' + metadata.permalink + '#content'; + return metadata.permalink + '#content'; }, render: function() { diff --git a/website/core/HeaderLinks.js b/website/core/HeaderLinks.js index afee22f24..6feaa9194 100644 --- a/website/core/HeaderLinks.js +++ b/website/core/HeaderLinks.js @@ -14,11 +14,11 @@ var AlgoliaDocSearch = require('AlgoliaDocSearch'); var HeaderLinks = React.createClass({ linksInternal: [ - {section: 'docs', href: '/react-native/docs/getting-started.html', text: 'Docs'}, - {section: 'support', href: '/react-native/support.html', text: 'Support'}, + {section: 'docs', href: 'docs/getting-started.html', text: 'Docs'}, + {section: 'support', href: 'support.html', text: 'Support'}, {section: 'releases', href: 'https://github.com/facebook/react-native/releases', text: 'Releases'}, {section: 'newsletter', href: 'http://reactnative.cc', text: 'Newsletter'}, - {section: 'showcase', href: '/react-native/showcase.html', text: 'Showcase'}, + {section: 'showcase', href: 'showcase.html', text: 'Showcase'}, ], linksExternal: [ {section: 'github', href: 'https://github.com/facebook/react-native', text: 'GitHub'}, diff --git a/website/core/Site.js b/website/core/Site.js index c1cdc5a12..183690e91 100644 --- a/website/core/Site.js +++ b/website/core/Site.js @@ -11,9 +11,12 @@ var React = require('React'); var HeaderLinks = require('HeaderLinks'); +var Metadata = require('Metadata'); var Site = React.createClass({ render: function() { + const path = Metadata.config.RN_DEPLOYMENT_PATH; + var basePath = '/react-native/' + (path ? path + '/' : ''); var title = this.props.title ? this.props.title + ' – ' : ''; var currentYear = (new Date()).getFullYear(); title += 'React Native | A framework for building native apps using React'; @@ -30,10 +33,12 @@ var Site = React.createClass({ + + - - + + @@ -43,8 +48,8 @@ var Site = React.createClass({
- - + + React Native @@ -72,7 +77,7 @@ var Site = React.createClass({ fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); `}} /> -