Fix multiple typos in documentation (react-navigation#558)

Author: arpitpandey0209

docs/connecting-navigation-prop.md

@@ -4,7 +4,7 @@ title: Access the navigation prop from any component
 sidebar_label: Access the navigation prop from any component
 ---
 
-[`useNavigation`](use-navigation.md) is a a hook which gives access to the `navigation` object. It's useful when you cannot pass the `navigation` prop into the component directly, or don't want to pass it in case of a deeply nested child.
+[`useNavigation`](use-navigation.md) is a hook which gives access to the `navigation` object. It's useful when you cannot pass the `navigation` prop into the component directly, or don't want to pass it in case of a deeply nested child.
 
 An ordinary component that is not a screen component will not receive the navigation prop automatically. For example in this `MyBackButton` component:
 

docs/hello-react-navigation.md

@@ -107,7 +107,7 @@ The natural question at this point is: "how do I go from the `Home` route to the
 ## Summary
 
 - React Native doesn't have a built-in API for navigation like a web browser does. React Navigation provides this for you, along with the iOS and Android gestures and animations to transition between screens.
-- `Stack.Navigator` is a a component that takes route configuration as it's children with additional props for configuration and renders our content.
+- `Stack.Navigator` is a component that takes route configuration as it's children with additional props for configuration and renders our content.
 - Each `Stack.Screen` component take a `name` prop which refers to the name of the route and `component` prop which specifies the component to render for the route. These are the 2 required props.
 - To specify what the initial route in a stack is, provide an `initialRouteName` as the prop for the navigator.
 - To specify screen-specific options, we can pass an `options` prop to `Stack.Screen`, and for common options, we can pass `screenOptions` to `Stack.Navigator`

docs/localization.md

@@ -8,7 +8,7 @@ English is only one of many languages that people speak around the world (thanks
 
 ## Setting up a localization library
 
-We'll need to use some kind of library to store our translations and provide a function that gives us access to them, along with handling fallbacks when we don't have a particular language defined. Localization and internationalization (i18n) are often used interchangably, as in the example below where we get the current `locale` from `expo-localization` and use the `i18n-js` library for managing translations, for no particular reason other than it was available - use whatever you like.
+We'll need to use some kind of library to store our translations and provide a function that gives us access to them, along with handling fallbacks when we don't have a particular language defined. Localization and internationalization (i18n) are often used interchangeably, as in the example below where we get the current `locale` from `expo-localization` and use the `i18n-js` library for managing translations, for no particular reason other than it was available - use whatever you like.
 
 ```jsx
 import * as Localization from 'expo-localization'; // or whatever library you want

docs/stack-navigator.md

@@ -177,7 +177,7 @@ String or a function that returns a React Element to be used by the header. Defa
 
 #### `headerTitleAlign`
 
-How to align the the header title. Possible values:
+How to align the header title. Possible values:
 
 - `left`
 - `center`

docs/tab-based-navigation.md

@@ -97,7 +97,7 @@ export default function App() {
 Let's dissect this:
 
 - `tabBarIcon` is a supported option in bottom tab navigator. So we know we can use it on our screen components in the `options` prop, but in this case chose to put it in the `screenOptions` prop of `Tab.Navigator` in order to centralize the icon configuration for convenience.
-- `tabBarIcon` is a function that is given the `focused` state, `color`, and `size` params. If you take a peek further down in the configuration you will see `tabBarOptions` and `activeTintColor` and `inactiveTintColor`. These default to the the iOS platform defaults, but you can change them here. The `color` that is passed through to the `tabBarIcon` is either the active or inactive one, depending on the `focused` state (focused is active). The `size` is the size of the icon expected by the tab bar.
+- `tabBarIcon` is a function that is given the `focused` state, `color`, and `size` params. If you take a peek further down in the configuration you will see `tabBarOptions` and `activeTintColor` and `inactiveTintColor`. These default to the iOS platform defaults, but you can change them here. The `color` that is passed through to the `tabBarIcon` is either the active or inactive one, depending on the `focused` state (focused is active). The `size` is the size of the icon expected by the tab bar.
 - Read the [full API reference](bottom-tab-navigator.md) for further information on `createBottomTabNavigator` configuration options.
 
 ## Add badges to icons

docs/use-scroll-to-top.md

@@ -4,7 +4,7 @@ title: useScrollToTop
 sidebar_label: useScrollToTop
 ---
 
-The expected native behavior of scrollable components is to to respond to events from navigation that will scroll to top when tapping on the active tab as you would expect from native tab bars.
+The expected native behavior of scrollable components is to respond to events from navigation that will scroll to top when tapping on the active tab as you would expect from native tab bars.
 
 In order to achieve it we export `useScrollToTop` which accept ref to scrollable component (e,g. `ScrollView` or `FlatList`).
 

website/blog/2018-02-06-react-navigation-1.0.md

@@ -6,7 +6,7 @@ authorURL: https://twitter.com/reactnavigation
 
 As of today, React Navigation version 1.0 has been released! To see a list of recent improvements leading up to the release, refer to the “[Renewed Path to React Navigation V1.0](https://github.com/react-navigation/react-navigation/issues/2585)” issue. Thank you to everybody who has filed high-quality bug reports, submitted pull requests, and helped out fellow developers while we were in beta!
 
-This release isn’t meant to be interpreted as a signal that React Navigation is “finished" — work is already underway on a number of significant changes to the API that aim to make React Navigation easier to use and more powerful. These changes will be run through our [new RFC process](https://github.com/react-navigation/rfcs). For example, the [Navigator View API RFC](https://github.com/react-navigation/rfcs/blob/master/text/0002-navigator-view-api.md) outlines a a plan to decouple views from the router in order to make it easier for other navigation APIs, such as [react-native-router-flux](https://github.com/aksonov/react-native-router-flux) and [react-router-native](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-native), to build on top of the same navigation views. We’re also very excited about a plan (no RFC is open yet, but keep an eye out for it) to use [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler) to run navigation gestures (sliding a drawer open, or swiping back on a stack, for example) on the UI thread using the Animated native driver.
+This release isn’t meant to be interpreted as a signal that React Navigation is “finished" — work is already underway on a number of significant changes to the API that aim to make React Navigation easier to use and more powerful. These changes will be run through our [new RFC process](https://github.com/react-navigation/rfcs). For example, the [Navigator View API RFC](https://github.com/react-navigation/rfcs/blob/master/text/0002-navigator-view-api.md) outlines a plan to decouple views from the router in order to make it easier for other navigation APIs, such as [react-native-router-flux](https://github.com/aksonov/react-native-router-flux) and [react-router-native](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-native), to build on top of the same navigation views. We’re also very excited about a plan (no RFC is open yet, but keep an eye out for it) to use [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler) to run navigation gestures (sliding a drawer open, or swiping back on a stack, for example) on the UI thread using the Animated native driver.
 
 Last week we released an updated version of our [documentation website](https://reactnavigation.org/docs/getting-started.html), built using [Docusaurus](https://docusaurus.io/). We hope that the new documentation will help newcomers get onboarded with the fundamentals of React Navigation, and serve as an ongoing resource to handle specific use cases as you come across them (under the “How do I do..?” section). [Contributions to the documentation are very welcome](https://github.com/react-navigation/react-navigation.github.io).
 

website/versioned_docs/version-1.x/auth-flow.md

@@ -84,7 +84,7 @@ class AuthLoadingScreen extends React.Component {
 
 ## Fill in other components
 
-Our `App` and `Auth` routes are both `StackNavigators`, but you could do whatever you like here. As mentioned above, you probably want your authentication route to be a stack for password reset, signup, etc. Similarly for your app, you probbaly have more than one screen. We won't talk about how to implement the text inputs and buttons for the authentication screen, that is outside of the scope of navigation. We'll just fill in some placeholder content.
+Our `App` and `Auth` routes are both `StackNavigators`, but you could do whatever you like here. As mentioned above, you probably want your authentication route to be a stack for password reset, signup, etc. Similarly for your app, you probably have more than one screen. We won't talk about how to implement the text inputs and buttons for the authentication screen, that is outside of the scope of navigation. We'll just fill in some placeholder content.
 
 ```js
 class SignInScreen extends React.Component {

website/versioned_docs/version-1.x/navigating-without-navigation-prop.md

@@ -73,4 +73,4 @@ import NavigationService from 'path-to-NavigationService.js';
 NavigationService.navigate('ChatScreen', { userName: 'Lucy' });
 ```
 
-In `NavigationService`, you can create your own navigation actions, or compose multiple navigation actions into one, and then easily reuse them throughout your application. When writing tests, you may mock the navigation functions, and make assertions on whether the correct functions are called, with the correct paramaters.
+In `NavigationService`, you can create your own navigation actions, or compose multiple navigation actions into one, and then easily reuse them throughout your application. When writing tests, you may mock the navigation functions, and make assertions on whether the correct functions are called, with the correct parameters.

website/versioned_docs/version-1.x/status-bar.md

@@ -88,7 +88,7 @@ If you're using a TabNavigator it's a bit more complex because the screens on al
 
 To fix this we'll have to do two things
 
-1. Only use the `StatusBar` component on our inital screen. This allows us to ensure the correct `StatusBar` config is used.
+1. Only use the `StatusBar` component on our initial screen. This allows us to ensure the correct `StatusBar` config is used.
 2. Leverage the events system in React Navigation and `StatusBar`'s implicit API to change the `StatusBar` configuration when a tab becomes active.
 
 First, the new `Screen2.js` will no longer use the `StatusBar` component.

website/versioned_docs/version-1.x/tab-based-navigation.md

@@ -90,7 +90,7 @@ export default TabNavigator(
 Let's dissect this:
 
 * `tabBarIcon` is a property on `navigationOptions`, so we know we can use it on our screen components, but in this case chose to put it in the `TabNavigator` configuration in order to centralize the icon configuration for convenience.
-* `tabBarIcon` is a function that is given the `focused` state and `tintColor`. If you take a peek further down in the configuration you will see `tabBarOptions` and `activeTintColor` and `inactiveTintColor`. These default to the the iOS platform defaults, but you can change them here. The `tintColor` that is passed through to the `tabBarIcon` is either the active or inactive one, depending on the `focused` state (focused is active).
+* `tabBarIcon` is a function that is given the `focused` state and `tintColor`. If you take a peek further down in the configuration you will see `tabBarOptions` and `activeTintColor` and `inactiveTintColor`. These default to the iOS platform defaults, but you can change them here. The `tintColor` that is passed through to the `tabBarIcon` is either the active or inactive one, depending on the `focused` state (focused is active).
 * In order to make the behavior the same on iOS and Android, we have explicitly provided `tabBarComponent`, `tabBarPosition`, `animationEnabled`, and `swipeEnabled`. The default behavior of `TabNavigator` is to show a tab bar on the top of the screen on Android and on the bottom on iOS, but here we force it to be on the bottom on both platforms.
 * Read the [full API reference](tab-navigator.html) for further information on `TabNavigator` configuration options.
 

website/versioned_docs/version-2.x/drawer-actions.md

@@ -10,7 +10,7 @@ original_id: drawer-actions
 The following actions are supported:
 * [openDrawer](#openDrawer) - open the drawer
 * [closeDrawer](#closeDrawer) - close the drawer
-* [toggleDrawer](#toggleDrawer) - toggle the state, ie. switche from closed to open and vice versa
+* [toggleDrawer](#toggleDrawer) - toggle the state, ie. switch from closed to open and vice versa
 
 ### Usage
 

website/versioned_docs/version-2.x/stack-navigator.md

@@ -281,7 +281,7 @@ Header transitions can also be configured using `headerLeftInterpolator`, `heade
 
 #### Specifying the transition mode for a stack's screens explicitly
 
-We can't set the `StackNavigatorConfig`'s `mode` dynamically. Instead we are going to use a custom `transitionConfig` to render the specfific transition we want - modal or card - on a screen by screen basis.
+We can't set the `StackNavigatorConfig`'s `mode` dynamically. Instead we are going to use a custom `transitionConfig` to render the specific transition we want - modal or card - on a screen by screen basis.
 
 ```js
 import { createStackNavigator, StackViewTransitionConfigs } from 'react-navigation';

website/versioned_docs/version-2.x/state-persistence.md

@@ -35,7 +35,7 @@ const App = () => <AppNavigator persistenceKey={navigationPersistenceKey} />;
 
 ### Loading View
 
-Because the state is persisted asyncronously, the app must render an empty/loading view for a moment while the `AsyncStorage` request completes. To customize the loading view that is rendered during this time, you can use the `renderLoadingExperimental` prop:
+Because the state is persisted asynchronously, the app must render an empty/loading view for a moment while the `AsyncStorage` request completes. To customize the loading view that is rendered during this time, you can use the `renderLoadingExperimental` prop:
 
 ```js
 <AppNavigator
@@ -54,7 +54,7 @@ Each param, route, and navigation state must be fully JSON-serializable for this
 
 When your application code changes to support new routes or different routers for a given route in your navigation state, the app may break when presented with the old navigation state.
 
-This may happen regularly during development as you re-configure your routes and navigator heirarchy. But it also may happen in production when you release a new version of your app!
+This may happen regularly during development as you re-configure your routes and navigator hierarchy. But it also may happen in production when you release a new version of your app!
 
 The conservative behavior is to wipe the navigation state when the app has been updated. The easiest way to do this is to refer to a different persistence key for each version that you release to users.
 

website/versioned_docs/version-2.x/status-bar.md

@@ -88,7 +88,7 @@ If you're using a TabNavigator it's a bit more complex because the screens on al
 
 To fix this we'll have to do two things
 
-1. Only use the `StatusBar` component on our inital screen. This allows us to ensure the correct `StatusBar` config is used.
+1. Only use the `StatusBar` component on our initial screen. This allows us to ensure the correct `StatusBar` config is used.
 2. Leverage the events system in React Navigation and `StatusBar`'s implicit API to change the `StatusBar` configuration when a tab becomes active.
 
 First, the new `Screen2.js` will no longer use the `StatusBar` component.

website/versioned_docs/version-2.x/tab-based-navigation.md

@@ -88,7 +88,7 @@ export default createBottomTabNavigator(
 Let's dissect this:
 
 * `tabBarIcon` is a property on `navigationOptions`, so we know we can use it on our screen components, but in this case chose to put it in the `createBottomTabNavigator` configuration in order to centralize the icon configuration for convenience.
-* `tabBarIcon` is a function that is given the `focused` state, `tintColor`, and `horizontal` param, which is a boolean. If you take a peek further down in the configuration you will see `tabBarOptions` and `activeTintColor` and `inactiveTintColor`. These default to the the iOS platform defaults, but you can change them here. The `tintColor` that is passed through to the `tabBarIcon` is either the active or inactive one, depending on the `focused` state (focused is active). The orientation state `horizontal` is `true` when the device is in landscape, otherwise is `false` for portrait.
+* `tabBarIcon` is a function that is given the `focused` state, `tintColor`, and `horizontal` param, which is a boolean. If you take a peek further down in the configuration you will see `tabBarOptions` and `activeTintColor` and `inactiveTintColor`. These default to the iOS platform defaults, but you can change them here. The `tintColor` that is passed through to the `tabBarIcon` is either the active or inactive one, depending on the `focused` state (focused is active). The orientation state `horizontal` is `true` when the device is in landscape, otherwise is `false` for portrait.
 * Read the [full API reference](bottom-tab-navigator.html) for further information on `createBottomTabNavigator` configuration options.
 
 ## Jumping between tabs

website/versioned_docs/version-3.x/localization.md

@@ -9,7 +9,7 @@ English is only one of many languages that people speak around the world (thanks
 
 ## Setting up a localization library
 
-We'll need to use some kind of library to store our translations and provide a function that gives us access to them, along with handling fallbacks when we don't have a particular language defined. Localization and internationalization (i18n) are often used interchangably, as in the example below where we get the current `locale` from `expo-localization` and use the `i18n-js` library for managing translations, for no particular reason other than it was available - use whatever you like.
+We'll need to use some kind of library to store our translations and provide a function that gives us access to them, along with handling fallbacks when we don't have a particular language defined. Localization and internationalization (i18n) are often used interchangeably, as in the example below where we get the current `locale` from `expo-localization` and use the `i18n-js` library for managing translations, for no particular reason other than it was available - use whatever you like.
 
 ```jsx
 import  * as Localization from 'expo-localization'; // or whatever library you want

website/versioned_docs/version-3.x/stack-navigator.md

@@ -305,7 +305,7 @@ Header transitions can also be configured using `headerLeftInterpolator`, `heade
 
 #### Specifying the transition mode for a stack's screens explicitly
 
-We can't set the `StackNavigatorConfig`'s `mode` dynamically. Instead we are going to use a custom `transitionConfig` to render the specfific transition we want - modal or card - on a screen by screen basis.
+We can't set the `StackNavigatorConfig`'s `mode` dynamically. Instead we are going to use a custom `transitionConfig` to render the specific transition we want - modal or card - on a screen by screen basis.
 
 ```js
 import { createStackNavigator, StackViewTransitionConfigs } from 'react-navigation';