How should I use hooks in a nested component - react-native

Question

I'm building an app with React Native, and I have a card component.
This card component needs few hooks, the problem is that the card components being rendered in FlatList in a HomeScreen component.
So the hierarchy is like this:
-Homescreen Component
---FlatList
----Card1
----Card2
----Card3
From what I understand, it is not possible to use React Hooks in my card component (Invalid hook call error). which means I can't use something like PanGestureHandler because I need to use hooks for that.
I couldn't find anything, but I'm sure this is a common problem and there is a solution for this.
What is the best way to deal with this?
This is my FlatList:
<FlatList
showsVerticalScrollIndicator={false}
style={{padding: 8}}
data={goals}
renderItem={({index}) => GoalCard(goals[index], theme, hook1, hook2)}
keyExtractor={item => item.id}
/>
This is my card:
const GoalCard = (goal: IGoal, theme: any, hook1: any, hook2: any) => { ... }

Answer 1

You can use nested hooks even inside flatlist make sure your Component name start with Capital latter and if possible share more info about error
after changing this use props.hook1 etc.
<FlatList
showsVerticalScrollIndicator={false}
style={{padding: 8}}
data={goals}
renderItem={({index}) => <GoalCard index={goals[index]} theme={theme} hook1={hook1} hook2={hook2})}
keyExtractor={item => item.id}
/>

Answer 2

you can pass hook down as prop, see the example.
const [value, setValue] = React.useState(1);
<FlatList renderItem={({item}) => <Card value={value} setValue={setValue}/>
const Card = ({value, setValue}) => {
return <Text onPress={() => setValue(value + 1)}>click me</Text>
}