cht8687 / react-listview-sticky-header

react listview with sticky section header

React listview with sticky header

Installation

npm

$ npm install --save react-listview-sticky-header

Since React is peer dependency, you need to install it manually if you haven't.

Demo

http://cht8687.github.io/react-listview-sticky-header/example/

Usage

<ReactListView 
    data={data} 
    headerAttName="headerName"
    itemsAttName="items" 
    styles={styles}
/>

Options

data: PropTypes.array.isRequired

const DATALIST = [
{
  headerName : "ListA",
    items : [{
      title : "items1"
    }, {
      title : "items2"
    }]
},
{
  headerName : "ListB",
    items : [{
      title : "items1"
    }, {
      title : "items2"
    }]
}
];

headerAttName: PropTypes.string.isRequired

variable name of header in your data object. In above example, it's headerName.

itemsAttName: PropTypes.string.isRequired

variable name which hold items data in your data object. In above example, it's items.

styles: PropTypes.object.isRequired

let styles = {
  outerDiv: {
    height: '420px',
    overflowY: 'auto',
    outline: '#b9ceb6 dashed 1px',
    width: '383px'
  },

  ul: {
    margin: '0px',
    listStyleType: 'none',
    padding: '0px'
  },

  fixedPosition: {
    position: 'fixed',
    width: '383px',
    top: '0px'
  },

  listHeader: {
    width: '383px',
    height: '27px',
    background: '#94D6CF',
    color: 'white'
  },

  listItems: {
    color: '#a9adab'
  }
}

outerDiv, ul, fixedPosition, listHeader, listItems are required, you can modify the CSS to meet your needs.

Development

$ git clone [email protected]:cht8687/react-listview-sticky-header.git
$ cd react-listview-sticky-header
$ npm install
$ webpack-dev-server

Then

open http://localhost:8080/webpack-dev-server/

License

MIT

react-listview-sticky-header's Issues

First item have height issue when scroll back

list view unmount issue for IE

Just noticed this line in the component unmount:

react-listview-sticky-header/src/ReactListView.js

Line 36 in 64dfb83

findDOMNode(this.refs.listview).attachEvent('on' + type, this.onScroll.bind(this), false)

I'm thinking this should be 'detachEvent' ?

Error: Objects are not valid as a React child (found: object with keys {seconds, nanoseconds}). If you meant to render a collection of children, use an array instead.

` const [posts,setPosts] = useState([]);
useEffect(() => {
db.collection("posts").onSnapshot((snapshot)=>
setPosts(snapshot.docs.map((doc)=>({id:doc.id,data:doc.data()})))
);

}, [])`

add why this is better than css position: sticky;

position: sticky; is quite popular especially on ios sofari.

No momentum scrolling on iPad pro

failed to fetch from registry: https://registry.npmjs.org/source-map

For those who has this error when why to npm install, just execute:

npm config set registry https://registry.npmjs.org/

Implement infinite scroll ability

when reaching end of list, just render it's head...

objects are not valid as react child

const MyAccountfunc= async ({navigation})=>{
let user = await AsyncStorage.getItem('user'); //it is showing error here
alert(user); //my user contains one mail
if(user==null)
{
alert('Login first')
navigation.navigate('Login')

}
else{
alert('done')
navigation.navigate('MyAccount')

}
return null
}

const DrawerNavigation = createDrawerNavigator(

{

  "Home": App,
  "My Account": MyAccountfunc,
  "Order History": OrderHistory,
  "About us": Aboutus,
  "Contact us": Contactus,
  "Logout": LogoutFunc

},
{
initialRouteName: "Home",
contentOptions: {
activeTintColor: "red"
}
}
);

export default createAppContainer(DrawerNavigation);

List header has flicking issue on IE Edge

flicker when reaching bottom of the list

Need rewrite onScroll() logic

At the moment, if data array is long enough, the headers are not sticking to the correct position.
need to be fixed.

Objects are not valid as a React child (found: object with keys {title})

From the example, (with react 0.14)

Invariant Violation: Objects are not valid as a React child (found: object with keys {title}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of ListItem.

ys

sticky title overflows container unlike other titles

flickering effect when scrolling down

when scrolling down the list as soon as there is a new sticky title there is an annoying flickering effect as the new sticky title becomes active. also the first item of the new group is hidden beneath the new sticky title