First step at replacing the FlatList

Author: maxme

app.json

@@ -4,4 +4,4 @@
   },
   "name": "gutenberg",
   "displayName": "Gutenberg"
-}
+}

block-management/block-manager.js

@@ -4,39 +4,45 @@
  */
 
 import React from 'react';
-import { StyleSheet, Text, View, FlatList, TextInput } from 'react-native';
+import { StyleSheet, Text, View, TextInput } from 'react-native';
+import RecyclerViewList, { DataSource } from 'react-native-recyclerview-list';
 import BlockHolder from './block-holder';
 import { ToolbarButton } from './constants';
 
 import type { BlockType } from '../store/';
 
 export type BlockListType = {
 	onChange: ( uid: string, attributes: mixed ) => void,
-	focusBlockAction: string => mixed,
-	moveBlockUpAction: string => mixed,
-	moveBlockDownAction: string => mixed,
-	deleteBlockAction: string => mixed,
-	blocks: Array<BlockType>,
+	focusBlockAction: number => mixed,
+	moveBlockUpAction: number => mixed,
+	moveBlockDownAction: number => mixed,
+	deleteBlockAction: number => mixed,
+	dataSource: Object,
 	refresh: boolean,
 };
 
 type PropsType = BlockListType;
 type StateType = {};
 
 export default class BlockManager extends React.Component<PropsType, StateType> {
+	_recycler = null;
+
 	onBlockHolderPressed( uid: string ) {
 		this.props.focusBlockAction( uid );
 	}
 
-	onToolbarButtonPressed( button: number, uid: string ) {
+	onToolbarButtonPressed( button: number, uid: string  ) {
 		switch ( button ) {
 			case ToolbarButton.UP:
+				this.props.dataSource.moveUp( uid );
 				this.props.moveBlockUpAction( uid );
 				break;
 			case ToolbarButton.DOWN:
+				this.props.dataSource.moveDown( uid );
 				this.props.moveBlockDownAction( uid );
 				break;
 			case ToolbarButton.DELETE:
+				this.props.dataSource.splice( uid, 1 );
 				this.props.deleteBlockAction( uid );
 				break;
 			case ToolbarButton.SETTINGS:
@@ -46,15 +52,32 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 	}
 
 	render() {
+		const { dataSource } = this.props;
 		return (
 			<View style={ styles.container }>
 				<View style={ { height: 30 } } />
-				<FlatList
+				<RecyclerViewList
+					ref={ component => ( this._recycler = component ) }
 					style={ styles.list }
-					data={ this.props.blocks }
-					extraData={ this.props.refresh }
-					keyExtractor={ ( item, index ) => item.uid }
+					dataSource={ dataSource }
 					renderItem={ this.renderItem.bind( this ) }
+					windowSize={ 20 }
+					initialScrollIndex={ 0 }
+					ListEmptyComponent={
+						<View style={ { borderColor: '#e7e7e7', borderWidth: 1, margin: 10, padding: 20 } }>
+							<Text style={ { fontSize: 15 } }>No results.</Text>
+						</View>
+					}
+					ItemSeparatorComponent={
+						<View
+							style={ {
+								borderBottomWidth: 1,
+								borderColor: '#e7e7e7',
+								marginHorizontal: 5,
+								marginVertical: 10,
+							} }
+						/>
+					}
 				/>
 			</View>
 		);

store/index.js

@@ -4,6 +4,7 @@
  */
 
 import { createStore } from 'redux';
+import { DataSource } from 'react-native-recyclerview-list/library';
 import { reducer } from './reducers';
 
 export type BlockType = {
@@ -14,58 +15,60 @@ export type BlockType = {
 };
 
 export type StateType = {
-	blocks: Array<BlockType>,
+	dataSource: mixed,
 	refresh: boolean,
 };
 
+const blocks: Array<BlockType> = [
+{
+	uid: '0',
+	blockType: 'title',
+	attributes: {
+		content: 'Hello World',
+	},
+	focused: false,
+},
+{
+	uid: '1',
+	blockType: 'paragraph',
+	attributes: {
+		content:
+			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor tincidunt sapien, quis dictum orci sollicitudin quis. Proin sed elit id est pulvinar feugiat vitae eget dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+	},
+	focused: false,
+},
+{
+	uid: '2',
+	blockType: 'paragraph',
+	attributes: {
+		content:
+			'書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体（フォント）、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。',
+	},
+	focused: false,
+},
+{
+	uid: '3',
+	blockType: 'core/code',
+	attributes: {
+		content: 'if name == "World":\n    return "Hello World"\nelse:\n    return "Hello Pony"',
+	},
+	focused: false,
+},
+{
+	uid: '4',
+	blockType: 'paragraph',
+	attributes: {
+		content:
+			'Лорем ипсум долор сит амет, адиписци трацтатос еа еум. Меа аудиам малуиссет те, хас меис либрис елеифенд ин. Нец ех тота деленит сусципит. Яуас порро инструцтиор но нец.',
+	},
+	focused: false,
+},
+];
+
 const initialState: StateType = {
 	// TODO: get blocks list block state should be externalized (shared with Gutenberg at some point?).
 	// If not it should be created from a string parsing (commented HTML to json).
-	blocks: [
-		{
-			uid: '0',
-			blockType: 'title',
-			attributes: {
-				content: 'Hello World',
-			},
-			focused: false,
-		},
-		{
-			uid: '1',
-			blockType: 'paragraph',
-			attributes: {
-				content:
-					'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor tincidunt sapien, quis dictum orci sollicitudin quis. Proin sed elit id est pulvinar feugiat vitae eget dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-			},
-			focused: false,
-		},
-		{
-			uid: '2',
-			blockType: 'paragraph',
-			attributes: {
-				content:
-					'書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体（フォント）、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。',
-			},
-			focused: false,
-		},
-		{
-			uid: '3',
-			blockType: 'core/code',
-			attributes: {
-				content: 'if name == "World":\n    return "Hello World"\nelse:\n    return "Hello Pony"',
-			},
-			focused: false,
-		},
-		{
-			uid: '4',
-			blockType: 'paragraph',
-			attributes: {
-				content:
-					'Лорем ипсум долор сит амет, адиписци трацтатос еа еум. Меа аудиам малуиссет те, хас меис либрис елеифенд ин. Нец ех тота деленит сусципит. Яуас порро инструцтиор но нец.',
-			},
-			focused: false,
-		},
-	],
+	dataSource: new DataSource( blocks, ( item: BlockType, index ) => item.uid ),
 	refresh: false,
 };