Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6211

Problems with scroll and flat-list. Loosing the position at the selected flatList item

$
0
0

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!!!


Viewing all articles
Browse latest Browse all 6211

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>