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) => {   ... }

```