Dialog displays multiple times in list view about react-native-modal-datetime-picker HOT 7 CLOSED

Hi!
First of all, you should have only a single picker here (just put it in the render, after the rows):

return (
  <View>
    <ScrollView>
      {this.renderRows()}
    </ScrollView>
    <DateTimePicker
      isVisible={this.state.isDateTimePickerVisible}
      onConfirm={this._handleDatePicked}
      onCancel={this._hideDateTimePicker}
    />
  </View>
);

Also, any reason you're not using a listview instead of the scrollview? :)

from react-native-modal-datetime-picker.

With a single picker how can I set the default date for each row? I will have a long list so want to be able to scroll.

Railton.

from react-native-modal-datetime-picker.

FYI, this is not really related to the component itself, it is a "react" question 👍

Anyway, your best option in my opinion is to set the DateTimePicker date dynamically before showing it.
For example you can add to the state a variable with the date being edited:

state: {
  isDateTimePickerVisible: false,
  dateBeingEdited: null
}

// In the render
<DateTimePicker
  date={this.state.dateBeingEdited}
  isVisible={this.state.isDateTimePickerVisible}
  onConfirm={this._handleDatePicked}
  onCancel={this._hideDateTimePicker} 
/>

And act before showing/hiding the component:

_showDateTimePicker = (date) => this.setState({ dateBeingEdited: date, isDateTimePickerVisible: true})

_hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false })

However you should really take a look at the react-native official listview implementation, it would help you in handling better you'r list! 🍔

from react-native-modal-datetime-picker.

Thanks Matteo, that works! I will look into the use of listview.

Railton.

from react-native-modal-datetime-picker.

Glad it worked :)

from react-native-modal-datetime-picker.

Hi This is not working.

if i click on the list item the time is still the same supplied by new Date() for all list items. Component is not updating.

what did i miss?

Here is my code

this.state={
     initialTime : new Date()
}

_showDateTimePicker = (date) => this.setState({initialTime: date, isDateTimePickerVisible: true })

<ListItem  key={ event.id } onPress={()=>{
        	         this._showDateTimePicker(new Date(event.slot)) }>
<Text>{event.name}</Text>
</ListItem>

<DateTimePicker
	mode='time'
        date={this.state.initialTime}
	titleIOS='Time slot'
        isVisible={this.state.isDateTimePickerVisible}
       onConfirm={this._handleDatePicked}
       onCancel={this._hideDateTimePicker} />

from react-native-modal-datetime-picker.

how can we use two " time picker " in single screen?

from react-native-modal-datetime-picker.