search

peacechen / react-native-modal-selector

A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.
MIT License
369 stars 129 forks source link

Implemented FlatList with Example for Large data array #157

Closed mehimanshupatil closed 3 years ago

mehimanshupatil commented 3 years ago

WRT #94 Issue, have implemented flatList and also have added an example 20201128_141250

Note

Not tested on ios device For flat list key should be a string but that can be overcome by passing keyExtractor which will return string

peacechen commented 3 years ago

Thanks @mehimanshupatil 👍 I like that you kept the ScrollView rendering method intact for existing users. Is this ready for merge or is more testing needed?

mehimanshupatil commented 3 years ago

Thanks @peacechen Let wait for this weekend. Since we are implementing flatList I will try to fix #93. Also, can you test this on an iOS device?

mehimanshupatil commented 3 years ago

@peacechen you can merge it. But I have not tested on iOS

kg-currenxie commented 3 years ago

Would love this to get merged. I'm also making a country selector :)

Kapture 2021-04-06 at 00 46 15

peacechen commented 3 years ago

@kg-currenxie

Thanks for the reminder, and apologies for the delay. Please test this before I publish. You can use this in your package.json to pull directly from the repo:

dependencies: {
  "react-native-modal-selector": "https://github.com/peacechen/react-native-modal-selector.git",
}
kg-currenxie commented 3 years ago

Wow, thanks for doing this so fast! @peacechen

Found a small bug

    renderFlatlistOption = ({ item, index, separators }) => {
        if (item.section) {
            return this.renderSection(item);
        }
        const numItems = this.props.data.length;
        this.renderOption(item, index === (numItems - 1), index === 0); <------- missing return
    }

My flatlist showed an empty list :) i debugged and after adding return, it works, and the modal opens instantly, and the initial options (images) load much faster!

kg-currenxie commented 3 years ago

Oh, and also, a small TS type error:

Screenshot 2021-04-06 at 13 28 25

Update: Maybe export default class ModalSelector<TOption = IOption> extends React.Component<IModalSelectorProps<TOption> & Omit<FlatListProps<any>, any>, 'renderItem'> {} ?

mehimanshupatil commented 3 years ago

ok, @kg-currenxie thank for testing. You can submit a PR for the same or else I will submit a PR in coming weekend.

peacechen commented 3 years ago

Thanks @kg-currenxie for noting those bugs. I pushed a commit to fix the return in renderFlatlistOption().

@mehimanshupatil Can you confirm that the TS definition fix that kg proposed fixes the other problem?

peacechen commented 3 years ago

Fix published in 2.0.4