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

Created on 3 Dec 2018  路  5Comments  路  Source: oblador/react-native-collapsible

I copied the Accordion example one to one and solely removed the "styles=" declarations from the Views and Texts. But I keep getting this error when I try to render the AccordionView:

image

import React from 'react'
import { Text, View } from 'react-native'
import Accordion from 'react-native-collapsible/Accordion'

const SECTIONS = [
    {
        title: 'First',
        content: 'Lorem ipsum...',
    },
    {
        title: 'Second',
        content: 'Lorem ipsum...',
    },
]

export default class AccordionView extends React.Component {
    state = {
        activeSections: [],
    }

    _renderSectionTitle = section => {
        return (
            <View>
                <Text>{section.content}</Text>
            </View>
        )
    }

    _renderHeader = section => {
        return (
            <View>
                <Text>{section.title}</Text>
            </View>
        )
    }

    _renderContent = section => {
        return (
            <View>
                <Text>{section.content}</Text>
            </View>
        )
    }

    _updateSections = activeSections => {
        this.setState({ activeSections })
    }

    render() {
        return (
            <Accordion
                sections={SECTIONS}
                activeSections={this.state.activeSections}
                renderSectionTitle={this._renderSectionTitle}
                renderHeader={this._renderHeader}
                renderContent={this._renderContent}
                onChange={this._updateSections}
            />
        )
    }
}
import React from 'react'
import { View } from 'react-native'
import Styles from '../constants/Styles'
import AccordionView from '../components/AccordionView'

export default class ExploreScreen extends React.Component {

    render() {
        return <View style={Styles.container}>
            <AccordionView/>;
        </View>
    }
}
help wanted awaiting-reply

Most helpful comment

screenshot 2018-12-09 at 13 35 57

I am sure this semicolon is not what you want ;)

Maybe it's worth to update the documentation and remove the semicolons. I ran into the same problem .

screenshot 2018-12-09 at 13 41 38

screenshot 2018-12-09 at 13 41 46

All 5 comments

try to erase spaces between components

there are none :/

Can you create an example on https://snack.expo.io that reproduces this?

screenshot 2018-12-09 at 13 35 57

I am sure this semicolon is not what you want ;)

Maybe it's worth to update the documentation and remove the semicolons. I ran into the same problem .

screenshot 2018-12-09 at 13 41 38

screenshot 2018-12-09 at 13 41 46

Dude that semicolon! THANKS!

Was this page helpful?
0 / 5 - 0 ratings