React Native : Datepickerios inside a Modal ignoring Modal's visibility

Question

Not sure whether it is a bug/quirk or something wrong with my code.

As shown below in my code I have wrapped up a DatePickerIOS inside a Modal.

The modal will initially not be displayed at all. This is controlled via the showmodal state value which is initialized as false.

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableHighlight, Modal, DatePickerIOS } from 'react-native';



export default class Logitem extends Component {

  constructor(props)  {
    super(props);
    const { logstringdate, bmi, weight, logdate } = this.props;
    this.state = {
      date: new Date(),
      weight: '80'
    };
  }

  state = {
    selecteddate: '',
    selectedweight: '',
    showmodal: false

  }

  setModalVisible = (visible) => {
    this.setState({showmodal: visible});
  }

  onWeightClick = () => {
      this.setState({ selecteddate: this.props.logdate, showmodal: true }, () => {

        console.log('Value in props==>' + this.props.logdate);
        console.log('The selecteddate in the state ==> ' + this.state.selecteddate);
      });

    }

    onDateChange(date) {
        this.setState({
          date: date
        });
      }



render() {

  return (

    <View style={styles.containerStyle}>
    <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.showmodal}
          onRequestClose={() => {alert("Modal has been closed.")}}
          >
         <View style={{marginTop: 22}}>
         <DatePickerIOS
           date={this.state.date}
           mode="date"
           onDateChange={(date) => this.onDateChange(date)}
           style={{ height: 150, width: 300 }}
         />
         </View>
        </Modal>
              <View style={styles.headerContentStyle}>
                    <Text>{this.props.logstringdate}</Text>
                    <Text>{this.props.bmi}</Text>
              </View>
              <View style={styles.thumbnailContainerStyle}>
                    <Text onPress={this.onWeightClick}>{this.props.weight}</Text>
              </View>
    </View>
  );

}
};

const styles = {
  containerStyle: {
    borderWidth: 1,
    borderRadius: 2,
    borderColor: '#ddd',
    borderBottomWidth: 0,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2},
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 1,
    marginLeft: 5,
    marginRight: 5,
    marginTop:10,
  },
  thumbnailContainerStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10,
    flexDirection: 'row'

  },
  headerContentStyle: {
    flexDirection: 'column',
    justifyContent: 'space-around'
  },
};

While the app is started I expected the datepickerios (wrapped up) inside a modal to be not displayed as it is a child of modal and the modal's visibility is set to false.

But the datepickerios is rendered when the app is started.

Is this an expected behaviour ?

Answer 1

the constructor is overriding the state object that you declared outside of it.

Move them all inside the constructor:

constructor(props)  {
    super(props);
    const { logstringdate, bmi, weight, logdate } = this.props;
    this.state = {
      date: new Date(),
      weight: '80',
      selecteddate: '',
      selectedweight: '',
      showmodal: false
    };
  }

Example of your situation:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      insideValue: 'inside value',
    }
  }

  state: {
    outsideValue: 'outside value'
  }

  render() {
    const { outsideValue, insideValue } = this.state;
    return (
      <div>
        <div>
          {outsideValue}
        </div>
        <div>
          {insideValue}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Example with the fix:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      insideValue: 'inside value',
      outsideValue: 'outside value'
    }
  }

  render() {
    const { outsideValue, insideValue } = this.state;
    return (
      <div>
        <div>
          {outsideValue}
        </div>
        <div>
          {insideValue}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>