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

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 6502

Latest Images

Trending Articles



Latest Images

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