# react-native-nlist > react-nativ listView Performance solution Native implementation Smooth memory recovery Pull up refresh drop-down loading Support native custom refreshing animation Support itemView dynamic height Latest version **1.0.2** (published 2018-11-22) · MIT license · 0 weekly downloads ## Install ```sh npm install react-native-nlist pnpm add react-native-nlist yarn add react-native-nlist bun add react-native-nlist ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.2 | | Published | 2018-11-22 | | First published | 2018-11-21 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 1.4 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 58 | | Author | janiokq | | Maintainers | janiokq | | Keywords | react-native, react-component, react-native-nlist, react, mobile, ios, android, nlist | ## Links - npm: https://www.npmjs.com/package/react-native-nlist - Repository: https://github.com/janiokq/react-native-nlist - Homepage: https://github.com/janiokq/react-native-nlist#readme - Issues: https://github.com/janiokq/react-native-nlist/issues - npm.io page: https://npm.io/package/react-native-nlist ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.2 (latest) — 2018-11-22 - 1.0.1 — 2018-11-21 - 1.0.0 — 2018-11-21 ## README # react-native-nlist react-nativ listView Performance solution Native implementation Smooth memory recovery Pull up refresh drop-down loading Support native custom refreshing animation Support itemView dynamic height Performance is better than all current list components. ### [中文](http://incode.live/articles/2018/11/21/1542788141721.html) ### IOS Use TabView implementation Be based on [react-native-tableview](https://github.com/aksonov/react-native-tableview) ### Android Use Recyclerview implementation Recycling using duplicate templates ### Performance testing ####ios use iphone 6s 10015 data, lots of pictures. No use of [SDWebImage](https://github.com/SDWebImage/SDWebImage) to optimize images. Fast slide to 4679th data Memory usage 111 MB ![avatar](./1.png) #### Android use MI 6 10015 data, lots of pictures. No use of [Glide](https://github.com/bumptech/glide) to optimize images. Fast slide to 2569th data Android's list scroll speed has a maximum threshold. I plan for 2 minutes. Hand pain ~~(╯﹏╰) Memory usage 123 MB ![avatar](./3.png) ## installation `$ npm install react-native-nlist --save` ## configuration #### iOS 1. In XCode, in the project navigator, right click `your project name ` ➜ `Add Files to ` 2. Go to `node_modules` ➜ `react-native-nlist` and add `/node_modules/react-native-nlist/ios/RNNlistcode` 3. Add MJRefresh use cocoapods Create podfile under your IOS project `/ios/Podfile` ``` # Uncomment the next line to define a global platform for your project platform :ios, '8.0' target 'demo' do # Uncomment the next line if you're using Swift or would like to use dynamic frameworks # use_frameworks! # Pods for Driver use_frameworks! pod 'MJRefresh' end post_install do |installer| installer.pods_project.targets.each do |target| target.build_configurations.each do |config| config.build_settings['SWIFT_VERSION'] = '4.0' end end end ``` ` pod 'MJRefresh'` Execute a command `pod install` 4. Run your project `.xcworkspace` (`Cmd+R`)< #### Android 1. Open up `android/app/src/main/java/[...]/MainActivity.java` - Add `import com.janiokq.Nlist.RNNlistPackage;` to the imports at the top of the file - Add `new RNNlistPackage()` to the list returned by the `getPackages()` method 2. Append the following lines to `android/settings.gradle`: ``` include ':react-native-nlist' project(':react-native-nlist').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-nlist/android') ``` 3. Insert the following lines inside the dependencies block in `android/app/build.gradle`: ``` compile project(':react-native-nlist') ``` ## Attribute description ### onScroll { x:x, y:y, nx:nx, ny:ny, } android only nx,ny android is The last rolling start difference The negative number is upward. The positive number is downward. ### reactModuleForCell ios Template name AppRegistry.registerComponent generate AppRegistry.registerComponent('Itemlist', () => Itemlist); ### renderItem android Template name A class name or function name. ### springback android specific scroll rebound effect similar to IOS ### canRefresh Whether to use drop-down refresh ### canLoadmore Whether to use pull-up refresh ### refreshState Refresh state control ### loadinState Load state control ### onRefresh Refresh event ### onLoadmore Load event ### dataSource data source Array Object You must have the height attribute. ### reference Access to reference Component methods ## method ### scrollToPosition ``` /** * @param index items */ scrollToPosition(index: number); ``` ## Usage list Use ```javascript import RNNlist from 'react-native-nlist'; // TODO: What to do with the module? RNNlist; { this.RNNlist = r; }} onScroll={(e)=>{ // e.nativeEvent.contentOffset // { // x:x, // y:y, // nx:nx, // ny:ny, // } // android only // nx,ny android is The last rolling start difference The negative number is upward. The positive number is downward. }} // only android // onScrollto={(e)=>{ abandoned // // o and 1 // // 1 Scroll to the head // // 0 Scroll to the bottom // //e // alert(JSON.stringify(e)) // }} inserttheway={0} //ios Rendering template reactModuleForCell="Itemlist" //android Rendering template renderItem={Itemlist} //Rendering initialization of Android Initializeprops={{}} //Android rolling rebound effect springback={true} //Android template quantity // rowHeight={40} style={{ flex:1, // width:width, // height:height }} canRefresh={true} canLoadmore={true} refreshState={this.state.refreshState} loadinState={this.state.loadinState} dataSource={this.state.dataSource} onRefresh={()=>{ setTimeout(()=>{ this.getdata(); },1000) }} onLoadmore={()=>{ setTimeout(()=>{ this.adddata(); },1000) }} /> ``` Template registration ``` class Itemlist extends Component{ constructor(props){ super(props) } render() { let data = this.props; if(Platform.OS=='ios'){ data =this.props.data; } return ( {data.index} ) } } AppRegistry.registerComponent('Itemlist', () => Itemlist); ``` --- _Source: https://npm.io/package/react-native-nlist · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._