CODEWITHSUNDEEP
javascriptreactjsreact-native
goolius_boozler
goolius_boozler

Reputation: 253

How to make a modal component the center of the screen?

I have a modal Component that I am trying to put in the center of the screen.

In my view tag with style={styles.containerStyle} the way it currently is written the modal is vertically in the middle but horizontally to the left. If I add flexDirection: 'row' to the containerStyle it moves it to the middle horizontally but to the top vertically.

This is my modal component:

class ItemInformationModal extends Component {
  onNotesChange(text) {
    this.props.notesChanged(text);
  }

  render() {
    return (
      <Modal
        transparent
        animationType='fade'
        visible={this.props.itemModalVisible}
      >
        <View style={styles.containerStyle}>
          <View style={styles.modalContainer}>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
              <View style={{ flexDirection: 'column', flex: 1 }}>
                <Text style={styles.itemTitle}>{this.props.currItem.text}</Text>
                <View style={{ padding: 5 }}>
                  <DatePickerIOS />
                </View>
              </View>
              <View style={{ padding: 5 }}>
                <Feather
                  name="x-square"
                  size={35}
                  color={'#db5461'}
                  onPress={() => this.props.closeItemModal()}
                />
              </View>
            </View>
            <View style={{ padding: 5 }}>
              <TextInput
                placeholder={'Add notes'}
                value={this.props.currItem.notes}
                multiline
                style={styles.notesInput}
                onChangeText={this.onNotesChange.bind(this)}
              />
            </View>
          </View>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  containerStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContainer: {
    width: '75%',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#cdd2c9',
    backgroundColor: '#cdd2c9',
    alignSelf: 'baseline',
  },
  notesInput: {
    height: 130,
    borderWidth: 1,
    borderRadius: 10,
    borderColor: '#28313b',
    padding: 10,
    color: '#28313b'
  },
  itemTitle: {
    fontSize: 20,
    color: '#28313b',
    padding: 10
  }
});

Upvotes: 3

Views: 5880

Answers (1)

hong developer
hong developer

Reputation: 13926

You can remove alignSelf

  containerStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems:"center"
  },
  modalContainer: {
    width: '75%',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#cdd2c9',
    backgroundColor: '#cdd2c9',

  }

Upvotes: 3

Related Questions