|
|
|
|
1
|
![npm](https://img.shields.io/npm/dw/react-native-navigation.svg)
|
1
|
![npm](https://img.shields.io/npm/dw/react-native-navigation.svg)
|
2
|
-[![npm (tag)](https://img.shields.io/npm/v/react-native-navigation/alpha.svg)](https://github.com/wix/react-native-navigation/tree/v2#react-native-navigation-v2-wip)
|
|
|
|
|
2
|
+[![npm (tag)](https://img.shields.io/npm/v/react-native-navigation/latest.svg)](https://github.com/wix/react-native-navigation/tree/v2#react-native-navigation-v2-wip)
|
3
|
[![Build Status](https://img.shields.io/jenkins/s/http/jenkins-oss.wixpress.com:8080/job/react-native-navigation-master.svg)](https://jenkins-oss.wixpress.com/job/react-native-navigation-master/)
|
3
|
[![Build Status](https://img.shields.io/jenkins/s/http/jenkins-oss.wixpress.com:8080/job/react-native-navigation-master.svg)](https://jenkins-oss.wixpress.com/job/react-native-navigation-master/)
|
4
|
[![Join us on Discord](https://img.shields.io/badge/discord-react--native--navigation-738bd7.svg?style=flat)](https://discord.gg/DhkZjq2)
|
4
|
[![Join us on Discord](https://img.shields.io/badge/discord-react--native--navigation-738bd7.svg?style=flat)](https://discord.gg/DhkZjq2)
|
5
|
[![StackExchange](https://img.shields.io/stackexchange/stackoverflow/t/react-native-navigation.svg)](https://stackoverflow.com/questions/tagged/react-native-navigation)
|
5
|
[![StackExchange](https://img.shields.io/stackexchange/stackoverflow/t/react-native-navigation.svg)](https://stackoverflow.com/questions/tagged/react-native-navigation)
|
6
|
|
6
|
|
|
|
7
|
+<h1 align="center">
|
|
|
8
|
+ <img src=".logo.png"/><br>
|
|
|
9
|
+ React Native Navigation
|
|
|
10
|
+</h1>
|
7
|
|
11
|
|
8
|
-# React Native Navigation v2 (WIP)
|
|
|
9
|
-We are rebuilding react-native-navigation.
|
|
|
|
|
12
|
+React Native Navigation provides 100% native platform navigation on both iOS and Android for React Native apps. The JavaScript API is simple and cross-platform - just install it in your app and give your users the native feel they deserve. Ready to get started? Check out the [docs](https://wix.github.io/react-native-navigation/).
|
10
|
|
13
|
|
11
|
-> As we are in stage alpha, expect breaking API changes or use a specific version (for example "2.0.1234")
|
|
|
12
|
-
|
|
|
13
|
-- [Why?](#why-rebuild-react-native-navigation)
|
|
|
14
|
-- [v2 Roadmap](#v2-roadmap)
|
|
|
15
|
-- [v1 vs v2 feature comparison](#v1-vs-v2-feature-comparison)
|
|
|
|
|
14
|
+# Quick Links
|
16
|
- [Documentation](https://wix.github.io/react-native-navigation/v2/)
|
15
|
- [Documentation](https://wix.github.io/react-native-navigation/v2/)
|
|
|
16
|
+- [Stack Overflow](http://stackoverflow.com/questions/tagged/react-native-navigation)
|
|
|
17
|
+- [Chat with us](https://discord.gg/DhkZjq2)
|
17
|
- [Contributing](/docs/docs/WorkingLocally.md)
|
18
|
- [Contributing](/docs/docs/WorkingLocally.md)
|
18
|
|
19
|
|
19
|
-## Why Rebuild react-native-navigation?
|
|
|
20
|
-
|
|
|
21
|
-### A New & Improved Core Architecture
|
|
|
22
|
-react-native-navigation has a few issues which are unsolvable in its current architecture. These issues stem from the same problem: you cannot specify on which screen you wish to make an action. Whenever you want to push a screen, show a modal or any other action, the action defaults to originate from your current screen. In most cases this is fine, but becomes problematic in specific edge cases. For example: <br>
|
|
|
23
|
-* What if you want to update your navbar icons and the user pops the screen? Your icons might update on the wrong screen.
|
|
|
24
|
-* What if you want to push a screen as a result of a redux action?
|
|
|
25
|
-
|
|
|
26
|
-There are ways to solve some of these problems in v1 but they are not straightforward. We want to change that.
|
|
|
27
|
-
|
|
|
28
|
-#### New API
|
|
|
29
|
-To solve this problem in v2, every screen receives its `componentId` as a prop. Whenever you want to perform an action from that screen you need to pass the `componentId` to the function:
|
|
|
30
|
-```js
|
|
|
31
|
-Navigator.pop(this.props.componentId)
|
|
|
32
|
-```
|
|
|
33
|
-Another big architectural change is that now you can compose arbitrary native layout hierarchies, and assign a custom `id` to each and control them individually.
|
|
|
34
|
-
|
|
|
35
|
-### Built for Contributors
|
|
|
36
|
-Currently, it requires a lot of work to accept pull requests. We need to manually make sure that everything works before we approve them because v1 is not thoroughly tested. <br>
|
|
|
37
|
-v2 is written with contributors in mind from day one.
|
|
|
38
|
-
|
|
|
39
|
-#### Written In TDD
|
|
|
40
|
-v2 is written in Test Driven Development. We have a test for every feature including features that are not implemented yet. This makes accepting pull requests extremely easy: If our tests pass, your pull request is accepted.
|
|
|
41
|
-
|
|
|
42
|
-## v2 Roadmap
|
|
|
43
|
-
|
|
|
44
|
-### Current Priorities
|
|
|
45
|
-
|
|
|
46
|
-1) buttons in Android
|
|
|
47
|
-2) showOverlay in iOS
|
|
|
48
|
-3) showOverlay in Android
|
|
|
49
|
-4) async commands
|
|
|
50
|
-5) currentTab
|
|
|
51
|
-6) change Options to be nested
|
|
|
52
|
-7) topTabs in both platforms, with API implications
|
|
|
53
|
-
|
|
|
54
|
-### Top API
|
|
|
55
|
-
|
|
|
56
|
-| Top API | iOS | Android |
|
|
|
57
|
-|--------------------|:-----:|:----:|
|
|
|
58
|
-| setRoot | ✅ | ✅ |
|
|
|
59
|
-| registerComponent | ✅ | ✅ |
|
|
|
60
|
-| component | ✅ | ✅ |
|
|
|
61
|
-| sideMenu | ✅ | ✅ |
|
|
|
62
|
-| tabs | ✅ | ✅ |
|
|
|
63
|
-| External Component | ✅ | ✅ |
|
|
|
64
|
-| splitView | ✅ | [Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
65
|
-
|
|
|
66
|
-### Screen API
|
|
|
67
|
-
|
|
|
68
|
-| Screen API | iOS | Android |
|
|
|
69
|
-|--------------------|:-----:|:----:|
|
|
|
70
|
-| push | ✅ | ✅ |
|
|
|
71
|
-| pop | ✅ | ✅ |
|
|
|
72
|
-| popToRoot | ✅ |✅ |
|
|
|
73
|
-| popTo | ✅ |✅ |
|
|
|
74
|
-| resetTo | ✅ | ✅|
|
|
|
75
|
-| showModal | ✅ | ✅|
|
|
|
76
|
-| dismissModal | ✅ | ✅|
|
|
|
77
|
-| showOverlay | ✅ | ✅ |
|
|
|
78
|
-| dismissOverlay | ✅ | ✅ |
|
|
|
79
|
-| customTransition |✅|✅|
|
|
|
80
|
-| Screen Visibility | ✅ |✅|
|
|
|
81
|
-| async commands (await push) | ✅ |✅ |
|
|
|
82
|
-| preview | ✅ | :x: |
|
|
|
83
|
-
|
|
|
84
|
-### Navigation Options
|
|
|
85
|
-
|
|
|
86
|
-| topBar | iOS | Android |
|
|
|
87
|
-|--------------------|:----:|:-----:|
|
|
|
88
|
-| title | ✅ | ✅|
|
|
|
89
|
-| textColor | ✅ | ✅ |
|
|
|
90
|
-| textFontSize | ✅ | ✅|
|
|
|
91
|
-| textFontFamily | ✅ | ✅|
|
|
|
92
|
-| backgroundColor | ✅ | ✅|
|
|
|
93
|
-| buttonColor | ✅ |✅|
|
|
|
94
|
-| hidden | ✅ | ✅|
|
|
|
95
|
-| hideOnScroll | ✅ |✅|
|
|
|
96
|
-| translucent | ✅ | [Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
97
|
-| transparent | ✅ | [Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
98
|
-| noBorder | ✅ | [Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
99
|
-| drawUnder | ✅ |✅|
|
|
|
100
|
-| blur | ✅ | [Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
101
|
-| custom component |✅ |✅|
|
|
|
102
|
-| background component |✅ |✅|
|
|
|
103
|
-| background clipToBounds | ✅ | /iOS Specific |
|
|
|
104
|
-| subtitleColor | ✅ |✅|
|
|
|
105
|
-| subtitleFontFamily |✅|✅|
|
|
|
106
|
-| largeTitle (iOS 11) | ✅ | /iOS Specific |
|
|
|
107
|
-
|
|
|
108
|
-| tabBar | iOS | Android |
|
|
|
109
|
-|--------------------|:----:|:-----:|
|
|
|
110
|
-| drawUnder | ✅ |✅|
|
|
|
111
|
-| hidden | ✅ | ✅ |
|
|
|
112
|
-| tabBadge | ✅ |✅|
|
|
|
113
|
-| currentTab by Index | ✅ | ✅ |
|
|
|
114
|
-| currentTab by componentId |✅| ✅ |
|
|
|
115
|
-
|
|
|
116
|
-| buttons | iOS | Android |
|
|
|
117
|
-|--------------------|:----:|:-----:|
|
|
|
118
|
-| id | ✅ |✅|
|
|
|
119
|
-| testID | ✅ |✅|
|
|
|
120
|
-| color | ✅ |✅|
|
|
|
121
|
-| icon | ✅ |✅|
|
|
|
122
|
-| disableTint | ✅ |✅|
|
|
|
123
|
-| fontSize | ✅ |✅|
|
|
|
124
|
-| fontWeight | ✅ | /iOS Specific |
|
|
|
125
|
-
|
|
|
126
|
-| statusBar | iOS | Android |
|
|
|
127
|
-|--------------------|:----:|:-----:|
|
|
|
128
|
-| textColorScheme |✅|[Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
129
|
-| textColorSchemeSingleScreen |✅| / iOS specific |
|
|
|
130
|
-| blur | ✅ | [Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
131
|
-| hideWithTopBar | ✅ | [Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
132
|
-| hidden | ✅ | [Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
133
|
-
|
|
|
134
|
-| other | iOS | Android |
|
|
|
135
|
-|--------------------|:----:|:-----:|
|
|
|
136
|
-| screenBackgroundColor | ✅ | ✅ |
|
|
|
137
|
-| orientation | ✅ |✅|
|
|
|
138
|
-| disabledBackGesture | ✅ | / iOS specific |
|
|
|
139
|
-| screenBackgroundImageName | ✅ | [Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
140
|
-| rootBackgroundImageName | ✅ | [Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
141
|
-| sideMenuVisible | ✅ |✅|
|
|
|
142
|
-
|
|
|
143
|
-
|
|
|
144
|
-## v1 vs v2 Feature Comparison
|
|
|
145
|
-Here is the full comparison of features between v1 and v2 (will be updated regularly):
|
|
|
146
|
-### Top Level API
|
|
|
147
|
-
|
|
|
148
|
-| API | v1 | v2 |
|
|
|
149
|
-|--------------------|-----|----|
|
|
|
150
|
-| startTabBasedApp | ✅ | ✅ |
|
|
|
151
|
-| startSinglePageApp | ✅ | ✅ |
|
|
|
152
|
-| registerScreen | ✅ | ✅ |
|
|
|
153
|
-| drawer | ✅ | ✅ |
|
|
|
154
|
-### Screen API
|
|
|
155
|
-
|
|
|
156
|
-| API | v1 | v2 iOS | v2 Android |
|
|
|
157
|
-|---------------------|:--------:|:------------:|:--------------:|
|
|
|
158
|
-| push | ✅ | ✅ | ✅ |
|
|
|
159
|
-| pop | ✅ | ✅ | ✅ |
|
|
|
160
|
-| showModal | ✅ | ✅ | ✅|
|
|
|
161
|
-| popToRoot | ✅ | ✅ |✅ |
|
|
|
162
|
-| resetTo | ✅ | ✅ | ✅|
|
|
|
163
|
-| dismissModal | ✅ | ✅ | ✅|
|
|
|
164
|
-| dismissAllModals | ✅ | ✅ | ✅|
|
|
|
165
|
-| showContextualMenu | ✅ | / Android specific |[Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
166
|
-| dismissContextualMenu | ✅ | / Androic specific |[Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
167
|
-| showFab | ✅ | / Android specific |✅|
|
|
|
168
|
-| dismissFab | ✅ | / Android specific |✅|
|
|
|
169
|
-| showSnackBar | ✅ | / Android specific | [Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
170
|
-| dismissSnackBar | ✅ | / Android specific | [Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
171
|
-| showLightBox | ✅ |:x: |:x: |
|
|
|
172
|
-| dismissLightBox | ✅ |:x:|:x: |
|
|
|
173
|
-| showOverlay|:x:|✅|✅|
|
|
|
174
|
-| dismissOverlay|:x:|✅|✅|
|
|
|
175
|
-| handleDeepLink | ✅ | [Contribute](/docs/docs/WorkingLocally.md) | [Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
176
|
-| Screen Visibility | ✅ | ✅ |✅|
|
|
|
177
|
-
|
|
|
178
|
-### Styles
|
|
|
179
|
-
|
|
|
180
|
-Note: v1 properties with names beginning with 'navBar' are replaced in v2 with properties beginning with 'topBar' to avoid confusion with the Android native bottom nav bar.
|
|
|
181
|
|
20
|
|
182
|
-| | v1 | v2 iOS | v2 Android |
|
|
|
183
|
-|-----------------------|:--------:|:------------:|:----------|
|
|
|
184
|
-| topBarTextColor | ✅ | ✅ | ✅ | Wix|
|
|
|
185
|
-| topBarTextFontSize | ✅ | ✅ | ✅ | Wix|
|
|
|
186
|
-| topBarTextFontFamily | ✅ | ✅ | ✅ | Wix |
|
|
|
187
|
-| topBarBackgroundColor | ✅ | ✅ | ✅ | Wix|
|
|
|
188
|
-| topBarButtonColor | ✅ | ✅ |✅| Wix|
|
|
|
189
|
-| topBarHidden | ✅ | ✅ | ✅ | Wix|
|
|
|
190
|
-| topBarHideOnScroll | ✅ | ✅ |✅| Wix|
|
|
|
191
|
-| topBarTranslucent | ✅ | ✅ | [Contribute](/docs/docs/WorkingLocally.md) | Wix|
|
|
|
192
|
-| topBarTransparent | ✅ |✅| [Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
193
|
-| topBarNoBorder | ✅ | ✅ | [Contribute](/docs/docs/WorkingLocally.md) | @gtchance|
|
|
|
194
|
-| drawUnderTabBar | ✅ | ✅ |✅| |
|
|
|
195
|
-| drawUnderTopBar | ✅ | ✅ |✅||
|
|
|
196
|
-| statusBarBlur | ✅ | ✅ | [Contribute](/docs/docs/WorkingLocally.md) | @gtchance|
|
|
|
197
|
-| topBarBlur | ✅ | ✅ | [Contribute](/docs/docs/WorkingLocally.md) | @gtchance|
|
|
|
198
|
-| tabBarHidden | ✅ | ✅ |✅| @gtchance|
|
|
|
199
|
-| statusBarTextColorScheme | ✅ |✅| / iOS specific |
|
|
|
200
|
-| statusBarTextColorSchemeSingleScreen| ✅ |✅| / iOS specific |
|
|
|
201
|
-| topBarSubtitleColor | ✅ |✅| [Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
202
|
-| topBarSubtitleFontFamily | ✅ |✅| [Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
203
|
-| screenBackgroundColor | ✅ | ✅ | [Contribute](/docs/docs/WorkingLocally.md) | Wix|
|
|
|
204
|
-| orientation | ✅ | ✅ |✅| Wix|
|
|
|
205
|
-| statusBarHideWithTopBar | ✅ | ✅ | [Contribute](/docs/docs/WorkingLocally.md) | @gtchance|
|
|
|
206
|
-| statusBarHidden | ✅ | ✅ | ✅ | WIX |
|
|
|
207
|
-| disabledBackGesture | ✅ | ✅ | / iOS specific |
|
|
|
208
|
-| screenBackgroundImageName | ✅ | ✅ | [Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
209
|
-| rootBackgroundImageName | ✅ | ✅ | [Contribute](/docs/docs/WorkingLocally.md) |
|
|
|
210
|
-| setButtons | ✅ | ✅ |✅| @Johan-dutoit|
|
|
|
211
|
-| title | ✅ |✅| ✅| Wix|
|
|
|
212
|
-| toggleDrawer | ✅ | ✅ |✅|
|
|
|
213
|
-| setTabBadge | ✅ | ✅ |✅| Wix|
|
|
|
214
|
-| switchToTab | ✅ | ✅ |✅|
|
|
|
215
|
-| topBar react component | ✅ |✅|✅|
|
|
|
216
|
-|Shared Element Transition| :x: |✅| [Contribute](/docs/docs/WorkingLocally.md)|
|
|
|
217
|
-| splitViewScreen | :x: | ✅ | [Contribute](/docs/docs/WorkingLocally.md)|
|
|
|