README
React Native Ultimate Modal Picker
- Features
- Built With
- Pending Items
- Picker Types (iOS)
- Picker Types (Android)
- Getting Started
- Props
- Building & Publishing
- Changelog
Features
- ✅ iOS/Android
- ✅ Dark Mode
- ✅ Custom Styles
- ✅ Built with TypeScript
- ✅ Built with React Hooks
Built With
- TypeScript - Programming Language
- React Native - Mobile (iOS/Android) Framework
- React Native Slide Modal - Modal
- React Native Picker - Native Picker
- React Native Datetime Picker - Native Date/Time Picker
- React Hooks - Functional Component State/Lifecycle Methods
Pending Items
- Fix Android issues
Picker Types (iOS)
1. Date
![](https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/HEAD/assets/screenshots/ios/iosDate.gif)
2. Time
![](https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/HEAD/assets/screenshots/ios/iosTime.gif)
3. Date/Time (iOS Only)
![](https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/HEAD/assets/screenshots/ios/iosDateTime.gif)
4. List
![](https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/HEAD/assets/screenshots/ios/iosList.gif)
5. State (50 United States)
![](https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/HEAD/assets/screenshots/ios/iosState.gif)
Picker Types (Android)
1. Date (Mode: Spinner)
![](https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/HEAD/assets/screenshots/android/androidDateSpinner.gif)
2. Date (Mode: Calendar)
![](https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/HEAD/assets/screenshots/android/androidDateCalendar.gif)
3. Time (Mode: Spinner)
![](https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/HEAD/assets/screenshots/android/androidTimeSpinner.gif)
4. Time (Mode: Clock)
![](https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/HEAD/assets/screenshots/android/androidTimeClock.gif)
5. List
![](https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/HEAD/assets/screenshots/android/androidList.gif)
6. State (50 United States)
![](https://raw.githubusercontent.com/jefelewis/react-native-ultimate-modal-picker/HEAD/assets/screenshots/android/androidState.gif)
Getting Started
1. Install Package:
npm i react-native-ultimate-modal-picker
2. Install additional dependencies:
Note: This NPM Package uses the Native Modules @react-native-community/datetimepicker
and @react-native-picker/picker
, so it must be installed in your project.
npm i @react-native-community/datetimepicker @react-native-picker/picker
3. Install Cocoapods:
cd ios
pod install
4. Add Example Code:
// Imports: Dependencies
import React, { useState } from 'react';
import { SafeAreaView, ScrollView } from 'react-native';
import {
// Pickers
PickerTime,
PickerDate,
PickerDateTime,
PickerDateRange,
// Dropdowns
DropdownList,
DropdownMeasurements,
DropdownNumber,
DropdownState,
// TypeScript Types
PickerItem,
} from 'react-native-ultimate-modal-picker';
// React Native App
const App: React.FC = (): JSX.Element => {
// React Hooks: State
// Pickers
const [ date, setDate ] = useState<Date>(new Date());
const [ time, setTime ] = useState<Date>(new Date());
const [ dateTime, setDateTime ] = useState<Date>(new Date());
const [ fromDate, setFromDate ] = useState<Date>(new Date());
const [ toDate, setToDate ] = useState<Date>(new Date());
// Dropdowns
const [ listValue, setListValue ] = useState<string>('');
const [ numberValue, setNumberValue ] = useState<string>('');
const [ measurementValue, setMeasurementValue ] = useState<string>('');
const [ stateValue, setStateValue ] = useState<string>('');
// Items
const items: Array<PickerItem> = [
{ label: '1', value: '1' },
{ label: '2', value: '2' },
{ label: '3', value: '3' },
{ label: '4', value: '4' },
{ label: '5', value: '5' },
{ label: '6', value: '6' },
{ label: '7', value: '7' },
{ label: '8', value: '8' },
{ label: '9', value: '9' },
{ label: '10', value: '10' },
];
return (
<SafeAreaView style={{ display: 'flex', flex: 1 }}>
<ScrollView>
{/* Picker: Date (Modes: spinner/calendar) */}
<PickerDate
title="Date"
onChange={(date: Date) => setDate(date)}
mode="spinner"
/>
{/* Picker: Time (Modes: spinner/clock) */}
<PickerTime
title="Time"
onChange={(date: Date) => setTime(date)}
mode="spinner"
/>
{/* Picker: Date Time (iOS Only) */}
<PickerDateTime
title="Date/Time"
onChange={(date: Date) => setDateTime(date)}
/>
{/* Picker (Date Range) */}
<PickerDateRange
title="Date Range"
onFromChange={(date: Date) => setFromDate(date)}
onToChange={(date: Date) => setToDate(date)}
mode="spinner"
/>
{/* Dropdown: List */}
<DropdownList
title="List"
items={items}
onChange={(value: string) => setListValue(value)}
/>
{/* Dropdown: Number */}
<DropdownNumber
title="Number"
onChange={(value: string) => setNumberValue(value)}
/>
{/* Dropdown: Measurements */}
<DropdownMeasurements
title="Measurement"
onChange={(value: string) => setMeasurementValue(value)}
/>
{/* Dropdown: State */}
<DropdownState
title="State"
onChange={(value: string) => setStateValue(value)}
/>
{/* Picker: Date (Custom Styles) */}
<PickerDate
title="Date (Custom Styles)"
onChange={(date: Date) => setDate(date)}
mode="spinner"
customStyleContainer={{
containerLight: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
containerDark: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleLabelText={{
labelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
labelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
/>
{/* Picker: Time (Custom Styles) */}
<PickerTime
title="Time (Custom Styles)"
onChange={(date: Date) => setTime(date)}
mode="spinner"
customStyleContainer={{
containerLight: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
containerDark: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleLabelText={{
labelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
labelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
/>
{/* Picker: Date Time (Custom Styles) */}
<PickerDateTime
title="Date/Time (Custom Styles)"
onChange={(date: Date) => setDateTime(date)}
customStyleContainer={{
containerLight: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
containerDark: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleLabelText={{
labelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
labelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
/>
{/* Picker (Custom Styles) */}
<PickerDateRange
title="Date Range"
onFromChange={(date: Date) => setFromDate(date)}
onToChange={(date: Date) => setToDate(date)}
mode="spinner"
customStyleContainer={{
containerLight: {
backgroundColor: '#000000',
},
containerDark: {
backgroundColor: '#000000',
},
}}
customStyleTitleText={{
titleTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
titleTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleLabelText={{
labelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
labelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleDivider={{
dividerLight: {
marginTop: 16,
marginBottom: 16,
borderBottomWidth: 2,
borderColor: 'red',
},
dividerDark: {
marginTop: 16,
marginBottom: 16,
borderBottomWidth: 2,
borderColor: 'red',
},
}}
/>
{/* Dropdown: List (Custom Styles) */}
<DropdownList
title="List (Custom Styles)"
items={items}
onChange={(value: string) => setListValue(value)}
customStyleContainer={{
containerLight: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
containerDark: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleLabelText={{
labelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
labelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleFieldText={{
fieldTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
fieldTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleModalHeaderContainer={{
modalHeaderContainerLight: {
height: 55,
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
modalHeaderContainerDark: {
height: 55,
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleCancelText={{
cancelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
color: 'red',
},
cancelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
color: 'red',
},
}}
customStyleDoneText={{
doneTextLight: {
color: 'red',
},
doneTextDark: {
color: 'red',
},
}}
customStyleModalContentContainer={{
modalContentContainerLight: {
height: 400,
backgroundColor: '#000000',
},
modalContentContainerDark: {
height: 400,
backgroundColor: '#000000',
},
}}
customStylePickerItemText={{
pickerItemTextLight: {
color: 'red',
},
pickerItemTextDark: {
color: 'red',
}
}}
/>
{/* Dropdown: Number (Custom Styles) */}
<DropdownNumber
title="Number"
onChange={(value: string) => setNumberValue(value)}
customStyleContainer={{
containerLight: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
containerDark: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleLabelText={{
labelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
labelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleFieldText={{
fieldTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
fieldTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleModalHeaderContainer={{
modalHeaderContainerLight: {
height: 55,
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
modalHeaderContainerDark: {
height: 55,
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleCancelText={{
cancelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
color: 'red',
},
cancelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
color: 'red',
},
}}
customStyleDoneText={{
doneTextLight: {
color: 'red',
},
doneTextDark: {
color: 'red',
},
}}
customStyleModalContentContainer={{
modalContentContainerLight: {
height: 400,
backgroundColor: '#000000',
},
modalContentContainerDark: {
height: 400,
backgroundColor: '#000000',
},
}}
customStylePickerItemText={{
pickerItemTextLight: {
color: 'red',
},
pickerItemTextDark: {
color: 'red',
}
}}
/>
{/* Dropdown: Measurements (Custom Styles) */}
<DropdownMeasurements
title="Measurement"
onChange={(value: string) => setMeasurementValue(value)}
customStyleContainer={{
containerLight: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
containerDark: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleLabelText={{
labelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
labelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleFieldText={{
fieldTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
fieldTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleModalHeaderContainer={{
modalHeaderContainerLight: {
height: 55,
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
modalHeaderContainerDark: {
height: 55,
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleCancelText={{
cancelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
color: 'red',
},
cancelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
color: 'red',
},
}}
customStyleDoneText={{
doneTextLight: {
color: 'red',
},
doneTextDark: {
color: 'red',
},
}}
customStyleModalContentContainer={{
modalContentContainerLight: {
height: 400,
backgroundColor: '#000000',
},
modalContentContainerDark: {
height: 400,
backgroundColor: '#000000',
},
}}
customStylePickerItemText={{
pickerItemTextLight: {
color: 'red',
},
pickerItemTextDark: {
color: 'red',
}
}}
/>
{/* Dropdown: State (Custom Styles) */}
<DropdownState
title="State"
onChange={(value: string) => setStateValue(value)}
customStyleContainer={{
containerLight: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
containerDark: {
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleLabelText={{
labelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
labelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleFieldText={{
fieldTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
fieldTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
textTransform: 'lowercase',
color: 'red',
},
}}
customStyleModalHeaderContainer={{
modalHeaderContainerLight: {
height: 55,
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
modalHeaderContainerDark: {
height: 55,
backgroundColor: '#000000',
borderColor: '#000000',
borderBottomWidth: 2,
},
}}
customStyleCancelText={{
cancelTextLight: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
color: 'red',
},
cancelTextDark: {
fontFamily: 'System',
fontSize: 22,
fontWeight: '800',
color: 'red',
},
}}
customStyleDoneText={{
doneTextLight: {
color: 'red',
},
doneTextDark: {
color: 'red',
},
}}
customStyleModalContentContainer={{
modalContentContainerLight: {
height: 400,
backgroundColor: '#000000',
},
modalContentContainerDark: {
height: 400,
backgroundColor: '#000000',
},
}}
customStylePickerItemText={{
pickerItemTextLight: {
color: 'red',
},
pickerItemTextDark: {
color: 'red',
}
}}
/>
</ScrollView>
</SafeAreaView>
);
};
// Exports
export default App;
6. Run Project:
Android
react-native run-android
iOS
react-native run-ios
Props
Building & Publishing
Build
npm run build
Publish
npm publish
Changelog
[1.1.0] - 5/26/2021 - BREAKING CHANGES
Changed
- Add
cancelText
anddoneText
optional props to alldropdowns
.
[1.0.0] - 5/26/2021 - BREAKING CHANGES
Changed
- Changed
import React from 'react
toimport * as React from 'react
. - Updated example code in
README
.
[0.3.14] - 5/24/2021 - BREAKING CHANGES
Added
- Added
@react-native-picker/picker
as apeerDependency
.
Changed
- Changed
"jsx": "react-native"
to"jsx": "react-jsx"
intsconfig.json
.
[0.3.13] - 5/24/2021 - BREAKING CHANGES
Changed
- Updated Getting Started in
README
.
Added
- Added
@react-native-picker/picker
as adevDependency
andpeerDependency
.
[0.3.12] - 5/24/2021 - BREAKING CHANGES
Changed
- Updated Getting Started in
README
.
Added
- Added
react-native-community/datetimepicker
as adevDependency
.
[0.3.9] - 5/22/2021 - BREAKING CHANGES
Added
- Added
@react-native-community/datetimepicker
as apeerDependency
.
[0.3.8] - 5/22/2021 - BREAKING CHANGES
Added
- Added support to
src/components/pickers
foriOS 14
. - Added
react-native-slide-modal
topackage.json
.
[0.3.7] - 5/22/2021 - BREAKING CHANGES
Changed
- Changed
peerDependency
react
from"react": "*"
to"react": ">=16.8.3"
. - Changed
peerDependency
react-native
from"react-native": "*"
to"react-native": ">=0.60"
. - Updated example code in
README
.
[0.3.6] - 5/22/2021 - BREAKING CHANGES
Added
- Added
react-native-slide-modal
dependency. - Added
.npmignore
. - Added Props section to
README
.
Changed
- Changed
src/index.js
tosrc/index.tsx
. - Changed
package.json
build script tocd src && tsc && cp ../package.json && Echo Build completed!
. - Updated
package.json
dependencies. - Updated
tsconfig.json
. - Fixed
peerDependencies
issue.
Removed
- Removed
react-native-modal
dependency. - Removed React Native dependencies.
[0.3.5] - 5/16/2021 - BREAKING CHANGES
Changed
- Fixed
peerDependencies
issue.
[0.3.4] - 5/13/2021 - BREAKING CHANGES
Changed
- Changed
@react-native-community/datetimepicker
topeerDependency
. - Changed
@react-native-picker/picker
topeerDependency
. - Changed
react-native-modal
topeerDependency
. - Updated
README
Getting Started foriOS
pods. - Updated
README
Getting Started forAndroid
dependencies.
[0.3.3] - 5/13/2021 - BREAKING CHANGES
Added
- Added
useState
toApp.tsx
and state management fro dropdowns and pickers.
Changed
- Changed
onChange(item: string)
toonChange(item: value)
. - Changed
onChange(state: string)
toonChange(item: value)
.
[0.3.2] - 5/13/2021 - BREAKING CHANGES
Changed
- Fixed
onChange
,onFromChange
,onToChange
issues.
[0.3.1] - 5/13/2021 - BREAKING CHANGES
Changed
- Fixed
onChange
,onFromChange
,onToChange
issues.
[0.3.0] - 5/12/2021 - BREAKING CHANGES
Added
- Added custom style prop
customStyleContainer
. - Added custom style prop
customStyleTitleText
. - Added custom style prop
customStyleLabelText
. - Added custom style prop
customStyleFieldText
. - Added custom style prop
customStyleModalHeaderContainer
. - Added custom style prop
customStyleCancelText
. - Added custom style prop
customStyleDoneText
. - Added custom style prop
customStyleModalContentContainer
. - Added custom style prop
customStylePickerItemText
. - Added custom style prop
customStyleDivider
.
Changed
- Updated to
iOS 14
styling. - Updated
react
dependency toReact 17
. - Updated
react-native
dependency toReact 0.64
. - Updated
react-native-modal
dependency. - Updated
@react-native-community/datetimepicker
dependency. - Updated
@react-native-community/picker
dependency with@react-native-picker/picker
. - Changed
DatePicker
toPickerDate
. - Changed
DateTimePicker
toPickerDateTime
. - Changed
DateRangePicker
toPickerDateRange
. - Changed
TimePicker
toPickerTime
. - Changed
ListPicker
toDropdownList
. - Changed
CookingMeasurementsPicker
toDropdownMeasurements
. - Changed
NumberPicker
toDropdownNumber
. - Changed
StatePicker
toDropdownState
.
Removed
- Removed to
StatePickerSmall
.
[0.2.2] - 8/10/2020
Added
- Added Dark Mode support. Please upgrade to
React Native 0.62
for this to work. - Added
@react-native-community/picker
dependency (Picker
is soon to be deprecated).
[0.2.1] - 8/10/2020
Changed
- Updated
react
dependency. - Updated
react-native
dependency. - Updated
react-native-modal
dependency.
Removed
- Removed
moment
dependency.
[0.2.0] - 4/21/2020
Changed
- Updated
@react-native-community/datetimepicker
to2.3.2
. - Removed unnecessary
try/catch
blocks.
[0.1.64] - 3/13/2020
Changed
- Updated dependencies.
[0.1.63] - 3/13/2020
Changed
- Changed
CookingAmountPicker
toCookingAmountPicker
. - Fixed
defaultValue
prop forCookingAmountPicker
andListPicker
.
[0.1.62] - 3/13/2020
Added
- Added
defaultValue
prop forCookingAmountPicker
andListPicker
.
[0.1.59] - 3/5/2020
Changed
- Fixed
selectItem
string/number type issue.
[0.1.59] - 3/5/2020
Added
- Added
NumberPicker
. - Added
CookingAmountPicker
.
Changed
- Increased
inputTitleContainer
width
.
[0.1.58] - 2/7/2020
Changed
- Increased
fieldTextContainer
marginBottom
to12px
.
[0.1.57] - 2/7/2020
Changed
- Fixed
@react-native-community/datetimepicker
^2.1.1
vs2.1.1
issue.
[0.1.56] - 2/7/2020
Changed
- Updated
@react-native-community/datetimepicker
to2.1.1
. - Changing backdrop
opacity
to30%
. - Increased
TouchableOpacity
size forDateRangePicker
. - Increased
pickerHeaderContainer
height
to45px
. - Fixed
README
podspec
issue.
Removed
- Removed
react-native-vector-icons
.
[0.1.55] - 1/28/2020
Changed
- Fixed
onChange
issue. - Done button is now
disabled
unless a new item or state is picked.
[0.1.54] - 1/28/2020
Added
- Adding typings for
onChange
. - Passing initial date to parent component (
useEffect
) for Date, Time, Datetime, and Date Range Pickers.
Changed
- Date Range's
toDate
is now defaulted to "Select."
[0.1.53] - 1/27/2020
Changed
- Fixed
Picker
Done button issue. Done button is nowdisabled
unless new date is picked. - Increased
Picker
container size foriOS
.
Removed
- Removed
async/await
due to that it was not the root cause of the issue.
[0.1.47] - 1/26/2020
Changed
- Fixed
onChange
TypeScript typings.
[0.1.46] - 1/26/2020
Changed
- Fixed React Hook state +
onValueChange
issue due to having the same name of "state."
[0.1.45] - 1/26/2020
Changed
- Added
Keyboard.dismiss()
totoggleModal()
.
[0.1.44] - 1/25/2020
Added
- Added
Keyboard.dismiss()
to work better with form fields.
[0.1.43] - 1/24/2020
Changed
- Fixed
README
Formatting.
[0.1.42] - 1/24/2020
Added
- Added cancel button to
iOS
ListPicker
. - Added test data items for
ListPicker
onREADME
. - Added
props
toApp.tsx
for testing. - Title
props
can be added to anyPicker
. Default titles are shown if noprop
is added.
Changed
- Reformatted
App.tsx
for when testing. - Fixed
onChange
TypeScript Typings. - Updated
README
screenshot GIFs.
[0.1.41] - 1/23/2020
Changed
- Updated
README
for NPM package.
[0.1.40] - 1/23/2020
Added
- Added
podfile
installation instructions toREADME
. - Added cancel button for
iOS
modals.
Changed
- Fixed
if/else
toggle issue. - Fixed
undefined
date issue. - Fixed
onChange
issue. - Changed if statements for
Platform
toif/else
, so only one would ever run.