fix for CarouselScreen and ModalScreen

Author: Inbal-Tish

demo/src/screens/componentScreenScreens/ModalScreen.js

@@ -1,25 +1,34 @@
 import React, {Component} from 'react';
 import {Alert, StyleSheet} from 'react-native';
 import {Navigation} from 'react-native-navigation';
-import {Colors, Carousel, PageControl, Modal, View, Text, Constants} from 'react-native-ui-lib';//eslint-disable-line
+import {Colors, Carousel, PageControl, Modal, View, Text} from 'react-native-ui-lib'; // eslint-disable-line
+
 
 export default class ModalScreen extends Component {
 
-  static options() {
+  static options() { // stopped working
     return {
       topBar: {
         drawBehind: true,
-        visible: false,
-      },
+        visible: false
+      }
     };
   }
 
   constructor(props) {
     super(props);
 
     this.state = {
-      currentPage: 0,
+      currentPage: 0
+    };
+
+    const navigationStyle = {
+      topBar: {
+        drawBehind: true,
+        visible: false
+      }
     };
+    Navigation.mergeOptions(props.componentId, navigationStyle);
   }
 
   closeScreen() {
@@ -36,7 +45,7 @@ export default class ModalScreen extends Component {
           color={Colors.dark10}
           size={15}
         />
-        <Carousel onChangePage={currentPage => this.setState({currentPage})}>
+        <Carousel migrate onChangePage={currentPage => this.setState({currentPage})}>
           <View bg-green50 flex style={styles.page}>
             <Modal.TopBar
               title='modal title'
@@ -101,7 +110,6 @@ export default class ModalScreen extends Component {
               </Text>
             </View>
           </View>
-
         </Carousel>
       </View>
     );
@@ -110,15 +118,15 @@ export default class ModalScreen extends Component {
 
 const styles = StyleSheet.create({
   page: {
-    width: Constants.screenWidth,
+    flex: 1
   },
   pageControl: {
-    zIndex: 1,
+    zIndex: 1
   },
   absoluteContainer: {
     position: 'absolute',
     bottom: 20,
     left: 20,
-    right: 0,
-  },
+    right: 0
+  }
 });

demo/src/screens/componentScreens/CarouselScreen.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {Constants, View, Text, Carousel} from 'react-native-ui-lib'; // eslint-disable-line
+import {View, Text, Carousel} from 'react-native-ui-lib'; // eslint-disable-line
 
 
 const INITIAL_PAGE = 0;
@@ -17,7 +17,7 @@ class CarouselScreen extends Component {
   render() {
     return (
       <View flex>
-        <Carousel loop onChangePage={(index => this.onChangePage(index))} /* initialPage={INITIAL_PAGE} */>
+        <Carousel migrate loop onChangePage={(index => this.onChangePage(index))} /* initialPage={INITIAL_PAGE} */>
           <Page bg-cyan50>
             <Text margin-15>PAGE 0</Text>
           </Page>
@@ -58,7 +58,7 @@ const Page = ({children, ...others}) => {
 
 const styles = StyleSheet.create({
   page: {
-    width: Constants.screenWidth
+    flex: 1
   }
 });