diff --git a/docs/navigatorios.md b/docs/navigatorios.md deleted file mode 100644 index 20b2cd39d70..00000000000 --- a/docs/navigatorios.md +++ /dev/null @@ -1,440 +0,0 @@ ---- -id: navigatorios -title: NavigatorIOS ---- - -DEPRECATED - use one of the available third party library for navigations, such as [React Navigation](navigation.md#react-navigation) or [react-native-navigation](https://github.com/wix/react-native-navigation). - -`NavigatorIOS` is a wrapper around [`UINavigationController`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/), enabling you to implement a navigation stack. It works exactly the same as it would on a native app using `UINavigationController`, providing the same animations and behavior from UIKit. - -As the name implies, it is only available on iOS. Take a look at [`React Navigation`](https://reactnavigation.org/) for a cross-platform solution in JavaScript, or check out either of these components for native solutions: [native-navigation](http://airbnb.io/native-navigation/), [react-native-navigation](https://github.com/wix/react-native-navigation). - -To set up the navigator, provide the `initialRoute` prop with a route object. A route object is used to describe each scene that your app navigates to. `initialRoute` represents the first route in your navigator. - -```javascript -import PropTypes from 'prop-types'; -import React, {Component} from 'react'; -import {NavigatorIOS, Text, TouchableHighlight, View} from 'react-native'; - -export default class NavigatorIOSApp extends Component { - render() { - return ( - - ); - } -} - -class MyScene extends Component { - static propTypes = { - title: PropTypes.string.isRequired, - navigator: PropTypes.object.isRequired, - }; - - _onForward = () => { - this.props.navigator.push({ - title: 'Scene', - }); - }; - - render() { - return ( - - Current Scene: {this.props.title} - - Tap me to load the next scene - - - ); - } -} -``` - -In this code, the navigator renders the component specified in initialRoute, which in this case is `MyScene`. This component will receive a `route` prop and a `navigator` prop representing the navigator. The navigator's navigation bar will render the title for the current scene, "My Initial Scene". - -You can optionally pass in a `passProps` property to your `initialRoute`. `NavigatorIOS` passes this in as props to the rendered component: - -```javascript -initialRoute={{ - component: MyScene, - title: 'My Initial Scene', - passProps: { myProp: 'foo' } -}} -``` - -You can then access the props passed in via `{this.props.myProp}`. - -#### Handling Navigation - -To trigger navigation functionality such as pushing or popping a view, you have access to a `navigator` object. The object is passed in as a prop to any component that is rendered by `NavigatorIOS`. You can then call the relevant methods to perform the navigation action you need: - -```javascript -class MyView extends Component { - _handleBackPress() { - this.props.navigator.pop(); - } - - _handleNextPress(nextRoute) { - this.props.navigator.push(nextRoute); - } - - render() { - const nextRoute = { - component: MyView, - title: 'Bar That', - passProps: {myProp: 'bar'}, - }; - return ( - this._handleNextPress(nextRoute)}> - - See you on the other nav {this.props.myProp}! - - - ); - } -} -``` - -You can also trigger navigator functionality from the `NavigatorIOS` component: - -```javascript -class NavvyIOS extends Component { - _handleNavigationRequest() { - this.refs.nav.push({ - component: MyView, - title: 'Genius', - passProps: {myProp: 'genius'}, - }); - } - - render() { - return ( - this._handleNavigationRequest(), - }} - style={{flex: 1}} - /> - ); - } -} -``` - -The code above adds a `_handleNavigationRequest` private method that is invoked from the `NavigatorIOS` component when the right navigation bar item is pressed. To get access to the navigator functionality, a reference to it is saved in the `ref` prop and later referenced to push a new scene into the navigation stack. - -#### Navigation Bar Configuration - -Props passed to `NavigatorIOS` will set the default configuration for the navigation bar. Props passed as properties to a route object will set the configuration for that route's navigation bar, overriding any props passed to the `NavigatorIOS` component. - -```javascript -_handleNavigationRequest() { - this.refs.nav.push({ - //... - passProps: { myProp: 'genius' }, - barTintColor: '#996699', - }); -} - -render() { - return ( - - ); -} -``` - -In the example above the navigation bar color is changed when the new route is pushed. - -### Props - -* [`initialRoute`](navigatorios.md#initialroute) -* [`barStyle`](navigatorios.md#barstyle) -* [`barTintColor`](navigatorios.md#bartintcolor) -* [`interactivePopGestureEnabled`](navigatorios.md#interactivepopgestureenabled) -* [`itemWrapperStyle`](navigatorios.md#itemwrapperstyle) -* [`navigationBarHidden`](navigatorios.md#navigationbarhidden) -* [`shadowHidden`](navigatorios.md#shadowhidden) -* [`tintColor`](navigatorios.md#tintcolor) -* [`titleTextColor`](navigatorios.md#titletextcolor) -* [`translucent`](navigatorios.md#translucent) - -### Methods - -* [`push`](navigatorios.md#push) -* [`popN`](navigatorios.md#popn) -* [`pop`](navigatorios.md#pop) -* [`replaceAtIndex`](navigatorios.md#replaceatindex) -* [`replace`](navigatorios.md#replace) -* [`replacePrevious`](navigatorios.md#replaceprevious) -* [`popToTop`](navigatorios.md#poptotop) -* [`popToRoute`](navigatorios.md#poptoroute) -* [`replacePreviousAndPop`](navigatorios.md#replacepreviousandpop) -* [`resetTo`](navigatorios.md#resetto) - ---- - -# Reference - -## Props - -### `initialRoute` - -NavigatorIOS uses `route` objects to identify child views, their props, and navigation bar configuration. Navigation operations such as push operations expect routes to look like this the `initialRoute`. - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | -| object: {component: function,title: string,titleImage: Image.propTypes.source,passProps: object,backButtonIcon: Image.propTypes.source,backButtonTitle: string,leftButtonIcon: Image.propTypes.source,leftButtonTitle: string,leftButtonSystemIcon: Object.keys(SystemIcons),onLeftButtonPress: function,rightButtonIcon: Image.propTypes.source,rightButtonTitle: string,rightButtonSystemIcon: Object.keys(SystemIcons),onRightButtonPress: function,wrapperStyle: View.style,navigationBarHidden: bool,shadowHidden: bool,tintColor: string,barTintColor: string,barStyle: enum('default', 'black'),titleTextColor: string,translucent: bool} | Yes | - ---- - -### `barStyle` - -The style of the navigation bar. Supported values are 'default', 'black'. Use 'black' instead of setting `barTintColor` to black. This produces a navigation bar with the native iOS style with higher translucency. - -| Type | Required | -| ------------------------ | -------- | -| enum('default', 'black') | No | - ---- - -### `barTintColor` - -The default background color of the navigation bar. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `interactivePopGestureEnabled` - -Boolean value that indicates whether the interactive pop gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture. - -If this prop is not provided, the default behavior is for the back swipe gesture to be enabled when the navigation bar is shown and disabled when the navigation bar is hidden. Once you've provided the `interactivePopGestureEnabled` prop, you can never restore the default behavior. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `itemWrapperStyle` - -The default wrapper style for components in the navigator. A common use case is to set the `backgroundColor` for every scene. - -| Type | Required | -| ---------- | -------- | -| View.style | No | - ---- - -### `navigationBarHidden` - -Boolean value that indicates whether the navigation bar is hidden by default. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `shadowHidden` - -Boolean value that indicates whether to hide the 1px hairline shadow by default. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `tintColor` - -The default color used for the buttons in the navigation bar. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `titleTextColor` - -The default text color of the navigation bar title. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `translucent` - -Boolean value that indicates whether the navigation bar is translucent by default. When true any screens loaded within the navigator will sit below the status bar and underneath the navigation bar. To have screens render below the navigation bar set to false. - -| Type | Required | -| ---- | -------- | -| bool | No | - -## Methods - -### `push()` - -```javascript -push((route: object)); -``` - -Navigate forward to a new route. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ----------------------------- | -| route | object | Yes | The new route to navigate to. | - ---- - -### `popN()` - -```javascript -popN((n: number)); -``` - -Go back N scenes at once. When N=1, behavior matches `pop()`. - -**Parameters:** - -| Name | Type | Required | Description | -| ---- | ------ | -------- | ---------------------------- | -| n | number | Yes | The number of scenes to pop. | - ---- - -### `pop()` - -```javascript -pop(); -``` - -Pop back to the previous scene. - ---- - -### `replaceAtIndex()` - -```javascript -replaceAtIndex((route: object), (index: number)); -``` - -Replace a route in the navigation stack. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ---------------------------------------------------------------------------------------------------------- | -| route | object | Yes | The new route that will replace the specified one. | -| index | number | Yes | The route into the stack that should be replaced. If it is negative, it counts from the back of the stack. | - ---- - -### `replace()` - -```javascript -replace((route: object)); -``` - -Replace the route for the current scene and immediately load the view for the new route. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ----------------------------- | -| route | object | Yes | The new route to navigate to. | - ---- - -### `replacePrevious()` - -```javascript -replacePrevious((route: object)); -``` - -Replace the route/view for the previous scene. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ------------------------------------------------- | -| route | object | Yes | The new route to will replace the previous scene. | - ---- - -### `popToTop()` - -```javascript -popToTop(); -``` - -Go back to the topmost item in the navigation stack. - ---- - -### `popToRoute()` - -```javascript -popToRoute((route: object)); -``` - -Go back to the item for a particular route object. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ----------------------------- | -| route | object | Yes | The new route to navigate to. | - ---- - -### `replacePreviousAndPop()` - -```javascript -replacePreviousAndPop((route: object)); -``` - -Replaces the previous route/view and transitions back to it. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ----------------------------------------------- | -| route | object | Yes | The new route that replaces the previous scene. | - ---- - -### `resetTo()` - -```javascript -resetTo((route: object)); -``` - -Replaces the top item and pop to it. - -**Parameters:** - -| Name | Type | Required | Description | -| ----- | ------ | -------- | ------------------------------------------------- | -| route | object | Yes | The new route that will replace the topmost item. | diff --git a/docs/tabbarios-item.md b/docs/tabbarios-item.md deleted file mode 100644 index 83502b400d6..00000000000 --- a/docs/tabbarios-item.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: tabbarios-item -title: TabBarIOS.Item ---- - -### Props - -* [View props...](view.md#props) - -- [`selected`](tabbarios-item.md#selected) -- [`badge`](tabbarios-item.md#badge) -- [`icon`](tabbarios-item.md#icon) -- [`onPress`](tabbarios-item.md#onpress) -- [`renderAsOriginal`](tabbarios-item.md#renderasoriginal) -- [`badgeColor`](tabbarios-item.md#badgecolor) -- [`selectedIcon`](tabbarios-item.md#selectedicon) -- [`style`](tabbarios-item.md#style) -- [`systemIcon`](tabbarios-item.md#systemicon) -- [`title`](tabbarios-item.md#title) -- [`isTVSelectable`](tabbarios-item.md#istvselectable) - ---- - -# Reference - -## Props - -### `selected` - -It specifies whether the children are visible or not. If you see a blank content, you probably forgot to add a selected one. - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `badge` - -Little red bubble that sits at the top right of the icon. - -| Type | Required | -| --------------- | -------- | -| string, ,number | No | - ---- - -### `icon` - -A custom icon for the tab. It is ignored when a system icon is defined. - -| Type | Required | -| ---------------------- | -------- | -| Image.propTypes.source | No | - ---- - -### `onPress` - -Callback when this tab is being selected, you should change the state of your component to set selected={true}. - -| Type | Required | -| -------- | -------- | -| function | No | - ---- - -### `renderAsOriginal` - -If set to true it renders the image as original, it defaults to being displayed as a template - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `badgeColor` - -Background color for the badge. Available since iOS 10. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `selectedIcon` - -A custom icon when the tab is selected. It is ignored when a system icon is defined. If left empty, the icon will be tinted in blue. - -| Type | Required | -| ---------------------- | -------- | -| Image.propTypes.source | No | - ---- - -### `style` - -React style object. - -| Type | Required | -| ---------- | -------- | -| View.style | No | - ---- - -### `systemIcon` - -Items comes with a few predefined system icons. Note that if you are using them, the title and selectedIcon will be overridden with the system ones. - -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | -| enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') | No | - ---- - -### `title` - -Text that appears under the icon. It is ignored when a system icon is defined. - -| Type | Required | -| ------ | -------- | -| string | No | - ---- - -### `isTVSelectable` - -(Apple TV only)\* When set to true, this view will be focusable and navigable using the Apple TV remote. - -| Type | Required | Platform | -| ---- | -------- | -------- | -| bool | No | iOS | diff --git a/docs/tabbarios.md b/docs/tabbarios.md deleted file mode 100644 index 0edceaef1b7..00000000000 --- a/docs/tabbarios.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: tabbarios -title: TabBarIOS ---- - -### Props - -* [View props...](view.md#props) - -- [`barStyle`](tabbarios.md#barstyle) -- [`barTintColor`](tabbarios.md#bartintcolor) -- [`itemPositioning`](tabbarios.md#itempositioning) -- [`style`](tabbarios.md#style) -- [`tintColor`](tabbarios.md#tintcolor) -- [`translucent`](tabbarios.md#translucent) -- [`unselectedItemTintColor`](tabbarios.md#unselecteditemtintcolor) -- [`unselectedTintColor`](tabbarios.md#unselectedtintcolor) - ---- - -# Reference - -## Props - -### `barStyle` - -The style of the tab bar. Supported values are 'default', 'black'. Use 'black' instead of setting `barTintColor` to black. This produces a tab bar with the native iOS style with higher translucency. - -| Type | Required | -| ------------------------ | -------- | -| enum('default', 'black') | No | - ---- - -### `barTintColor` - -Background color of the tab bar - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `itemPositioning` - -Specifies tab bar item positioning. Available values are: - -* fill - distributes items across the entire width of the tab bar -* center - centers item in the available tab bar space -* auto (default) - distributes items dynamically according to the user interface idiom. In a horizontally compact environment (e.g. iPhone 5) this value defaults to `fill`, in a horizontally regular one (e.g. iPad) it defaults to center. - -| Type | Required | -| ------------------------------ | -------- | -| enum('fill', 'center', 'auto') | No | - ---- - -### `style` - -| Type | Required | -| ---------- | -------- | -| View.style | No | - ---- - -### `tintColor` - -Color of the currently selected tab icon - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `translucent` - -A Boolean value that indicates whether the tab bar is translucent - -| Type | Required | -| ---- | -------- | -| bool | No | - ---- - -### `unselectedItemTintColor` - -Color of unselected tab icons. Available since iOS 10. - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | - ---- - -### `unselectedTintColor` - -Color of text on unselected tabs - -| Type | Required | -| ------------------ | -------- | -| [color](colors.md) | No | diff --git a/website/i18n/en.json b/website/i18n/en.json index cf0ee4a1b89..e8c98069b8e 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -80,7 +80,6 @@ "native-modules-setup": "Native Modules Setup", "navigation": "Navigating Between Screens", "navigator": "Navigator (Legacy Custom Component)", - "navigatorios": "NavigatorIOS", "netinfo": "NetInfo", "network": "Networking", "out-of-tree-platforms": "Out-of-Tree Platforms", @@ -118,8 +117,6 @@ "stylesheet": "StyleSheet", "switch": "Switch", "systrace": "Systrace", - "tabbarios-item": "TabBarIOS.Item", - "tabbarios": "TabBarIOS", "testing": "Testing your Changes", "text-style-props": "Text Style Props", "text": "Text", diff --git a/website/sidebars.json b/website/sidebars.json index e679a1498e1..60d85972224 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -73,7 +73,6 @@ "listview", "maskedviewios", "modal", - "navigatorios", "picker", "pickerios", "progressbarandroid", @@ -87,8 +86,6 @@ "snapshotviewios", "statusbar", "switch", - "tabbarios", - "tabbarios-item", "text", "textinput", "toolbarandroid",