Shopify / flash-list

A better list for React Native
https://shopify.github.io/flash-list/
MIT License
5.6k stars 283 forks source link

Error Importing MasonryFlashList #719

Closed Smartech-git closed 1 year ago

Smartech-git commented 1 year ago

Current behavior

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Code

...
import { MasonryFlashList } from '@shopify/flash-list';
...
return (
    <View>   
      <GestureDetector gesture={panGestureEvent}>
        <Animated.View style={[{width:'100%', height: "100%"}, animatedStyle]}>
          <MasonryFlashList
            data={viewedImagesArr}
            renderItem={({item})=> <ImageThumbnail ratio={item.ratio}  imageSrc={item.URL}/>}
            keyExtractor = {(item)=> item.URL}
            extraData = {viewedImagesArr.length}
            numColumns = {2}
            estimatedItemSize={100}
            contentContainerStyle = {{
              paddingBottom: 70,
              paddingHorizontal: 2,
            }}
            decelerationRate = 'normal'
            persistentScrollbar = {false}
            overScrollMode = 'never'
            showsVerticalScrollIndicator = {false}
            onScroll={(e) => handleOnScroll(e, contentOffsetBottom, setContentOffsetTop, setContentOffsetBottom)}
            onScrollEndDrag={(e) => handleScrollEndDrag(e)}
            ListHeaderComponent={<ListHeader/>}
            refreshControl = {
              <RefreshControl
                refreshing={refreshing}
                onRefresh={onRefresh}
                colors={["#00D426"]}
                progressBackgroundColor = {'#fff'}
              />
            }
          />
        </Animated.View>
      </GestureDetector>
    </View>
  )
}

To Reproduce

Platform:

Environment

Version: @shopify/flash-list : 1.1.0 x.y.z

naqvitalha commented 1 year ago

Masonry isn't available in v1.1.0. Please upgrade to v1.3.0.

Smartech-git commented 1 year ago

Thanks alot! Having updated my expo managed project, Flashlist was upgraded to v1.3.1. and the error was resolved.

naqvitalha commented 1 year ago

Great, I'd recommend going to v1.4 because it handles some corner cases for masonry layout. Not a big issues if you want to stick to v1.3

Smartech-git commented 1 year ago

alright, got that.