Browse Source

added support for showLightBox

talkol 8 years ago
parent
commit
fdf215fd14

+ 62
- 13
README.md View File

22
 
22
 
23
  * In your project folder run `npm install react-native-navigation --save`
23
  * In your project folder run `npm install react-native-navigation --save`
24
 > Note: We recommend using npm ver 3+. If you insist on using npm ver 2 please notice that the location for react-native-controllers in node_modules will be under the react-native-navigation folder and you'll need to change the paths in Xcode below accordingly.
24
 > Note: We recommend using npm ver 3+. If you insist on using npm ver 2 please notice that the location for react-native-controllers in node_modules will be under the react-native-navigation folder and you'll need to change the paths in Xcode below accordingly.
25
- 
25
+
26
  * Add the native files of the dependency [react-native-controllers](https://github.com/wix/react-native-controllers) to your Xcode project:
26
  * Add the native files of the dependency [react-native-controllers](https://github.com/wix/react-native-controllers) to your Xcode project:
27
 
27
 
28
    * In Xcode, in Project Navigator (left pane), right-click on the `Libraries` > `Add files to [project name]`. Add `./node_modules/react-native-controllers/ios/ReactNativeControllers.xcodeproj` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-1))
28
    * In Xcode, in Project Navigator (left pane), right-click on the `Libraries` > `Add files to [project name]`. Add `./node_modules/react-native-controllers/ios/ReactNativeControllers.xcodeproj` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-1))
29
- 
29
+
30
    * In Xcode, in Project Navigator (left pane), click on your project (top) and select the `Build Phases` tab (right pane). In the `Link Binary With Libraries` section add `libReactNativeControllers.a` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-2))
30
    * In Xcode, in Project Navigator (left pane), click on your project (top) and select the `Build Phases` tab (right pane). In the `Link Binary With Libraries` section add `libReactNativeControllers.a` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-2))
31
 
31
 
32
    * In Xcode, in Project Navigator (left pane), click on your project (top) and select the `Build Settings` tab (right pane). In the `Header Search Paths` section add `$(SRCROOT)/../node_modules/react-native-controllers/ios`. Make sure on the right to mark this new path `recursive` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-3))
32
    * In Xcode, in Project Navigator (left pane), click on your project (top) and select the `Build Settings` tab (right pane). In the `Header Search Paths` section add `$(SRCROOT)/../node_modules/react-native-controllers/ios`. Make sure on the right to mark this new path `recursive` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-3))
33
 
33
 
34
  * In Xcode, under your project files, modify `AppDelegate.m` according to this [example](https://github.com/wix/react-native-navigation/blob/master/example/ios/example/AppDelegate.m)
34
  * In Xcode, under your project files, modify `AppDelegate.m` according to this [example](https://github.com/wix/react-native-navigation/blob/master/example/ios/example/AppDelegate.m)
35
- 
35
+
36
 ## Installation - Android
36
 ## Installation - Android
37
 
37
 
38
 Coming soon, not yet supported
38
 Coming soon, not yet supported
77
 
77
 
78
 #### Step 2 - Register all of your screen components
78
 #### Step 2 - Register all of your screen components
79
 
79
 
80
-Every screen that you want to be able to place in a tab, push to the navigation stack or present modally needs to be registered. We recommend doing this in a central place, like [`screens/index.js`](example/src/screens/index.js). 
80
+Every screen that you want to be able to place in a tab, push to the navigation stack or present modally needs to be registered. We recommend doing this in a central place, like [`screens/index.js`](example/src/screens/index.js).
81
 
81
 
82
 > Note: Since your screens will potentially be bundled with other packages, your registered name must be **unique**! Follow a namespacing convention like `packageName.ScreenName`.
82
 > Note: Since your screens will potentially be bundled with other packages, your registered name must be **unique**! Follow a namespacing convention like `packageName.ScreenName`.
83
 
83
 
105
 ```
105
 ```
106
 
106
 
107
  * **registerComponent(screenID, generator, store = undefined, Provider = undefined)**
107
  * **registerComponent(screenID, generator, store = undefined, Provider = undefined)**
108
- 
109
-Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending `React.Component`. 
108
+
109
+Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending `React.Component`.
110
 
110
 
111
 ```js
111
 ```js
112
 // not using redux (just ignore the last 2 arguments)
112
 // not using redux (just ignore the last 2 arguments)
117
 ```
117
 ```
118
 
118
 
119
  * **startTabBasedApp(params)**
119
  * **startTabBasedApp(params)**
120
- 
120
+
121
 Change your app root into an app based on several tabs (usually 2-5), a very common pattern in iOS (like Facebook app or the iOS Contacts app). Every tab has its own navigation stack with a native nav bar.
121
 Change your app root into an app based on several tabs (usually 2-5), a very common pattern in iOS (like Facebook app or the iOS Contacts app). Every tab has its own navigation stack with a native nav bar.
122
 
122
 
123
 ```js
123
 ```js
156
 ```
156
 ```
157
 
157
 
158
  * **startSingleScreenApp(params)**
158
  * **startSingleScreenApp(params)**
159
- 
159
+
160
 Change your app root into an app based on a single screen (like the iOS Calendar or Settings app). The screen will receive its own navigation stack with a native nav bar
160
 Change your app root into an app based on a single screen (like the iOS Calendar or Settings app). The screen will receive its own navigation stack with a native nav bar
161
 
161
 
162
 ```js
162
 ```js
180
  * **showModal(params = {})**
180
  * **showModal(params = {})**
181
 
181
 
182
 Show a screen as a modal.
182
 Show a screen as a modal.
183
- 
183
+
184
 ```js
184
 ```js
185
 Navigation.showModal({
185
 Navigation.showModal({
186
   screen: "example.ModalScreen", // unique ID registered with Navigation.registerScreen
186
   screen: "example.ModalScreen", // unique ID registered with Navigation.registerScreen
199
 Navigation.dismissModal({
199
 Navigation.dismissModal({
200
   animationType: 'slide-down' // 'none' / 'slide-down' , dismiss animation for the modal (optional, default 'slide-down')
200
   animationType: 'slide-down' // 'none' / 'slide-down' , dismiss animation for the modal (optional, default 'slide-down')
201
 });
201
 });
202
+```
203
+
204
+* **showLightBox(params = {})**
205
+
206
+Show a screen as a lightbox.
207
+
208
+```js
209
+Navigation.showLightBox({
210
+  screen: "example.LightBoxScreen", // unique ID registered with Navigation.registerScreen
211
+  passProps: {}, // simple serializable object that will pass as props to the lightbox (optional)
212
+  style: {
213
+    backgroundBlur: "dark", // 'dark' / 'light' / 'xlight' / 'none' - the type of blur on the background
214
+    backgroundColor: "#ff000080" // tint color for the background, you can specify alpha here (optional)
215
+  }
216
+});
217
+```
218
+
219
+* **dismissLightBox(params = {})**
220
+
221
+Dismiss the current lightbox.
222
+
223
+```js
224
+Navigation.dismissLightBox();
202
 ```
225
 ```
203
 
226
 
204
  * **registerScreen(screenID, generator)**
227
  * **registerScreen(screenID, generator)**
205
- 
228
+
206
 This is an internal function you probably don't want to use directly. If your screen components extend `Screen` directly (`import { Screen } from 'react-native-navigation'`), you can register them directly with `registerScreen` instead of with `registerComponent`. The main benefit of using `registerComponent` is that it wraps your regular screen component with a `Screen` automatically.
229
 This is an internal function you probably don't want to use directly. If your screen components extend `Screen` directly (`import { Screen } from 'react-native-navigation'`), you can register them directly with `registerScreen` instead of with `registerComponent`. The main benefit of using `registerComponent` is that it wraps your regular screen component with a `Screen` automatically.
207
 
230
 
208
 ```js
231
 ```js
224
   passProps: {}, // simple serializable object that will pass as props to the pushed screen (optional)
247
   passProps: {}, // simple serializable object that will pass as props to the pushed screen (optional)
225
   animated: true, // does the push have transition animation or does it happen immediately (optional)
248
   animated: true, // does the push have transition animation or does it happen immediately (optional)
226
   backButtonTitle: undefined, // override the back button title (optional)
249
   backButtonTitle: undefined, // override the back button title (optional)
250
+  backButtonHidden: false, // hide the back button altogether (optional)
227
   navigatorStyle: {} // override the navigator style for the pushed screen (optional)
251
   navigatorStyle: {} // override the navigator style for the pushed screen (optional)
228
 });
252
 });
229
 ```
253
 ```
265
  * **showModal(params = {})**
289
  * **showModal(params = {})**
266
 
290
 
267
 Show a screen as a modal.
291
 Show a screen as a modal.
268
- 
292
+
269
 ```js
293
 ```js
270
 this.props.navigator.showModal({
294
 this.props.navigator.showModal({
271
   screen: "example.ModalScreen", // unique ID registered with Navigation.registerScreen
295
   screen: "example.ModalScreen", // unique ID registered with Navigation.registerScreen
284
 this.props.navigator.dismissModal({
308
 this.props.navigator.dismissModal({
285
   animationType: 'slide-down' // 'none' / 'slide-down' , dismiss animation for the modal (optional, default 'slide-down')
309
   animationType: 'slide-down' // 'none' / 'slide-down' , dismiss animation for the modal (optional, default 'slide-down')
286
 });
310
 });
311
+```
312
+
313
+* **showLightBox(params = {})**
314
+
315
+Show a screen as a lightbox.
316
+
317
+```js
318
+this.props.navigator.showLightBox({
319
+ screen: "example.LightBoxScreen", // unique ID registered with Navigation.registerScreen
320
+ passProps: {}, // simple serializable object that will pass as props to the lightbox (optional)
321
+ style: {
322
+   backgroundBlur: "dark", // 'dark' / 'light' / 'xlight' / 'none' - the type of blur on the background
323
+   backgroundColor: "#ff000080" // tint color for the background, you can specify alpha here (optional)
324
+ }
325
+});
326
+```
327
+
328
+* **dismissLightBox(params = {})**
329
+
330
+Dismiss the current lightbox.
331
+
332
+```js
333
+this.props.navigator.dismissLightBox();
287
 ```
334
 ```
288
 
335
 
289
  * **handleDeepLink(params = {})**
336
  * **handleDeepLink(params = {})**
429
       {
476
       {
430
         title: 'Edit', // for a textual button, provide the button title (label)
477
         title: 'Edit', // for a textual button, provide the button title (label)
431
         id: 'edit', // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
478
         id: 'edit', // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
432
-        testID: 'e2e_rules' // optional, used to locate this view in end-to-end tests
479
+        testID: 'e2e_rules', // optional, used to locate this view in end-to-end tests
480
+        disabled: true // optional, used to disable the button (appears faded and doesn't interact)
433
       },
481
       },
434
       {
482
       {
435
         icon: require('../../img/navicon_add.png'), // for icon button, provide the local image asset name
483
         icon: require('../../img/navicon_add.png'), // for icon button, provide the local image asset name
467
     title: 'Edit', // if you want a textual button
515
     title: 'Edit', // if you want a textual button
468
     icon: require('../../img/navicon_edit.png'), // if you want an image button
516
     icon: require('../../img/navicon_edit.png'), // if you want an image button
469
     id: 'compose', // id of the button which will pass to your press event handler
517
     id: 'compose', // id of the button which will pass to your press event handler
470
-    testID: 'e2e_is_awesome' // if you have e2e tests, use this to find your button
518
+    testID: 'e2e_is_awesome', // if you have e2e tests, use this to find your button
519
+    disabled: true // optional, used to disable the button (appears faded and doesn't interact)
471
   }],
520
   }],
472
   leftButtons: [] // buttons for the left side of the nav bar (optional)
521
   leftButtons: [] // buttons for the left side of the nav bar (optional)
473
 }
522
 }

+ 12
- 0
example/src/screens/FirstTabScreen.js View File

63
           <Text style={styles.button}>Show Modal Screen</Text>
63
           <Text style={styles.button}>Show Modal Screen</Text>
64
         </TouchableOpacity>
64
         </TouchableOpacity>
65
 
65
 
66
+        <TouchableOpacity onPress={ this.onLightBoxPress.bind(this) }>
67
+          <Text style={styles.button}>Show LightBox</Text>
68
+        </TouchableOpacity>
69
+
66
       </View>
70
       </View>
67
     );
71
     );
68
   }
72
   }
84
       screen: "example.ModalScreen"
88
       screen: "example.ModalScreen"
85
     });
89
     });
86
   }
90
   }
91
+  onLightBoxPress() {
92
+    this.props.navigator.showLightBox({
93
+      screen: "example.LightBoxScreen",
94
+      style: {
95
+        backgroundBlur: "dark"
96
+      }
97
+    });
98
+  }
87
 }
99
 }
88
 
100
 
89
 const styles = StyleSheet.create({
101
 const styles = StyleSheet.create({

+ 42
- 0
example/src/screens/LightBoxScreen.js View File

1
+import React, {
2
+  Component,
3
+  Text,
4
+  View,
5
+  ScrollView,
6
+  TouchableOpacity,
7
+  StyleSheet
8
+} from 'react-native';
9
+
10
+export default class LightBoxScreen extends Component {
11
+  constructor(props) {
12
+    super(props);
13
+  }
14
+  render() {
15
+    return (
16
+      <View style={{width: 300, height: 200, padding: 20}}>
17
+
18
+        <Text>
19
+          This is a LightBox
20
+        </Text>
21
+
22
+        <TouchableOpacity onPress={ this.onDismissPress.bind(this) }>
23
+          <Text style={styles.button}>Dismiss</Text>
24
+        </TouchableOpacity>
25
+
26
+      </View>
27
+    );
28
+  }
29
+  onDismissPress() {
30
+    this.props.navigator.dismissLightBox();
31
+  }
32
+}
33
+
34
+const styles = StyleSheet.create({
35
+  button: {
36
+    textAlign: 'center',
37
+    fontSize: 18,
38
+    marginBottom: 10,
39
+    marginTop:10,
40
+    color: 'blue'
41
+  }
42
+});

+ 2
- 0
example/src/screens/index.js View File

6
 import PushedScreen from './PushedScreen';
6
 import PushedScreen from './PushedScreen';
7
 import StyledScreen from './StyledScreen';
7
 import StyledScreen from './StyledScreen';
8
 import ModalScreen from './ModalScreen';
8
 import ModalScreen from './ModalScreen';
9
+import LightBoxScreen from './LightBoxScreen';
9
 import SideMenu from './SideMenu';
10
 import SideMenu from './SideMenu';
10
 
11
 
11
 // register all screens of the app (including internal ones)
12
 // register all screens of the app (including internal ones)
16
   Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
17
   Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
17
   Navigation.registerComponent('example.StyledScreen', () => StyledScreen);
18
   Navigation.registerComponent('example.StyledScreen', () => StyledScreen);
18
   Navigation.registerComponent('example.ModalScreen', () => ModalScreen);
19
   Navigation.registerComponent('example.ModalScreen', () => ModalScreen);
20
+  Navigation.registerComponent('example.LightBoxScreen', () => LightBoxScreen);
19
   Navigation.registerComponent('example.SideMenu', () => SideMenu);
21
   Navigation.registerComponent('example.SideMenu', () => SideMenu);
20
 }
22
 }

+ 10
- 0
src/Navigation.js View File

67
   return platformSpecific.dismissModal(params);
67
   return platformSpecific.dismissModal(params);
68
 }
68
 }
69
 
69
 
70
+function showLightBox(params = {}) {
71
+  return platformSpecific.showLightBox(params);
72
+}
73
+
74
+function dismissLightBox(params = {}) {
75
+  return platformSpecific.dismissLightBox(params);
76
+}
77
+
70
 export default {
78
 export default {
71
   registerScreen,
79
   registerScreen,
72
   getRegisteredScreen,
80
   getRegisteredScreen,
73
   registerComponent,
81
   registerComponent,
74
   showModal,
82
   showModal,
75
   dismissModal,
83
   dismissModal,
84
+  showLightBox,
85
+  dismissLightBox,
76
   startTabBasedApp: platformSpecific.startTabBasedApp,
86
   startTabBasedApp: platformSpecific.startTabBasedApp,
77
   startSingleScreenApp: platformSpecific.startSingleScreenApp
87
   startSingleScreenApp: platformSpecific.startSingleScreenApp
78
 }
88
 }

+ 6
- 0
src/Screen.js View File

29
   dismissModal(params = {}) {
29
   dismissModal(params = {}) {
30
     return Navigation.dismissModal(params);
30
     return Navigation.dismissModal(params);
31
   }
31
   }
32
+  showLightBox(params = {}) {
33
+    return Navigation.showLightBox(params);
34
+  }
35
+  dismissLightBox(params = {}) {
36
+    return Navigation.dismissLightBox(params);
37
+  }
32
   setButtons(params = {}) {
38
   setButtons(params = {}) {
33
     return platformSpecific.navigatorSetButtons(this, this.navigatorEventID, params);
39
     return platformSpecific.navigatorSetButtons(this, this.navigatorEventID, params);
34
   }
40
   }

+ 30
- 0
src/platformSpecific.ios.js View File

350
   Modal.dismissController(params.animationType);
350
   Modal.dismissController(params.animationType);
351
 }
351
 }
352
 
352
 
353
+function showLightBox(params) {
354
+  if (!params.screen) {
355
+    console.error('showLightBox(params): params.screen is required');
356
+    return;
357
+  }
358
+  const controllerID = utils.getRandomId();
359
+  const navigatorID = controllerID + '_nav';
360
+  const screenInstanceID = utils.getRandomId();
361
+  const {
362
+    navigatorStyle,
363
+    navigatorButtons,
364
+    navigatorEventID
365
+  } = _mergeScreenSpecificSettings(params.screen, screenInstanceID, params);
366
+  const passProps = Object.assign({}, params.passProps);
367
+  passProps.navigatorID = navigatorID;
368
+  passProps.screenInstanceID = screenInstanceID;
369
+  passProps.navigatorEventID = navigatorEventID;
370
+  Modal.showLightBox({
371
+    component: params.screen,
372
+    passProps: passProps,
373
+    style: params.style
374
+  });
375
+}
376
+
377
+function dismissLightBox(params) {
378
+  Modal.dismissLightBox();
379
+}
380
+
353
 export default {
381
 export default {
354
   startTabBasedApp,
382
   startTabBasedApp,
355
   startSingleScreenApp,
383
   startSingleScreenApp,
359
   navigatorResetTo,
387
   navigatorResetTo,
360
   showModal,
388
   showModal,
361
   dismissModal,
389
   dismissModal,
390
+  showLightBox,
391
+  dismissLightBox,
362
   navigatorSetButtons,
392
   navigatorSetButtons,
363
   navigatorSetTitle,
393
   navigatorSetTitle,
364
   navigatorToggleDrawer,
394
   navigatorToggleDrawer,