deanmcpherson / react-native-sortable-listview

Drag drop capable wrapper of ListView for React Native

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Nester FlatList in SortableListView

condorman opened this issue · comments

Hello,
I need to have a series of horizontal image slides to be able to sort vertically.
I can not reproduce this behavior.
If i remove FlatList component SortableListView works well, if i insert FlatList SortableListView not work.
Can you help me? thank you!!

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  FlatList,
  Image
} from 'react-native';

import SortableListView from 'react-native-sortable-listview';

let data = {
  hello: {dataHorizontal:  [
            {key: 'a', url: 'http://img.my-personaltrainer.it/Gatti/malattia-graffio-gatto.jpg', w:404, h:404},
            {key: 'b', url: 'http://img.my-personaltrainer.it/Gatti/malattia-graffio-gatto.jpg', w:404, h:404},
            {key: 'c', url: 'http://img.my-personaltrainer.it/Gatti/malattia-graffio-gatto.jpg', w:404, h:404}
          ]},
  how: {dataHorizontal:  [
      {key: 'a', url: 'http://img.my-personaltrainer.it/Gatti/malattia-graffio-gatto.jpg', w:404, h:404},
      {key: 'b', url: 'http://img.my-personaltrainer.it/Gatti/malattia-graffio-gatto.jpg', w:404, h:404},
      {key: 'c', url: 'http://img.my-personaltrainer.it/Gatti/malattia-graffio-gatto.jpg', w:404, h:404}
    ]}
}


let order = Object.keys(data);

export default class App extends Component {

  render() {
    return (
      <View style={{flex: 1}}>
      <SortableListView
          style={{flex: 1}}
          data={data}
          order={order}
          renderRow={row => 
            <FlatList style={{flex: 1}}                           
                      data={row.dataHorizontal}
                      renderItem={({item}) => <Image source={{uri: item.url}} style={{width: 400, height: 400}} />} 
                      horizontal={true}
              />
          }
      />      
      </View>
    );
  }
}