Merge pull request #5 from InterfaceKit/iOS_support

iOS support

Example/index.android.js

@@ -1,25 +1,25 @@
 /* @flow */
 
-import React, { Component } from 'react'
-import { AppRegistry, StyleSheet, Text, View, Button } from 'react-native'
-import BottomSheet from 'react-native-js-bottom-sheet'
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
-import Entypo from 'react-native-vector-icons/Entypo'
+import React, { Component } from 'react';
+import { AppRegistry, StyleSheet, Text, View, Button } from 'react-native';
+import BottomSheet from 'react-native-js-bottom-sheet';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import Entypo from 'react-native-vector-icons/Entypo';
 
 export default class Example extends React.PureComponent<{}> {
-  bottomSheet: BottomSheet
+  bottomSheet: BottomSheet;
 
   _onPressButton = () => {
-    this.bottomSheet.open()
-  }
+    this.bottomSheet.open();
+  };
 
   render() {
     return (
       <View style={styles.container}>
         <Button title="Open" onPress={this._onPressButton} />
         <BottomSheet
           ref={(ref: BottomSheet) => {
-            this.bottomSheet = ref
+            this.bottomSheet = ref;
           }}
           itemDivider={3}
           backButtonEnabled={true}
@@ -71,14 +71,14 @@ export default class Example extends React.PureComponent<{}> {
           isOpen={false}
         />
       </View>
-    )
+    );
   }
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1
   }
-})
+});
 
-AppRegistry.registerComponent('Example', () => Example)
+AppRegistry.registerComponent('Example', () => Example);

lib/BottomSheet.js

@@ -1,117 +1,178 @@
 /* @flow */
 
-import React from 'react'
-import PropTypes from 'prop-types'
+import React from 'react';
+import PropTypes from 'prop-types';
 import {
   Text,
   TouchableNativeFeedback,
+  TouchableHighlight,
   Platform,
   StyleSheet,
-  ScrollView,
   PixelRatio,
   View
-} from 'react-native'
-import Modal from 'react-native-modalbox'
+} from 'react-native';
+import Modal from 'react-native-modalbox';
 
 type Props = {
   styleContainer?: Object,
   coverScreen?: boolean,
   backButtonEnabled?: boolean,
   height?: number,
   title?: string,
-  options: Array<Object>,
+  options?: Array<Object>,
   fontFamily?: string,
   titleFontFamily?: string,
   isOpen?: boolean,
   cancelButtonIndex?: number,
-  itemDivider?: number
-}
+  itemDivider?: number,
+  contentStyle?: any,
+  children: any
+};
 
 class BottomSheet extends React.PureComponent<Props> {
-  bottomSheet: Modal
+  bottomSheet: Modal;
 
   static propTypes = {
     styleContainer: PropTypes.object,
     coverScreen: PropTypes.bool,
     backButtonEnabled: PropTypes.bool,
     height: PropTypes.number,
     title: PropTypes.string,
-    options: PropTypes.arrayOf(PropTypes.object).isRequired,
+    options: PropTypes.arrayOf(PropTypes.object),
     fontFamily: PropTypes.string,
     titleFontFamily: PropTypes.string,
     isOpen: PropTypes.bool,
     cancelButtonIndex: PropTypes.number,
-    itemDivider: PropTypes.number
-  }
-
-  renderOption = (options: Array<Object>) => {
-    return options.map((item, index) => {
-      return (
-        <View style={{ flexDirection: 'column' }} key={index}>
-          <TouchableNativeFeedback
-            onPress={item.onPress}
-            background={TouchableNativeFeedback.SelectableBackground()}>
-            <View style={styles.item}>
-              {item.icon}
-              <Text style={[styles.text, { fontFamily: this.props.fontFamily }]}>
-                {item.title}
-              </Text>
-            </View>
-          </TouchableNativeFeedback>
-          {this.props.itemDivider === index + 1 ? (
-            <View style={styles.separator} />
-          ) : null}
-        </View>
-      )
-    })
-  }
+    itemDivider: PropTypes.number,
+    contentStyle: PropTypes.object
+  };
 
   /**
    * Open the BottomSheet
    */
   open() {
-    this.bottomSheet.open()
+    this.bottomSheet.open();
   }
 
   /**
    * Close the BottomSheet
    */
   close() {
-    this.bottomSheet.close()
+    this.bottomSheet.close();
   }
 
-  renderTitle = () => {
-    if (!this.props.title) {
-      return
+  /**
+   * Renders content based on the options or children
+   * @returns {*}
+   */
+  renderContent() {
+    const {
+      options,
+      title,
+      children,
+      fontFamily,
+      itemDivider,
+      titleFontFamily
+    } = this.props;
+
+    if (options && options.length) {
+      title && (
+        <Text
+          style={[
+            styles.title,
+            {
+              fontFamily: titleFontFamily
+            }
+          ]}>
+          {title}
+        </Text>
+      );
+      return options.map(
+        (
+          item: {
+            onPress: Function,
+            icon: any,
+            title: string
+          },
+          index: number
+        ) => {
+          return (
+            <View
+              style={{
+                flexDirection: 'column'
+              }}
+              key={index}>
+              {Platform.OS === 'android' ? (
+                <TouchableNativeFeedback
+                  onPress={item.onPress}
+                  background={TouchableNativeFeedback.SelectableBackground()}>
+                  <View style={styles.item}>
+                    {item.icon}
+                    <Text
+                      style={[
+                        styles.text,
+                        {
+                          fontFamily: fontFamily
+                        }
+                      ]}>
+                      {item.title}
+                    </Text>
+                  </View>
+                </TouchableNativeFeedback>
+              ) : (
+                <TouchableHighlight
+                  onPress={item.onPress}
+                  underlayColor="#F5F5F5">
+                  <View style={styles.item}>
+                    {item.icon}
+                    <Text
+                      style={[
+                        styles.text,
+                        {
+                          fontFamily: fontFamily
+                        }
+                      ]}>
+                      {item.title}
+                    </Text>
+                  </View>
+                </TouchableHighlight>
+              )}
+              {itemDivider === index + 1 && <View style={styles.separator} />}
+            </View>
+          );
+        }
+      );
     }
-    return (
-      <Text style={[styles.title, { fontFamily: this.props.titleFontFamily }]}>
-        {this.props.title}
-      </Text>
-    )
+    return children;
   }
 
   render() {
-    if (Platform.OS !== 'android') {
-      console.warn('Bottom Sheet is only available on Android.')
-      return null
-    }
+    const {
+      height,
+      backButtonEnabled,
+      isOpen,
+      coverScreen,
+      contentStyle,
+      styleContainer
+    } = this.props;
     return (
       <Modal
         ref={(ref: any) => {
-          this.bottomSheet = ref
+          this.bottomSheet = ref;
         }}
-        style={[this.props.styleContainer, { height: this.props.height }]}
-        backButtonClose={this.props.backButtonEnabled}
+        style={[
+          styleContainer,
+          {
+            height: height
+          }
+        ]}
+        backButtonClose={backButtonEnabled}
         position="bottom"
-        isOpen={this.props.isOpen}
-        coverScreen={this.props.coverScreen}>
-        <ScrollView style={styles.modal}>
-          {this.renderTitle()}
-          {this.renderOption(this.props.options)}
-        </ScrollView>
+        isOpen={isOpen}
+        coverScreen={coverScreen}>
+        <View style={[styles.modal, contentStyle]}>{this.renderContent()}</View>
       </Modal>
-    )
+    );
   }
 }
 
@@ -146,6 +207,6 @@ const styles = StyleSheet.create({
     marginBottom: 8,
     width: '100%'
   }
-})
+});
 
-export default BottomSheet
+export default BottomSheet;

package.json

@@ -1,8 +1,7 @@
 {
   "name": "react-native-js-bottom-sheet",
   "version": "1.0.0",
-  "description":
-    "Modal bottom sheet component for Android that follows the guidelines of Material Design.",
+  "description": "Modal bottom sheet component for Android and iOS that follows the guidelines of Material Design.",
   "author": "Antonio Moreno Valls <[email protected]>",
   "license": "MIT",
   "repository": {
@@ -12,21 +11,27 @@
   "bugs": {
     "url": "https://github.com/InterfaceKit/react-native-js-bottom-sheet/issues"
   },
-  "tags": ["react", "react-native", "react-component", "android"],
+  "tags": [
+    "react",
+    "react-native",
+    "react-component",
+    "android",
+    "ios"
+  ],
   "keywords": [
     "react",
     "react-native",
     "bottom",
     "sheet",
     "android",
+    "ïos",
     "react-component",
     "bottom-sheet",
     "multiplatform",
     "bottomsheet"
   ],
   "scripts": {
-    "prettier":
-      "prettier --single-quote --print-width 81 --write index.js lib/BottomSheet.js",
+    "prettier": "prettier --single-quote --print-width 81 --write index.js lib/BottomSheet.js",
     "start": "node node_modules/react-native/local-cli/cli.js start",
     "test": "jest"
   },