React-native-collapsible: Warning with another TouchableComponent

Created on 14 Feb 2020  路  5Comments  路  Source: oblador/react-native-collapsible

I'm using react-native-paper with Accordion and when using a different touchableComponent it causes a warning:

<Accordion
  activeSections={activeSections}
  sections={sections}
  renderHeader={this._renderHeader}
  renderContent={this._renderContent}
  onChange={this._onChange}
  touchableComponent={TouchableRipple} // <-- here
/>

Warning: Failed prop type: Invalid prop `touchableComponent` of type `object` supplied to `Accordion`, expected `function`.

If I try the code below, it throws an exception:

<Accordion
  activeSections={activeSections}
  sections={sections}
  renderHeader={this._renderHeader}
  renderContent={this._renderContent}
  onChange={this._onChange}
  touchableComponent={() => <TouchableRipple />} // <-- Error
/>

Invariant Violation: React.Children.only expected to receive a single React element child.

"react": "16.9.0"
"react-native": "0.61.5"
"react-native-collapsible": "1.5.1"

Most helpful comment

Here is my working code:

<Accordion
    sections={sectionList}
    activeSections={activeSections}
    renderHeader={renderHeader}
    renderContent={renderContent}
    touchableComponent={(props) => <TouchableOpacity {...props} />}
    onChange={(s) => setActiveSections(s)}
    sectionContainerStyle={styles.container}
/>

Don't forget to pass the props to you component, or it won't work.

All 5 comments

I am having the same issue

<Layout>
    <Accordion
        sections={props.data}
        renderHeader={header}
        renderContent={content}
        activeSections={[]}
        onChange={() => { }}
      />
</Layout>

"typescript": "3.6.3"
"react": "16.9.0"
"react-native": "0.62.0"
"react-native-collapsible": "1.5.2"

Here is my working code:

<Accordion
    sections={sectionList}
    activeSections={activeSections}
    renderHeader={renderHeader}
    renderContent={renderContent}
    touchableComponent={(props) => <TouchableOpacity {...props} />}
    onChange={(s) => setActiveSections(s)}
    sectionContainerStyle={styles.container}
/>

Don't forget to pass the props to you component, or it won't work.

touchableComponent={(props) => }

but what if I don't want to add touchableComponentoptional prop?
I don't use it but have the same error message

touchableComponent={(props) => }

but what if I don't want to add touchableComponentoptional prop?
I don't use it but have the same error message

touchableComponent={(props) => }

I had to add @orzhtml workaround in order to remove the warning, which is weird because I wasn't using the optional prop touchableComponent.
Probably an official solution is needed, right?
This is how I was using the component:

<Accordion
   sections={sections}
   activeSections={activeSections}
   renderHeader={renderHeader}
   renderContent={renderContent}
   onChange={updateSections}
/>

And the warning:

Warning: Failed prop type: Invalid prop touchableComponent of type object supplied to Accordion, expected function`.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Korysam15 picture Korysam15  路  4Comments

vijay-dadhich09 picture vijay-dadhich09  路  8Comments

technicallyty picture technicallyty  路  4Comments

ishaqashraf picture ishaqashraf  路  6Comments

jiyarong picture jiyarong  路  8Comments