diff --git a/GiftedListView.js b/GiftedListView.js index 149a3bd..56dfe35 100644 --- a/GiftedListView.js +++ b/GiftedListView.js @@ -1,65 +1,20 @@ -'use strict' -var React = require('react-native'); +import React, { Component } from 'react'; +import { + ListView, + Platform, + TouchableHighlight, + View, + Text, + RefreshControl, + StyleSheet, +} from 'react-native'; -var { - ListView, - Platform, - TouchableHighlight, - View, - Text, - RefreshControl, -} = React; +import GiftedSpinner from 'react-native-gifted-spinner'; +export default class GiftedListView extends Component { -// small helper function which merged two objects into one -function MergeRecursive(obj1, obj2) { - for (var p in obj2) { - try { - if ( obj2[p].constructor==Object ) { - obj1[p] = MergeRecursive(obj1[p], obj2[p]); - } else { - obj1[p] = obj2[p]; - } - } catch(e) { - obj1[p] = obj2[p]; - } - } - return obj1; -} - -var GiftedSpinner = require('react-native-gifted-spinner'); - -var GiftedListView = React.createClass({ - - getDefaultProps() { - return { - customStyles: {}, - initialListSize: 10, - firstLoader: true, - pagination: true, - refreshable: true, - refreshableColors: undefined, - refreshableProgressBackgroundColor: undefined, - refreshableSize: undefined, - refreshableTitle: undefined, - refreshableTintColor: undefined, - renderRefreshControl: null, - headerView: null, - sectionHeaderView: null, - scrollEnabled: true, - withSections: false, - onFetch(page, callback, options) { callback([]); }, - - paginationFetchingView: null, - paginationAllLoadedView: null, - paginationWaitingView: null, - emptyView: null, - renderSeparator: null, - }; - }, - - propTypes: { + static propTypes = { customStyles: React.PropTypes.object, initialListSize: React.PropTypes.number, firstLoader: React.PropTypes.bool, @@ -82,38 +37,87 @@ var GiftedListView = React.createClass({ paginationWaitingView: React.PropTypes.func, emptyView: React.PropTypes.func, renderSeparator: React.PropTypes.func, - }, + }; + + static defaultProps = { + customStyles: {}, + initialListSize: 10, + firstLoader: true, + pagination: true, + refreshable: true, + refreshableColors: undefined, + refreshableProgressBackgroundColor: undefined, + refreshableSize: undefined, + refreshableTitle: undefined, + refreshableTintColor: undefined, + renderRefreshControl: null, + headerView: null, + sectionHeaderView: null, + scrollEnabled: true, + withSections: false, + onFetch(page, callback, options) { callback([]); }, + + paginationFetchingView: null, + paginationAllLoadedView: null, + paginationWaitingView: null, + emptyView: null, + renderSeparator: null, + }; + + state = { + page: 1, + rows: [], + dataSource: {}, + isRefreshing: false, + paginationStatus: 'firstLoad', + }; + + componentWillMount() { + let dataSource = null; + if (this.props.withSections === true) { + dataSource = new ListView.DataSource({ + rowHasChanged: (row1, row2) => row1 !== row2, + sectionHeaderHasChanged: (section1, section2) => section1 !== section2, + }); + } else { + dataSource = new ListView.DataSource({ + rowHasChanged: (row1, row2) => row1 !== row2, + }); + } - _setPage(page) { this._page = page; }, - _getPage() { return this._page; }, - _setRows(rows) { this._rows = rows; }, - _getRows() { return this._rows; }, + this.setState({dataSource}); + } + componentDidMount() { + this.props.onFetch(this.state.page, this._postRefresh, {firstLoad: true}); + } - paginationFetchingView() { + paginationFetchingView = () => { if (this.props.paginationFetchingView) { return this.props.paginationFetchingView(); } return ( - + ); - }, + } + paginationAllLoadedView() { if (this.props.paginationAllLoadedView) { return this.props.paginationAllLoadedView(); } return ( - - + + ~ ); - }, + } + paginationWaitingView(paginateCallback) { if (this.props.paginationWaitingView) { return this.props.paginationWaitingView(paginateCallback); @@ -123,28 +127,30 @@ var GiftedListView = React.createClass({ - + Load more ); - }, - headerView() { + } + + headerView = () => { if (this.state.paginationStatus === 'firstLoad' || !this.props.headerView){ return null; } return this.props.headerView(); - }, + } + emptyView(refreshCallback) { if (this.props.emptyView) { return this.props.emptyView(refreshCallback); } return ( - - + + Sorry, there is no content to display @@ -158,97 +164,64 @@ var GiftedListView = React.createClass({ ); - }, - renderSeparator() { + } + + renderSeparator = () => { if (this.props.renderSeparator) { return this.props.renderSeparator(); } return ( - + ); - }, - - getInitialState() { - this._setPage(1); - this._setRows([]); - - var ds = null; - if (this.props.withSections === true) { - ds = new ListView.DataSource({ - rowHasChanged: (row1, row2) => row1 !== row2, - sectionHeaderHasChanged: (section1, section2) => section1 !== section2, - }); - return { - dataSource: ds.cloneWithRowsAndSections(this._getRows()), - isRefreshing: false, - paginationStatus: 'firstLoad', - }; - } else { - ds = new ListView.DataSource({ - rowHasChanged: (row1, row2) => row1 !== row2, - }); - return { - dataSource: ds.cloneWithRows(this._getRows()), - isRefreshing: false, - paginationStatus: 'firstLoad', - }; - } - }, - - componentDidMount() { - this.props.onFetch(this._getPage(), this._postRefresh, {firstLoad: true}); - }, + } setNativeProps(props) { this.refs.listview.setNativeProps(props); - }, + } _refresh() { this._onRefresh({external: true}); - }, + } - _onRefresh(options = {}) { - if (this.isMounted()) { - this.setState({ - isRefreshing: true, - }); - this._setPage(1); - this.props.onFetch(this._getPage(), this._postRefresh, options); - } - }, + _onRefresh = (options = {}) => { + this.setState({ + isRefreshing: true, + }); + this.setState({page: 1}); + this.props.onFetch(this.state.page, this._postRefresh, options); - _postRefresh(rows = [], options = {}) { - if (this.isMounted()) { - this._updateRows(rows, options); - } - }, + } + + _postRefresh = (rows = [], options = {}) => { + this._updateRows(rows, options); + } - _onPaginate() { + _onPaginate = () => { if(this.state.paginationStatus==='allLoaded'){ return null }else { this.setState({ paginationStatus: 'fetching', }); - this.props.onFetch(this._getPage() + 1, this._postPaginate, {}); + this.props.onFetch(this.state.page + 1, this._postPaginate, {}); } - }, + } - _postPaginate(rows = [], options = {}) { - this._setPage(this._getPage() + 1); + _postPaginate = (rows = [], options = {}) => { + this.setState({page: (this.state.page + 1)}); var mergedRows = null; if (this.props.withSections === true) { - mergedRows = MergeRecursive(this._getRows(), rows); + mergedRows = MergeRecursive(this.state.rows, rows); } else { - mergedRows = this._getRows().concat(rows); + mergedRows = this.state.rows.concat(rows); } this._updateRows(mergedRows, options); - }, + } _updateRows(rows = [], options = {}) { if (rows !== null) { - this._setRows(rows); + this.setState({rows}); if (this.props.withSections === true) { this.setState({ dataSource: this.state.dataSource.cloneWithRowsAndSections(rows), @@ -268,21 +241,21 @@ var GiftedListView = React.createClass({ paginationStatus: (options.allLoaded === true ? 'allLoaded' : 'waiting'), }); } - }, + } - _renderPaginationView() { + _renderPaginationView = () => { if ((this.state.paginationStatus === 'fetching' && this.props.pagination === true) || (this.state.paginationStatus === 'firstLoad' && this.props.firstLoader === true)) { return this.paginationFetchingView(); - } else if (this.state.paginationStatus === 'waiting' && this.props.pagination === true && (this.props.withSections === true || this._getRows().length > 0)) { + } else if (this.state.paginationStatus === 'waiting' && this.props.pagination === true && (this.props.withSections === true || this.state.rows.length > 0)) { return this.paginationWaitingView(this._onPaginate); } else if (this.state.paginationStatus === 'allLoaded' && this.props.pagination === true) { return this.paginationAllLoadedView(); - } else if (this._getRows().length === 0) { + } else if (this.state.rows.length === 0) { return this.emptyView(this._onRefresh); } else { return null; } - }, + } renderRefreshControl() { if (this.props.renderRefreshControl) { @@ -299,7 +272,7 @@ var GiftedListView = React.createClass({ title={this.props.refreshableTitle} /> ); - }, + } render() { return ( @@ -322,34 +295,49 @@ var GiftedListView = React.createClass({ style={this.props.style} /> ); - }, + } + +} - defaultStyles: { - separator: { - height: 1, - backgroundColor: '#CCC' - }, - actionsLabel: { - fontSize: 20, - }, - paginationView: { - height: 44, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#FFF', - }, - defaultView: { - justifyContent: 'center', - alignItems: 'center', - padding: 20, - }, - defaultViewTitle: { - fontSize: 16, - fontWeight: 'bold', - marginBottom: 15, - }, +const defaultStyles = StyleSheet.create({ + separator: { + height: 1, + backgroundColor: '#CCC' + }, + actionsLabel: { + fontSize: 20, + }, + paginationView: { + height: 44, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#FFF', + }, + defaultView: { + justifyContent: 'center', + alignItems: 'center', + padding: 20, + }, + defaultViewTitle: { + fontSize: 16, + fontWeight: 'bold', + marginBottom: 15, }, }); -module.exports = GiftedListView; +// small helper function which merged two objects into one +function MergeRecursive(obj1, obj2) { + for (var p in obj2) { + try { + if ( obj2[p].constructor==Object ) { + obj1[p] = MergeRecursive(obj1[p], obj2[p]); + } else { + obj1[p] = obj2[p]; + } + } catch(e) { + obj1[p] = obj2[p]; + } + } + return obj1; +} diff --git a/GiftedListViewExample/.buckconfig b/GiftedListViewExample/.buckconfig new file mode 100644 index 0000000..934256c --- /dev/null +++ b/GiftedListViewExample/.buckconfig @@ -0,0 +1,6 @@ + +[android] + target = Google Inc.:Google APIs:23 + +[maven_repositories] + central = https://repo1.maven.org/maven2 diff --git a/GiftedListViewExample/.flowconfig b/GiftedListViewExample/.flowconfig index 71d9905..f56848d 100644 --- a/GiftedListViewExample/.flowconfig +++ b/GiftedListViewExample/.flowconfig @@ -14,17 +14,21 @@ # Ignore react and fbjs where there are overlaps, but don't ignore # anything that react-native relies on -.*/node_modules/fbjs-haste/.*/__tests__/.* -.*/node_modules/fbjs-haste/__forks__/Map.js -.*/node_modules/fbjs-haste/__forks__/Promise.js -.*/node_modules/fbjs-haste/__forks__/fetch.js -.*/node_modules/fbjs-haste/core/ExecutionEnvironment.js -.*/node_modules/fbjs-haste/core/isEmpty.js -.*/node_modules/fbjs-haste/crypto/crc32.js -.*/node_modules/fbjs-haste/stubs/ErrorUtils.js -.*/node_modules/react-haste/React.js -.*/node_modules/react-haste/renderers/dom/ReactDOM.js -.*/node_modules/react-haste/renderers/shared/event/eventPlugins/ResponderEventPlugin.js +.*/node_modules/fbjs/lib/Map.js +.*/node_modules/fbjs/lib/fetch.js +.*/node_modules/fbjs/lib/ExecutionEnvironment.js +.*/node_modules/fbjs/lib/ErrorUtils.js + +# Flow has a built-in definition for the 'react' module which we prefer to use +# over the currently-untyped source +.*/node_modules/react/react.js +.*/node_modules/react/lib/React.js +.*/node_modules/react/lib/ReactDOM.js + +.*/__mocks__/.* +.*/__tests__/.* + +.*/commoner/test/source/widget/share.js # Ignore commoner tests .*/node_modules/commoner/test/.* @@ -38,26 +42,55 @@ # Ignore Website .*/website/.* +# Ignore generators +.*/local-cli/generator.* + +# Ignore BUCK generated folders +.*\.buckd/ + +.*/node_modules/is-my-json-valid/test/.*\.json +.*/node_modules/iconv-lite/encodings/tables/.*\.json +.*/node_modules/y18n/test/.*\.json +.*/node_modules/spdx-license-ids/spdx-license-ids.json +.*/node_modules/spdx-exceptions/index.json +.*/node_modules/resolve/test/subdirs/node_modules/a/b/c/x.json +.*/node_modules/resolve/lib/core.json +.*/node_modules/jsonparse/samplejson/.*\.json +.*/node_modules/json5/test/.*\.json +.*/node_modules/ua-parser-js/test/.*\.json +.*/node_modules/builtin-modules/builtin-modules.json +.*/node_modules/binary-extensions/binary-extensions.json +.*/node_modules/url-regex/tlds.json +.*/node_modules/joi/.*\.json +.*/node_modules/isemail/.*\.json +.*/node_modules/tr46/.*\.json + + [include] [libs] node_modules/react-native/Libraries/react-native/react-native-interface.js +node_modules/react-native/flow +flow/ [options] module.system=haste +esproposal.class_static_fields=enable +esproposal.class_instance_fields=enable + munge_underscores=true module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' -module.name_mapper='^[./a-zA-Z0-9$_-]+\.png$' -> 'RelativeImageStub' +module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\)$' -> 'RelativeImageStub' suppress_type=$FlowIssue suppress_type=$FlowFixMe suppress_type=$FixMe -suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) -suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)? #[0-9]+ +suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-3]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) +suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-3]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy [version] -0.19.0 +0.23.0 diff --git a/GiftedListViewExample/.gitignore b/GiftedListViewExample/.gitignore index 94fc867..42c9490 100644 --- a/GiftedListViewExample/.gitignore +++ b/GiftedListViewExample/.gitignore @@ -32,3 +32,9 @@ local.properties # node_modules/ npm-debug.log + +# BUCK +buck-out/ +\.buckd/ +android/app/libs +android/keystores/debug.keystore diff --git a/GiftedListViewExample/android/app/BUCK b/GiftedListViewExample/android/app/BUCK new file mode 100644 index 0000000..88203f7 --- /dev/null +++ b/GiftedListViewExample/android/app/BUCK @@ -0,0 +1,66 @@ +import re + +# To learn about Buck see [Docs](https://buckbuild.com/). +# To run your application with Buck: +# - install Buck +# - `npm start` - to start the packager +# - `cd android` +# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US` +# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck +# - `buck install -r android/app` - compile, install and run application +# + +lib_deps = [] +for jarfile in glob(['libs/*.jar']): + name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile) + lib_deps.append(':' + name) + prebuilt_jar( + name = name, + binary_jar = jarfile, + ) + +for aarfile in glob(['libs/*.aar']): + name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile) + lib_deps.append(':' + name) + android_prebuilt_aar( + name = name, + aar = aarfile, + ) + +android_library( + name = 'all-libs', + exported_deps = lib_deps +) + +android_library( + name = 'app-code', + srcs = glob([ + 'src/main/java/**/*.java', + ]), + deps = [ + ':all-libs', + ':build_config', + ':res', + ], +) + +android_build_config( + name = 'build_config', + package = 'com.giftedlistviewexample', +) + +android_resource( + name = 'res', + res = 'src/main/res', + package = 'com.giftedlistviewexample', +) + +android_binary( + name = 'app', + package_type = 'debug', + manifest = 'src/main/AndroidManifest.xml', + keystore = '//android/keystores:debug', + deps = [ + ':app-code', + ], +) diff --git a/GiftedListViewExample/android/app/build.gradle b/GiftedListViewExample/android/app/build.gradle index 545d3f6..8c752b2 100644 --- a/GiftedListViewExample/android/app/build.gradle +++ b/GiftedListViewExample/android/app/build.gradle @@ -1,12 +1,15 @@ apply plugin: "com.android.application" +import com.android.build.OutputFile + /** - * The react.gradle file registers two tasks: bundleDebugJsAndAssets and bundleReleaseJsAndAssets. + * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets + * and bundleReleaseJsAndAssets). * These basically call `react-native bundle` with the correct arguments during the Android build * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the * bundle directly from the development server. Below you can see all the possible configurations * and their defaults. If you decide to add a configuration block, make sure to add it before the - * `apply from: "react.gradle"` line. + * `apply from: "../../node_modules/react-native/react.gradle"` line. * * project.ext.react = [ * // the name of the generated asset file containing your JS bundle @@ -21,6 +24,15 @@ apply plugin: "com.android.application" * // whether to bundle JS and assets in release mode * bundleInRelease: true, * + * // whether to bundle JS and assets in another build variant (if configured). + * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants + * // The configuration property can be in the following formats + * // 'bundleIn${productFlavor}${buildType}' + * // 'bundleIn${buildType}' + * // bundleInFreeDebug: true, + * // bundleInPaidRelease: true, + * // bundleInBeta: true, + * * // the root of your project, i.e. where "package.json" lives * root: "../../", * @@ -47,7 +59,22 @@ apply plugin: "com.android.application" * ] */ -apply from: "react.gradle" +apply from: "../../node_modules/react-native/react.gradle" + +/** + * Set this to true to create two separate APKs instead of one: + * - An APK that only works on ARM devices + * - An APK that only works on x86 devices + * The advantage is the size of the APK is reduced by about 4MB. + * Upload all the APKs to the Play Store and people will download + * the correct one based on the CPU architecture of their device. + */ +def enableSeparateBuildPerCPUArchitecture = false + +/** + * Run Proguard to shrink the Java bytecode in release builds. + */ +def enableProguardInReleaseBuilds = false android { compileSdkVersion 23 @@ -63,16 +90,44 @@ android { abiFilters "armeabi-v7a", "x86" } } + splits { + abi { + reset() + enable enableSeparateBuildPerCPUArchitecture + universalApk false // If true, also generate a universal APK + include "armeabi-v7a", "x86" + } + } buildTypes { release { - minifyEnabled false // Set this to true to enable Proguard + minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" } } + // applicationVariants are e.g. debug, release + applicationVariants.all { variant -> + variant.outputs.each { output -> + // For each separate APK per architecture, set a unique version code as described here: + // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits + def versionCodes = ["armeabi-v7a":1, "x86":2] + def abi = output.getFilter(OutputFile.ABI) + if (abi != null) { // null for the universal-debug, universal-release variants + output.versionCodeOverride = + versionCodes.get(abi) * 1048576 + defaultConfig.versionCode + } + } + } } dependencies { compile fileTree(dir: "libs", include: ["*.jar"]) compile "com.android.support:appcompat-v7:23.0.1" - compile "com.facebook.react:react-native:0.17.+" + compile "com.facebook.react:react-native:+" // From node_modules +} + +// Run this once to be able to run the application with BUCK +// puts all compile dependencies into folder libs for BUCK to use +task copyDownloadableDepsToLibs(type: Copy) { + from configurations.compile + into 'libs' } diff --git a/GiftedListViewExample/android/app/proguard-rules.pro b/GiftedListViewExample/android/app/proguard-rules.pro index ffa8c9f..347a13c 100644 --- a/GiftedListViewExample/android/app/proguard-rules.pro +++ b/GiftedListViewExample/android/app/proguard-rules.pro @@ -40,9 +40,12 @@ -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } -keep class * extends com.facebook.react.bridge.NativeModule { *; } +-keepclassmembers,includedescriptorclasses class * { native ; } -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } --keepclassmembers class * { @com.facebook.react.uimanager.ReactProp ; } --keepclassmembers class * { @com.facebook.react.uimanager.ReactPropGroup ; } +-keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } +-keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } + +-dontwarn com.facebook.react.** # okhttp diff --git a/GiftedListViewExample/android/app/react.gradle b/GiftedListViewExample/android/app/react.gradle deleted file mode 100644 index 1e08b00..0000000 --- a/GiftedListViewExample/android/app/react.gradle +++ /dev/null @@ -1,87 +0,0 @@ -import org.apache.tools.ant.taskdefs.condition.Os - -def config = project.hasProperty("react") ? project.react : []; - -def bundleAssetName = config.bundleAssetName ?: "index.android.bundle" -def entryFile = config.entryFile ?: "index.android.js" - -// because elvis operator -def elvisFile(thing) { - return thing ? file(thing) : null; -} - -def reactRoot = elvisFile(config.root) ?: file("../../") -def jsBundleDirDebug = elvisFile(config.jsBundleDirDebug) ?: - file("$buildDir/intermediates/assets/debug") -def jsBundleDirRelease = elvisFile(config.jsBundleDirRelease) ?: - file("$buildDir/intermediates/assets/release") -def resourcesDirDebug = elvisFile(config.resourcesDirDebug) ?: - file("$buildDir/intermediates/res/merged/debug") -def resourcesDirRelease = elvisFile(config.resourcesDirRelease) ?: - file("$buildDir/intermediates/res/merged/release") -def inputExcludes = config.inputExcludes ?: ["android/**", "ios/**"] - -def jsBundleFileDebug = file("$jsBundleDirDebug/$bundleAssetName") -def jsBundleFileRelease = file("$jsBundleDirRelease/$bundleAssetName") - -task bundleDebugJsAndAssets(type: Exec) { - // create dirs if they are not there (e.g. the "clean" task just ran) - doFirst { - jsBundleDirDebug.mkdirs() - resourcesDirDebug.mkdirs() - } - - // set up inputs and outputs so gradle can cache the result - inputs.files fileTree(dir: reactRoot, excludes: inputExcludes) - outputs.dir jsBundleDirDebug - outputs.dir resourcesDirDebug - - // set up the call to the react-native cli - workingDir reactRoot - if (Os.isFamily(Os.FAMILY_WINDOWS)) { - commandLine "cmd", "/c", "react-native", "bundle", "--platform", "android", "--dev", "true", "--entry-file", - entryFile, "--bundle-output", jsBundleFileDebug, "--assets-dest", resourcesDirDebug - } else { - commandLine "react-native", "bundle", "--platform", "android", "--dev", "true", "--entry-file", - entryFile, "--bundle-output", jsBundleFileDebug, "--assets-dest", resourcesDirDebug - } - - enabled config.bundleInDebug ?: false -} - -task bundleReleaseJsAndAssets(type: Exec) { - // create dirs if they are not there (e.g. the "clean" task just ran) - doFirst { - jsBundleDirRelease.mkdirs() - resourcesDirRelease.mkdirs() - } - - // set up inputs and outputs so gradle can cache the result - inputs.files fileTree(dir: reactRoot, excludes: inputExcludes) - outputs.dir jsBundleDirRelease - outputs.dir resourcesDirRelease - - // set up the call to the react-native cli - workingDir reactRoot - if (Os.isFamily(Os.FAMILY_WINDOWS)) { - commandLine "cmd","/c", "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file", - entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease - } else { - commandLine "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file", - entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease - } - - enabled config.bundleInRelease ?: true -} - -gradle.projectsEvaluated { - // hook bundleDebugJsAndAssets into the android build process - bundleDebugJsAndAssets.dependsOn mergeDebugResources - bundleDebugJsAndAssets.dependsOn mergeDebugAssets - processDebugResources.dependsOn bundleDebugJsAndAssets - - // hook bundleReleaseJsAndAssets into the android build process - bundleReleaseJsAndAssets.dependsOn mergeReleaseResources - bundleReleaseJsAndAssets.dependsOn mergeReleaseAssets - processReleaseResources.dependsOn bundleReleaseJsAndAssets -} diff --git a/GiftedListViewExample/android/app/src/main/AndroidManifest.xml b/GiftedListViewExample/android/app/src/main/AndroidManifest.xml index 9b835fd..520f053 100644 --- a/GiftedListViewExample/android/app/src/main/AndroidManifest.xml +++ b/GiftedListViewExample/android/app/src/main/AndroidManifest.xml @@ -1,7 +1,14 @@ + package="com.giftedlistviewexample" + android:versionCode="1" + android:versionName="1.0"> + + + getPackages() { + return Arrays.asList( + new MainReactPackage() + ); } } diff --git a/GiftedListViewExample/android/build.gradle b/GiftedListViewExample/android/build.gradle index ccdfc4e..403a007 100644 --- a/GiftedListViewExample/android/build.gradle +++ b/GiftedListViewExample/android/build.gradle @@ -16,5 +16,9 @@ allprojects { repositories { mavenLocal() jcenter() + maven { + // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm + url "$projectDir/../../node_modules/react-native/android" + } } } diff --git a/GiftedListViewExample/android/keystores/BUCK b/GiftedListViewExample/android/keystores/BUCK new file mode 100644 index 0000000..15da20e --- /dev/null +++ b/GiftedListViewExample/android/keystores/BUCK @@ -0,0 +1,8 @@ +keystore( + name = 'debug', + store = 'debug.keystore', + properties = 'debug.keystore.properties', + visibility = [ + 'PUBLIC', + ], +) diff --git a/GiftedListViewExample/android/keystores/debug.keystore.properties b/GiftedListViewExample/android/keystores/debug.keystore.properties new file mode 100644 index 0000000..121bfb4 --- /dev/null +++ b/GiftedListViewExample/android/keystores/debug.keystore.properties @@ -0,0 +1,4 @@ +key.store=debug.keystore +key.alias=androiddebugkey +key.store.password=android +key.alias.password=android diff --git a/GiftedListViewExample/example_advanced.js b/GiftedListViewExample/example_advanced.js index 9b6711b..d42c7a8 100644 --- a/GiftedListViewExample/example_advanced.js +++ b/GiftedListViewExample/example_advanced.js @@ -2,22 +2,21 @@ * Sample React Native App * https://github.com/facebook/react-native */ -'use strict'; -var React = require('react-native'); -var { +import React, { Component } from 'react'; +import { StyleSheet, Text, View, TouchableHighlight, Platform -} = React; +} from 'react-native'; -var GiftedListView = require('react-native-gifted-listview'); -var GiftedSpinner = require('react-native-gifted-spinner'); +import GiftedListView from 'react-native-gifted-listview'; +import GiftedSpinner from 'react-native-gifted-spinner'; + +export default class GiftedListViewExample extends Component { -var Example = React.createClass({ - /** * Will be called when refreshing * Should be replaced by your own logic @@ -33,37 +32,36 @@ var Example = React.createClass({ if (page === 5) { callback(rows, { allLoaded: true, // the end of the list is reached - }); + }); } else { callback(rows); } }, 1000); // simulating network fetching - }, - - + } + + /** * When a row is touched * @param {object} rowData Row data */ _onPress(rowData) { console.log(rowData+' pressed'); - }, - + } + /** * Render a row * @param {object} rowData Row data */ - _renderRowView(rowData) { + _renderRowView = (rowData) => { return ( - this._onPress(rowData)} - > + onPress={() => this._onPress(rowData)} > {rowData} ); - }, + } /** * Render a row @@ -77,8 +75,8 @@ var Example = React.createClass({ ); - }, - + } + /** * Render the refreshable view when waiting for refresh * On Android, the view should be touchable to trigger the refreshCallback @@ -95,7 +93,7 @@ var Example = React.createClass({ ); } else { return ( - ); } - }, + } /** * Render the refreshable view when the pull to refresh has been activated @@ -120,7 +118,7 @@ var Example = React.createClass({ ); - }, + } /** * Render the refreshable view when fetching @@ -131,15 +129,15 @@ var Example = React.createClass({ ); - }, - + } + /** * Render the pagination view when waiting for touch * @param {function} paginateCallback The function to call to load more rows */ _renderPaginationWaitingView(paginateCallback) { return ( - ); - }, - + } + /** * Render the pagination view when fetching */ @@ -160,8 +158,8 @@ var Example = React.createClass({ ); - }, - + } + /** * Render the pagination view when end of list is reached */ @@ -173,8 +171,8 @@ var Example = React.createClass({ ); - }, - + } + /** * Render a view when there is no row to display at the first fetch * @param {function} refreshCallback The function to call to refresh the listview @@ -185,8 +183,8 @@ var Example = React.createClass({ Sorry, there is no content to display - - @@ -196,8 +194,8 @@ var Example = React.createClass({ ); - }, - + } + /** * Render a separator between rows */ @@ -205,8 +203,8 @@ var Example = React.createClass({ return ( ); - }, - + } + render() { return ( @@ -215,12 +213,12 @@ var Example = React.createClass({ ); } -}); +} var customStyles = { @@ -313,5 +311,3 @@ var screenStyles = { marginTop: 12, } }; - -module.exports = Example; diff --git a/GiftedListViewExample/example_simple.js b/GiftedListViewExample/example_simple.js index f07120a..f9a2cd0 100644 --- a/GiftedListViewExample/example_simple.js +++ b/GiftedListViewExample/example_simple.js @@ -2,20 +2,19 @@ * Sample React Native App * https://github.com/facebook/react-native */ -'use strict'; -var React = require('react-native'); -var { +import React, { Component } from 'react'; +import { StyleSheet, Text, View, TouchableHighlight -} = React; +} from 'react-native'; -var GiftedListView = require('react-native-gifted-listview'); +import GiftedListView from 'react-native-gifted-listview'; + +export default class GiftedListViewExample extends Component { -var Example = React.createClass({ - /** * Will be called when refreshing * Should be replaced by your own logic @@ -23,44 +22,43 @@ var Example = React.createClass({ * @param {function} callback Should pass the rows * @param {object} options Inform if first load */ - _onFetch(page = 1, callback, options) { + _onFetch = (page = 1, callback, options) => { setTimeout(() => { var rows = ['row '+((page - 1) * 3 + 1), 'row '+((page - 1) * 3 + 2), 'row '+((page - 1) * 3 + 3)]; if (page === 3) { callback(rows, { allLoaded: true, // the end of the list is reached - }); + }); } else { callback(rows); } }, 1000); // simulating network fetching - }, - - + } + /** * When a row is touched * @param {object} rowData Row data */ - _onPress(rowData) { + _onPress(rowData){ console.log(rowData+' pressed'); - }, - + } + /** * Render a row * @param {object} rowData Row data */ - _renderRowView(rowData) { + _renderRowView = (rowData) => { return ( - this._onPress(rowData)} - > + > {rowData} ); - }, - + } + render() { return ( @@ -76,9 +74,10 @@ var Example = React.createClass({ ); } -}); -var styles = { +} + +const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#FFF', @@ -91,6 +90,4 @@ var styles = { padding: 10, height: 44, }, -}; - -module.exports = Example; +}); diff --git a/GiftedListViewExample/index.android.js b/GiftedListViewExample/index.android.js index a6f70ff..b66e2f4 100644 --- a/GiftedListViewExample/index.android.js +++ b/GiftedListViewExample/index.android.js @@ -2,13 +2,12 @@ * Sample React Native App * https://github.com/facebook/react-native */ -'use strict'; -var React = require('react-native'); -var { - AppRegistry -} = React; + import React, { Component } from 'react'; + import { + AppRegistry + } from 'react-native'; -var Example = require('./example_advanced.js'); + import GiftedListViewExample from './example_advanced.js'; -AppRegistry.registerComponent('GiftedListViewExample', () => Example); + AppRegistry.registerComponent('GiftedListViewExample', () => GiftedListViewExample); diff --git a/GiftedListViewExample/index.ios.js b/GiftedListViewExample/index.ios.js index a6f70ff..141a4e9 100644 --- a/GiftedListViewExample/index.ios.js +++ b/GiftedListViewExample/index.ios.js @@ -2,13 +2,12 @@ * Sample React Native App * https://github.com/facebook/react-native */ -'use strict'; -var React = require('react-native'); -var { +import React, { Component } from 'react'; +import { AppRegistry -} = React; +} from 'react-native'; -var Example = require('./example_advanced.js'); +import GiftedListViewExample from './example_advanced.js'; -AppRegistry.registerComponent('GiftedListViewExample', () => Example); +AppRegistry.registerComponent('GiftedListViewExample', () => GiftedListViewExample); diff --git a/GiftedListViewExample/ios/GiftedListViewExample.xcodeproj/project.pbxproj b/GiftedListViewExample/ios/GiftedListViewExample.xcodeproj/project.pbxproj index d4eba25..8857f36 100644 --- a/GiftedListViewExample/ios/GiftedListViewExample.xcodeproj/project.pbxproj +++ b/GiftedListViewExample/ios/GiftedListViewExample.xcodeproj/project.pbxproj @@ -525,7 +525,7 @@ ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; - shellScript = "../node_modules/react-native/packager/react-native-xcode.sh"; + shellScript = "export NODE_BINARY=node\n../node_modules/react-native/packager/react-native-xcode.sh"; showEnvVarsInLog = 1; }; /* End PBXShellScriptBuildPhase section */ diff --git a/GiftedListViewExample/ios/GiftedListViewExample/AppDelegate.m b/GiftedListViewExample/ios/GiftedListViewExample/AppDelegate.m index 1678e6e..1e87998 100644 --- a/GiftedListViewExample/ios/GiftedListViewExample/AppDelegate.m +++ b/GiftedListViewExample/ios/GiftedListViewExample/AppDelegate.m @@ -36,7 +36,9 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:( /** * OPTION 2 * Load from pre-bundled file on disk. The static bundle is automatically - * generated by "Bundle React Native code and images" build step. + * generated by the "Bundle React Native code and images" build step when + * running the project on an actual device or running the project on the + * simulator in the "Release" build configuration. */ // jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; diff --git a/GiftedListViewExample/ios/GiftedListViewExampleTests/GiftedListViewExampleTests.m b/GiftedListViewExample/ios/GiftedListViewExampleTests/GiftedListViewExampleTests.m index 987c667..33b241f 100644 --- a/GiftedListViewExample/ios/GiftedListViewExampleTests/GiftedListViewExampleTests.m +++ b/GiftedListViewExample/ios/GiftedListViewExampleTests/GiftedListViewExampleTests.m @@ -13,7 +13,7 @@ #import "RCTLog.h" #import "RCTRootView.h" -#define TIMEOUT_SECONDS 240 +#define TIMEOUT_SECONDS 600 #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" @interface GiftedListViewExampleTests : XCTestCase diff --git a/GiftedListViewExample/package.json b/GiftedListViewExample/package.json index b10926e..3038e7c 100644 --- a/GiftedListViewExample/package.json +++ b/GiftedListViewExample/package.json @@ -3,11 +3,12 @@ "version": "0.0.1", "private": true, "scripts": { - "start": "node_modules/react-native/packager/packager.sh" + "start": "node node_modules/react-native/local-cli/cli.js start" }, "dependencies": { - "react-native": "^0.17.0", - "react-native-gifted-listview": "0.0.7", + "react": "^0.14.8", + "react-native": "^0.25.1", + "react-native-gifted-listview": "file:../", "react-native-gifted-spinner": "0.0.3" } } diff --git a/README.md b/README.md index 0c23a6c..18f1e93 100644 --- a/README.md +++ b/README.md @@ -17,17 +17,17 @@ A ListView with pull-to-refresh, infinite scrolling and more for Android and iOS ```js -var React = require('react-native'); -var { +import React, { Component } from 'react'; +import { StyleSheet, Text, View, TouchableHighlight -} = React; +} from 'react-native'; -var GiftedListView = require('react-native-gifted-listview'); +import GiftedListView from 'react-native-gifted-listview'; -var Example = React.createClass({ +export default class GiftedListViewExample extends Component { /** * Will be called when refreshing @@ -36,43 +36,42 @@ var Example = React.createClass({ * @param {function} callback Should pass the rows * @param {object} options Inform if first load */ - _onFetch(page = 1, callback, options) { + _onFetch = (page = 1, callback, options) => { setTimeout(() => { var rows = ['row '+((page - 1) * 3 + 1), 'row '+((page - 1) * 3 + 2), 'row '+((page - 1) * 3 + 3)]; if (page === 3) { callback(rows, { allLoaded: true, // the end of the list is reached - }); + }); } else { callback(rows); } }, 1000); // simulating network fetching - }, - + } /** * When a row is touched * @param {object} rowData Row data */ - _onPress(rowData) { + _onPress(rowData){ console.log(rowData+' pressed'); - }, + } /** * Render a row * @param {object} rowData Row data */ - _renderRowView(rowData) { + _renderRowView = (rowData) => { return ( this._onPress(rowData)} - > + > {rowData} ); - }, + } render() { return ( @@ -85,20 +84,14 @@ var Example = React.createClass({ pagination={true} // enable infinite scrolling using touch to load more refreshable={true} // enable pull-to-refresh for iOS and touch-to-refresh for Android withSections={false} // enable sections - customStyles={{ - paginationView: { - backgroundColor: '#eee', - }, - }} - - refreshableTintColor="blue" /> ); } -}); -var styles = { +} + +const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#FFF', @@ -111,7 +104,7 @@ var styles = { padding: 10, height: 44, }, -}; +}); ```