Warning with another TouchableComponent

[andrecbr]

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"

[JustinBeBoy]

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"

[pistou]

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.

[ffastym]

touchableComponent={(props) => <TouchableOpacity {...props} />}

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

[orzhtml]

touchableComponent={(props) => <TouchableOpacity {...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) => <TouchableHighlight {...props} />}

[matias91]

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`.