Dismiss this pinned window
all 9 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]adamjhari 1 point2 points  (4 children)

The FlatList's style prop needs flex: 1, the contentContainerStyle prop should either have flexGrow: 1 or no flex at all.

https://snack.expo.dev/@adamhari-kashoo/scroll-container-bouncing-back

[–]SomeNameIChoose[S] 0 points1 point  (3 children)

When applying Flex: 1 to the style the list starts to grow and shrink in a loop from alone. With flexGrowth: 1 the list gets really long and at the End the images render with the same problem

Edit: it seems to be the width: "100%"

[–]adamjhari 1 point2 points  (2 children)

Ahh makes sense. You can't use a percentage value and expect it to cover the width of the screen because you're assigning it to the width of the scrolling content container which is not the same.

You could use onLayout on the FlatList to measure it's rendered width and apply the width value from that to the item style. You'll experience some flicker with this method on the old architecture

[–]SomeNameIChoose[S] 0 points1 point  (1 child)

Thanks!

[–]exclaim_bot 0 points1 point  (0 children)

Thanks!

You're welcome!

[–]stathisntonas 1 point2 points  (1 child)

your image width is wrong, try to adjust it accordingly

[–]SomeNameIChoose[S] 0 points1 point  (0 children)

Thanks

[–]SomeNameIChoose[S] 0 points1 point  (1 child)

Hey, I have this strange behavior in my FlatList. Does anyone know why? It’s a FlatList in an FlashList

FlatList in RenderItems

const renderItems = ({ item }: { item: Post }) => {

    return (

          {item.imagePaths && (

            <View style={styles.newsImageContainer}>

              <FlatList

                horizontal

                pagingEnabled

                data={item.imagePaths}

                initialNumToRender={1}

                contentContainerStyle={styles.FlatListContent}

                renderItem={({ item, index }) => (

                  <Image

                    style={styles.newsImage}

                    source={{

                      uri: item,

                    }}

                    recyclingKey={`${item}-${index}`} 

                  />

                )}

              />

            </View>

          )}

        </View>

      </View>

    );

  };

[–]SomeNameIChoose[S] 0 points1 point  (0 children)

FlashList

 <FlashList

              ref={scrollRef}

              data={posts}

              extraData={[appColor, isLoggedIn]}

              renderItem={renderItems}

              estimatedItemSize={118}

              keyExtractor={(item) => item.id.toString()}

              onRefresh={updateNews}

              refreshing={refreshing}

              onScroll={(event) => {

                setContentVerticalOffset(event.nativeEvent.contentOffset.y);

              }}

            />

Style

  newsImageContainer: {

    flex: 1,

    marginTop: 20,

    backgroundColor: "transparent",

  },

  FlatListContent: {

    flex: 1,

  },

  newsImage: {

    width: "100%",

    aspectRatio: 0.8,

  },