Merge pull request #3 from 35d/feature/#2-improve-example

Feature/#2 improve example

README.md

@@ -1,5 +1,3 @@
-⚠️ This library is in development
-
 # react-native-half-modal
 
 ![react-native-half-modal](https://github.com/nikke1925/react-native-half-modal/blob/master/half-modal.gif)
@@ -61,7 +59,7 @@ For a more complex example take a look at the `./example/App.js`
 
 # Todo
 
-- [ ] Android Support
+- [x] Android Support
 - [x] Create Example App
 - [x] Write Readme
   - [x] Props list

example/.gitignore

@@ -1,56 +1,10 @@
-# OSX
-#
-.DS_Store
-
-# Xcode
-#
-build/
-*.pbxuser
-!default.pbxuser
-*.mode1v3
-!default.mode1v3
-*.mode2v3
-!default.mode2v3
-*.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
-*.xcuserstate
-project.xcworkspace
-
-# Android/IntelliJ
-#
-build/
-.idea
-.gradle
-local.properties
-*.iml
-
-# node.js
-#
-node_modules/
-npm-debug.log
-yarn-error.log
-
-# BUCK
-buck-out/
-\.buckd/
-*.keystore
-
-# fastlane
-#
-# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
-# screenshots whenever they are needed.
-# For more information about the recommended setup visit:
-# https://docs.fastlane.tools/best-practices/source-control/
-
-*/fastlane/report.xml
-*/fastlane/Preview.html
-*/fastlane/screenshots
-
-# Bundle artifact
-*.jsbundle
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/

example/.watchmanconfig

@@ -1 +1 @@
-{}
+{}

example/App.js

@@ -6,46 +6,62 @@ import SemiModal from './SemiModal';
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    backgroundColor: '#151F2B',
+    flex: 1
+  },
+  open: {
+    textAlign: 'center',
+    marginTop: 64
   },
   modalText: {
-    color: '#FFF',
+    color: '#FFF'
   },
   modalCancelButton: {
     borderRadius: 32,
     height: 40,
     backgroundColor: '#243347',
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'center'
   },
   bar: {
     width: 16,
     borderBottomWidth: 4,
-    borderColor: '#FFFFFF44',
+    borderColor: '#FFFFFF44'
   },
   leftBar: {
     borderRadius: 16,
     borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
+    borderBottomRightRadius: 0
   },
   rightBar: {
     borderRadius: 16,
     borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
+    borderBottomLeftRadius: 0
+  },
+  SemiModal: {
+    paddingVertical: 24,
+    paddingHorizontal: 24,
+    paddingTop: 8,
+    backgroundColor: '#151F2B'
   },
+  modalInner: {
+    flex: 1,
+    flexDirection: 'row',
+    marginBottom: 24,
+    justifyContent: 'center'
+  }
 });
 
 type State = {
-  isVisible: boolean,
+  isVisible: boolean
 };
+
 type Props = {};
 
 export default class App extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      isVisible: false,
+      isVisible: false
     };
   }
 
@@ -61,34 +77,13 @@ export default class App extends Component<Props, State> {
     return (
       <View style={styles.container}>
         <View style={{ paddingVertical: 32 }}>
-          <Text
-            style={{ color: '#FFF', textAlign: 'center', marginTop: 64 }}
-            onPress={() => {
-              this.modalOpen();
-            }}
-          >
+          <Text style={styles.open} onPress={this.modalOpen}>
             OPEN
           </Text>
         </View>
-        <SemiModal
-          isVisible={this.state.isVisible}
-          onModalClose={() => this.modalClose()}
-          style={{
-            paddingVertical: 24,
-            paddingHorizontal: 24,
-            paddingTop: 8,
-            backgroundColor: '#151F2B',
-          }}
-        >
+        <SemiModal isVisible={this.state.isVisible} onModalClose={this.modalClose} style={styles.SemiModal}>
           <View>
-            <View
-              style={{
-                flex: 1,
-                flexDirection: 'row',
-                marginBottom: 24,
-                justifyContent: 'center',
-              }}
-            >
+            <View style={styles.modalInner}>
               <View style={[styles.bar, styles.leftBar]} />
               <View style={[styles.bar, styles.rightBar]} />
             </View>
@@ -98,12 +93,7 @@ export default class App extends Component<Props, State> {
               <Text style={[styles.modalText, { marginBottom: 16 }]}>Block</Text>
               <Text style={[styles.modalText, { marginBottom: 16 }]}>Report</Text>
             </View>
-            <TouchableOpacity
-              onPress={() => {
-                this.modalClose();
-              }}
-              style={styles.modalCancelArea}
-            >
+            <TouchableOpacity onPress={this.modalClose} style={styles.modalCancelArea}>
               <View style={styles.modalCancelButton}>
                 <Text style={[styles.modalText]}>Cancel</Text>
               </View>

example/SemiModal.js

@@ -152,15 +152,22 @@ export default class SemiModal extends Component<Props, State> {
           styles.modalBackground,
           { transform: this.state.modalBgPan.getTranslateTransform() },
           { backgroundColor: this.props.backgroundColor },
+          { justifyContent: 'flex-end' },
         ]}
       >
-        <TouchableWithoutFeedback onPress={() => this.props.onModalClose()}>
+        <TouchableWithoutFeedback
+          style={[
+            styles.modalBackground,
+            { transform: this.state.modalBgPan.getTranslateTransform() },
+            { backgroundColor: this.props.backgroundColor },
+          ]}
+          onPress={() => this.props.onModalClose()}
+        >
           <View style={{ height: Dimensions.get('window').height }} />
         </TouchableWithoutFeedback>
         <Animated.View
           style={[
             styles.modal,
-            { bottom: this.state.modalHeight },
             { transform: this.state.modalPan.getTranslateTransform() },
             this.props.style,
           ]}