rgovindji / react-native-atoz-list Goto Github PK

View Code? Open in Web Editor NEW

185.0 9.0 101.0 141 KB

React Native Listview which handles large data sets and can scroll to sections using an alphabetical scroll list

JavaScript 94.81% Java 0.88% Objective-C 3.14% Starlark 1.17%

react-native-atoz-list's People

Contributors

Stargazers

Watchers

Forkers

dukeflyheli jonathanwi axsy-dev jodiwarren sibelius kffein nvminhtu buptyyf rubythonode julewu xyunsh skycocker liveninja shonary gianpieroc wayne214 efkan mrlucianoii kimak wxy325 duyluonglc brmk dhorelik thpubs lekenny winkeywong mikeduminy ploureiro eugenehp shyamks jykun revh devstar9211 rappercn anitar-is apequesoftware rsp8055 rm3rdmodules chaitgoli jenny-ha meemoinc komodor8 xvbo bemind prakashw3expert gukeming andreabadesso skjangid mpower-technologies aishwaryasurana suretarget saritd scrambledeggs dmsierra11 jeanmaried devtence assacnetworks addingama zoranmarjanovic dekpient westcode openmed skey-lin joesepherus ddev687 shouhuori nghi-nv qshengw aweffr rahulstib lorewalkery mis-tfz aaronbiser goriverna jigarkbarot walshingemayur sultan-iparagons benwerner01 denisb-sfd larebsyed msdgwzhy6 dastan4r onehassan jiyuan12354 melodyym vishu2525 hansanwok seanpm2001

react-native-atoz-list's Issues

Reference Error: Text is not defined

Reference Error: Text is not defined
This error is located at: in CellRenderer (at FixedHeightWindowedListView.js:231)

getHeightForRowInSection={this._getHeightForRowInSection} is not used

getHeightForRowInSection={this._getHeightForRowInSection} is not used on FixedHeightWindowedListView

"Alphabet" is read-only

Error: Error: "Alphabet" is read-only

This error is located at:
in AlphabetPicker (at AtoZList.js:76)

#My use case is very similar to your example. It's a contact directory. The only difference is that it needs a search function. I've implemented a text box that filters through my dataSource that I then feed into your component. It works fine when I search from the top of the list. But if I begin scrolling on the list, and then try to search, I get an error.

Here is some simplified pseudo code that functions very similar to my actual use case, minus some bells and whistles:

class Directory extends Component {
  constructor (props) {
    // you can assume props.data is already in the correct format ie {A: [{}, {}]. B:[{}, {}], C:[{},{}]...}
    this.state = {data: props.data, filteredData: props.data}
  }

  filterData (searchInput) {
    let filteredData = _.reduce(this.state.data, entryArray => {
       const lowerCasedSearch = searchInput.toLowerCase()
       
       let filteredArray = _.filter(entryArray, (result, entry, key) => {
         return _.includes(entry.name.toLowerCase(), lowerCasedSearch)
       })

       if (_.isEmpty(filteredArray)) return result
       result[key] = filteredArray
       return result
    }, {})
    
    // at this point filteredData is a subset of this.state.data, in the correct format with some 
        keys/arrays missing because of the search
    this.setState({filteredData: filteredData})
  }

  render () {
     return (
        <View>
          <TextField onTextChange={this.filterData} />
          <AtoZList data={this.state.filteredData}
             renderCell={(rowData) => {
               return <Text>rowData.name</Text>
             }}
             renderSection={(rowData) => {
               return <Subheader text={data.sectionId} />
             }}
             sectionHeaderHeight={24}
             cellHeight={56} />
     )
  }
}

From what i've been able to gather so far, this only breaks after I try the search after i've scrolled down some on the list. It seems that if I scroll down a little, it still functions but there is a big white space:

And if I scroll down too much before searching:

I'm not too sure what exactly is going on behind the scenes. But from some debug lines in your package that I placed myself, it seems like the function __renderCells(rows, firstRow, lastRow) method in FixedHeightWindowedListView.js is being called with a lastRow that is outside of the this.props.dataSource it has a reference to. So line 212 is coming back undefined.

let data = this.props.dataSrouce.getRowData(idx)
  // data === undefined

I'm thinking for a bandaid fix, I can try to manuall scroll to the top of the list every time the search box is focused. This seems to get it working again, but is a pretty big bandaid, and would like to try to find a real solution if possible.

Thanks for taking the time to read up on my issue.

All the best,
Frank

Scroll method deprecated

We should use just scrollTo instead?

Warning message

" scrollWithoutAnimationTo is deprecated. Use scrollTo instead "

I'm using React-Native 0.29 version. Any thoughts about this warning message?

Thanks in advance!

Add examples from gif

Would be good to have a code example to run rn-atoz-list

Partial white screen when clicking on the index

data format

How can i add image in contact

letters stops scrolling when nested in a ScrollView

Hi,

if i put this component in a , when i touch the letters the scroll stops immediately after the first scroll.

This happens also if i set false to scrollEnabled prop

<View style={{ flex: 1 }}>
  <ScrollView scrollEnabled={false} contentContainerStyle={{ flex: 1 }}>
    <AtoZList
      sectionHeaderHeight={20}
      cellHeight={60}
      data={myData}
      renderCell={this._renderCellComponent}
      renderSection={this._renderSectionComponent}
    />
  </ScrollView>
</View>

Thank you

Warning and blank screen issue

ExceptionsManager.js:73 Warning: Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

also i am getting blank screen after scrolling if i select pagination

Pagination

Hey @rgovindji , Nice package!

I need little help, Is it capable of implementing pagination, or any idea for implementing pagination in atoz list??

scrollWithoutAnimationTo is deprecated. Use scrollTo instead

Dear,

Firstly, thanks for your effort, it is very good.

I find there is warning for scroll. I try to change scrollTo, but there is not good. so solwly, I did not find any reasons.

Do you have any ideas for this? it is afraid not wok in the future.

Thanks!

Hi, tested with 15000 records and had a lot of blank space

How to avoid this slow blank spaces to happend? used the example provided and a larger dataset ( 15000 contacts with name, email and id)

Add renderWindowBoundaryIndicator

If the user scroll very fast it will see a lot of white spaces, we should render a row placeholder much like WindowedListView from RN experimental core: https://github.com/facebook/react-native/blob/master/Libraries/Experimental/WindowedListView.js#L97

/**

Rendered when the list is scrolled faster than rows can be rendered.
*/
renderWindowBoundaryIndicator?: () => ?React.Element,

initialNumToRender contains section header?

Hi,

for (var idx = firstRow; idx <= lastRow; idx++) { let data = this.props.dataSource.getRowData(idx);

At here, lastRow == initialNumToRender

The dataSource rowDatas contains section header, so if there is 3 section header, it will only render 5 rows.
I'm puzzled about this ~~~

Why not open the prop "initialNumToRender" to the user???

Why the initialNumToRender = 8??? Why not open the prop "initialNumToRender" to the user??? So 8 items for a big screen is not enough,the users of your project 'react-native-atoz-list' want a prop that they can set the initialNumToRender by themselves.Look forward to your reply.Thanks!

Cannot destructure undefined error on running sample code

Hello All,

Below is my code. I followed all instructions from example.
Could anyone pls help me running this code?
Thanks

My rn version is 0.61.5

import React, { useState, useEffect } from "react";
import { FlatList, View, StyleSheet } from "react-native";
import firestore from "@react-native-firebase/firestore";
import { useSelector, shallowEqual, useDispatch } from "react-redux";
import { theme, deviceWidth, deviceHeight } from "../../utils/theme";
import {
  emailValidator,
  passwordValidator,
  firstNameValidator,
  lastNameValidator,
} from "../../utils/utils";
import styles from "../../utils/styles";
import {
  Surface,
  Text,
  TextInput,
  ActivityIndicator,
  Button,
} from "react-native-paper";
import AlphabetSectionList from 'react-native-alphabet-sectionlist';
import AtoZList from 'react-native-atoz-list';
const contacts = {
  'A': [{ name: 'A1' }, { name: 'A2' }, { name: 'A3' }],
  "E": [{ name: 'E1' }, { name: 'E2' }, { name: 'E3' }, { name: 'E4' }],
  'F': [{ name: 'F1' }, { name: 'F2' }, { name: 'F3' }],
  'H': [{ name: 'H1' }, { name: 'H2' }, { name: 'H3' }, { name: 'H5' }],
  'J': [{ name: 'J1' }, { name: 'J2' }, { name: 'J3' }, { name: 'J5' }],
  'K': [{ name: 'K1' }, { name: 'K2' }, { name: 'K3' }, { name: 'K5' }],
  'N': [{ name: 'N1' }, { name: 'N2' }, { name: 'N3' }, { name: 'N5' }],
  'Y': [{ name: 'Y1' }, { name: 'Y2' }, { name: 'Y3' }, { name: 'Y5' }, { name: 'Y6' }],
}

export default function OfficeScreen() {
  const [images, setImages] = useState([]);

  useEffect(() => {
    setImages(
    );
  }, []);


  function renderCellComponent({  }) {
    return (
      <View style={{
        marginLeft: 10,
        paddingVertical: 10,
        borderBottomColor: 'lightgray',
        borderBottomWidth: 0.5
      }}>
        <Text>{'item.name'}</Text>
      </View>
    )
  }

  function renderSectionComponent() {
    return (
      <View>
        <Text>header1</Text>
        <Text>header2</Text>
      </View>
    )
  }


  return (
    <Surface style={theme.mainContainer}>
      <View>
        <Text style={styles.DayNameText}>{"Directory"}</Text>
        <AtoZList
                sectionHeaderHeight={20}
                cellHeight={60}
                data={contacts}
                renderCell={renderCellComponent()}
                renderSection={renderSectionComponent()}
        />
      </View>
    </Surface>
  );
}

Error :

TypeError: Cannot destructure undefined

This error is located at:
    in OfficeScreen (at SceneView.tsx:98)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:89)
    in EnsureSingleNavigator (at SceneView.tsx:88)
    in SceneView (at useDescriptors.tsx:125)
    in RCTView (created by SceneView)
    in SceneView (created by Pager)
    in RCTView (at createAnimatedComponent.js:233)
    in AnimatedComponent(Component) (created by PanGestureHandler)
    in PanGestureHandler (created by Pager)
    in Pager (created by TabView)
    in RCTView (at GestureHandlerRootView.android.js:26)
    in GestureHandlerRootView (created by TabView)
    in TabView (at MaterialTopTabView.tsx:48)
    in MaterialTopTabView (at createMaterialTopTabNavigator.tsx:41)
    in MaterialTopTabNavigator (at DirectoryScreen.js:21)
    in DirectoryScreen (at SceneView.tsx:98)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:89)
    in EnsureSingleNavigator (at SceneView.tsx:88)
    in SceneView (at useDescriptors.tsx:125)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at BottomNavigation.tsx:707)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at BottomNavigation.tsx:692)
    in RCTView (at BottomNavigation.tsx:675)
    in RCTView (at BottomNavigation.tsx:674)
    in BottomNavigation (created by Context.Consumer)
    in ThemedComponent (created by withTheme(BottomNavigation))
    in withTheme(BottomNavigation) (at MaterialBottomTabView.tsx:48)
    in MaterialBottomTabView (at createMaterialBottomTabNavigator.tsx:42)
    in MaterialBottomTabNavigator (at BottomTabsNavigator.js:51)
    in BottomTabsNavigator (at SceneView.tsx:98)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:89)
    in EnsureSingleNavigator (at SceneView.tsx:88)
    in SceneView (at useDescriptors.tsx:125)
    in RCTView (at CardContainer.tsx:190)
    in RCTView (at CardContainer.tsx:189)
    in RCTView (at Card.tsx:526)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at Card.tsx:508)
    in PanGestureHandler (at Card.tsx:501)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at Card.tsx:497)
    in RCTView (at Card.tsx:491)
    in Card (at CardContainer.tsx:156)
    in CardContainer (at CardStack.tsx:561)
    in RNSScreen (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:109)
    in Screen (at CardStack.tsx:133)
    in MaybeScreen (at CardStack.tsx:554)
    in RNSScreenContainer (at screens.native.js:134)
    in ScreenContainer (at CardStack.tsx:111)
    in MaybeScreenContainer (at CardStack.tsx:452)
    in CardStack (at StackView.tsx:418)
    in KeyboardManager (at StackView.tsx:416)
    in SafeAreaProviderCompat (at StackView.tsx:413)
    in RCTView (at GestureHandlerRootView.android.js:26)
    in GestureHandlerRootView (at StackView.tsx:412)
    in StackView (at createStackNavigator.tsx:82)
    in StackNavigator (at StackNavigator.js:55)
    in RCTView (at SafeAreaView.js:40)
    in SafeAreaView (at StackNavigator.js:54)
    in StackNavigator (at SceneView.tsx:98)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:89)
    in EnsureSingleNavigator (at SceneView.tsx:88)
    in SceneView (at useDescriptors.tsx:125)
    in RNSScreen (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:109)
    in Screen (at ResourceSavingScene.tsx:21)
    in ResourceSavingScene (at DrawerView.tsx:187)
    in RNSScreenContainer (at screens.native.js:134)
    in ScreenContainer (at DrawerView.tsx:171)
    in RCTView (at Drawer.tsx:653)
    in RCTView (at createAnimatedComponent.js:233)
    in AnimatedComponent(Component) (at Drawer.tsx:646)
    in RCTView (at createAnimatedComponent.js:233)
    in AnimatedComponent(Component) (at Drawer.tsx:636)
    in PanGestureHandler (at Drawer.tsx:626)
    in DrawerView (at DrawerView.tsx:208)
    in RNCSafeAreaView (at src/index.tsx:28)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at DrawerView.tsx:205)
    in GestureHandlerRootView (at GestureHandlerRootView.android.js:31)
    in GestureHandlerRootView (at DrawerView.tsx:204)
    in DrawerView (at createDrawerNavigator.tsx:44)
    in DrawerNavigator (at DrawerNavigator.js:10)
    in DrawerNavigator (at App.js:126)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:281)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:39)
    in ThemeProvider (at NavigationContainer.tsx:38)
    in ForwardRef(NavigationContainer) (at App.js:125)
    in ThemeProvider (at Provider.tsx:21)
    in RCTView (at PortalHost.tsx:128)
    in Portal.Host (at Provider.tsx:17)
    in Provider (at App.js:124)
    in App (at QuadRealConnect/index.js:13)
    in Provider (at QuadRealConnect/index.js:12)
    in RNRedux (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

Sticky section headers

Adding a checkbox inside a renderCell

Hi,

I am trying to create a list using react-native-atoz-list .

This is my inside render()
<AtoZList
sectionHeaderHeight={35}
cellHeight={95}
data={myState}
renderCell={this._renderCell}
renderSection={this._renderHeader}
/>

The listing is coming fine. But I want to add a checkbox for each item.
So I have added my checkbox in the renderCell()

import CircleCheckBox, {LABEL_POSITION} from 'react-native-circle-checkbox'; - this is the checkbox I'm using.

But the checkbox functionality is not working.

Can you please let me know how to add a checkbox inside the renderCell().

Thank you.

code need update with last react version

Hello
I'm testing this repo with your example files.
with last react version code need fix :

AlphabetPicker.js

from
import React, { Component, PropTypes } from 'react';
To
import React, { Component } from 'react'; import PropTypes from "prop-types";

AtoZlist.js

from
import React, { Component, PropTypes } from 'react';
To
import React, { Component } from 'react'; import PropTypes from "prop-types";

FixedHeightWindowedListView.js

add import PropTypes from "prop-types";

line 184 from
this.scrollRef.scrollWithoutAnimationTo(startY); // this.scrollRef.scrollTo({x: 0, y: startY, animation: false});
to

//this.scrollRef.scrollWithoutAnimationTo(startY);
this.scrollRef.scrollTo({x: 0, y: startY, animation: false});

line 374
from

FixedHeightWindowedListView.propTypes = { dataSource: React.PropTypes.object.isRequired, renderCell: React.PropTypes.func.isRequired, renderSectionHeader: React.PropTypes.func, incrementDelay: React.PropTypes.number, initialNumToRender: React.PropTypes.number, maxNumToRender: React.PropTypes.number, numToRenderAhead: React.PropTypes.number, numToRenderBehind: React.PropTypes.number, pageSize: React.PropTypes.number, };

to
FixedHeightWindowedListView.propTypes = { dataSource: PropTypes.object.isRequired, renderCell: PropTypes.func.isRequired, renderSectionHeader: PropTypes.func, incrementDelay: PropTypes.number, initialNumToRender: PropTypes.number, maxNumToRender: PropTypes.number, numToRenderAhead: PropTypes.number, numToRenderBehind: PropTypes.number, pageSize: PropTypes.number, };