react-native-datepicker
react-native-datepicker copied to clipboard
xgfe
Warning: componentWillReceiveProps is deprecated and will be removed in the next major version. Use static getDerivedStateFromProps instead
Hello Admin, Please update for the Warning: componentWillReceiveProps is deprecated and will be removed in the next major version. Use static getDerivedStateFromProps instead. I am using React Native 0.60.
In the datepicker.js file located in node_modules/react-native-datepicker/ I changed the "componentWillRecieveProps" function to the following:
componentDidUpdate(prevProps) { if (prevProps.date !== this.props.date) { this.setState({date: this.getDate(this.props.date)}); } }
This fixed the warning for me and the datepicker works as it should be.
I just found this, hope it helps. A react-native datepicker component https://github.com/react-native-community/react-native-datetimepicker
In the datepicker.js file located in node_modules/react-native-datepicker/ I changed the "componentWillRecieveProps" function to the following:
componentDidUpdate(prevProps) { if (prevProps.date !== this.props.date) { this.setState({date: this.getDate(this.props.date)}); } }This fixed the warning for me and the datepicker works as it should be.
But what about publishing the app, how we will access the node_modules?
I made this package https://www.npmjs.com/package/react-native-datepicker-yaya only to solve the warning of the componentWillReceiveProps. Everyone is welcomed to use it instead of this package.
@YahiaBadr Tried to use your fork, but I believe that the package still relies on DatePickerAndroid & DatePickerIOS, which seem to no longer be a part of @react-native-community/datetimepicker. Any chance you had plans to update it?
@YahiaBadr Tried to use your fork, but I believe that the package still relies on DatePickerAndroid & DatePickerIOS, which seem to no longer be a part of
@react-native-community/datetimepicker. Any chance you had plans to update it?
Unfortunately, i tried but it seems it will need some time which i could not have to update this package. However, i made another component based on this package which gives me the same look.
import { View, TextInput, Image } from 'react-native';
import DateTimePickerModal from "react-native-modal-datetime-picker";
import CalenderIcon from "./date_icon.png" //Icon place
const placeHolder = "Select Date";//Placeholder text
class SelectDates extends React.Component {
state = {
date: "",
show: false,
disabled:false,
dateValue: placeHolder,
}
async componentDidMount() {
}
open = () =>{
this.setState({show:true})
}
close = () =>{
this.setState({show:false})
}
render() {
return (
<View style={{flexDirection:"row"}}>
<Image style={{height:35, width:35, marginTop:2.5}} source={CalenderIcon}/>
<TextInput onTouchStart={this.open} editable={!this.state.show} value={this.state.dateValue}
multiline={this.state.dateValue !== placeHolder} textAlignVertical="center"
style={{borderColor:"#F1F1F1", color:"#F1F1F1", borderWidth:1, height:40, width:"40%", textAlign:"center"}}/>
<DateTimePickerModal
// Leave this two as they are
isVisible={this.state.show}
date={this.state.dateValue !== placeHolder?new Date(this.state.dateValue):new Date()}
//Change these to satisfy your code
// mode="datetime"
// onConfirm={(date)=>this.props.onSelect(date)}
// onCancel={this.close}
// minimumDate={new Date()}
// maximumDate={this.state.maxDate}
/>
</View>
);
}
}
export default SelectDates;
@YahiaBadr Tried to use your fork, but I believe that the package still relies on DatePickerAndroid & DatePickerIOS, which seem to no longer be a part of
@react-native-community/datetimepicker. Any chance you had plans to update it?
Or if you have time, i could give you access to update it in the repo and then publish it.
