Perf example native list

android/app/src/main/java/com/performanceexample/CustomAdapter.java

@@ -0,0 +1,35 @@
+package com.performanceexample;
+
+import android.support.v7.widget.RecyclerView;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+
+import java.util.List;
+
+public class CustomAdapter extends RecyclerView.Adapter<MyViewHolder> {
+    String TAG = "react";
+    private List<ListViewCell> list;
+
+    public CustomAdapter(List<ListViewCell> 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 onBindViewHolder(MyViewHolder holder, int position) {
+        ListViewCell listViewCell = list.get(position);
+        holder.imageView.setImageURI(listViewCell.getUri());
+    }
+
+    @Override
+    public int getItemCount() {
+        return list.size();
+    }
+}

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;
+    }
+
+}

android/app/src/main/java/com/performanceexample/ListViewPackage.java

@@ -0,0 +1,32 @@
+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.Arrays;
+import java.util.Collections;
+import java.util.List;
+
+
+public class ListViewPackage implements ReactPackage {
+
+    @Override
+    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+
+    @Override
+    public List<Class<? extends JavaScriptModule>> createJSModules() {
+        return Collections.emptyList();
+    }
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+        return Arrays.<ViewManager>asList(
+                new ReactListViewManager()
+        );
+    }
+}

android/app/src/main/java/com/performanceexample/MainApplication.java

@@ -1,10 +1,8 @@
 package com.performanceexample;
 
 import android.app.Application;
-import android.util.Log;
 
 import com.facebook.react.ReactApplication;
-import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
@@ -24,7 +22,8 @@ public boolean getUseDeveloperSupport() {
     @Override
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
-          new MainReactPackage()
+          new MainReactPackage(),
+          new ListViewPackage()
       );
     }
   };

android/app/src/main/java/com/performanceexample/MyViewHolder.java

@@ -0,0 +1,16 @@
+package com.performanceexample;
+
+import android.support.v7.widget.RecyclerView;
+import android.view.View;
+
+import com.facebook.drawee.view.SimpleDraweeView;
+
+public class MyViewHolder extends RecyclerView.ViewHolder  {
+    public SimpleDraweeView imageView;
+
+    public MyViewHolder(View view) {
+        super(view);
+        imageView = (SimpleDraweeView) view.findViewById(R.id.my_image_view);
+
+    }
+}

android/app/src/main/java/com/performanceexample/ReactListViewManager.java

@@ -0,0 +1,55 @@
+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 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.annotations.ReactProp;
+
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class ReactListViewManager extends SimpleViewManager<RecyclerView> {
+    private List<ListViewCell> 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 <obj.size() ; i++){
+            ReadableMap objMap = obj.getMap(i);
+            ListViewCell cell = new ListViewCell(objMap.getString("uri"));
+            list.add(cell);
+        }
+
+        mAdapter.notifyDataSetChanged();
+    }
+}

android/app/src/main/res/layout/image_list_row.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:fresco="http://schemas.android.com/apk/res-auto"
+    android:orientation="vertical"
+    android:layout_width="match_parent"
+    android:layout_height="220dp">
+    <com.facebook.drawee.view.SimpleDraweeView
+        android:id="@+id/my_image_view"
+        android:layout_width="350dp"
+        android:layout_height="200dp"
+        fresco:placeholderImage="@mipmap/ic_launcher"
+        />
+</LinearLayout>

js/AndroidImageList.js

@@ -0,0 +1,13 @@
+
+import { PropTypes } from 'react'
+import { requireNativeComponent, View } from 'react-native'
+
+var iface = {
+  name: 'ImageView',
+  propTypes: {
+    src: PropTypes.object,
+    ...View.propTypes
+  },
+}
+
+module.exports = requireNativeComponent('RCTListView', iface)

js/Background.js

@@ -1,6 +1,6 @@
 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 style from './Style'
 
@@ -13,16 +13,12 @@ export const BaseView = (props) => {
 }
 
 export const BgView = (props) => {
-  const propStyle = {
-    backgroundColor: 'transparent'
-  }
 
   return (
     <Image
       source={bgImage}
       style={style.pageBackground}>
       <BaseView
-        style={propStyle}
         {...props} />
     </Image>
   )

js/HomeScreen.js

@@ -1,42 +1,28 @@
 import React from 'react'
-import { Text, View, Button, Dimensions, Image, ScrollView } from 'react-native'
 
 import { FlickrImages } from './FlickrImages'
-
 import { BgView } from './Background'
-import style from './Style'
+
+import ListViewCustom from './AndroidImageList'
 
 class HomeScreen extends React.Component {
-  renderCells (data) {
-    return data.map((cell, index) => {
-      const {uri} = cell
-      return (
-        <View key={index} style={style.cellContainer}>
-          <Image style={style.imageContainer} source={{uri:uri}}>
-          </Image>
-        </View>
-      )
-    })
-  }
+  constructor(props) {
+    super(props)
 
-  renderImageCells (cellData) {
-    return (
-      <View style={style.imageCellsContainer}>
-        {this.renderCells(cellData)}
-      </View>
-    )
+    this.state = {
+      dataSource:{"images": FlickrImages}
+    }
   }
 
   render() {
-    const { height } = Dimensions.get('window')
-    let cells = this.renderImageCells(FlickrImages)
     return (
       <BgView>
-        <ScrollView contentContainerStyle={{justifyContent: 'center'}} style={[{height:height}]}>
-          {cells}
-        </ScrollView>
+      <ListViewCustom
+         src={this.state.dataSource}
+         style={{flex:1}}>
+       </ListViewCustom>
       </BgView>
-    );
+    )
   }
 }
 

js/ImageRow.js

@@ -0,0 +1,12 @@
+
+import React from 'react'
+import { View, Image } from 'react-native'
+
+import style from './Style'
+
+const ImageRow = (props) => (
+  <View style={style.cellContainer}>
+    <Image style={style.imageContainer} source={{uri:props.uri}}/>
+  </View>
+)
+export default ImageRow

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,
@@ -15,12 +14,14 @@ export default StyleSheet.create({
   },
   cellContainer: {
     flexDirection: 'row',
-    paddingBottom: 10
+    paddingTop: 10,
+    paddingLeft: 24,
+    paddingRight: 24,
+    elevation: 2
   },
   imageContainer: {
     height: 200,
     flex: 0.8,
-    resizeMode: 'cover',
     justifyContent:'flex-end'
   },
   cellTitle: {
@@ -34,7 +35,6 @@ export default StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'flex-start',
     alignItems: 'stretch',
-    backgroundColor: '#2B2C2C',
     paddingTop: 80,
     paddingRight: 12,
     paddingBottom: 20,
@@ -43,7 +43,6 @@ export default StyleSheet.create({
   pageBackground: {
     flex: 1,
     width: null,
-    height: null,
-    backgroundColor: '#2B2C2C'
+    height: null
   }
 })