使用@ercpereda/react-native-accordion报TypeError: this.props.header is not a function

Let’s work through this error step by step—it’s almost always tied to how you’re passing your Header component to the Accordion component.

1. The root cause: Passing a rendered element instead of a component reference #

The error tells us the header prop isn’t a function, which usually happens when you pass a pre-rendered JSX element instead of the component itself.

❌ Wrong way:

<Accordion header={<Header />} content={...} />

✅ Correct way:

<Accordion header={Header} content={...} />

The Accordion component expects header to be a callable function (since React components are functions under the hood) that it can render internally, passing the isOpen prop to it. If you pass <Header />, you’re giving it a static element instead of a reusable function—hence the type error.

2. Confirm your Header component is correctly defined #

Your existing Header component looks good, since it properly accepts the isOpen prop:

const Header = ({ isOpen }) => (
  <View style={{ 
    paddingTop: 15, 
    paddingRight: 15, 
    paddingLeft: 15, 
    paddingBottom: 15, 
    borderBottomWidth: 1, 
    borderBottomColor: '#a9a9a9', 
    backgroundColor: '#f9f9f9', 
  }}>
    <Text>{`${isOpen ? '-' : '+'} Click to Expand`}</Text>
  </View>
);

Just make sure you haven’t accidentally modified this component to remove the prop handling.

3. Check for version mismatches (if the above doesn’t work) #

If the fix above doesn’t resolve the error, verify that your installed version of @ercpereda/react-native-accordion is compatible with your React Native setup. Older versions of the package might have slightly different prop expectations—double-check the package’s README for any version-specific usage notes.

内容的提问来源于stack exchange，提问作者lmotl3