Skip to content

Commit

Permalink
Rename UIExplorer in docs
Browse files Browse the repository at this point in the history
Reviewed By: ericnakagawa

Differential Revision: D5020136

fbshipit-source-id: 2aa35612c35dd4b78760215d91b6d06005033238
  • Loading branch information
Eric Vicenti authored and facebook-github-bot committed May 8, 2017
1 parent cf975bb commit 8e6bde3
Show file tree
Hide file tree
Showing 5 changed files with 15 additions and 15 deletions.
Expand Up @@ -162,14 +162,14 @@ _animateBounceBack(duration: number): void {

## Maintaining Your RTL-ready App

Even after the initial RTL-compatible app release, you will likely need to iterate on new features. To improve development efficiency, [`I18nManager`](https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js) provides the `forceRTL()` function for faster RTL testing without changing the test device language. You might want to provide a simple switch for this in your app. Here's an example from the RTL example in the UIExplorer:
Even after the initial RTL-compatible app release, you will likely need to iterate on new features. To improve development efficiency, [`I18nManager`](https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js) provides the `forceRTL()` function for faster RTL testing without changing the test device language. You might want to provide a simple switch for this in your app. Here's an example from the RTL example in the RNTester:

<p align="center">
<img src="/react-native/blog/img/rtl-demo-forcertl.png" width="300">
</p>

```js
<UIExplorerBlock title={'Quickly Test RTL Layout'}>
<RNTesterBlock title={'Quickly Test RTL Layout'}>
<View style={styles.flexDirectionRow}>
<Text style={styles.switchRowTextView}>
forceRTL
Expand All @@ -181,7 +181,7 @@ Even after the initial RTL-compatible app release, you will likely need to itera
value={this.state.isRTL} />
</View>
</View>
</UIExplorerBlock>
</RNTesterBlock>

_onDirectionChange = () => {
I18nManager.forceRTL(!this.state.isRTL);
Expand Down Expand Up @@ -215,6 +215,6 @@ The RTL support should cover most of the UX in your app; however, there are some
In the future, it would be ideal to find a way to make gestures and animations RTL support more developer friendly.

## Try it Out!
Check out the [`RTLExample`](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/RTLExample.js) in the `UIExplorer` to understand more about RTL support, and let us know how it works for you!
Check out the [`RTLExample`](https://github.com/facebook/react-native/blob/master/RNTester/js/RTLExample.js) in the `RNTester` to understand more about RTL support, and let us know how it works for you!

Finally, thank you for reading! We hope that the RTL support for React Native helps you grow your apps for international audience!
10 changes: 5 additions & 5 deletions docs/Animations.md
Expand Up @@ -348,9 +348,9 @@ the animation will always run a frame behind the gesture due to the async nature
</Animated.ScrollView>
```

You can see the native driver in action by running the [UIExplorer sample app](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/),
You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/master/RNTester/),
then loading the Native Animated Example.
You can also take a look at the [source code](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/NativeAnimationsExample.js) to learn how these examples were produced.
You can also take a look at the [source code](https://github.com/facebook/react-native/blob/master/RNTester/js/NativeAnimationsExample.js) to learn how these examples were produced.

#### Caveats

Expand All @@ -362,10 +362,10 @@ This means it does not work with `PanResponder` but does work with things like `

### Additional examples

The UIExplorer sample app has various examples of `Animated` in use:
The RNTester app has various examples of `Animated` in use:

- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/js/AnimatedGratuitousApp)
- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/NativeAnimationsExample.js)
- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/master/Examples/RNTester/js/AnimatedGratuitousApp)
- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/master/Examples/RNTester/js/NativeAnimationsExample.js)

## `LayoutAnimation` API

Expand Down
2 changes: 1 addition & 1 deletion docs/BuildingForAppleTV.md
Expand Up @@ -11,7 +11,7 @@ previous: communication-ios

Apple TV support has been implemented with the intention of making existing React Native iOS applications "just work" on tvOS, with few or no changes needed in the JavaScript code for the applications.

The UIExplorer example project supports Apple TV; use the `UIExplorer-tvOS` build target to build for tvOS.
The RNTester app supports Apple TV; use the `RNTester-tvOS` build target to build for tvOS.

## Build changes

Expand Down
2 changes: 1 addition & 1 deletion docs/CommunicationIOS.md
Expand Up @@ -212,7 +212,7 @@ Let's look at an example.

In the example we have a `FlexibleSizeExampleView` view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to `RCTRootViewSizeFlexibilityHeight`, which means that `rootViewDidChangeIntrinsicSize:` method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.

You can checkout full source code of the example [here](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorer/NativeExampleViews/FlexibleSizeExampleView.m).
You can checkout full source code of the exmaple [here](https://github.com/facebook/react-native/blob/master/RNTester/RNTester/NativeExampleViews/FlexibleSizeExampleView.m).

It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate `rootViewDidChangeIntrinsicSize:` method will be called once the content size is known.

Expand Down
8 changes: 4 additions & 4 deletions docs/Testing.md
Expand Up @@ -91,10 +91,10 @@ The tests themselves are written in JS, and must call `TestModule.markTestComple
See the following for example usage and integration points:

- [`IntegrationTestHarnessTest.js`](https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestHarnessTest.js)
- [`UIExplorerIntegrationTests.m`](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerIntegrationTests.m)
- [`RNTesterIntegrationTests.m`](https://github.com/facebook/react-native/blob/master/RNTester/RNTesterIntegrationTests/RNTesterIntegrationTests.m)
- [`IntegrationTestsApp.js`](https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestsApp.js)

You can run integration tests locally with cmd+U in the IntegrationTest and UIExplorer apps in Xcode, or by running the following in the command line on macOS:
You can run integration tests locally with cmd+U in the IntegrationTest and RNTester apps in Xcode, or by running the following in the command line on macOS:

$ cd react-native
$ ./scripts/objc-test-ios.sh
Expand All @@ -105,11 +105,11 @@ You can run integration tests locally with cmd+U in the IntegrationTest and UIEx

A common type of integration test is the snapshot test. These tests render a component, and verify snapshots of the screen against reference images using `TestModule.verifySnapshot()`, using the [`FBSnapshotTestCase`](https://github.com/facebook/ios-snapshot-test-case) library behind the scenes. Reference images are recorded by setting `recordMode = YES` on the `RCTTestRunner`, then running the tests. Snapshots will differ slightly between 32 and 64 bit, and various OS versions, so it's recommended that you enforce tests are run with the correct configuration. It's also highly recommended that all network data be mocked out, along with other potentially troublesome dependencies. See [`SimpleSnapshotTest`](https://github.com/facebook/react-native/blob/master/IntegrationTests/SimpleSnapshotTest.js) for a basic example.

If you make a change that affects a snapshot test in a PR, such as adding a new example case to one of the examples that is snapshotted, you'll need to re-record the snapshot reference image. To do this, simply change to `_runner.recordMode = YES;` in [UIExplorer/UIExplorerSnapshotTests.m](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerSnapshotTests.m#L42), re-run the failing tests, then flip record back to `NO` and submit/update your PR and wait to see if the Travis build passes.
If you make a change that affects a snapshot test in a PR, such as adding a new example case to one of the examples that is snapshotted, you'll need to re-record the snapshot reference image. To do this, simply change to `_runner.recordMode = YES;` in [RNTester/RNTesterSnapshotTests.m](https://github.com/facebook/react-native/blob/master/RNTester/RNTesterIntegrationTests/RNTesterSnapshotTests.m#L42), re-run the failing tests, then flip record back to `NO` and submit/update your PR and wait to see if the Travis build passes.

## Apple TV

The same tests discussed above for iOS will also run on tvOS. In the UIExplorer Xcode project, select the UIExplorer-tvOS target, and you can follow the same steps above to run the tests in Xcode.
The same tests discussed above for iOS will also run on tvOS. In the RNTester Xcode project, select the RNTester-tvOS target, and you can follow the same steps above to run the tests in Xcode.

You can run Apple TV unit and integration tests locally by running the following in the command line on macOS:

Expand Down

0 comments on commit 8e6bde3

Please sign in to comment.