Permalink
Browse files

Ensure documentation has consistent relative links

Summary:
Explain the **motivation** for making this change. What existing problem does the pull request solve?

I had tried fixing a broken link in a previous commit (#11453). My commit was merged, but it did not resolve the underlying problem. I have looked into how links should be formed for the docs and have fixed the original problem as well as updated all other links to be consistent.

Previous link formats:

- /docs/sample.html <-- broken link
- sample.html <-- broken link
- https://facebook.github.io/react-native/docs/sample.html <-- works
- /react-native/docs/sample.html <-- works
- docs/sample.html <-- works (permalink format)

This PR updates all links to the permalink format.

**Test plan (required)**
I ran the website locally and manually tested half of the links in each category. They all worked.
```
$ cd website
$ npm install && npm start
```
Closes #12064

Differential Revision: D4489153

Pulled By: mkonicek

fbshipit-source-id: bf0231d941ba147317595c3b3466dc579a887169
  • Loading branch information...
PaulMest authored and facebook-github-bot committed Jan 31, 2017
1 parent 4344e06 commit 8378f0f9f7386fbe24ad1185dc13ef8ee511ce53
@@ -100,7 +100,7 @@ type ButtonsArray = Array<{
* );
* ```
*
* We recommend using the [`Alert.alert`](alert.html) method for
* We recommend using the [`Alert.alert`](docs/alert.html) method for
* cross-platform support if you don't need to create iOS-only prompts.
*
*/
@@ -111,7 +111,7 @@ var getPhotosReturnChecker = createStrictShapeTypeChecker({
/**
* `CameraRoll` provides access to the local camera roll / gallery.
* Before using this you must link the `RCTCameraRoll` library.
* You can refer to [Linking](https://facebook.github.io/react-native/docs/linking-libraries-ios.html) for help.
* You can refer to [Linking](docs/linking-libraries-ios.html) for help.
*
* ### Permissions
* The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later.
@@ -29,8 +29,8 @@ const invariant = require('fbjs/lib/invariant');
* <center><img src="img/buttonExample.png"></img></center>
*
* If this button doesn't look right for your app, you can build your own
* button using [TouchableOpacity](https://facebook.github.io/react-native/docs/touchableopacity.html)
* or [TouchableNativeFeedback](https://facebook.github.io/react-native/docs/touchablenativefeedback.html).
* button using [TouchableOpacity](docs/touchableopacity.html)
* or [TouchableNativeFeedback](docs/touchablenativefeedback.html).
* For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js).
* Or, take a look at the [wide variety of button components built by the community](https://js.coach/react-native?search=button).
*
@@ -133,7 +133,7 @@ type Event = Object;
* animations and behavior from UIKIt.
*
* As the name implies, it is only available on iOS. Take a look at
* [`Navigator`](/react-native/docs/navigator.html) for a similar solution for your
* [`Navigator`](docs/navigator.html) for a similar solution for your
* cross-platform needs, or check out
* [react-native-navigation](https://github.com/wix/react-native-navigation), a
* component that aims to provide native navigation on both iOS and Android.
@@ -482,7 +482,7 @@ const TextInput = React.createClass({
* see [Issue#7070](https://github.com/facebook/react-native/issues/7070)
* for more detail.
*
* [Styles](/react-native/docs/style.html)
* [Styles](docs/style.html)
*/
style: Text.propTypes.style,
/**
@@ -76,9 +76,9 @@ const statics = {
/**
* The most fundamental component for building a UI, `View` is a container that supports layout with
* [flexbox](/react-native/docs/flexbox.html), [style](/react-native/docs/style.html),
* [some touch handling](/react-native/docs/handling-touches.html), and
* [accessibility](/react-native/docs/accessibility.html) controls. `View` maps directly to the
* [flexbox](docs/flexbox.html), [style](docs/style.html),
* [some touch handling](docs/handling-touches.html), and
* [accessibility](docs/accessibility.html) controls. `View` maps directly to the
* native view equivalent on whatever platform React Native is running on, whether that is a
* `UIView`, `<div>`, `android.view`, etc.
*
@@ -101,7 +101,7 @@ const statics = {
* }
* ```
*
* > `View`s are designed to be used with [`StyleSheet`](/react-native/docs/style.html) for clarity
* > `View`s are designed to be used with [`StyleSheet`](docs/style.html) for clarity
* > and performance, although inline styles are also supported.
*
* ### Synthetic Touch Events
@@ -243,7 +243,7 @@ const View = React.createClass({
* - `'allowsDirectInteraction'` - The element allows direct touch interaction for VoiceOver users.
* - `'pageTurn'` - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.
*
* See the [Accessibility guide](/react-native/docs/accessibility.html#accessibilitytraits-ios)
* See the [Accessibility guide](docs/accessibility.html#accessibilitytraits-ios)
* for more information.
*
* @platform ios
@@ -289,7 +289,7 @@ var GESTURE_ACTIONS = [
* ```
* In the above example, the newly pushed scene will float up from the bottom.
* See `Navigator.SceneConfigs` for default animations and more info on
* available [scene config options](/react-native/docs/navigator.html#configurescene).
* available [scene config options](docs/navigator.html#configurescene).
*/
var Navigator = React.createClass({
View
@@ -185,7 +185,7 @@ const Text = React.createClass({
* for a `Text` element is `true`.
*
* See the
* [Accessibility guide](/react-native/docs/accessibility.html#accessible-ios-android)
* [Accessibility guide](docs/accessibility.html#accessible-ios-android)
* for more information.
*/
accessible: PropTypes.bool,
@@ -144,7 +144,7 @@ gradle.projectsLoaded {
## Testing
If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see [Testing](/react-native/docs/testing.html).
If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see [Testing](docs/testing.html).
## Troubleshooting
View
@@ -10,7 +10,7 @@ next: tutorial
Welcome to React Native! This page will help you install React Native on
your system, so that you can build apps with it right away. If you already
have React Native installed, you can skip ahead to the
[Tutorial](/react-native/docs/tutorial.html).
[Tutorial](docs/tutorial.html).
The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you
want to develop for both iOS and Android, that's fine - you just have to pick
@@ -8,7 +8,7 @@ next: using-a-scrollview
previous: flexbox
---
[`TextInput`](/react-native/docs/textinput.html#content) is a basic component that allows the user to enter text. It has an `onChangeText` prop that takes
[`TextInput`](docs/textinput.html#content) is a basic component that allows the user to enter text. It has an `onChangeText` prop that takes
a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted.
For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated
@@ -45,6 +45,6 @@ AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);
In this example, we store `text` in the state, because it changes over time.
There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://facebook.github.io/react/docs/forms.html), or the [reference docs for TextInput](/react-native/docs/textinput.html).
There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://facebook.github.io/react/docs/forms.html), or the [reference docs for TextInput](docs/textinput.html).
Text input is probably the simplest example of a component whose state naturally changes over time. Next, let's look at another type of component like this one that controls layout, and [learn about the ScrollView](/react-native/docs/using-a-scrollview.html).
Text input is probably the simplest example of a component whose state naturally changes over time. Next, let's look at another type of component like this one that controls layout, and [learn about the ScrollView](docs/using-a-scrollview.html).
View
@@ -10,7 +10,7 @@ previous: images
Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map.
React Native provides components to handle common gestures, such as taps and swipes, as well as a comprehensive [gesture responder system](/react-native/docs/gesture-responder-system.html) to allow for more advanced gesture recognition.
React Native provides components to handle common gestures, such as taps and swipes, as well as a comprehensive [gesture responder system](docs/gesture-responder-system.html) to allow for more advanced gesture recognition.
## Tappable Components
@@ -38,30 +38,30 @@ Tappable components should provide feedback that show the user what is handling
Which component you use will depend on what kind of feedback you want to provide:
- Generally, you can use [**TouchableHighlight**](/react-native/docs/touchablehighlight.html) anywhere you would use a button or link on web. The view's background will be darkened when the user presses down on the button.
- Generally, you can use [**TouchableHighlight**](docs/touchablehighlight.html) anywhere you would use a button or link on web. The view's background will be darkened when the user presses down on the button.
- You may consider using [**TouchableNativeFeedback**](/react-native/docs/touchablenativefeedback.html) on Android to display ink surface reaction ripples that respond to the user's touch.
- You may consider using [**TouchableNativeFeedback**](docs/touchablenativefeedback.html) on Android to display ink surface reaction ripples that respond to the user's touch.
- [**TouchableOpacity**](/react-native/docs/touchableopacity.html) can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.
- [**TouchableOpacity**](docs/touchableopacity.html) can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.
- If you need to handle a tap gesture but you don't want any feedback to be displayed, use [**TouchableWithoutFeedback**](/react-native/docs/touchablewithoutfeedback.html).
- If you need to handle a tap gesture but you don't want any feedback to be displayed, use [**TouchableWithoutFeedback**](docs/touchablewithoutfeedback.html).
### Long presses
In some cases, you may want to detect when a user presses and holds a view for a set amount of time. These long presses can be handled by passing a function to the `onLongPress` props of any of the touchable components listed above.
## Scrolling lists and swiping views
A common pattern to many mobile apps is the scrollable list of items. Users interact with these using panning or swiping gestures. The [ScrollView](/react-native/docs/using-a-scrollview.html) component displays a list of items that can be scrolled using these gestures.
A common pattern to many mobile apps is the scrollable list of items. Users interact with these using panning or swiping gestures. The [ScrollView](docs/using-a-scrollview.html) component displays a list of items that can be scrolled using these gestures.
ScrollViews can scroll vertically or horizontally, and can be configured to allow paging through views using swiping gestures by using the `pagingEnabled` props. Swiping horizontally between views can also be implemented on Android using the [ViewPagerAndroid](/react-native/docs/viewpagerandroid.html) component.
ScrollViews can scroll vertically or horizontally, and can be configured to allow paging through views using swiping gestures by using the `pagingEnabled` props. Swiping horizontally between views can also be implemented on Android using the [ViewPagerAndroid](docs/viewpagerandroid.html) component.
A [ListView](/react-native/docs/using-a-listview.html) is a special kind of ScrollView that is best suited for displaying long vertical lists of items. It can also display section headers and footers, similar to `UITableView`s on iOS.
A [ListView](docs/using-a-listview.html) is a special kind of ScrollView that is best suited for displaying long vertical lists of items. It can also display section headers and footers, similar to `UITableView`s on iOS.
### Pinch-to-zoom
A ScrollView with a single item can be used to allow the user to zoom content. Set up the `maximumZoomScale` and `minimumZoomScale` props and your user will be able to use pinch and expand gestures to zoom in and out.
## Handling additional gestures
If you want to allow a user to drag a view around the screen, or you want to implement your own custom pan/drag gesture, take a look at the [PanResponder](/react-native/docs/panresponder.html) API or the [gesture responder system docs](/react-native/docs/gesture-responder-system.html).
If you want to allow a user to drag a view around the screen, or you want to implement your own custom pan/drag gesture, take a look at the [PanResponder](docs/panresponder.html) API or the [gesture responder system docs](docs/gesture-responder-system.html).
View
@@ -63,4 +63,4 @@ class FlexDimensionsBasics extends Component {
AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);
```
After you can control a component's size, the next step is to [learn how to lay it out on the screen](/react-native/docs/flexbox.html).
After you can control a component's size, the next step is to [learn how to lay it out on the screen](docs/flexbox.html).
View
@@ -78,7 +78,7 @@ This approach provides no safety checks. It's up to you to guarantee that those
## Network Images
Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, *you will need to manually specify the dimensions of your image*. It's highly recommended that you use https as well in order to satisfy [App Transport Security](/react-native/docs/running-on-device.html#app-transport-security) requirements on iOS.
Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, *you will need to manually specify the dimensions of your image*. It's highly recommended that you use https as well in order to satisfy [App Transport Security](docs/running-on-device.html#app-transport-security) requirements on iOS.
```javascript
// GOOD
@@ -57,7 +57,7 @@ The keys to integrating React Native components into your iOS application are to
5. Start the React Native server and run your native application.
6. Optionally add more React Native components.
7. [Debug](/react-native/releases/next/docs/debugging.html).
8. Prepare for [deployment](/react-native/docs/running-on-device.html) (e.g., via the `react-native-xcode.sh` script).
8. Prepare for [deployment](docs/running-on-device.html) (e.g., via the `react-native-xcode.sh` script).
9. Deploy and Profit!
<block class="android" />
@@ -72,7 +72,7 @@ The keys to integrating React Native components into your Android application ar
5. Start the React Native server and run your native application.
6. Optionally add more React Native components.
7. [Debug](/react-native/releases/next/docs/debugging.html).
8. [Prepare](/react-native/releases/next/docs/signed-apk-android.html) for [deployment](/react-native/docs/running-on-device.html).
8. [Prepare](/react-native/releases/next/docs/signed-apk-android.html) for [deployment](docs/running-on-device.html).
9. Deploy and Profit!
<block class="objc swift android" />
@@ -81,15 +81,15 @@ The keys to integrating React Native components into your Android application ar
<block class="android" />
The [Android Getting Started guide](/react-native/docs/getting-started.html) will install the appropriate prerequisites (e.g., `npm`) for React Native on the Android target platform and your chosen development environment.
The [Android Getting Started guide](docs/getting-started.html) will install the appropriate prerequisites (e.g., `npm`) for React Native on the Android target platform and your chosen development environment.
> To ensure a smooth experience, make sure your `android` project is under `$root/android`.
<block class="objc swift" />
### General
First, follow the [Getting Started guide](/react-native/docs/getting-started.html) for your development environment and the iOS target platform to install the prerequisites for React Native.
First, follow the [Getting Started guide](docs/getting-started.html) for your development environment and the iOS target platform to install the prerequisites for React Native.
> To ensure a smooth experience, make sure your `iOS` project is under `$root/ios`.
@@ -65,9 +65,9 @@ Browser
* [console.{log, warn, error, info, trace, table}](https://developer.chrome.com/devtools/docs/console-api)
* [CommonJS require](https://nodejs.org/docs/latest/api/modules.html)
* [XMLHttpRequest, fetch](/react-native/docs/network.html#content)
* [{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame](/react-native/docs/timers.html#content)
* [navigator.geolocation](/react-native/docs/geolocation.html#content)
* [XMLHttpRequest, fetch](docs/network.html#content)
* [{set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame](docs/timers.html#content)
* [navigator.geolocation](docs/geolocation.html#content)
ES6
@@ -104,4 +104,4 @@ AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./docs/layout-props.html).
We're getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let's move on to [learn how to handle text input with the TextInput component](/react-native/docs/handling-text-input.html).
We're getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let's move on to [learn how to handle text input with the TextInput component](docs/handling-text-input.html).
Oops, something went wrong.

0 comments on commit 8378f0f

Please sign in to comment.