react-native-overlay - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

Examples/Toast/index.ios.js

@@ -32,2 +32,9 @@ /**
       <View style={styles.container}>
+        { /* It doesn't matter where we put this component */ }
+        <Toast isVisible={this.state.isToastVisible} onDismiss={this.hideToast} position="bottom">
+          <TouchableOpacity onPress={() => { AlertIOS.alert('Pressed on text!') }}>
+            <Text style={styles.toastText}>This message is easy to display and dismiss! Write as much as you want to, also! It will just flow down.</Text>
+          </TouchableOpacity>
+        </Toast>
+
         <TouchableOpacity onPress={() => { AlertIOS.alert('Pressed on image!') }}>
@@ -38,3 +45,3 @@ <Image source={require('image!announcement')} style={styles.image} />
         { /* It doesn't matter where we put this component */ }
-        <Toast isVisible={this.state.isToastVisible} onDismiss={this.hideToast}>
+        <Toast isVisible={this.state.isToastVisible} onDismiss={this.hideToast} position="top">
           <TouchableOpacity onPress={() => { AlertIOS.alert('Pressed on text!') }}>
@@ -61,4 +68,4 @@ <Text style={styles.toastText}>This message is easy to display and dismiss! Write as much as you want to, also! It will just flow down.</Text>
     resizeMode: 'cover',
-    height: require('Dimensions').get('window').height,
-    width: require('Dimensions').get('window').width,
+    width: 800,
+    height: 800,
   }
@@ -65,0 +72,0 @@ });

Examples/Toast/Toast.ios.js

@@ -24,5 +24,13 @@ /**
   render(): ReactElement {
+    var positionStyle;
+
+    if (this.props.position == 'top' || !this.props.position) {
+      positionStyle = styles.top;
+    } else {
+      positionStyle = styles.bottom;
+    }
+
     return (
-      <Overlay isVisible={this.props.isVisible}>
-        <BlurView style={styles.background} blurType="light">
+      <Overlay isVisible={this.props.isVisible} aboveStatusBar={false}>
+        <BlurView style={positionStyle} blurType="light">
           <View style={styles.content}>
@@ -44,5 +52,15 @@ {this.props.children}
 var styles = StyleSheet.create({
-  background: {
+  top: {
+    paddingTop: 15,
     flexDirection: 'row',
+    alignItems: 'center',
   },
+  bottom: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
   content: {
@@ -57,6 +75,6 @@ flex: 9,
     borderRadius: 5,
-    marginTop: 15,
     justifyContent: 'center',
     height: 30,
     marginRight: 15,
+    alignItems: 'center',
   },
@@ -63,0 +81,0 @@ dismissButtonText: {

Overlay.ios.js

@@ -37,3 +37,3 @@ /**
       return (
-        <RNOverlay visible={true} style={styles.container} pointerEvents="none">
+        <RNOverlay visible={true} style={styles.container} pointerEvents="none" aboveStatusBar={this.props.aboveStatusBar}>
           {React.Children.map(this.props.children, React.addons.cloneWithProps)}
@@ -49,3 +49,3 @@ </RNOverlay>
 var RNOverlay = createReactIOSNativeComponentClass({
-  validAttributes: merge(ReactIOSViewAttributes.UIView, {visible: true}),
+  validAttributes: merge(ReactIOSViewAttributes.UIView, {visible: true, aboveStatusBar: true}),
   uiViewClassName: 'RNOverlay',
@@ -52,0 +52,0 @@ });

package.json

 {
   "name": "react-native-overlay",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "An <Overlay /> component that brings content inside to the front of the view regardless of its current position in the component tree.",
@@ -5,0 +5,0 @@ "main": "Overlay.ios.js",

README.md

@@ -14,3 +14,3 @@ ## react-native-overlay
 
-## Example
+## Example - Loading Overlay
 
@@ -87,1 +87,10 @@ This shows how you might implement a loading overlay and uses
 `Examples/LoaingOverlay`.
+
+## Example - Toast
+
+There are so many other types of overlays but I thought I'd give another
+simple example to stir your imagination.
+
+![Example code result](https://raw.githubusercontent.com/brentvatne/react-native-overlay/master/example-toast.png)
+
+Check it out in `Examples/Toast`.

No alert changes

Improved metrics

Total package byte prevSize

2729186

increased by28.38%

Number of package files

46

increased by2.22%

Lines of code

340

increased by6.92%

Number of lines in readme file

95

increased by10.47%

No dependency changes