Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
react-native-month-year-picker
Advanced tools
React Native Month Picker component for iOS & Android
React Native month picker component for iOS and Android.
UI Mode | Android | iOS |
---|---|---|
Light | ||
Dark |
$ npm install react-native-month-year-picker --save
or
$ yarn add react-native-month-year-picker
As react-native@0.60.0 or above supports autolinking, so there is no need to run linking process. Read more about autolinking here.
CocoaPods on iOS needs this extra step
npx pod-install
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 = useCallback((value) => setShow(value), []);
const onValueChange = useCallback(
(event, newDate) => {
const selectedDate = newDate || date;
showPicker(false);
setDate(selectedDate);
},
[date, showPicker],
);
return (
<SafeAreaView>
<Text>Month Year Picker Example</Text>
<Text>{moment(date, "MM-YYYY")}</Text>
<TouchableOpacity onPress={() => showPicker(true)}>
<Text>OPEN</Text>
</TouchableOpacity>
{show && (
<MonthPicker
onChange={onValueChange}
value={date}
minimumDate={new Date()}
maximumDate={new Date(2025, 5)}
locale="ko"
/>
)}
</SafeAreaView>
);
};
export default App;
onChange
(optional
)Date change handler.
This is called when the user changes the date in the UI. It receives the event and the date as parameters.
setDate = (event, date) => {};
<RNMonthPicker onChange={this.setDate} />;
Events returned by onChange function:
import { ACTION_DATE_SET, ACTION_DISMISSED, ACTION_NEUTRAL } from 'react-native-month-year-picker';
...
onValueChange = (event, newDate) => {
switch(event) {
case ACTION_DATE_SET:
onSuccess(newDate);
break;
case ACTION_NEUTRAL:
onNeutral(newDate);
break;
case ACTION_DISMISSED:
default:
onCancel(); //when ACTION_DISMISSED new date will be undefined
}
}
...
value
(required
)Defines the date value used in the component.
<RNMonthPicker value={new Date()} />
locale
(optional
)Defines the month list locale. If not sent, it defaults to device's language.
<RNMonthPicker locale="ru" />
mode
(optional
)Defines the month list display mode. It could be either full
, short
, number
or shortNumber
. Default full
.
mode | display |
---|---|
full | September |
short | Sep |
number | 09 |
shortNumber | 9 |
<RNMonthPicker mode="number" />
autoTheme
(optional
)Enables phone's UI Mode color recognition; for Android 10+ and iOS 13+. Lower OS versions will always be Light Mode. Default true
.
<RNMonthPicker autoTheme={false} />
maximumDate
(optional
)Defines the maximum date that can be selected. Use year and month constructor.
<RNMonthPicker maximumDate={new Date(2030, 10)} />
minimumDate
(optional
)Defines the minimum date that can be selected. Use year and month constructor.
<RNMonthPicker minimumDate={new Date(2020, 5)} />
okButton
(optional
)Picker modal confirmation button text. Default Done
.
<RNMonthPicker okButton="Confirm" />
cancelButton
(optional
)Picker modal cancelation button text. Default Cancel
.
<RNMonthPicker cancelButton="Abort" />
neutralButton
(optional
)Picker modal neutral button text. If not sent, button won't appear. Default null
.
<RNMonthPicker neutralButton="Delete" />
yarn pod:install
.yarn start
to start Metro Bundler.yarn run:ios
or yarn run:android
.FAQs
React Native Month Picker component for iOS & Android
The npm package react-native-month-year-picker receives a total of 5,775 weekly downloads. As such, react-native-month-year-picker popularity was classified as popular.
We found that react-native-month-year-picker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.