fix(readme): Added new ui mode screenshots

.npmignore

@@ -1,10 +1,12 @@
-.circleci
+.github
 example
 screenshots
 
 .eslintrc.js
 .prettierrc.js
 .releaserc
+package-lock.json
+yarn.lock
 
 # Xcode
 #

README.md

@@ -1,9 +1,10 @@
 # react-native-month-year-picker
-React Native month picker component for iOS and Android
+React Native month picker component for iOS and Android.
 
-| android | iOS |
-| --- | --- |
-| <img src="./screenshots/android.png" width="150">|<img src="./screenshots/ios.png" width="150">
+| UI Mode | Android | iOS |
+| --- | --- | --- |
+| <p align="center">***Light*** | <img align="center" src="./screenshots/android_light.png" width="120">|<img align="center" src="./screenshots/ios_light.png" width="120">
+| <p align="center">***Dark*** | <img align="center" src="./screenshots/android_dark.png" width="120">|<img align="center" src="./screenshots/ios_dark.png" width="120">
 
 ![react-native-month-year-picker](https://github.com/gusparis/react-native-month-year-picker/workflows/react-native-month-year-picker/badge.svg)
 
@@ -28,26 +29,29 @@ npx pod-install
 ```
 ## Usage
 ```javascript
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { View, SafeAreaView, Text } from 'react-native';
 import MonthPicker from 'react-native-month-year-picker';
 
 const App = () => {
   const [date, setDate] = useState(new Date());
   const [show, setShow] = useState(false);
 
-  const showPicker = (value) => setShow(value);
+  const showPicker = useCallback((value) => setShow(value), []);
 
-  const onValueChange = (event, newDate) => {
-    const selectedDate = newDate || date;
+  const onValueChange = useCallback(
+    (event, newDate) => {
+      const selectedDate = newDate || date;
 
-    showPicker(false);
-    setDate(selectedDate);
-  };
+      showPicker(false);
+      setDate(selectedDate);
+    },
+    [date, showPicker],
+  );
 
   return (
     <SafeAreaView>
-      <Text>Month Picker Example</Text>
+      <Text>Month Year Picker Example</Text>
       <Text>{moment(date, "MM-YYYY")}</Text>
       <TouchableOpacity onPress={() => showPicker(true)}>
         <Text>OPEN</Text>
@@ -58,6 +62,7 @@ const App = () => {
           value={date}
           minimumDate={new Date()}
           maximumDate={new Date(2025, 5)}
+          enableAutoDarkMode={false}
         />
       )}
     </SafeAreaView>
@@ -164,7 +169,7 @@ Picker modal cancelation button text style.
 
 #### `enableAutoDarkMode`
 
-Enables auto Dark Mode recognition. If set to `false` for iOS < v13.0 and Android < 10, it will always display Light Mode. Default `true`.
+Enables auto Dark Mode recognition. If set to `false` or **iOS < v13.0** and **Android < 10**, it will display Light Mode. Default `true`.
 
 ```js
 <RNMonthPicker enableAutoDarkMode={false} />

example/App.js

@@ -6,7 +6,7 @@
  * @flow strict-local
  */
 
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { SafeAreaView, StyleSheet, Text, TouchableOpacity } from 'react-native';
 import moment from 'moment';
 
@@ -17,15 +17,18 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'lightyellow',
+    backgroundColor: '#dfe6e9',
   },
   button: {
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'lightgrey',
+    backgroundColor: '#b2bec3',
     borderRadius: 4,
     padding: 10,
   },
+  buttonText: {
+    color: '#2d3436',
+  },
 });
 
 const DEFAULT_FORMAT = 'MM-YYYY';
@@ -35,31 +38,34 @@ const App = () => {
   const [date, setDate] = useState(new Date());
   const [show, setShow] = useState(false);
 
-  const showPicker = (value) => setShow(value);
+  const showPicker = useCallback((value) => setShow(value), []);
 
-  const onValueChange = (event, newDate) => {
-    const selectedDate = newDate || date;
+  const onValueChange = useCallback(
+    (event, newDate) => {
+      const selectedDate = newDate || date;
 
-    showPicker(false);
-    setDate(selectedDate);
-  };
+      showPicker(false);
+      setDate(selectedDate);
+    },
+    [date, showPicker],
+  );
 
   return (
     <SafeAreaView style={styles.container}>
-      <Text>Month Picker Example</Text>
+      <Text>Month Year Picker Example</Text>
       <Text>{moment(date, DEFAULT_FORMAT).format(DEFAULT_OUTPUT_FORMAT)}</Text>
       <TouchableOpacity onPress={() => showPicker(true)} style={styles.button}>
-        <Text>OPEN</Text>
+        <Text style={styles.buttonText}>OPEN</Text>
       </TouchableOpacity>
-      {show ? (
+      {show && (
         <MonthPicker
           onChange={onValueChange}
           value={date}
           minimumDate={new Date()}
           maximumDate={new Date(2025, 5)}
           enableAutoDarkMode={false}
         />
-      ) : null}
+      )}
     </SafeAreaView>
   );
 };

src/MonthPicker.android.js

@@ -22,18 +22,14 @@ const MonthPicker = ({
   const getLongFromDate = (selectedValue) =>
     moment(selectedValue, outputFormat || DEFAULT_OUTPUT_FORMAT).valueOf();
 
-  let picker;
-
-  picker = RNMonthPickerDialogModule.open({
+  RNMonthPickerDialogModule.open({
     value: getLongFromDate(value),
     minimumDate: getLongFromDate(minimumDate),
     maximumDate: getLongFromDate(maximumDate),
     okButton,
     cancelButton,
     enableAutoDarkMode,
-  });
-
-  picker.then(
+  }).then(
     function resolve({ action, year, month }) {
       let date;
       switch (action) {