From 720c76f94dcf756f1c8f7aeea7f68a2166a48790 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Mon, 21 Mar 2016 22:06:52 -0700 Subject: [PATCH] Rework the NavigationHeader Summary:Add ability to specify custom left, right components, and title component. Style the `NavigationBar` according to the Platform. Refer https://github.com/ericvicenti/navigation-rfc/pull/21 cc ericvicenti Closes https://github.com/facebook/react-native/pull/5971 Differential Revision: D3080601 Pulled By: ericvicenti fb-gh-sync-id: 7b921cd36b4c2ec1edf6f52629f1f9890d272dfd shipit-source-id: 7b921cd36b4c2ec1edf6f52629f1f9890d272dfd --- .../NavigationAnimatedExample.js | 8 +- .../NavigationCompositionExample.js | 9 +- Examples/UIExplorer/UIExplorerApp.ios.js | 14 +- .../NavigationHeader.js | 306 ++++++++++++------ .../NavigationHeaderBackButton.js | 59 ++++ .../NavigationHeaderTitle.js | 74 +++++ .../assets/back-icon@1.5x.android.png | Bin 0 -> 134 bytes .../assets/back-icon@1.5x.ios.png | Bin 0 -> 273 bytes .../assets/back-icon@1x.android.png | Bin 0 -> 100 bytes .../assets/back-icon@1x.ios.png | Bin 0 -> 177 bytes .../assets/back-icon@2x.android.png | Bin 0 -> 134 bytes .../assets/back-icon@2x.ios.png | Bin 0 -> 303 bytes .../assets/back-icon@3x.android.png | Bin 0 -> 167 bytes .../assets/back-icon@3x.ios.png | Bin 0 -> 439 bytes .../assets/back-icon@4x.android.png | Bin 0 -> 207 bytes .../assets/back-icon@4x.ios.png | Bin 0 -> 586 bytes .../NavigationExperimental/back_chevron.png | Bin 575 -> 0 bytes 17 files changed, 348 insertions(+), 122 deletions(-) create mode 100644 Libraries/CustomComponents/NavigationExperimental/NavigationHeaderBackButton.js create mode 100644 Libraries/CustomComponents/NavigationExperimental/NavigationHeaderTitle.js create mode 100644 Libraries/CustomComponents/NavigationExperimental/assets/back-icon@1.5x.android.png create mode 100644 Libraries/CustomComponents/NavigationExperimental/assets/back-icon@1.5x.ios.png create mode 100644 Libraries/CustomComponents/NavigationExperimental/assets/back-icon@1x.android.png create mode 100644 Libraries/CustomComponents/NavigationExperimental/assets/back-icon@1x.ios.png create mode 100644 Libraries/CustomComponents/NavigationExperimental/assets/back-icon@2x.android.png create mode 100644 Libraries/CustomComponents/NavigationExperimental/assets/back-icon@2x.ios.png create mode 100644 Libraries/CustomComponents/NavigationExperimental/assets/back-icon@3x.android.png create mode 100644 Libraries/CustomComponents/NavigationExperimental/assets/back-icon@3x.ios.png create mode 100644 Libraries/CustomComponents/NavigationExperimental/assets/back-icon@4x.android.png create mode 100644 Libraries/CustomComponents/NavigationExperimental/assets/back-icon@4x.ios.png delete mode 100644 Libraries/CustomComponents/NavigationExperimental/back_chevron.png diff --git a/Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js b/Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js index 705f7d6be..b4bd9bc43 100644 --- a/Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js +++ b/Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js @@ -99,8 +99,10 @@ class NavigationAnimatedExample extends React.Component { _renderHeader(/*NavigationSceneRendererProps*/ props) { return ( state.key} + navigationProps={props} + renderTitleComponent={(navigationProps, scene) => { + return {scene.navigationState.key}; + }} /> ); } @@ -144,7 +146,7 @@ const styles = StyleSheet.create({ flex: 1, }, scrollView: { - marginTop: 64 + marginTop: NavigationHeader.HEIGHT, }, }); diff --git a/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js b/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js index 084dc1f39..78876c76c 100644 --- a/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js +++ b/Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js @@ -27,7 +27,6 @@ const { } = React; const { - AnimatedView: NavigationAnimatedView, CardStack: NavigationCardStack, Container: NavigationContainer, Header: NavigationHeader, @@ -178,8 +177,10 @@ class ExampleTabScreen extends React.Component { _renderHeader(props: NavigationSceneRendererProps) { return ( stateTypeTitleMap(state)} + navigationProps={props} + renderTitleComponent={(navigationProps, scene) => { + return {stateTypeTitleMap(scene.navigationState)}; + }} /> ); } @@ -284,7 +285,7 @@ const styles = StyleSheet.create({ flex: 1, }, scrollView: { - marginTop: 64 + marginTop: NavigationHeader.HEIGHT }, tabContent: { flex: 1, diff --git a/Examples/UIExplorer/UIExplorerApp.ios.js b/Examples/UIExplorer/UIExplorerApp.ios.js index 384ea1c18..d098a99cb 100644 --- a/Examples/UIExplorer/UIExplorerApp.ios.js +++ b/Examples/UIExplorer/UIExplorerApp.ios.js @@ -25,25 +25,19 @@ const UIExplorerStateTitleMap = require('./UIExplorerStateTitleMap'); const { Alert, - Animated, AppRegistry, NavigationExperimental, SnapshotViewIOS, StyleSheet, - Text, - TouchableHighlight, View, } = React; const { CardStack: NavigationCardStack, Header: NavigationHeader, - Reducer: NavigationReducer, RootContainer: NavigationRootContainer, } = NavigationExperimental; -import type { Value } from 'Animated'; - import type { NavigationSceneRendererProps } from 'NavigationTypeDefinition'; import type { UIExplorerNavigationState } from './UIExplorerNavigationReducer'; @@ -127,9 +121,11 @@ class UIExplorerApp extends React.Component { _renderOverlay(props: NavigationSceneRendererProps): ReactElement { return ( { + return {UIExplorerStateTitleMap(scene.navigationState)}; + }} /> ); } @@ -165,7 +161,7 @@ const styles = StyleSheet.create({ }, exampleContainer: { flex: 1, - paddingTop: 60, + paddingTop: NavigationHeader.HEIGHT, }, }); diff --git a/Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js b/Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js index 3b1c5aa4d..1dd497b43 100644 --- a/Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js +++ b/Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js @@ -27,136 +27,230 @@ */ 'use strict'; -const Animated = require('Animated'); -const Image = require('Image'); -const NavigationContainer = require('NavigationContainer'); -const NavigationPropTypes = require('NavigationPropTypes'); -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'); +const NavigationContainer = require('NavigationContainer'); +const NavigationHeaderTitle = require('NavigationHeaderTitle'); +const NavigationHeaderBackButton = require('NavigationHeaderBackButton'); +const NavigationPropTypes = require('NavigationPropTypes'); + +const { + Animated, + Platform, + StyleSheet, + View, +} = React; import type { - NavigationState, NavigationSceneRendererProps, + NavigationScene, } from 'NavigationTypeDefinition'; -type Props = NavigationSceneRendererProps & { - getTitle: (navState: NavigationState) => string, +type Renderer = (props: NavigationSceneRendererProps, scene: NavigationScene) => ?ReactElement; + +type DefaultProps = { + renderTitleComponent: Renderer; + renderLeftComponent: Renderer; }; -const {PropTypes} = React; +type Props = { + navigationProps: NavigationSceneRendererProps; + renderTitleComponent: Renderer; + renderLeftComponent: Renderer; + renderRightComponent: Renderer; + style?: any; +} -const NavigationHeaderPropTypes = { - ...NavigationPropTypes.SceneRenderer, - getTitle: PropTypes.func.isRequired, -}; +const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56; +const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0; -class NavigationHeader extends React.Component { - _handleBackPress: Function; +class NavigationHeader extends React.Component { + static defaultProps = { + renderTitleComponent: (props, scene) => { + const pageState = scene.navigationState; - props: Props; + return {pageState.title ? pageState.title : ''}; + }, + renderLeftComponent: (props, scene) => scene.index !== 0 ? : null + }; - componentWillMount(): void { - this._handleBackPress = this._handleBackPress.bind(this); - } + static propTypes = { + navigationProps: React.PropTypes.shape(NavigationPropTypes.SceneRenderer).isRequired, + renderTitleComponent: React.PropTypes.func, + renderLeftComponent: React.PropTypes.func, + renderRightComponent: React.PropTypes.func, + style: View.propTypes.style, + }; - render(): ReactElement { - var state = this.props.navigationState; - return ( - - {state.children.map(this._renderTitle, this)} - {this._renderBackButton()} - - ); - } + _renderLeftComponent(scene: NavigationScene) { + const { + renderLeftComponent, + navigationProps, + } = this.props; - _renderBackButton(): ?ReactElement { - if (this.props.navigationState.index === 0) { - return null; + if (renderLeftComponent) { + const { + index, + navigationState, + } = scene; + + return ( + + {renderLeftComponent(navigationProps, scene)} + + ); } - return ( - - - - ); + + return null; } - _renderTitle(childState: NavigationState, index:number): ?ReactElement { - return ( - - {this.props.getTitle(childState)} - - ); + _renderRightComponent(scene: NavigationScene) { + const { + renderRightComponent, + navigationProps, + } = this.props; + + if (renderRightComponent) { + const { + index, + navigationState, + } = scene; + + return ( + + {renderRightComponent(navigationProps, scene)} + + ); + } + + return null; } - _handleBackPress(): void { - this.props.onNavigate(NavigationRootContainer.getBackAction()); + _renderTitleComponent(scene: NavigationScene) { + const { + renderTitleComponent, + navigationProps, + } = this.props; + + if (renderTitleComponent) { + const { + index, + navigationState, + } = scene; + + return ( + + {renderTitleComponent(navigationProps, scene)} + + ); + } + + return null; + } + + render() { + const { scenes } = this.props.navigationProps; + + return ( + + {scenes.map(this._renderLeftComponent, this)} + {scenes.map(this._renderTitleComponent, this)} + {scenes.map(this._renderRightComponent, this)} + + ); } } -NavigationHeader.propTypes = NavigationHeaderPropTypes; +const styles = StyleSheet.create({ + appbar: { + position: 'absolute', + top: 0, + left: 0, + right: 0, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-start', + backgroundColor: Platform.OS === 'ios' ? '#EFEFF2' : '#FFF', + 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: { + position: 'absolute', + top: 0, + bottom: 0, + left: APPBAR_HEIGHT, + right: APPBAR_HEIGHT, + marginTop: STATUSBAR_HEIGHT, + }, + + left: { + position: 'absolute', + top: 0, + bottom: 0, + left: 0, + marginTop: STATUSBAR_HEIGHT, + }, + + right: { + position: 'absolute', + top: 0, + bottom: 0, + right: 0, + marginTop: STATUSBAR_HEIGHT, + } +}); NavigationHeader = NavigationContainer.create(NavigationHeader); -const styles = StyleSheet.create({ - title: { - textAlign: 'center', - marginTop: 10, - fontSize: 18, - fontWeight: '500', - color: '#0A0A0A', - position: 'absolute', - top: 20, - left: 0, - right: 0, - }, - 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, - }, -}); +NavigationHeader.HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT; +NavigationHeader.Title = NavigationHeaderTitle; +NavigationHeader.BackButton = NavigationHeaderBackButton; module.exports = NavigationHeader; diff --git a/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderBackButton.js b/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderBackButton.js new file mode 100644 index 000000000..4cd4a8676 --- /dev/null +++ b/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderBackButton.js @@ -0,0 +1,59 @@ +/** + * 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 new file mode 100644 index 000000000..94fd4c00a --- /dev/null +++ b/Libraries/CustomComponents/NavigationExperimental/NavigationHeaderTitle.js @@ -0,0 +1,74 @@ +/** + * 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 new file mode 100644 index 0000000000000000000000000000000000000000..ad03a63bf3caba175695f5acca85a690dda2d02c GIT binary patch literal 134 zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|k0wldT1B8K;ucwP+NCjiE#Ight69&c5o}c_J zydef`Jl72k0*^~vo0xKDg<-rzRAUa4zR#@V;MZ|!{Y$D84XcR{V40-cB_Dagsz~k`~nOy`dl9H)~;mL!H;T8hs zNi}dC49}j(tifY8L@=y}$MYvLOYoR3Ri*|QUObVRL%;IZ+E2;p%OolKM}Q}YX% z5d@5b2p;{XGEbME3cXRX(WfQTrj{Rj>BT5;Is}fZem}y0(E9WX8xoJjpZw%2ilSTs XSG)izRaHxJ00000NkvXXu0mjfJD6{! literal 0 HcmV?d00001 diff --git a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@1x.android.png b/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@1x.android.png new file mode 100644 index 0000000000000000000000000000000000000000..083db295f474b9903408258c71818c2c49151d35 GIT binary patch literal 100 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM0wlfaz7_*1ZBG}+kP60RiDL^GIXr{@&3`D~ x%$9kI*}bEvWF}#ISRN$7dnY> ziSW7Jaj-kLU-99@V~M-N-maFitX%fhe|fNkw(*M-9%Wj>s_(oO9P$Yh3Qm<1{PRlg zbWG=S^NM9BywVo3Bx+m!Wb1iw-zCgQwaI?JGS@8i411;jlWxyn`S7BVIP2S`hxE$k ap5yjcE&i-(aLy6v1_n=8KbLh*2~7ZuaX;z+ literal 0 HcmV?d00001 diff --git a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@2x.android.png b/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@2x.android.png new file mode 100644 index 0000000000000000000000000000000000000000..6de0a1cbb365dfd5d9274890d243ca2321f32235 GIT binary patch literal 134 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA0wn)(8}a}tUr!gukP61P(+)Bo5D;KluXOkB z|6f;`Uoa>nrTyP5;4+Jm;dJDxe#>oP@r$y*#>rHDd13s5eN)8##R;WH*ZD4M;?i1i i;i&z7`QNqd4J-@3aX4v+{p181%;4$j=d#Wzp$P!F!7nZV literal 0 HcmV?d00001 diff --git a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@2x.ios.png b/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@2x.ios.png new file mode 100644 index 0000000000000000000000000000000000000000..a8b6e9a63e5954e88cdc2c4b376350f0d00df554 GIT binary patch literal 303 zcmV+~0nq-5P)zvF^`PeepS z7TEyfHda_2WB3*rkKxFyc44eTG>n~aJj;r2>JTd|kD=%L;CPW0Khze2x5NP$uRn!1 zZX$RIM`67E6h7fb4B^LMy!Z5c5<~cLI6iph{7eiBb^?x1o}Mouc#e}WK7R=Rf`n5D zT@f-1`=QsLi$(>{Sn|yGr(!w<&vC{R{-IdN!80bF#d=?Cp?+$BrqI_Hv9?hiWM98Z z=rX74^cNpA#&vk;NvTKu7rs^Wv8AuYuMrUukrdBxph|6xwif^Z002ovPDHLkV1oFx BfD!-z literal 0 HcmV?d00001 diff --git a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@3x.android.png b/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@3x.android.png new file mode 100644 index 0000000000000000000000000000000000000000..15a983a67d97c9a6c39d91550a528c37c53a9e3e GIT binary patch literal 167 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY0wn)GsXhaw@;qG}Ln;{G-aN{9*nr0&aBl6p z15q2fw>DO<$f$_t-m`#N(R0!@qfL6}is!BA-aP5mqcux*S)AYDzOuXc@WF!zU-mWw z!RNIrdq3B7GJgpV3USMNx+#Bt3lxOZSlm}!I$z&?|8f=2ODy@*gQAaCs?P@6%;4$j K=d#Wzp$P!X&_+4{ literal 0 HcmV?d00001 diff --git a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@3x.ios.png b/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@3x.ios.png new file mode 100644 index 0000000000000000000000000000000000000000..07ea37b4e1e252d9a406eb33af2efe80e8612330 GIT binary patch literal 439 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY1|&n@Zgyv2V65|WaSW+oe0!^TU0k35>w~N5 zD{^m}Eq3eux1v|-U!Z02tG3=(cE0h8%+~eBW#4@=>-m*gUsZpzUi)^h`M$FY6s#)} z>gj)YrzKG2oQcK!Lmm>@g`Kw*Yv&jz*03tG&-%R^M+5-PWXN3Y$OD&$vu zev#}XWBWLRs%-}IWc4L%Yb+=CTrSK#FZ%emrh>0wa_#xpH~Sa4M%~`S*R?C_#imuy z`{rr>ON!s~fyjD~^@_e`eg-Wf97@ f#;HgU3SP2ZTiYg8>Ayn?7$FRvu6{1-oD!M(TP*-+rv1Kz7M z%I*XNJ!(VLzdH4Ge@o8ai4)e^3vK%P+bZq#{MQci z?P`C0d3kxcKa^1~`zt>B;jiLd|K_aKfAEz>edFmDy)D6SUw`+o@R*?B*u=sqq~bB* zgRIJrKN^lr3+tD}bFTI}~XjubmVU5CWQ(LZ;AgeuH{an^LB{Ts5E|^v% literal 0 HcmV?d00001 diff --git a/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@4x.ios.png b/Libraries/CustomComponents/NavigationExperimental/assets/back-icon@4x.ios.png new file mode 100644 index 0000000000000000000000000000000000000000..7899053f61b38b1b3f3e4400d208265e5b9752cf GIT binary patch literal 586 zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7Ro>U=s9naSW+od~=hzM>bIA=)>UK z+j4L7ymFJ?da+G<>i2V3@@^C?c1sOmFAV_7Y+pW^_tiJQPwUT5pEG0s#o3iVv^!8i zim|-RbcHmwI>VWV{uIQ_?D`V&{_Irnr^8qw?c?ji zpS`+_?VDyC&F4A)n(^V;_-!g_+!pt^`qrQ4ZA;qL`26mHAHN=?o!YD{BhPa5x_WxD z;qHSU10T%%f9#XL_{<}AA8Mo|{);O0wMcYY2+TXroNui!SZHv>&F_p#R>Gg>9Toy^ zDvvxY_Hp(6H+gQB>XMXp;G=KCpW`QY9qzE`YkGeB0Q)=UBX3xgg$#xJ-ZP#5v-{+& zLmd@qOMh%BkT#4y0952F_}?nYtWoe|PtcM5pZ3lDt-v7A*2wU}y6!>)b4)^ODEHl` zeoV7_{8cmNF!U?zX*vB_vP<4@DTm18DT^;oxH!or_+A7T+vXm%B#Y}6zh3BMLURef?`bco}f*(;i)5@ieJ4_O_#+T)lo`NXE!g?<_LHI9Ta0n-E!9AHie V()u#B%0&&t^K|udS?83{1OT-835oy! literal 0 HcmV?d00001 diff --git a/Libraries/CustomComponents/NavigationExperimental/back_chevron.png b/Libraries/CustomComponents/NavigationExperimental/back_chevron.png deleted file mode 100644 index af21cf9d5718b71d1d2be0c445fa7f6012813609..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 575 zcmV-F0>J%=P)hav*r1ebY%FXnCP|Vc5mCsyuf;WtY3_3t&$*|b z^{4al|3BxEqN8Suj4K*sntB#BTb1}C10^o@25Hm(7a2P>XQGj9GQR$YjGaU)21)Et z;@hN12YR4Brk5ecfQ;`MWK<0nlxDKiK_05f!qVy5rNoa6@<=Tfl_I+x#2Jn|s+b*B#>3g4 zY2ua|%#6zHpo3l4ATy${VF$ZfzO(%+<52brPh5^$=o5RK&F7ND)Toa-zsngHB&I}V zmfuc|^9l=NAiLBX=i;!$_O8#A&b#Pr9M+~kiy5cmu<=jH$um0{*|W_uK4(VXBFnf* z#-}dWwYahG3`n06A17pUGwy#lJ}NdU@!=12TSLrJ&%)RsS%4d+Oj-Z{ N002ovPDHLkV1mZY2_^sl