diff --git a/android/app/build.gradle b/android/app/build.gradle index 613f5e1..fac1f08 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -96,6 +96,19 @@ android { abiFilters "armeabi-v7a", "x86" } } + signingConfigs { + release { + storeFile file(MYAPP_RELEASE_STORE_FILE) + storePassword MYAPP_RELEASE_STORE_PASSWORD + keyAlias MYAPP_RELEASE_KEY_ALIAS + keyPassword MYAPP_RELEASE_KEY_PASSWORD + } + } + buildTypes { + release { + signingConfig signingConfigs.release + } + } splits { abi { reset() diff --git a/android/app/my-release-key.keystore b/android/app/my-release-key.keystore new file mode 100644 index 0000000..5ef8ba0 Binary files /dev/null and b/android/app/my-release-key.keystore differ diff --git a/android/app/src/main/java/com/performanceexample/CustomAdapter.java b/android/app/src/main/java/com/performanceexample/CustomAdapter.java new file mode 100755 index 0000000..e8d73e3 --- /dev/null +++ b/android/app/src/main/java/com/performanceexample/CustomAdapter.java @@ -0,0 +1,87 @@ +package com.performanceexample; + +import android.graphics.Color; +import android.graphics.drawable.Animatable; +import android.support.v7.widget.RecyclerView; +import android.util.Log; +import android.view.LayoutInflater; +import android.view.View; +import android.view.ViewGroup; + +import com.facebook.react.bridge.ReadableMap; +import com.facebook.drawee.backends.pipeline.Fresco; +import com.facebook.drawee.view.SimpleDraweeView; +import com.facebook.drawee.interfaces.DraweeController; +import com.facebook.imagepipeline.request.ImageRequest; +import com.facebook.imagepipeline.request.ImageRequestBuilder; +import com.facebook.imagepipeline.common.ResizeOptions; +import com.facebook.imagepipeline.request.ImageRequest.RequestLevel; + +import java.util.List; + +import static android.support.v7.widget.RecyclerView.*; + +public class CustomAdapter extends RecyclerView.Adapter { + String TAG = "react"; + private List list; + + public CustomAdapter(List list) { + this.list = list; + } + + + @Override + public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { + View itemView = LayoutInflater.from(parent.getContext()) + .inflate(R.layout.image_list_row, parent, false); + return new MyViewHolder(itemView); + } + + @Override + public void onViewDetachedFromWindow (MyViewHolder holder) { + if ( holder.gifView.getController() != null) { + Animatable animatable = holder.gifView.getController().getAnimatable(); + if (animatable != null) { + Log.d("Test", "animatable has allready been set"); +// animatable.start(); +// // later + animatable.stop(); + } else { + Log.d("Test", "animatable has not been set"); + } + } + } + + @Override + public void onBindViewHolder(MyViewHolder holder, int position) { + ListViewCell listViewCell = list.get(position); + + DraweeController controller = Fresco.newDraweeControllerBuilder() + .setUri(listViewCell.getUri()) + .setAutoPlayAnimations(true) + .build(); + holder.gifView.setController(controller); + + //holder.gifView.setImageURI(listViewCell.getUri()); + /* + ImageRequest imageRequest = + ImageRequestBuilder.newBuilderWithSource(listViewCell.getUri()) + //.setResizeOptions(new ResizeOptions(350, 200)) + .setLowestPermittedRequestLevel(RequestLevel.FULL_FETCH) + .build(); + DraweeController draweeController = Fresco.newDraweeControllerBuilder() + .setImageRequest(imageRequest) + .setOldController(holder.gifView.getController()) + .setAutoPlayAnimations(true) + .build(); + holder.gifView.setController(draweeController); + */ + } + + @Override + public int getItemCount() { + return list.size(); + } + + +} diff --git a/android/app/src/main/java/com/performanceexample/ListViewCell.java b/android/app/src/main/java/com/performanceexample/ListViewCell.java new file mode 100755 index 0000000..81b0051 --- /dev/null +++ b/android/app/src/main/java/com/performanceexample/ListViewCell.java @@ -0,0 +1,17 @@ +package com.performanceexample; + +import android.net.Uri; + +public class ListViewCell { + private Uri uri; + + public ListViewCell(String uri) { + this.uri = Uri.parse(uri); + } + + + public Uri getUri() { + return uri; + } + +} diff --git a/android/app/src/main/java/com/performanceexample/ListViewPackage.java b/android/app/src/main/java/com/performanceexample/ListViewPackage.java new file mode 100755 index 0000000..850f8eb --- /dev/null +++ b/android/app/src/main/java/com/performanceexample/ListViewPackage.java @@ -0,0 +1,33 @@ +package com.performanceexample; + +import com.facebook.react.ReactPackage; +import com.facebook.react.bridge.JavaScriptModule; +import com.facebook.react.bridge.NativeModule; +import com.facebook.react.bridge.ReactApplicationContext; +import com.facebook.react.uimanager.ViewManager; + +import java.util.ArrayList; +import java.util.Arrays; +import java.util.Collections; +import java.util.List; + + +public class ListViewPackage implements ReactPackage { + + @Override + public List createNativeModules(ReactApplicationContext reactContext) { + return Collections.emptyList(); + } + + @Override + public List> createJSModules() { + return Collections.emptyList(); + } + + @Override + public List createViewManagers(ReactApplicationContext reactContext) { + return Arrays.asList( + new ReactListViewManager() + ); + } +} diff --git a/android/app/src/main/java/com/performanceexample/MainApplication.java b/android/app/src/main/java/com/performanceexample/MainApplication.java index 51799ea..b3c4128 100644 --- a/android/app/src/main/java/com/performanceexample/MainApplication.java +++ b/android/app/src/main/java/com/performanceexample/MainApplication.java @@ -10,6 +10,8 @@ import com.facebook.react.shell.MainReactPackage; import com.facebook.soloader.SoLoader; +import com.performanceexample.ListViewPackage; + import java.util.Arrays; import java.util.List; @@ -24,8 +26,8 @@ public boolean getUseDeveloperSupport() { @Override protected List getPackages() { return Arrays.asList( - new MainReactPackage() - ); + new MainReactPackage(), + new ListViewPackage()); } }; diff --git a/android/app/src/main/java/com/performanceexample/MyViewHolder.java b/android/app/src/main/java/com/performanceexample/MyViewHolder.java new file mode 100755 index 0000000..d10d457 --- /dev/null +++ b/android/app/src/main/java/com/performanceexample/MyViewHolder.java @@ -0,0 +1,17 @@ +package com.performanceexample; + +import android.graphics.Color; +import android.support.v7.widget.RecyclerView; +import android.view.View; + +import com.facebook.drawee.view.SimpleDraweeView; + +public class MyViewHolder extends RecyclerView.ViewHolder { + public SimpleDraweeView gifView; + + public MyViewHolder(View view) { + super(view); + gifView = (SimpleDraweeView) view.findViewById(R.id.my_image_view); + + } +} \ No newline at end of file diff --git a/android/app/src/main/java/com/performanceexample/ReactListViewManager.java b/android/app/src/main/java/com/performanceexample/ReactListViewManager.java new file mode 100755 index 0000000..0211bca --- /dev/null +++ b/android/app/src/main/java/com/performanceexample/ReactListViewManager.java @@ -0,0 +1,72 @@ +package com.performanceexample; + +import android.support.annotation.Nullable; +import android.support.v7.widget.DefaultItemAnimator; +import android.support.v7.widget.LinearLayoutManager; +import android.support.v7.widget.RecyclerView; +import android.util.Log; + +import com.facebook.react.bridge.ReadableArray; +import com.facebook.react.bridge.ReadableMap; +import com.facebook.react.uimanager.SimpleViewManager; +import com.facebook.react.uimanager.ThemedReactContext; +import com.facebook.react.uimanager.ViewProps; +import com.facebook.react.uimanager.annotations.ReactProp; + +import org.json.JSONArray; +import org.json.JSONException; +import org.json.JSONObject; + +import java.util.ArrayList; +import java.util.Iterator; +import java.util.List; +import java.util.Map; + +import static com.facebook.react.common.ReactConstants.TAG; + +/** + * Created by root on 25/10/16. + */ + +public class ReactListViewManager extends SimpleViewManager { + private List list = new ArrayList<>(); + private RecyclerView recyclerView; + private CustomAdapter mAdapter; + + @Override + public String getName() { + return "RCTListView"; + } + + @Override + protected RecyclerView createViewInstance(ThemedReactContext reactContext) { + mAdapter = new CustomAdapter(list); + return new RecyclerView(reactContext); + } + + @ReactProp(name = "src") + public void setSrc(RecyclerView view,@Nullable ReadableMap src) { + view.setHasFixedSize(true); + RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(view.getContext()); + view.setLayoutManager(mLayoutManager); + view.setItemAnimator(new DefaultItemAnimator()); + view.setAdapter(mAdapter); + prepareImageData(src); + } + + private void prepareImageData(ReadableMap map){ + + ReadableArray obj = map.getArray("images"); + for(int i = 0; i + + + + + diff --git a/android/gradle.properties b/android/gradle.properties index 1fd964e..e1f6fa9 100644 --- a/android/gradle.properties +++ b/android/gradle.properties @@ -18,3 +18,7 @@ # org.gradle.parallel=true android.useDeprecatedNdk=true +MYAPP_RELEASE_STORE_FILE=my-release-key.keystore +MYAPP_RELEASE_KEY_ALIAS=my-key-alias +MYAPP_RELEASE_STORE_PASSWORD=password +MYAPP_RELEASE_KEY_PASSWORD=password diff --git a/js/AndroidImageList.js b/js/AndroidImageList.js new file mode 100644 index 0000000..62243ff --- /dev/null +++ b/js/AndroidImageList.js @@ -0,0 +1,12 @@ +import { PropTypes } from 'react'; +import { requireNativeComponent, View } from 'react-native'; + +var iface = { + name: 'ImageView', + propTypes: { + src: PropTypes.object, + ...View.propTypes // include the default view properties + }, +} + +module.exports = requireNativeComponent('RCTListView', iface) diff --git a/js/Background.js b/js/Background.js index 34ea749..6f5cd48 100644 --- a/js/Background.js +++ b/js/Background.js @@ -1,7 +1,7 @@ import React from 'react' import { Image, View } from 'react-native' -import bgImage from './assets/bg_transparent.png' -//import bgImage from './assets/bg_solid.png' + +import bgImage from './assets/bg_solid.png' import style from './Style' @@ -14,16 +14,11 @@ export const BaseView = (props) => { } export const BgView = (props) => { - const propStyle = { - backgroundColor: 'transparent' - } - return ( ) diff --git a/js/GiphyImages.js b/js/GiphyImages.js index 063f0e9..067103e 100644 --- a/js/GiphyImages.js +++ b/js/GiphyImages.js @@ -1,92 +1,68 @@ export const CatImages = [ { - title: 'Cat 1', - subTitle: 'meow 1', - small: 'https://media0.giphy.com/media/iuHaJ0D7macZq/100.gif', - big: 'https://media0.giphy.com/media/iuHaJ0D7macZq/200.gif' + //small: 'http://media3.giphy.com/media/iuHaJ0D7macZq/giphy-preview.gif',// + small: 'http://media3.giphy.com/media/iuHaJ0D7macZq/200_d.gif', + big: 'https://media0.giphy.com/media/iuHaJ0D7macZq/100.gif' }, + { - title: 'Cat 2', - subTitle: 'meow 2', - small: 'https://media3.giphy.com/media/Z1kpfgtHmpWHS/100.gif', - big: 'https://media3.giphy.com/media/Z1kpfgtHmpWHS/200.gif' + //small: 'http://media4.giphy.com/media/Z1kpfgtHmpWHS/giphy-preview.gif',// + small: 'http://media3.giphy.com/media/Z1kpfgtHmpWHS/200_d.gif', + big: 'https://media3.giphy.com/media/Z1kpfgtHmpWHS/100.gif' }, { - title: 'Cat 3', - subTitle: 'meow 3', - small: 'https://media3.giphy.com/media/mAzfiSQub2jEA/100.gif', - big: 'https://media3.giphy.com/media/mAzfiSQub2jEA/200.gif' + //small: 'http://media2.giphy.com/media/mAzfiSQub2jEA/giphy-preview.gif', + small: 'http://media2.giphy.com/media/mAzfiSQub2jEA/200_d.gif', + big: 'https://media3.giphy.com/media/mAzfiSQub2jEA/100.gif' }, { - title: 'Cat 4', - subTitle: 'meow 4', - small: 'https://media0.giphy.com/media/tVmthN5Mf8lGg/100.gif', - big: 'https://media0.giphy.com/media/tVmthN5Mf8lGg/200.gif' + //small: 'http://media3.giphy.com/media/tVmthN5Mf8lGg/giphy-preview.gif', + small: 'http://media3.giphy.com/media/tVmthN5Mf8lGg/200_d.gif', + big: 'https://media0.giphy.com/media/tVmthN5Mf8lGg/100.gif' }, { - title: 'Cat 5', - subTitle: 'meow 5', - small: 'https://media2.giphy.com/media/uI1wAzSiJN3Rm/100.gif', - big: 'https://media2.giphy.com/media/uI1wAzSiJN3Rm/200.gif' + //small: 'http://media2.giphy.com/media/uI1wAzSiJN3Rm/giphy-preview.gif', + small: 'http://media2.giphy.com/media/uI1wAzSiJN3Rm/200_d.gif', + big: 'https://media2.giphy.com/media/uI1wAzSiJN3Rm/100.gif' }, { - title: 'Cat 6', - subTitle: 'meow 6', - small: 'https://media1.giphy.com/media/q1cm3LOOb5QVq/100.gif', - big: 'https://media1.giphy.com/media/q1cm3LOOb5QVq/200.gif' + //small: 'http://media2.giphy.com/media/q1cm3LOOb5QVq/giphy-preview.gif',// + small: 'http://media2.giphy.com/media/q1cm3LOOb5QVq/200_d.gif', + big: 'https://media1.giphy.com/media/q1cm3LOOb5QVq/100.gif' }, { - title: 'Cat 7', - subTitle: 'meow 7', - small: 'https://media4.giphy.com/media/loDak9WVj8DYc/100.gif', - big: 'https://media4.giphy.com/media/loDak9WVj8DYc/200.gif' + // small: 'http://media4.giphy.com/media/loDak9WVj8DYc/giphy-preview.gif', + small: 'http://media4.giphy.com/media/loDak9WVj8DYc/200_d.gif', + big: 'https://media4.giphy.com/media/loDak9WVj8DYc/100.gif' }, { - title: 'Cat 8', - subTitle: 'meow 8', - small: 'https://media0.giphy.com/media/rIFc8qJD19lPG/100.gif', - big: 'https://media0.giphy.com/media/rIFc8qJD19lPG/200.gif' + //small: 'http://media0.giphy.com/media/rIFc8qJD19lPG/giphy-preview.gif', + small: 'http://media0.giphy.com/media/rIFc8qJD19lPG/200_d.gif', + big: 'https://media0.giphy.com/media/rIFc8qJD19lPG/100.gif' }, { - title: 'Cat 9', - subTitle: 'meow 9', - small: 'https://media0.giphy.com/media/jr12H86OeFWhy/100.gif', - big: 'https://media0.giphy.com/media/jr12H86OeFWhy/200.gif' + //small: 'http://media2.giphy.com/media/jr12H86OeFWhy/giphy-preview.gif', + small: 'http://media2.giphy.com/media/jr12H86OeFWhy/200_d.gif', + big: 'https://media0.giphy.com/media/jr12H86OeFWhy/100.gif' }, { - title: 'Cat 10', - subTitle: 'meow 10', - small: 'https://media2.giphy.com/media/oPsg8so2uamXe/100.gif', - big: 'https://media2.giphy.com/media/oPsg8so2uamXe/200.gif' + small: 'http://media2.giphy.com/media/oPsg8so2uamXe/200_d.gif', + big: 'https://media2.giphy.com/media/oPsg8so2uamXe/100.gif' }, { - title: 'Cat 11', - subTitle: 'meow 11', - small: 'https://media2.giphy.com/media/mw1sOcRNbtlbq/100.gif', - big: 'https://media2.giphy.com/media/mw1sOcRNbtlbq/200.gif' + small: 'http://media4.giphy.com/media/mw1sOcRNbtlbq/200_d.gif', + big: 'https://media4.giphy.com/media/mlvseq9yvZhba/100.gif' }, { - title: 'Cat 12', - subTitle: 'meow 12', - small: 'https://media4.giphy.com/media/mlvseq9yvZhba/100.gif', - big: 'https://media4.giphy.com/media/mlvseq9yvZhba/200.gif' + small: 'http://media0.giphy.com/media/jTnGaiuxvvDNK/200_d.gif', + big: 'https://media2.giphy.com/media/jTnGaiuxvvDNK/100.gif' }, { - title: 'Cat 13', - subTitle: 'meow 13', - small: 'https://media2.giphy.com/media/jTnGaiuxvvDNK/100.gif', - big: 'https://media2.giphy.com/media/jTnGaiuxvvDNK/200.gif' + small: 'http://media4.giphy.com/media/k2xbaNGSnQkzC/200_d.gif', + big: 'https://media3.giphy.com/media/k2xbaNGSnQkzC/100.gif' }, { - title: 'Cat 14', - subTitle: 'meow 14', - small: 'https://media3.giphy.com/media/k2xbaNGSnQkzC/100.gif', - big: 'https://media3.giphy.com/media/k2xbaNGSnQkzC/200.gif' - }, - { - title: 'Cat 15', - subTitle: 'meow 15', - small: 'https://media3.giphy.com/media/ZpWJhFSusGSac/100.gif', - big: 'https://media3.giphy.com/media/ZpWJhFSusGSac/200.gif' + small: 'http://media2.giphy.com/media/ZpWJhFSusGSac/200_d.gif', + big: 'https://media3.giphy.com/media/ZpWJhFSusGSac/100.gif' } ] diff --git a/js/HomeScreen.js b/js/HomeScreen.js index a5eef5a..8fed4fe 100644 --- a/js/HomeScreen.js +++ b/js/HomeScreen.js @@ -1,12 +1,37 @@ import React from 'react' -import { Text, View, Button, Dimensions, Image, ScrollView } from 'react-native' - +import { Text, View, Button, Dimensions, Image, ScrollView, ListView } from 'react-native' +//import { SGListView } from 'react-native-sglistview' +//var SGListView = require('react-native-sglistview'); import { CatImages } from './GiphyImages' +import ImageRow from './ImageRow' import { BgView } from './Background' import style from './Style' +import ListViewCustom from './AndroidImageList' + +var LIST_VIEW = "listview"; + class HomeScreen extends React.Component { + constructor(props) { + super(props) +/* + const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1.small !== r2.small}) + this.state = { + dataSource: ds.cloneWithRows(CatImages) + } +*/ + + var array = []; + for(var i = 0; i < CatImages.length; i++){ + catImage = CatImages[i] + array.push({"uri" : catImage.small}) + } + this.state = { + dataSource:{"images": array} + }; + } + renderCells (data) { return data.map((cell, index) => { const {title, subTitle, small} = cell @@ -31,17 +56,61 @@ class HomeScreen extends React.Component { ) } - + /* render() { const { height } = Dimensions.get('window') let cells = this.renderImageCells('Cats', CatImages) + return ( {cells} - ); + ) + } + */ + render () { + /* + return ( + + } + /> + + ) +*/ +/* + return ( + + } + /> + + ) + */ + +return ( + + + + +) + } } diff --git a/js/ImageRow.js b/js/ImageRow.js new file mode 100644 index 0000000..93cff32 --- /dev/null +++ b/js/ImageRow.js @@ -0,0 +1,14 @@ +import React from 'react' +import { View, Text, Image } from 'react-native' + +import style from './Style' +//renderToHardwareTextureAndroid +const ImageRow = (props) => ( + + + {props.title} + {props.subTitle} + + +) +export default ImageRow diff --git a/js/Style.js b/js/Style.js index 7a8aa6b..9553414 100644 --- a/js/Style.js +++ b/js/Style.js @@ -5,7 +5,6 @@ export default StyleSheet.create({ flexDirection: 'column', flex:1, justifyContent:'center', - backgroundColor: 'transparent', paddingTop: 20, paddingLeft: 24, paddingRight: 24, @@ -20,13 +19,12 @@ export default StyleSheet.create({ imageContainer: { height: 200, flex: 0.8, - resizeMode: 'cover', - justifyContent:'flex-end' + //resizeMode: 'cover', + // justifyContent:'flex-end' }, imageText: { width: 100, height: 50, - backgroundColor: 'transparent', flexDirection: 'column', justifyContent:'flex-end' }, @@ -48,18 +46,12 @@ export default StyleSheet.create({ baseView: { flex: 1, flexDirection: 'column', - justifyContent: 'flex-start', - alignItems: 'stretch', - backgroundColor: '#2B2C2C', paddingTop: 80, paddingRight: 12, paddingBottom: 20, paddingLeft: 12 }, pageBackground: { - flex: 1, - width: null, - height: null, - backgroundColor: '#2B2C2C' + flex: 1 } }) diff --git a/package.json b/package.json index a19fd99..4166c5a 100644 --- a/package.json +++ b/package.json @@ -8,12 +8,13 @@ }, "dependencies": { "react": "15.4.2", - "react-native": "0.41.2" + "react-native": "0.41.2", + "react-native-sglistview": "^0.3.2" }, "devDependencies": { "babel-jest": "18.0.0", "babel-preset-react-native": "1.9.1", - "react-addons-perf": "^15.4.2", + "react-addons-perf": "^15.4.2", "jest": "18.1.0", "react-test-renderer": "15.4.2" },