implemented isTransparent props to override modal transparency, imple…

README.md

@@ -7,8 +7,8 @@ A cross-platform input prompt component for React Native.
 ```sh
 $ npm install --save react-native-input-prompt
 ```
-## Demo
 
+## Demo
 
 | iOS                    | Android                 |
 | ---------------------- | ----------------------- |
@@ -18,41 +18,45 @@ $ npm install --save react-native-input-prompt
 
 ```js
 <Prompt
-    visible={this.state.visible}
-    title="Say Something"
-    placeholder="Type Something"
-    onCancel={() =>
-        this.setState({
-            text: "User Cancelled!",
-            visible: !this.state.visible
-        })
-    }
-    onSubmit={text =>
-        this.setState({
-            text: "User submitted: " + text,
-            visible: !this.state.visible
-        })
-    }
+  visible={this.state.visible}
+  title="Say Something"
+  placeholder="Type Something"
+  onCancel={() =>
+    this.setState({
+      text: 'User Cancelled!',
+      visible: !this.state.visible
+    })
+  }
+  onSubmit={text =>
+    this.setState({
+      text: 'User submitted: ' + text,
+      visible: !this.state.visible
+    })
+  }
+  textInputProps={{ autoCapitalize: 'none', autoCorrect: false }}
+  isTransparent={false}
 />
 ```
 
 ## API
 
 Props:
 
-*   `title` (string, required): The title to be displayed on the prompt.
-*   `visible` (boolean, required): When `true`, the prompt is displayed, closes otherwise.
-*   `placeholder` (string, required): The placeholder text of the prompt.
-*   `cancelText` (string): The string that is displayed on the cancel button (defaults to "Cancel").
-*   `submitText` (string): The string that is displayed on the submit button (defaults to "Submit").
-*   `cancelButtonStyle` (object): To change the style of "Cancel button".
-*   `submitButtonStyle` (object): To change the style of "Submit button".
-*   `cancelButtonTextStyle`(object): To change the style of text displayed inside "Cancel button".
-*   `submitButtonTextStyle` (object): To change the style of text displayed inside "Submit button".
-*   `titleStyle` (object): To change the style of title text.
-*   `onChangeText` (function): Function that is called with user input when it changes.
-*   `onSubmit` (function, required): Function that is called when user presses on "Submit button".
-*   `onCancel` (function, required): Function that is called when user presses on "Cancel button".
+- `title` (string, required): The title to be displayed on the prompt.
+- `visible` (boolean, required): When `true`, the prompt is displayed, closes otherwise.
+- `placeholder` (string, required): The placeholder text of the prompt.
+- `cancelText` (string): The string that is displayed on the cancel button (defaults to "Cancel").
+- `submitText` (string): The string that is displayed on the submit button (defaults to "Submit").
+- `cancelButtonStyle` (object): To change the style of "Cancel button".
+- `submitButtonStyle` (object): To change the style of "Submit button".
+- `cancelButtonTextStyle`(object): To change the style of text displayed inside "Cancel button".
+- `submitButtonTextStyle` (object): To change the style of text displayed inside "Submit button".
+- `titleStyle` (object): To change the style of title text.
+- `onChangeText` (function): Function that is called with user input when it changes.
+- `onSubmit` (function, required): Function that is called when user presses on "Submit button".
+- `onCancel` (function, required): Function that is called when user presses on "Cancel button".
+- `textInputProps` (object): To map override TextInput props
+- `isTransparent` (bool): To make prompt input background not transparent (defaults to true)
 
 ## Contributing
 

src/Prompt.js

@@ -1,125 +1,116 @@
-import React, { Component } from "react";
-import {
-	View,
-	Text,
-	Button,
-	TextInput,
-	Dimensions,
-	Modal,
-	TouchableOpacity
-} from "react-native";
-import styles from "./styles";
-import PropTypes from "prop-types";
+import React, { Component } from 'react';
+import { View, Text, TextInput, Modal, TouchableOpacity } from 'react-native';
+import styles from './styles';
+import PropTypes from 'prop-types';
 
 export default class Prompt extends Component {
-	static propTypes = {
-		title: PropTypes.string.isRequired,
-		visible: PropTypes.bool.isRequired,
-		placeholder: PropTypes.string.isRequired,
-		cancelText: PropTypes.string,
-		submitText: PropTypes.string,
-		cancelButtonStyle: PropTypes.object,
-		submitButtonStyle: PropTypes.object,
-		cancelButtonTextStyle: PropTypes.object,
-		submitButtonTextStyle: PropTypes.object,
-		titleStyle: PropTypes.object,
-		onChangeText: PropTypes.func,
-		onSubmit: PropTypes.func.isRequired,
-		onCancel: PropTypes.func.isRequired
-	};
+  static propTypes = {
+    title: PropTypes.string.isRequired,
+    visible: PropTypes.bool.isRequired,
+    placeholder: PropTypes.string.isRequired,
+    cancelText: PropTypes.string,
+    submitText: PropTypes.string,
+    isTransparent: PropTypes.bool,
+    cancelButtonStyle: PropTypes.object,
+    submitButtonStyle: PropTypes.object,
+    cancelButtonTextStyle: PropTypes.object,
+    submitButtonTextStyle: PropTypes.object,
+    titleStyle: PropTypes.object,
+    onChangeText: PropTypes.func,
+    onSubmit: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    textInputProps: PropTypes.object
+  };
 
-	static defaultProps = {
-		title: "Title",
-		visible: false,
-		placeholder: "Placeholder",
-		cancelText: "Cancel",
-		submitText: "Submit",
-		cancelButtonStyle: {},
-		cancelButtonTextStyle: {},
-		submitButtonStyle: {},
-		submitButtonTextStyle: {},
-		titleStyle: {},
-		onChangeText: () => {},
-		onSubmit: () => {},
-		onCancel: () => {}
-	};
-	constructor() {
-		super();
-		this.state = {
-			value: ""
-		};
-	}
-	_onChangeText(value) {
-		this.setState({
-			value: value
-		});
-		this.props.onChangeText(value);
-	}
+  static defaultProps = {
+    title: 'Title',
+    visible: false,
+    placeholder: 'Placeholder',
+    cancelText: 'Cancel',
+    submitText: 'Submit',
+    textInputProps: {},
+    cancelButtonStyle: {},
+    cancelButtonTextStyle: {},
+    submitButtonStyle: {},
+    submitButtonTextStyle: {},
+    titleStyle: {},
+    isTransparent: true,
+    onChangeText: () => {},
+    onSubmit: () => {},
+    onCancel: () => {}
+  };
 
-	_onSubmit() {
-		this.props.onSubmit(this.state.value);
-		this.setState({ value: "" });
-	}
+  state = { value: '' };
 
-	_onCancel() {
-		this.props.onCancel();
-		this.setState({ value: "" });
-	}
-	render() {
-		return (
-			<Modal
-				transparent={true}
-				animationType="fade"
-				visible={this.props.visible}
-				onRequestClose={this._onCancel.bind(this)}>
-				<View style={styles.screenOverlay}>
-					<View style={styles.dialogPrompt}>
-						<Text style={[styles.title, this.props.titleStyle]}>
-							{this.props.title}
-						</Text>
-						<TextInput
-							placeholder={this.props.placeholder}
-							style={styles.textInput}
-							onChangeText={this._onChangeText.bind(this)}
-							onSubmitEditing={this._onSubmit.bind(this)}
-							autoFocus={true}
-						/>
-						<View style={styles.buttonsOuterView}>
-							<View style={styles.buttonsInnerView}>
-								<TouchableOpacity
-									style={[
-										styles.button,
-										this.props.cancelButtonStyle
-									]}
-									onPress={this._onCancel.bind(this)}>
-									<Text
-										style={[
-											styles.cancelButtonText,
-											this.props.cancelButtonTextStyle
-										]}>
-										{this.props.cancelText}
-									</Text>
-								</TouchableOpacity>
-								<View style={styles.buttonsDivider} />
-								<TouchableOpacity
-									style={[
-										styles.button,
-										this.props.submitButtonStyle
-									]}
-									onPress={this._onSubmit.bind(this)}>
-									<Text
-										style={[
-											styles.submitButtonText,
-											this.props.submitButtonTextStyle
-										]}>
-										{this.props.submitText}
-									</Text>
-								</TouchableOpacity>
-							</View>
-						</View>
-					</View>
-				</View>
-			</Modal>
-		);
-	}
+  _onChangeText = value => {
+    this.setState({ value });
+    this.props.onChangeText(value);
+  };
+
+  _onSubmit = () => {
+    this.props.onSubmit(this.state.value);
+    this.setState({ value: '' });
+  };
+
+  _onCancel = () => {
+    this.props.onCancel();
+    this.setState({ value: '' });
+  };
+  render() {
+    return (
+      <Modal
+        transparent={this.props.isTransparent}
+        animationType="fade"
+        visible={this.props.visible}
+        onRequestClose={this._onCancel}
+      >
+        <View style={styles.screenOverlay}>
+          <View style={styles.dialogPrompt}>
+            <Text style={[styles.title, this.props.titleStyle]}>
+              {this.props.title}
+            </Text>
+            <TextInput
+              placeholder={this.props.placeholder}
+              style={styles.textInput}
+              onChangeText={this._onChangeText}
+              onSubmitEditing={this._onSubmit}
+              autoFocus={true}
+              {...this.props.textInputProps}
+            />
+            <View style={styles.buttonsOuterView}>
+              <View style={styles.buttonsInnerView}>
+                <TouchableOpacity
+                  style={[styles.button, this.props.cancelButtonStyle]}
+                  onPress={this._onCancel.bind(this)}
+                >
+                  <Text
+                    style={[
+                      styles.cancelButtonText,
+                      this.props.cancelButtonTextStyle
+                    ]}
+                  >
+                    {this.props.cancelText}
+                  </Text>
+                </TouchableOpacity>
+                <View style={styles.buttonsDivider} />
+                <TouchableOpacity
+                  style={[styles.button, this.props.submitButtonStyle]}
+                  onPress={this._onSubmit.bind(this)}
+                >
+                  <Text
+                    style={[
+                      styles.submitButtonText,
+                      this.props.submitButtonTextStyle
+                    ]}
+                  >
+                    {this.props.submitText}
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    );
+  }
 }