diff --git a/Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js b/Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js index 8ef14c56ac8..e74d80e2630 100644 --- a/Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js +++ b/Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js @@ -27,7 +27,6 @@ var { RootContainer: NavigationRootContainer, Reducer: NavigationReducer, Header: NavigationHeader, - HeaderTitle: NavigationHeaderTitle, } = NavigationExperimental; const NavigationBasicReducer = NavigationReducer.StackReducer({ @@ -61,6 +60,12 @@ class NavigationAnimatedExample extends React.Component { /> ); } + handleBackAction() { + return ( + this.navRootContainer && + this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction()) + ); + } _renderNavigated(navigationState, onNavigate) { if (!navigationState) { return null; @@ -69,13 +74,11 @@ class NavigationAnimatedExample extends React.Component { ( + renderOverlay={(props) => ( {pageState.key}} + navigationState={props.navigationParentState} + position={props.position} + getTitle={state => state.key} /> )} setTiming={(pos, navState) => { @@ -118,7 +121,7 @@ const styles = StyleSheet.create({ flex: 1, }, scrollView: { - marginTop: NavigationHeader.APPBAR_HEIGHT + NavigationHeader.STATUSBAR_HEIGHT, + marginTop: 64 }, }); diff --git a/Examples/UIExplorer/NavigationExperimental/NavigationBasicExample.js b/Examples/UIExplorer/NavigationExperimental/NavigationBasicExample.js index 8508c047368..447ab2051fb 100644 --- a/Examples/UIExplorer/NavigationExperimental/NavigationBasicExample.js +++ b/Examples/UIExplorer/NavigationExperimental/NavigationBasicExample.js @@ -23,7 +23,6 @@ const NavigationExampleRow = require('./NavigationExampleRow'); const { RootContainer: NavigationRootContainer, Reducer: NavigationReducer, - Header: NavigationHeader, } = NavigationExperimental; const StackReducer = NavigationReducer.StackReducer; @@ -94,7 +93,7 @@ const styles = StyleSheet.create({ topView: { backgroundColor: '#E9E9EF', flex: 1, - paddingTop: NavigationHeader.STATUSBAR_HEIGHT, + paddingTop: 30, }, }); diff --git a/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js b/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js index 6a79a5cdc04..bc1d184db5d 100644 --- a/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js +++ b/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js @@ -28,7 +28,6 @@ const { Container: NavigationContainer, RootContainer: NavigationRootContainer, Header: NavigationHeader, - HeaderTitle: NavigationHeaderTitle, Reducer: NavigationReducer, View: NavigationView, } = NavigationExperimental; @@ -155,15 +154,13 @@ class ExampleTabScreen extends React.Component { /> ); } - - _renderHeader(scenes, index, position, layout) { + _renderHeader(props) { return ( {stateTypeTitleMap(pageState)}} + navigationState={props.navigationParentState} + position={props.position} + layout={props.layout} + getTitle={state => stateTypeTitleMap(state)} /> ); } @@ -273,7 +270,7 @@ const styles = StyleSheet.create({ flex: 1, }, scrollView: { - marginTop: NavigationHeader.APPBAR_HEIGHT + NavigationHeader.STATUSBAR_HEIGHT, + marginTop: 64 }, tabContent: { flex: 1, diff --git a/Examples/UIExplorer/NavigationExperimental/NavigationExampleRow.js b/Examples/UIExplorer/NavigationExperimental/NavigationExampleRow.js index 9fceec7bc3b..4e431e30a72 100644 --- a/Examples/UIExplorer/NavigationExperimental/NavigationExampleRow.js +++ b/Examples/UIExplorer/NavigationExperimental/NavigationExampleRow.js @@ -16,6 +16,7 @@ var React = require('react-native'); var { Text, + PixelRatio, StyleSheet, View, TouchableHighlight, @@ -49,7 +50,7 @@ const styles = StyleSheet.create({ row: { padding: 15, backgroundColor: 'white', - borderBottomWidth: StyleSheet.hairlineWidth, + borderBottomWidth: 1 / PixelRatio.get(), borderBottomColor: '#CDCDCD', }, rowText: { diff --git a/Examples/UIExplorer/UIExplorerList.android.js b/Examples/UIExplorer/UIExplorerList.android.js index a912ae9abf8..68be333e510 100644 --- a/Examples/UIExplorer/UIExplorerList.android.js +++ b/Examples/UIExplorer/UIExplorerList.android.js @@ -15,8 +15,6 @@ */ 'use strict'; -const React = require('react'); - export type UIExplorerExample = { key: string; module: React.Component; diff --git a/Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js b/Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js index fac681c1a39..82a807e2f27 100644 --- a/Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js +++ b/Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js @@ -27,227 +27,123 @@ */ 'use strict'; -const React = require('react-native'); +const Animated = require('Animated'); +const Image = require('Image'); const NavigationContainer = require('NavigationContainer'); -const NavigationHeaderTitle = require('NavigationHeaderTitle'); -const NavigationHeaderBackButton = require('NavigationHeaderBackButton'); - -const { - Animated, - Platform, - StyleSheet, - View, -} = React; - -const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56; -const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0; +const NavigationRootContainer = require('NavigationRootContainer'); +const React = require('react-native'); +const StyleSheet = require('StyleSheet'); +const Text = require('Text'); +const TouchableOpacity = require('TouchableOpacity'); +const View = require('View'); import type { - NavigationScene, + NavigationState, + NavigationParentState } from 'NavigationStateUtils'; -type Renderer = (scene: NavigationScene) => ReactElement; - -type DefaultProps = { - renderTitleComponent: Renderer; - renderLeftComponent: Renderer; -}; - type Props = { + navigationState: NavigationParentState, + onNavigate: Function, position: Animated.Value, - scenes: Array; - index: number; - renderTitleComponent: Renderer; - renderLeftComponent: Renderer; - renderRightComponent: Renderer; - style: any, + getTitle: (navState: NavigationState) => string, }; -class NavigationHeader extends React.Component { - _renderLeftComponent(scene) { - const { - renderLeftComponent, - position, - } = this.props; - - if (renderLeftComponent) { - const { - index, - state, - } = scene; - - return ( - - {renderLeftComponent(state, index)} - - ); - } - - return null; +class NavigationHeader extends React.Component { + _handleBackPress: Function; + props: Props; + componentWillMount() { + this._handleBackPress = this._handleBackPress.bind(this); } - - _renderRightComponent(scene) { - const { - renderRightComponent, - position, - } = this.props; - - if (renderRightComponent) { - const { - index, - state, - } = scene; - - return ( - - {renderRightComponent(state, index)} - - ); - } - - return null; - } - - _renderTitleComponent(scene) { - const { - renderTitleComponent, - position, - } = this.props; - - if (renderTitleComponent) { - const { - index, - state, - } = scene; - - return ( - - {renderTitleComponent(state, index)} - - ); - } - - return null; - } - render() { - const { scenes } = this.props; - + var state = this.props.navigationState; return ( - - {scenes.map(this._renderLeftComponent, this)} - {scenes.map(this._renderTitleComponent, this)} - {scenes.map(this._renderRightComponent, this)} - + + {state.children.map(this._renderTitle, this)} + {this._renderBackButton()} + ); } + _renderBackButton() { + if (this.props.navigationState.index === 0) { + return null; + } + return ( + + + + ); + } + _renderTitle(childState, index) { + return ( + + {this.props.getTitle(childState)} + + ); + } + _handleBackPress() { + this.props.onNavigate(NavigationRootContainer.getBackAction()); + } } -const renderTitleComponent = pageState => {pageState.title}; -const renderLeftComponent = (pageState, index) => index !== 0 ? : null; - -NavigationHeader.defaultProps = { - renderTitleComponent, - renderLeftComponent, -}; - -NavigationHeader.propTypes = { - position: React.PropTypes.object.isRequired, - scenes: React.PropTypes.arrayOf(React.PropTypes.shape({ - index: React.PropTypes.number, - state: React.PropTypes.any, - })).isRequired, - index: React.PropTypes.number.isRequired, - renderTitleComponent: React.PropTypes.func, - renderLeftComponent: React.PropTypes.func, - renderRightComponent: React.PropTypes.func, - style: View.propTypes.style, -}; - -NavigationHeader.APPBAR_HEIGHT = APPBAR_HEIGHT; -NavigationHeader.STATUSBAR_HEIGHT = STATUSBAR_HEIGHT; +NavigationHeader = NavigationContainer.create(NavigationHeader); const styles = StyleSheet.create({ - appbar: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'flex-start', - backgroundColor: Platform.OS === 'ios' ? 'rgba(255, 255, 255, .9)' : 'rgba(255, 255, 255, 1)', - borderBottomWidth: Platform.OS === 'ios' ? StyleSheet.hairlineWidth : 0, - borderBottomColor: 'rgba(0, 0, 0, .15)', - height: APPBAR_HEIGHT + STATUSBAR_HEIGHT, - marginBottom: 16, // This is needed for elevation shadow - elevation: 2, - }, - title: { + textAlign: 'center', + marginTop: 10, + fontSize: 18, + fontWeight: '500', + color: '#0A0A0A', position: 'absolute', - top: 0, - bottom: 0, - left: APPBAR_HEIGHT, - right: APPBAR_HEIGHT, - marginTop: STATUSBAR_HEIGHT, - }, - - left: { - position: 'absolute', - top: 0, - bottom: 0, + top: 20, left: 0, - marginTop: STATUSBAR_HEIGHT, - }, - - right: { - position: 'absolute', - top: 0, - bottom: 0, right: 0, - marginTop: STATUSBAR_HEIGHT, - } + }, + header: { + backgroundColor: '#EFEFF2', + paddingTop: 20, + top: 0, + height: 64, + right: 0, + left: 0, + borderBottomWidth: 0.5, + borderBottomColor: '#828287', + position: 'absolute', + }, + backButton: { + width: 29, + height: 37, + position: 'absolute', + bottom: 4, + left: 2, + padding: 8, + }, + backButtonImage: { + width: 13, + height: 21, + }, }); -module.exports = NavigationContainer.create(NavigationHeader); +module.exports = NavigationHeader; diff --git a/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderBackButton.js b/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderBackButton.js deleted file mode 100644 index 4cd4a867676..00000000000 --- a/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderBackButton.js +++ /dev/null @@ -1,59 +0,0 @@ -/** - * The examples provided by Facebook are for non-commercial testing and - * evaluation purposes only. - * - * Facebook reserves all rights not expressly granted. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS - * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL - * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN - * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN - * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - * - * @providesModule NavigationHeaderBackButton - * @flow -*/ -'use strict'; - -const React = require('react-native'); -const NavigationContainer = require('NavigationContainer'); -const NavigationRootContainer = require('NavigationRootContainer'); - -const { - Image, - Platform, - StyleSheet, - TouchableOpacity, -} = React; - -type Props = { - onNavigate: Function -} - -const NavigationHeaderBackButton = (props: Props) => ( - props.onNavigate(NavigationRootContainer.getBackAction())}> - - -); - -NavigationHeaderBackButton.propTypes = { - onNavigate: React.PropTypes.func.isRequired -}; - -const styles = StyleSheet.create({ - buttonContainer: { - flex: 1, - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - }, - button: { - height: 24, - width: 24, - margin: Platform.OS === 'ios' ? 10 : 16, - resizeMode: 'contain' - } -}); - -module.exports = NavigationContainer.create(NavigationHeaderBackButton); diff --git a/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderTitle.js b/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderTitle.js deleted file mode 100644 index 94fd4c00a8d..00000000000 --- a/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderTitle.js +++ /dev/null @@ -1,74 +0,0 @@ -/** - * Copyright (c) 2015, Facebook, Inc. All rights reserved. - * - * Facebook, Inc. ("Facebook") owns all right, title and interest, including - * all intellectual property and other proprietary rights, in and to the React - * Native CustomComponents software (the "Software"). Subject to your - * compliance with these terms, you are hereby granted a non-exclusive, - * worldwide, royalty-free copyright license to (1) use and copy the Software; - * and (2) reproduce and distribute the Software as part of your own software - * ("Your Software"). Facebook reserves all rights not expressly granted to - * you in this license agreement. - * - * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS - * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES - * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. - * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR - * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, - * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, - * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; - * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, - * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR - * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF - * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - * - * @providesModule NavigationHeaderTitle - * @flow - */ -'use strict'; - -const React = require('react-native'); - -const { - Platform, - StyleSheet, - View, - Text, -} = React; - -type Props = { - children: ReactElement; - style: any; - textStyle: any; -} - -const NavigationHeaderTitle = ({ children, style, textStyle }: Props) => ( - - {children} - -); - -const styles = StyleSheet.create({ - title: { - flex: 1, - flexDirection: 'row', - alignItems: 'center', - marginHorizontal: 16 - }, - - titleText: { - flex: 1, - fontSize: 18, - fontWeight: '500', - color: 'rgba(0, 0, 0, .9)', - textAlign: Platform.OS === 'ios' ? 'center' : 'left' - } -}); - -NavigationHeaderTitle.propTypes = { - children: React.PropTypes.string.isRequired, - style: View.propTypes.style, - textStyle: Text.propTypes.style -}; - -module.exports = NavigationHeaderTitle; diff --git a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@1.5x.android.png b/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@1.5x.android.png deleted file mode 100644 index ad03a63bf3c..00000000000 Binary files a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@1.5x.android.png and /dev/null differ diff --git a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@1.5x.ios.png b/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@1.5x.ios.png deleted file mode 100644 index e43fa0622f1..00000000000 Binary files a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@1.5x.ios.png and /dev/null differ diff --git a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@1x.android.png b/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@1x.android.png deleted file mode 100644 index 083db295f47..00000000000 Binary files a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@1x.android.png and /dev/null differ diff --git a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@1x.ios.png b/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@1x.ios.png deleted file mode 100644 index 4244656b92f..00000000000 Binary files a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@1x.ios.png and /dev/null differ diff --git a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@2x.android.png b/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@2x.android.png deleted file mode 100644 index 6de0a1cbb36..00000000000 Binary files a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@2x.android.png and /dev/null differ diff --git a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@2x.ios.png b/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@2x.ios.png deleted file mode 100644 index a8b6e9a63e5..00000000000 Binary files a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@2x.ios.png and /dev/null differ diff --git a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@3x.android.png b/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@3x.android.png deleted file mode 100644 index 15a983a67d9..00000000000 Binary files a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@3x.android.png and /dev/null differ diff --git a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@3x.ios.png b/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@3x.ios.png deleted file mode 100644 index 07ea37b4e1e..00000000000 Binary files a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@3x.ios.png and /dev/null differ diff --git a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@4x.android.png b/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@4x.android.png deleted file mode 100644 index 17e52e8550e..00000000000 Binary files a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@4x.android.png and /dev/null differ diff --git a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@4x.ios.png b/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@4x.ios.png deleted file mode 100644 index 7899053f61b..00000000000 Binary files a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@4x.ios.png and /dev/null differ diff --git a/Libraries/CustomComponents/NavigationExperimental/back_chevron.png b/Libraries/CustomComponents/NavigationExperimental/back_chevron.png new file mode 100644 index 00000000000..af21cf9d571 Binary files /dev/null and b/Libraries/CustomComponents/NavigationExperimental/back_chevron.png differ diff --git a/Libraries/NavigationExperimental/NavigationAnimatedView.js b/Libraries/NavigationExperimental/NavigationAnimatedView.js index 91830721031..4d1f5b68f16 100644 --- a/Libraries/NavigationExperimental/NavigationAnimatedView.js +++ b/Libraries/NavigationExperimental/NavigationAnimatedView.js @@ -21,9 +21,14 @@ var View = require('View'); import type { NavigationState, NavigationParentState, - NavigationScene, } from 'NavigationStateUtils'; +type NavigationScene = { + index: number, + state: NavigationState, + isStale: boolean, +}; + /** * Helper function to compare route keys (e.g. "9", "11"). */ @@ -65,13 +70,6 @@ type Layout = { height: Animated.Value; }; -type OverlayRenderer = ( - scenes: Array, - index: number, - position: Animated.Value, - layout: Layout -) => ReactElement; - type Position = Animated.Value; /** @@ -253,11 +251,6 @@ class NavigationAnimatedView extends React.Component { } } -NavigationAnimatedView.propTypes = { - navigationState: React.PropTypes.instanceOf(NavigationStateUtils), - style: View.propTypes.style, -}; - function setDefaultTiming(position, navigationState) { Animated.spring( position, diff --git a/Libraries/NavigationExperimental/NavigationExperimental.js b/Libraries/NavigationExperimental/NavigationExperimental.js index 0f4e9fa63c4..ca6bb627d55 100644 --- a/Libraries/NavigationExperimental/NavigationExperimental.js +++ b/Libraries/NavigationExperimental/NavigationExperimental.js @@ -16,8 +16,6 @@ const NavigationCard = require('NavigationCard'); const NavigationCardStack = require('NavigationCardStack'); const NavigationContainer = require('NavigationContainer'); const NavigationHeader = require('NavigationHeader'); -const NavigationHeaderTitle = require('NavigationHeaderTitle'); -const NavigationHeaderBackButton = require('NavigationHeaderBackButton'); const NavigationLegacyNavigator = require('NavigationLegacyNavigator'); const NavigationReducer = require('NavigationReducer'); const NavigationRootContainer = require('NavigationRootContainer'); @@ -41,8 +39,6 @@ const NavigationExperimental = { Card: NavigationCard, CardStack: NavigationCardStack, Header: NavigationHeader, - HeaderTitle: NavigationHeaderTitle, - HeaderBackButton: NavigationHeaderBackButton, LegacyNavigator: NavigationLegacyNavigator, }; diff --git a/Libraries/NavigationExperimental/NavigationStateUtils.js b/Libraries/NavigationExperimental/NavigationStateUtils.js index 28d5c85bd3a..d457ebea8ad 100644 --- a/Libraries/NavigationExperimental/NavigationStateUtils.js +++ b/Libraries/NavigationExperimental/NavigationStateUtils.js @@ -23,12 +23,6 @@ export type NavigationParentState = { children: Array; }; -export type NavigationScene = { - index: number; - state: NavigationState; - isStale: boolean; -}; - export type NavigationAction = { type: string; };