Added property "fadeToColor"

android/src/main/java/com/henninghall/date_picker/DatePickerManager.java

@@ -62,10 +62,9 @@ public class DatePickerManager extends SimpleViewManager  {
     view.setMaximumDate(Utils.unixToDate(date));
   }
 
-  @ReactProp(name = "userStyle")
-  public void setUserStyle(PickerView view, @Nullable ReadableMap style) {
-    view.style.set(style);
-    Log.v("style", "s");
+  @ReactProp(name = "fadeToColor")
+  public void setFadeToColor(PickerView view, @Nullable String color) {
+    view.style.setFadeToColor(color);
   }
 
   @ReactProp(name = "minuteInterval")

android/src/main/java/com/henninghall/date_picker/Style.java

@@ -4,23 +4,32 @@ import android.graphics.Color;
 import android.graphics.drawable.GradientDrawable;
 import android.widget.ImageView;
 
-import com.facebook.react.bridge.ReadableMap;
-
 
 class Style {
-    private final GradientDrawable gradient;
+    private final GradientDrawable gradientBottom;
+    private final GradientDrawable gradientTop;
 
     public Style(PickerView pickerView) {
         ImageView overlayTop = (ImageView) pickerView.findViewById(R.id.overlay_top);
-        this.gradient =  (GradientDrawable) overlayTop.getDrawable();
+        ImageView overlayBottom = (ImageView) pickerView.findViewById(R.id.overlay_bottom);
+        this.gradientTop =  (GradientDrawable) overlayTop.getDrawable();
+        this.gradientBottom =  (GradientDrawable) overlayBottom.getDrawable();
     }
 
-    public void set(ReadableMap style) {
-        String color = style.getString("backgroundColor");
-        if(color != null && color.length() == 7) {
+    public void setFadeToColor(String color) {
+        int alpha = validColor(color) ? 255 : 0;
+        gradientTop.setAlpha(alpha);
+        gradientBottom.setAlpha(alpha);
+        if(validColor(color)) {
             int startColor = Color.parseColor("#FF"+ color.substring(1));
             int endColor = Color.parseColor("#00" + color.substring(1));
-            gradient.setColors(new int[] {startColor, endColor});
+            gradientTop.setColors(new int[] {startColor, endColor});
+            gradientBottom.setColors(new int[] {startColor, endColor});
         }
     }
+
+    private boolean validColor(String color){
+        return color != null && color.length() == 7;
+    }
+
 }

example/App.js

@@ -30,7 +30,7 @@ export default class App extends Component {
 
   renderPicker = () => {
     const Picker = examples[this.state.picker].component;
-    return <Picker backgroundColor={this.state.color} setBackground={this.setBackgroundColor} />
+    return <Picker backgroundColor={this.state.backgroundColor} setBackground={this.setBackgroundColor} />
   }
 
   renderButtons = () =>

example/examples/Advanced.js

@@ -10,7 +10,7 @@ Date.prototype.addHours = function (h) {
   return this;
 }
 
-export default class App extends Component {
+export default class Advanced extends Component {
 
   state = {
     chosenDate: new Date(),
@@ -20,7 +20,6 @@ export default class App extends Component {
 
   render() {
     const result = locales.filter(createFilter(this.state.searchTerm)).slice(0, 5);
-    const { backgroundColor } = this.props;
     return (
       <View style={styles.container}>
         <DatePicker
@@ -30,7 +29,7 @@ export default class App extends Component {
           minuteInterval={1}
           minimumDate={new Date()}
           maximumDate={(new Date()).addHours(24 * 5)}
-          style={this.style()}
+          fadeToColor={this.props.backgroundColor}
         />
 
         <Text>Current locale: {this.state.locale}</Text>
@@ -63,7 +62,6 @@ export default class App extends Component {
   }
   setDate = (newDate) => this.setState({ chosenDate: newDate })
   searchUpdated = (term) => this.setState({ searchTerm: term })
-  style = () => this.props.backgroundColor && ({ backgroundColor: this.props.backgroundColor })
 
 }
 

index.js

@@ -17,9 +17,14 @@ const ios = Platform.OS === 'ios';
 const NativeDatePicker = requireNativeComponent(`DatePickerManager`, DatePickerAndroid, { nativeOnly: { onChange: true } });
 
 class DatePickerAndroid extends React.Component {
+    static propTypes = {
+        ...DatePickerIOS.propTypes,
+        fadeToColor: PropTypes.string,
+    }
     static defaultProps = { 
         mode: 'datetime',
         minuteInterval: 1,
+        fadeToColor: '#ffffff',
      };
      
     _onChange = e => this.props.onDateChange(new Date(parseInt(e.nativeEvent.date)));
@@ -32,7 +37,7 @@ class DatePickerAndroid extends React.Component {
             maximumDate={this._maximumDate()}
             date={this.props.date.getTime()}            
             onChange={this._onChange}
-            userStyle={this.props.style}
+            fadeToColor={this.props.fadeToColor}
             style={[styles.picker, this.props.style]}
         />
     )
@@ -50,6 +55,4 @@ const styles = StyleSheet.create({
     }
 })
 
-DatePickerAndroid.propTypes = DatePickerIOS.propTypes;
-
 export default ios ? DatePickerIOSWithSize : DatePickerAndroid;