CODEWITHSUNDEEP
reactjsreact-nativereact-native-ios
Bogdan Daniel
Bogdan Daniel

Reputation: 2749

React Native Modal content outside of device's view

I have the following Modal which I would like to have its content scrollable when it doesn't fit the screen. However, when the device's window is smaller the Modal's content just overflows outside the view bounds of the device - some header is lost and also part of the footer.

How can I activate the scrollView so that the content is contained within the view bounds of the device? 

import { Modal, ScrollView } from 'react-native';

<Modal
  transparent
  animationType="fade"
  visible={modalVisible}
  onRequestClose={() => {
    setModalVisibility(!modalVisible);
  }}>
  <ScrollView contentContainerStyle={styles.modalOuterContainer}>
    .....
  </ScrollView>
</Modal>

Edit:

For anyone having the same problem. A fix that I found was to set on a View inside the Modal the height to height: Dimensions.get('window').height,. As the modal appears to have absolute positioning, this may be the only approach. However, one downside of this would be that on larger screens you would still end up taking all the space. When I have a fix that works properly I ll post an answer.

Upvotes: 0

Views: 6268

Answers (2)

Bogdan Daniel
Bogdan Daniel

Reputation: 2749

The solution which works fine for my case was to have a View element inside the Modal with maxHeight set to maxHeight: Dimensions.get('window').height - 50,. I used the -50 just to also have some margins, but it's not necessary. 

import { Modal, ScrollView } from 'react-native';

<Modal
  transparent
  animationType="fade"
  visible={modalVisible}
  onRequestClose={() => {
    setModalVisibility(!modalVisible);
  }}>
 <View style={{maxHeight: Dimensions.get('window').height - 50}}
  <ScrollView contentContainerStyle={styles.modalOuterContainer}>
    .....
  </ScrollView>
 </View>
</Modal>

Upvotes: 3

SDushan
SDushan

Reputation: 4631

Try to insert Model inside a parent view & style parent view according to your requirements.

import React, { Component } from "react";
import { Modal, View, ScrollView } from "react-native";

class ModalExample extends Component {
  state = {
    modalVisible: true
  };

  setModalVisibility = () => {
    this.setState({
      modalVisible: this.state.modalVisible
    });
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Modal
          animationType="fade"
          transparent={true}
          visible={this.state.modalVisible}
          onRequestClose={this.setModalVisibility}
        >
          <ScrollView contentContainerStyle={styles.modalOuterContainer}>
              ...
          </ScrollView>
        </Modal>
      </View>
    );
  }
}

Upvotes: 0

Related Questions