React native Question posted in
The official React Native documentation can be found here.

React Native: Issue with Modal – Modal Not Closing on Button Press

I’m currently facing an issue in my React Native project related to the Modal component. Despite setting up a button to close the modal, it’s not working as expected. Here’s a simplified version of my code:

import React, { useState } from 'react';
import { View, Text, Modal, Button } from 'react-native';

export default function MyComponent() {
  const [isModalVisible, setModalVisible] = useState(false);

  const handleOpenModal = () => {
    setModalVisible(true);
  };

  const handleCloseModal = () => {
    setModalVisible(false);
    console.log('Modal closed!');
  };

  return (
    <View>
      <Button title="Open Modal" onPress={handleOpenModal} />
      <Modal visible={isModalVisible} animationType="slide">
        <View>
          <Text>Modal Content</Text>
          <Button title="Close Modal" onPress={handleCloseModal} />
        </View>
      </Modal>
    </View>
  );
}

Despite having the handleCloseModal function, pressing the "Close Modal" button doesn’t close the modal as intended. The log statement inside the function also doesn’t appear in the console.

Can someone please provide guidance on how to troubleshoot and resolve this new problem with the Modal not closing on a button press in React Native? Any insights or suggestions would be appreciated. Thank you!

Tags:

2

Answers


  1. 0

    try this:

    import React, { useState } from 'react';
import { View, Text, Modal, Button } from 'react-native';

export default function MyComponent() {
  const [isModalVisible, setModalVisible] = useState(false);

  const handleOpenModal = () => {
    setModalVisible(true);
  };

  const handleCloseModal = () => {
    setModalVisible(false);
    console.log('Modal closed!');
  };

  return (
    <View>
      <Button title="Open Modal" onPress={handleOpenModal} />
      {isModalVisible && <Modal visible={isModalVisible} animationType="slide">
        <View>
          <Text>Modal Content</Text>
          <Button title="Close Modal" onPress={handleCloseModal} />
        </View>
      </Modal>
     }
    </View>
  );
}
    Login or Signup to reply.
  2. 0

    It seems some styling issues in your code. Please try this code.

    import React, {useState} from 'react';
import {View, Text, Modal, Button, SafeAreaView} from 'react-native';

export default function Profile() {
  const [isModalVisible, setModalVisible] = useState(false);

  const handleOpenModal = () => {
    setModalVisible(true);
  };

  const handleCloseModal = () => {
    setModalVisible(false);
    console.log('Modal closed!');
  };

  return (
    <SafeAreaView
      style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Button title="Open Modal" onPress={handleOpenModal} />
      <Modal visible={isModalVisible} animationType="slide">
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          <Text>Modal Content</Text>
          <Button title="Close Modal" onPress={handleCloseModal} />
        </View>
      </Modal>
    </SafeAreaView>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search