feat: add prop to control background opacity

kdastan · May 8, 2018 · 6046a23 · 6046a23
1 parent c88f61c
commit 6046a23
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 60 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/README.md b/README.md
@@ -21,11 +21,12 @@ Import module using `import Loader from 'react-native-modal-loader';`, then plac
 
 ### Properties
 
-| Prop    | Default | isRequired |        Type        | Description                           |
-| :------ | :-----: | :--------: | :----------------: | :------------------------------------ |
-| loading |  false  |    true    |        bool        | Whether to show the loader or hide it |
-| color   |  grey   |   false    |       color        | Color of the spinner                  |
-| size    |  small  |   false    | 'small' or 'large' | Size of the spinner                   |
+| Prop    | Default | isRequired |        Type        | Description                              |
+| :------ | :-----: | :--------: | :----------------: | :--------------------------------------- |
+| loading |  false  |    true    |        bool        | Whether to show the loader or hide it    |
+| color   |  grey   |   false    |       color        | Color of the spinner                     |
+| size    |  small  |   false    | 'small' or 'large' | Size of the spinner                      |
+| opacity |   0.4   |   false    |       number       | Background opacity value between 0 and 1 |
 
 ## Example
 
@@ -35,31 +36,31 @@ import { StyleSheet, Button, Text, View } from 'react-native';
 import Loader from 'react-native-modal-loader';
 
 export default class App extends Component {
-	state = {
-		isLoading: false
-	};
-
-	showLoader = () => {
-		this.setState({ isLoading: true });
-	};
-
-	render() {
-		return (
-			<View style={styles.container}>
-				<Loader loading={this.state.isLoading} color="#ff66be" />
-				<Button title="Press me!" onPress={this.showLoader} />
-			</View>
-		);
-	}
+  state = {
+    isLoading: false
+  };
+
+  showLoader = () => {
+    this.setState({ isLoading: true });
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Loader loading={this.state.isLoading} color="#ff66be" />
+        <Button title="Press me!" onPress={this.showLoader} />
+      </View>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		justifyContent: 'center',
-		alignItems: 'center',
-		backgroundColor: '#F5FCFF'
-	}
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF'
+  }
 });
 ```
 

diff --git a/index.js b/index.js
@@ -2,44 +2,53 @@ import React from 'react';
 import { StyleSheet, View, Modal, ActivityIndicator } from 'react-native';
 import PropTypes from 'prop-types';
 
-const Loader = ({ loading = false, color, size }) => {
-	return (
-		<Modal
-			transparent
-			animationType={'none'}
-			visible={loading}
-			onRequestClose={() => null}
-		>
-			<View style={styles.modalBackground}>
-				<View style={styles.activityIndicatorWrapper}>
-					<ActivityIndicator animating={loading} color={color} size={size} />
-				</View>
-			</View>
-		</Modal>
-	);
+const Loader = ({ loading = false, color, size, opacity = 0.4 }) => {
+  return (
+    <Modal
+      transparent
+      animationType={'none'}
+      visible={loading}
+      onRequestClose={() => null}
+    >
+      <View
+        style={[
+          styles.modalBackground,
+          { backgroundColor: `rgba(0,0,0,${opacity})` }
+        ]}
+      >
+        <View style={styles.activityIndicatorWrapper}>
+          <ActivityIndicator animating={loading} color={color} size={size} />
+        </View>
+      </View>
+    </Modal>
+  );
 };
 
 Loader.propTypes = {
-	loading: PropTypes.bool.isRequired,
-	color: PropTypes.string,
-	size: PropTypes.string
+  loading: PropTypes.bool.isRequired,
+  color: PropTypes.string,
+  size: PropTypes.string,
+  opacity: (props, propName, componentName) => {
+    if (props[propName] < 0 || props[propName] > 1) {
+      return new Error('Opacity prop value out of range');
+    }
+  }
 };
 
 const styles = StyleSheet.create({
-	modalBackground: {
-		flex: 1,
-		alignItems: 'center',
-		justifyContent: 'center',
-		backgroundColor: 'rgba(0,0,0,0.4)'
-	},
-	activityIndicatorWrapper: {
-		backgroundColor: 'white',
-		height: 100,
-		width: 100,
-		borderRadius: 10,
-		alignItems: 'center',
-		justifyContent: 'center'
-	}
+  modalBackground: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  activityIndicatorWrapper: {
+    backgroundColor: 'white',
+    height: 100,
+    width: 100,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
 });
 
 export default Loader;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "react-native-modal-loader",
-	"version": "1.2.0",
+	"version": "1.3.0",
 	"description": "Modal loader hud for react-native",
 	"main": "index.js",
 	"scripts": {