Skip to content

Instantly share code, notes, and snippets.

@ezha86
Last active May 25, 2017 07:26
Show Gist options
  • Save ezha86/384083e89e5f119fe3ce93d359057298 to your computer and use it in GitHub Desktop.
Save ezha86/384083e89e5f119fe3ce93d359057298 to your computer and use it in GitHub Desktop.
changing modal content style
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { DatePickerIOS, Text, TouchableOpacity, View } from 'react-native';
import ReactNativeModal from 'react-native-modal';
import styles from './index.style';
export default class CustomDatePickerIOS extends Component {
static propTypes = {
cancelTextIOS: PropTypes.string,
confirmTextIOS: PropTypes.string,
customCancelButtonIOS: PropTypes.node,
customConfirmButtonIOS: PropTypes.node,
customConfirmButtonWhileInteractingIOS: PropTypes.node,
customTitleContainerIOS: PropTypes.node,
------===== contentContainerStyleIOS: PropTypes.any, =======------------------- added this
datePickerContainerStyleIOS: PropTypes.any,
date: PropTypes.instanceOf(Date),
mode: PropTypes.oneOf(['date', 'time', 'datetime']),
onConfirm: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired,
titleIOS: PropTypes.string,
isVisible: PropTypes.bool,
};
static defaultProps = {
cancelTextIOS: 'Cancel',
confirmTextIOS: 'Confirm',
date: new Date(),
mode: 'date',
titleIOS: 'Pick a date',
isVisible: false,
};
state = {
date: this.props.date,
userIsInteractingWithPicker: false,
};
componentWillReceiveProps(nextProps) {
if (this.props.date !== nextProps.date) {
this.setState({
date: nextProps.date,
});
}
}
_handleConfirm = () => this.props.onConfirm(this.state.date);
_handleDateChange = date => {
this.setState({
date,
userIsInteractingWithPicker: false,
});
};
_handleUserTouchInit = () => {
this.setState({
userIsInteractingWithPicker: true,
});
return false;
};
render() {
const {
onCancel,
isVisible,
mode,
titleIOS,
confirmTextIOS,
cancelTextIOS,
customCancelButtonIOS,
customConfirmButtonIOS,
customConfirmButtonWhileInteractingIOS,
customTitleContainerIOS,
datePickerContainerStyleIOS,
--------========== contentContainerStyleIOS, =======------------------- and this
date,
...otherProps
} = this.props;
const titleContainer = (
<View style={styles.titleContainer}>
<Text style={styles.title}>{titleIOS}</Text>
</View>
);
let confirmButton;
// Interested PR: https://github.com/mmazzarolo/react-native-modal-datetime-picker/pull/40
// Issue on React-Native: https://github.com/facebook/react-native/issues/8169
// Up until now when the user interacted with the picker, if he tapped on the confirm button,
// the state was not yet changed and thus the picked value would be old and miss-leading.
// DatePickerIOS does not update on the fly, and before it even manages to dispatch an update,
// our component is unmounted and thus the state is lost.
// We no longer allow our user to tap the confirm button unless the picker is still.
// They can always tap the cancel button anyway.
if (customConfirmButtonIOS) {
if (customConfirmButtonWhileInteractingIOS && this.state.userIsInteractingWithPicker) {
confirmButton = customConfirmButtonWhileInteractingIOS;
} else {
confirmButton = customConfirmButtonIOS;
}
} else {
confirmButton = <Text style={styles.confirmText}>{confirmTextIOS}</Text>;
}
const cancelButton = <Text style={styles.cancelText}>{cancelTextIOS}</Text>;
return (
-----===== <ReactNativeModal isVisible={isVisible}
style={[styles.contentContainer, contentContainerStyleIOS]}> =======------------------- and this
<View style={[styles.datepickerContainer, datePickerContainerStyleIOS]}>
{customTitleContainerIOS || titleContainer}
<View onStartShouldSetResponderCapture={this._handleUserTouchInit}>
<DatePickerIOS
date={this.state.date}
mode={mode}
onDateChange={this._handleDateChange}
{...otherProps}
/>
</View>
<View style={styles.confirmButton}>
<TouchableOpacity
onPress={this._handleConfirm}
disabled={this.state.userIsInteractingWithPicker}
>
{confirmButton}
</TouchableOpacity>
</View>
</View>
<View style={styles.cancelButton}>
<TouchableOpacity onPress={onCancel}>
{customCancelButtonIOS || cancelButton}
</TouchableOpacity>
</View>
</ReactNativeModal>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment