react-native-cn-month-year-picker/src/MonthPicker.ios.js

React Native Month Picker component for iOS & Android

import React, { useState, useCallback, useEffect } from 'react';
import { View, StyleSheet, Dimensions, Animated, Modal, TouchableOpacity } from 'react-native';
import moment from 'moment';
import invariant from 'invariant';
moment.suppressDeprecationWarnings = true;

import RNMonthPickerView from './RNMonthPickerNativeComponent';
import {
  ACTION_DATE_SET,
  ACTION_DISMISSED,
  ACTION_NEUTRAL,
  NATIVE_FORMAT,
  DEFAULT_MODE,
} from './constants';

const { width } = Dimensions.get('screen'); 
const styles = StyleSheet.create({
  container: {
    width,
    position: 'absolute',
    zIndex: 500,
    bottom: 0,
  },
  pickerContainer: {
    height: 244,
    width,
  },
  picker: { flex: 1 },
});

const MonthPicker = (props) => {    
  return (
    <Modal
    ref={props.ref}
    transparent={true}
    animationType="fade"
    visible={props.visible ? props.visible : props.close}
  >
    <TouchableOpacity style={{ flex: 1, backgroundColor:"#00000077" }} onPress={props.close} />
    <View style={styles.pickerContainer}>
        <RNMonthPickerView
          style={styles.picker}
          value={new Date(moment(props.value, NATIVE_FORMAT).toDate()).getTime()}
          minimumDate={props.minimumDate?.getTime() ?? null}
          maximumDate={props.maximumDate?.getTime() ?? null} 
          onDone={props.close}
          onCancel={props.close}
          maximumDate={props.maximumDate}
          minimumDate={props.minimumDate}
          locale={props.locale ? props.locale : "en"}
          okButton={props.okButton}
          cancelButton={props.cancelButton}
          onChange={(e) => {  
            props.onChange(e.nativeEvent?.newDate)
          }}
        />
      </View>
  </Modal>
      
  );
};

export default MonthPicker;