React-native: Invariant Violation Text strings must be rendered within a <Text> component

[Nawaf-Almansour]

[rafauke]

@zenger7 Are you sure that all the text in your component is wrapped with <Text />? Maybe you have a comma somewhere that is not wrapped (pretty common):

<MyComponent>
  <View>
    <Text>Hey there</Text>,  // <---- this thingy
  </View>
</MyComponent>

Also, if this is <TouchableOpacity />, you have to use Text inside, like this:

<TouchableOpacity>
  <Text>Yo yo press me</Text>
</TouchableOpacity>

[karanjthakkar]

Can you show us the TypeList component implementation to figure out where the issue could be coming from?

[karanjthakkar]

That looks like a pretty big component. Without all the pieces and fiddling it myself, I can't help much. The only thing I can recommend is to comment out pieces of the code to figure out which part is causing this issue.

[react-native-bot]

If you are still encountering the issue described here, please open a new issue and make sure to fill out the Issue Template when doing so.

[dblock]

Mine looked like this. Note the one too many >, which seemed to work before, but was clearly wrong.

        <TouchableOpacity onPress={() => 
          this.props.navigation.navigate('Meeting', { 
            meeting: this.props.meeting,
            user: this.props.user
          })}>
        }>
          <Text style={styles.meetingTitle}>{
            this.props.meeting.title
          }</Text>
        </TouchableOpacity>

Fixing it worked, and moving the function call out made it cleaner.

  _navigate() {
    this.props.navigation.navigate('Meeting', { 
      meeting: this.props.meeting,
      user: this.props.user
    })      
  }

        <TouchableOpacity onPress={() => this._navigate()}>
          <Text style={styles.meetingTitle}>{
            this.props.meeting.title
          }</Text>

[China-Robin]

@dblock Thank you. You saved me

[jesus143]

Hi Everyone, I am also experiencing this issue now and it's from package "@expo/videoplayer": "^0.4.0" with this specific component

Anyone could help would much very be appreciated.

Thanks,
Jesus

[itolimaesther]

am having similar issues. Please can someone help

import React, { Component } from 'react'

import {
View,
Text,
StyleSheet,
TouchableOpacity,
TouchableHighlight,
TouchableWithoutFeedback,
Image
} from 'react-native'

import InfoImage from 'images/info.png'

export default class ResturantRow extends Component {

state ={
    showInfo: false
}

infoPressed = () => {
  this.setState({ showInfo: !this.state.showInfo })  
}

render() {

    const {
        place,
        index
    } = this.props

    return (
        <View
        key={place.name}
        style={{backgroundColor: index % 2 === 0 ? 'white' : '#F3F3F7' }}>

        <View style={styles.row}>
            <View style={styles.edges}>
                <Text>{index + 1}</Text>
            </View>

            <View style={styles.nameAddress}>
                <Text>{place.name}</Text>
                <Text style={styles.addressText}>{place.address}</Text>
            </View>

            <View style={styles.edges}>
            <TouchableHighlight
                onPress={this.infoPressed}
                style={styles.button}
                underlayColor='#539BDC'
            >
                <Text style={styles.buttonText}>Info</Text>
            </TouchableHighlight>
            </View>
        </View>

        {
            this.state.showInfo &&
            <View style={styles.info}>
                <Text>Restaurant Info</Text>
                <Image source={InfoImage} 
                style={{
                    flex: 1,
                     height: 100
                 }}/>
                resizeMode="contain"
            </View>
        }

      </View>
    )
}

}

const styles = StyleSheet.create({
row: {
flexDirection: 'row',
},
edges: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 5,
minWidth: 50
},
nameAddress: {
flexDirection: 'column',
flex: 8
},
addressText: {
color: 'grey',
},
button: {
borderWidth: 1,
borderColor: '#0066CC',
borderRadius: 14,
paddingHorizontal: 10,
paddingVertical: 3,
backgroundColor: '#fff',
color: '#912B04',
fontSize: 12
},
buttonText: {
color: '#0066CC',
fontSize: 12
},
info: {
marginHorizontal: 40,
marginVertical: 10,
padding: 10,
backgroundColor: '#fff',
borderWidth: 1,
borderColor: '#ddd',
borderRadius: 4
}
})

[itolimaesther]

[jdarrohn]

Getting this randomly too -- reviewed code history in the repository and this file has not changed. 🤔