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

xeruf commented 5 years ago

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:

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>
    }
}