Support backgroundColor prop, closes #14

hectahertz · Jun 24, 2017 · 9c24883 · 9c24883
1 parent 877a5fe
commit 9c24883
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -82,6 +82,7 @@ cancelLabel | label for the cancel action | 'CANCEL' | string
 okLabel | label for the ok action | 'OK' | string
 title | text for the dialog title | undefined | string
 titleColor | color of the dialog title | 'rgba(0, 0, 0, 0.87)' | string
+backgroundColor | color of the dialog background | '#FFFFFF' | string
 colorAccent | color of the action text | '#51BC78' | string
 scrolled | whether the form is in scrolled mode | false | bool
 
@@ -118,6 +119,7 @@ cancelLabel | label for the cancel action | 'CANCEL' | string
 okLabel | label for the ok action | 'OK' | string
 title | text for the dialog title | undefined | string
 titleColor | color of the dialog title | 'rgba(0, 0, 0, 0.87)' | string
+backgroundColor | color of the dialog background | '#FFFFFF' | string
 colorAccent | color of the action text | '#51BC78' | string
 scrolled | whether the form is in scrolled mode | false | bool
 
@@ -157,6 +159,7 @@ cancelLabel | label for the cancel action | 'CANCEL' | string
 okLabel | label for the ok action | 'OK' | string
 title | text for the dialog title | undefined | string
 titleColor | color of the dialog title | 'rgba(0, 0, 0, 0.87)' | string
+backgroundColor | color of the dialog background | '#FFFFFF' | string
 colorAccent | color of the action text | '#51BC78' | string
 scrolled | whether the form is in scrolled mode | false | bool
 

diff --git a/example/App.js b/example/App.js
@@ -107,7 +107,7 @@ export default class MaterialDialogExample extends Component {
               <Text style={styles.titleText}>
                 MultiPickerMaterialDialog
               </Text>
-              
+
               <TouchableOpacity
                 onPress={() => this.setState({ multiPickerVisible: true })}>
                 <View style={styles.button}>
@@ -162,7 +162,7 @@ export default class MaterialDialogExample extends Component {
                   ? 'No item selected.'
                   : 'Selected: ' + this.state.singlePickerSelectedItem.label}
               </Text>
-              
+
               <TouchableOpacity
                 onPress={() => this.setState({ scrolledSinglePickerVisible: true })}>
                 <View style={styles.button}>
@@ -237,8 +237,9 @@ export default class MaterialDialogExample extends Component {
         <MaterialDialog
           visible={this.state.basicCustomColorsVisible}
           title={'Save the conversation?'}
-          titleColor="#FF4081"
-          colorAccent="#FF4081"
+          titleColor="#F0F0F0"
+          colorAccent="#6ABED0"
+          backgroundColor="#181712"
           okLabel="SAVE"
           onOk={() => {
             this.setState({ basicCustomColorsVisible: false });
@@ -247,7 +248,7 @@ export default class MaterialDialogExample extends Component {
           onCancel={() => {
             this.setState({ basicCustomColorsVisible: false });
           }}>
-          <Text style={styles.dialogText}>
+          <Text style={[styles.dialogText, { color: '#B0ABA0' }]}>
             Store the conversation log in Google Drive.
           </Text>
         </MaterialDialog>

diff --git a/src/MaterialDialog.js b/src/MaterialDialog.js
@@ -46,7 +46,7 @@ export default class MaterialDialog extends Component {
         <TouchableWithoutFeedback onPress={this.props.onCancel}>
           <View style={styles.backgroundOverlay}>
             <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : null}>
-              <View style={styles.modalContainer}>
+              <View style={[styles.modalContainer, { backgroundColor: this.props.backgroundColor }]}>
                 <TouchableWithoutFeedback>
                   <View>
                     {this.props.title != null
@@ -106,7 +106,6 @@ const styles = StyleSheet.create({
     paddingTop: 24,
     minWidth: 280,
     borderRadius: 2,
-    backgroundColor: colors.background,
     elevation: 24,
     overflow: 'hidden',
   },
@@ -202,6 +201,7 @@ MaterialDialog.defaultProps = {
   okLabel: 'OK',
   cancelLabel: 'CANCEL',
   titleColor: colors.androidPrimaryTextColor,
+  backgroundColor: colors.background,
   colorAccent: colors.androidColorAccent,
   scrolled: false,
 };