Giter VIP home page Giter VIP logo

react-native-android-recyclerview's Introduction

react-native-android-recyclerview

Getting started

$ npm install react-native-android-recyclerview --save

Mostly automatic installation(react-native < 0.60)

$ react-native link rreact-native-android-recyclerview

Manual installation

Android

  1. Open up android/app/src/main/java/[...]/MainActivity.java
  • Add import com.rn.recycleview.RNRecycleviewPackage; to the imports at the top of the file
  • Add new RNRecycleviewPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':react-native-android-recyclerview'
    project(':react-native-android-recyclerview').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-android-recyclerview/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      compile project(':react-native-android-recyclerview')
    

Usage

import {RecyclerView,DataSource} from 'react-native-android-recyclerview';

<RecyclerView
    ref={(component) => this._recycler = component}
    style={{ flex: 1 }}
    dataSource={dataSource}
    renderItem={(item,index)=>{
        return(
            <View/>
        )   
    }}
    windowSize={50}
    initialScrollIndex={0}
    inverted={false}
    column={1}
    onScrollBeginDrag={(event)=>{
        console.log('onScrollBeginDrag')
    }}
    onScroll={(event)=>{
        console.log('onScroll')
    }}
    onScrollEndDrag={(event)=>{
        console.log('onScrollEndDrag')
    }}
    onContentSizeChange={(event)=>{
        console.log('onContentSizeChange')
    }}
    onVisibleItemsChange={(event)=>{
        console.log('onVisibleItemsChange')
    }}
    ListHeaderComponent={(
        <View style={{ paddingTop: 15, backgroundColor: '#eee' }} />
    )}
    ListFooterComponent={(
        <View style={{ paddingTop: 15, backgroundColor: '#aaa'}} />
    )}
    ListEmptyComponent={(
        <View style={{ borderColor: '#e7e7e7', borderWidth: 1, margin: 10, padding: 20, }}>
            <Text style={{ fontSize: 15 }}>Empty Component</Text>
        </View>
    )}
    ItemSeparatorComponent={(
        <View style={{ borderBottomWidth: 1, borderColor: '#e7e7e7', marginHorizontal: 5, marginVertical: 10 }} />
    )} 
/>

Example

Check example in the folder.

$ cd example
$ npm install
$ react-native run-android

Other

Project fork's react-native-recyclerview-list

react-native-android-recyclerview's People

Contributors

hackinggate avatar itangjie avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.