TypeError: Failed to construct 'Text' ReactNative-CodePudding

I've used the <Text> tag a million times and never received this error, but all of a sudden, I put a <Text> tag inside of a <Modal> tag and the world burns. There is really nothing remotely complicated about the component I am working in, but ANY <Text> inside the '' breaks everything. Here is what my code looks like...

import React, { useState, useEffect } from 'react';
import { View, Modal, Button, ScrollView, TextInput } from 'react-native'
import { settings } from "../../../Styles/SettingStyles";
import { editUserSettings } from '../../../Styles/SettingStyles';

const UpdateUserButton = (props) => {

    const [userInfoChanges, setUserInfoChanges] = useState({})

    const handleInput = (attr, input) => {
        const updateObject = {...userInfoChanges}
        updateObject[attr] = input
        setUserData(updateObject)
    }


    const [modalVisible, setModalVisible] = useState(false)
    return(
        <View style={editUserSettings.editModal}>
            <Modal animationType='slide' transparent={true} visible={modalVisible}>
                <ScrollView style={editUserSettings.container}>
                    <Text style={editUserSettings.editFields}>First Name: </Text>
                    <TextInput
                        name='firstname'
                        style={editUserSettings.input} 
                        onChangeText={(firstname) => {
                            handleInput('firstname', firstname)
                        }}
                    />
                </ScrollView>
            </Modal>
            <Button
                onPress={() => setModalVisible(!modalVisible)}
                title="Edit User Information"
                color="#516ca6"
                accessibilityLabel="Edit User Information"
            />
        </View>
    )
}

export default UpdateUserButton

The way this component is used, the only visible part of it will be

<Button
      onPress={() => setModalVisible(!modalVisible)}
      title="Edit User Information"
      color="#516ca6"
      accessibilityLabel="Edit User Information"
    />

and as soon as I press this button in the browser, the screen all turns to white giving me a BUNCH of errors, all involving <Text>, the first of which looks like this...

Uncaught TypeError: Failed to construct 'Text': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

But this just makes absolutely no sense to me. Anyone have any ideas?

CodePudding user response：

As @windowsill mentioned on the comment, Text is not imported from react-native (or from anywhere else) :)