profile
viewpoint

Ask questionsInvariant Violation: Text strings must be rendered within a <Text> component.

Hello, I am doing a project in react native and I am currently handling the Modal component but I am getting the following error:

Invariant Violation: Text strings must be rendered within a <Text> component.

Stack trace:
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:4029:4 in createTextInstance
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14495:12 in completeWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17094:10 in completeUnitOfWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17304:30 in performUnitOfWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17316:41 in workLoop
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17417:15 in renderRoot
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18423:17 in performWorkOnRoot
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18324:24 in performWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18285:14 in performSyncWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18531:21 in batchedUpdates$1
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2611:31 in batchedUpdates
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2706:17 in _receiveRootNodeIDEvent
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2782:28 in receiveTouches
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:366:47 in __callFunction
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:106:26 in <unknown>
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:314:10 in __guard
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:105:17 in callFunctionReturnFlushedQueue

My code is this:

import React, { Component } from 'react';
import { View, Modal, Button, StyleSheet } from 'react-native';

class ModalInfo extends Component {

    state = {
        visible: false
    };

    handlePress = () => {
        this.setState({ visible: !this.state.visible });
    };

    render() {
        return (
            <View style={ [styles.container, styles.cyan] }>
                <Modal visible={this.state.visible}>
                    <View style={ styles.container }>
                        <Button title='Cerrar Modal' onPress={ this.handlePress } />>
                    </View>
                </Modal>
                <Button title='Abrir Modal' onPress={ this.handlePress }></Button>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
      display: 'flex',
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    },
    cyan: {
      backgroundColor: 'cyan'
    }
  });

export default ModalInfo;

I appreciate the collaboration you can provide me.

Thank you.

facebook/react

Answer questions aweary

We try to use this issue tracker for bug reports and feature requests only. I recommend checking out the list of great support resources listed on the doc page, Where to Get Support.

useful!
source:https://uonfu.com/
answerer
Brandon Dail aweary @discord Austin, TX brandondail.com a11y at @discord. previously @facebook, @FormidableLabs. Helped maintain @reactjs once upon a time.
Github User Rank List