I have a flatList with expandable content. When i open 1 big content and scroll into the bottom of the list and open another the scroll are going to the bottom of the page and hidde my list. I need to scroll up to see them.
This is my flatList:
<StyledContainer>
<FlatList
data={faq}
renderItem={({ item }) => (
<ListItem
key={item.title}
active={activeTitle === item.title}
onPress={onPress}
onPressDetail={onPressDetail}
title={item.title}
details={item.detail}
/>
)}
/>
</StyledContainer>
and here i have the content list (ListItem) and another list, to show details.
const internal = (
<StyledListItem {...props}>
<ListTitle active={active}>{title}</ListTitle>
<Icon
name={active ? 'remove' : 'add'}
size={24}
color={active ? colors.blue.secondary : colors.blue.primary}
/>
</StyledListItem>
);
const touchable =
Platform.OS === 'ios' ? (
<TouchableOpacity onPress={toggleActive}>{internal}</TouchableOpacity>
) : (
<TouchableNativeFeedback
onPress={toggleActive}
background={TouchableNativeFeedback.Ripple(colors.blue.primary)}>
{internal}
</TouchableNativeFeedback>
);
return (
<StyledView>
{touchable}
{active && (
<MyListDetails faqDetail={details} onPressDetail={onPressDetail} />
)}
<StyledLine />
</StyledView>
);
I need to gave focus to the selected item, on the first list (ListItem). Any idea how to do that?
Thanks!!!