feat(android): allow customizing container styles (#142)

* Android: container style configurable (background)
* Add containerStyle prop description to readme
* Add containerStyle prop to example app

README.md

@@ -109,6 +109,7 @@ The below props allow modification of the Android ActionSheet. They have no effe
 | titleTextStyle   | TextStyle                         | No       |         |
 | messageTextStyle | TextStyle                         | No       |         |
 | showSeparators   | boolean                           | No       |  false  |
+| containerStyle   | ViewStyle                         | No       |         |
 | separatorStyle   | ViewStyle                         | No       |         |
 
 #### `icons` (optional)
@@ -130,6 +131,9 @@ Apply any text style props to the message if present.
 #### `showSeparators`: (optional)
 Show separators between items. On iOS, separators always show so this prop has no effect.
 
+#### `containerStyle`: (optional)
+Apply any view style props to the container rather than use the default look (e.g. dark mode).
+
 #### `separatorStyle`: (optional)
 Modify the look of the separators rather than use the default look.
 

example/ShowActionSheetButton.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text, View, TextStyle } from 'react-native';
+import { Text, View, TextStyle, ViewStyle } from 'react-native';
 import { MaterialIcons, Entypo } from '@expo/vector-icons';
 import { ActionSheetOptions } from '@expo/react-native-action-sheet';
 
@@ -74,6 +74,12 @@ export default class ShowActionSheetButton extends React.PureComponent<Props> {
           textAlign: 'right',
         }
       : undefined;
+    const containerStyle: ViewStyle | undefined = withCustomStyles
+      ? {
+          backgroundColor: 'lightgrey',
+        }
+      : undefined;
+
     showActionSheetWithOptions(
       {
         options,
@@ -91,7 +97,9 @@ export default class ShowActionSheetButton extends React.PureComponent<Props> {
         // Android only
         titleTextStyle,
         // Android only
-        messageTextStyle, // Android only
+        messageTextStyle,
+        // Android only,
+        containerStyle,
       },
       buttonIndex => {
         // Do something here depending on the button index selected

src/ActionSheet/ActionGroup.tsx

@@ -25,7 +25,7 @@ export default class ActionGroup extends React.Component<Props> {
 
   render() {
     return (
-      <View style={styles.groupContainer}>
+      <View style={[styles.groupContainer, this.props.containerStyle]}>
         {this._renderTitleContent()}
         <ScrollView>{this._renderOptionViews()}</ScrollView>
       </View>

src/ActionSheet/index.tsx

@@ -96,6 +96,7 @@ export default class ActionSheet extends React.Component<Props, State> {
       message,
       messageTextStyle,
       showSeparators,
+      containerStyle,
       separatorStyle,
     } = options;
     return (
@@ -132,6 +133,7 @@ export default class ActionSheet extends React.Component<Props, State> {
               message={message || undefined}
               messageTextStyle={messageTextStyle}
               showSeparators={showSeparators}
+              containerStyle={containerStyle}
               separatorStyle={separatorStyle}
             />
           </View>

src/types.ts

@@ -23,5 +23,6 @@ export interface ActionSheetOptions extends ActionSheetIOSOptions {
   titleTextStyle?: TextStyle;
   messageTextStyle?: TextStyle;
   showSeparators?: boolean;
+  containerStyle?: ViewStyle;
   separatorStyle?: ViewStyle;
 }