TypeError: Failed to construct 'Text': Please use the 'new' operator

Question

I'm trying to create a NavigationContainer for all the buttons inside of my modal that pops up from the bottom. It works without the Stack.Navigator, but when I add the Stack.Screen with a component name like "Money," it immediately gives me the error in the title. I also imported the Text directly from react-native, so I'm pretty sure it isn't related to an import error and is more related towards a conflict between global Text and the component I'm using. Any thoughts on how I can fix this?

import React, {useState} from 'react';
import { useRef } from 'react';
import Hamburger from 'react-native-hamburger';
import 'react-native-gesture-handler';
import {
    View,
    TouchableOpacity,
    ImageBackground,
    textInput,
    StyleSheet,
    Button,
    Text,
    Image
} from 'react-native';
import ViewersScreen from '../analytics_screens/Viewers';
import MoneyScreen from '../analytics_screens/money';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import BottomSheet from 'reanimated-bottom-sheet';
import Animated from 'react-native-reanimated';

import { useNavigation } from '@react-navigation/native';

const Stack = createStackNavigator();

const SettingsPopup = (props) => {
  const navigation = useNavigation();

  const bs = useRef();
  const [fall, setFall] = useState(new Animated.Value(1));
  const [state, setState] = useState({
    active: false,
  });

  const renderHeader = () => (
    <View style={styles.header}>
      <View style={styles.panelHeader}>
        <View style={styles.panelHandle} />
      </View>
    </View>
  );

  const text = "Money"

  const renderInner = () => (
    <NavigationContainer independent={true}>
      <Stack.Navigator>
        <Stack.Screen name="Money" component={MoneyScreen} />
      </Stack.Navigator>
    </NavigationContainer>
    // <View style={styles.panel}>
    //   <View style={{alignItems:'center'}}>
    //       <Text style={styles.panelTitle}>Creator Tools</Text>
    //   </View>
    //   <TouchableOpacity style={styles.panelButton} onPress={() => navigation.navigate(MoneyScreen)}>
    //       <Text style={styles.panelButtonTitle}>Money Analytics</Text>
    //   </TouchableOpacity>
    //   <TouchableOpacity style={styles.panelButton}>
    //       <Text style={styles.panelButtonTitle}>Viewer Analytics</Text>
    //   </TouchableOpacity>
    //   <TouchableOpacity style={styles.panelButton}>
    //       <Text style={styles.panelButtonTitle}>More Settings</Text>
    //   </TouchableOpacity>
    // </View>
  );

  const altercate = () => {
    if(state.active == true) {
      bs.current.snapTo(1)
    } else {
      bs.current.snapTo(0)
    }
    setState({active: !state.active})
  };

  return (
    <View style={styles.container}>
        <BottomSheet 
          ref={bs}
          snapPoints={[340, 0]}
          renderContent={renderInner}
          renderHeader={renderHeader}
          initialSnap={1}
          callbackNode={fall}
          enabledContentGestureInteraction={true}
          enabledHeaderGestureInteraction={true}
        />
        <Animated.View style={{margin: 20,
          opacity: Animated.add(0.1, Animated.multiply(fall, 1.0)),
        }}>
          <View style={{alignSelf: 'flex-end'}}>
            <TouchableOpacity onPress={() => {bs.current.snapTo(0)}}>
              <View
                style={{
                  height: 40,
                  width: 40,
                  borderRadius: 15,
                  justifyContent: 'right',
                  alignItems: 'right',
                }}>
                  <Hamburger active={state.active}
                    type="cross"
                    onPress={altercate}>
                  </Hamburger>
              </View>
            </TouchableOpacity>
          </View>
        </Animated.View>
    </View>
  );
}


export default SettingsPopup;

Answer 1

I just had the same issue with react three fiber and the solution for me was to import Text from react three fiber on top of the file:

import { OrbitControls, PerspectiveCamera, RenderTexture, Text } from "@react-three/drei"

Hope this helped :)