Does Expo Modal work on web?

marcwren · September 14, 2021, 7:28pm

Hi all,
I’ve been trying to implement the Expo Modal component using the example code from the docs. Unfortunately I can’t get it to work on web. Am I wrong that all components should be working in Expo, including the Modal component? Does anyone know if there are other prerequisites to using Modal other than just importing the component?

Example modal repo:

github.com

soulfresh/expo-modal-test/blob/main/App.tsx

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

export default function App() {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert('Modal has been closed.');
        }}>
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello World!</Text>

            <TouchableHighlight
              style={{ ...styles.openButton, backgroundColor: '#2196F3' }}

This file has been truncated. show original

Steps to reproduce:

yarn start
Notice the modal is rendered in the page despite the visibility being set to false and the modal is not positioned absolutely.

Thanks for your help!

system · October 14, 2021, 7:28pm

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Scrolling in modal for web? Expo SDK	1	747	September 30, 2021
Hacky way to add Modals to web Expo SDK	3	4172	September 30, 2021
Questions regarding Expo Web Expo SDK	3	615	September 30, 2021
TextInput breaks Modal - please help Expo Development Tools	1	387	July 2, 2020
Expo SDK statusbar/modal regression between 42.0.0 and 43+ Expo SDK statusbar	1	310	April 5, 2022

Does Expo Modal work on web?

Related Topics