Scroll to new block

src/block-management/block-manager.js

@@ -54,16 +54,21 @@ type StateType = {
 	selectedBlockType: string,
 	refresh: boolean,
 	isKeyboardVisible: boolean,
-	rootViewHeight: number;
+	rootViewHeight: number,
+	keyboardHeight: number,
 };
 
 export class BlockManager extends React.Component<PropsType, StateType> {
 	keyboardDidShowListener: EventEmitter;
 	keyboardDidHideListener: EventEmitter;
+	list: FlatList;
+	indexToScroll: ?number;
 
 	constructor( props: PropsType ) {
 		super( props );
 
+		( this: any ).onFlatListContentSizeChange = this.onFlatListContentSizeChange.bind( this );
+
 		const blocks = props.blocks.map( ( block ) => {
 			const newBlock = { ...block };
 			newBlock.focused = props.isBlockSelected( block.clientId );
@@ -77,6 +82,7 @@ export class BlockManager extends React.Component<PropsType, StateType> {
 			refresh: false,
 			isKeyboardVisible: false,
 			rootViewHeight: 0,
+			keyboardHeight: 0,
 		};
 	}
 
@@ -150,13 +156,22 @@ export class BlockManager extends React.Component<PropsType, StateType> {
 		this.keyboardDidHideListener = Keyboard.addListener( keyboardDidHide, this.keyboardDidHide );
 	}
 
+	componentDidUpdate( prevProps: PropsType ) {
+		if ( this.props.blocks.length > prevProps.blocks.length ) { //if a new block is added recently
+			const indexToScroll = this.state.blocks.findIndex( ( block ) => block.focused );
+			if ( indexToScroll > -1 ) {
+				this.indexToScroll = indexToScroll;
+			}
+		}
+	}
+
 	componentWillUnmount() {
 		Keyboard.removeListener( keyboardDidShow, this.keyboardDidShow );
 		Keyboard.removeListener( keyboardDidHide, this.keyboardDidHide );
 	}
 
-	keyboardDidShow = () => {
-		this.setState( { isKeyboardVisible: true } );
+	keyboardDidShow = ( e: any ) => {
+		this.setState( { isKeyboardVisible: true, keyboardHeight: e.endCoordinates.height } );
 	}
 
 	keyboardDidHide = () => {
@@ -208,11 +223,31 @@ export class BlockManager extends React.Component<PropsType, StateType> {
 		this.props.replaceBlock( clientId, block );
 	}
 
+	onFlatListContentSizeChange() {
+		const { selectedBlock } = this.props;
+
+		if ( this.indexToScroll && selectedBlock ) {
+			const scrollParams = {
+				animated: true,
+				index: this.indexToScroll,
+				viewPosition: 0, //0 represents scrolling to the top of the viewable area
+			};
+			this.list.scrollToIndex( scrollParams );
+			this.indexToScroll = null; //clear indexToScroll after we are done
+		}
+	}
+
 	renderList() {
 		// TODO: we won't need this. This just a temporary solution until we implement the RecyclerViewList native code for iOS
 		// And fix problems with RecyclerViewList on Android
 		const list = (
 			<FlatList
+				ref={ ( ref ) => {
+					this.list = ref;
+				} }
+				// FlatList needs this property set before you can call scrollToIndex,
+				onScrollToIndexFailed={ () => { } }
+				onContentSizeChange={ this.onFlatListContentSizeChange }
 				keyboardShouldPersistTaps="always"
 				style={ styles.list }
 				data={ this.state.blocks }