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.
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.
Related questions