Use pure component for cells

screens/Tetris/GameLogic.js

@@ -25,7 +25,7 @@ export default class GameLogic {
         this.height = height;
         this.width = width;
         this.gameRunning = false;
-        this.gameTick = 250;
+        this.gameTick = 1000;
     }
 
     getHeight(): number {

screens/Tetris/components/Cell.js

@@ -4,18 +4,37 @@ import * as React from 'react';
 import {View} from 'react-native';
 import {withTheme} from 'react-native-paper';
 
-function Cell(props) {
+type Props = {
-    const colors = props.theme.colors;
+    color: string,
-    return (
+    isEmpty: boolean,
-        <View style={{
+    id: string,
-            flex: 1,
+}
-            backgroundColor: props.color,
+
-            borderColor: props.isEmpty ? props.color : "#393939",
+class Cell extends React.PureComponent<Props> {
-            borderStyle: 'solid',
+
-            borderWidth: 1,
+    colors: Object;
-            aspectRatio: 1,
+
-        }}/>
+    constructor(props) {
-    );
+        super(props);
+        this.colors = props.theme.colors;
+    }
+
+    render() {
+        return (
+            <View
+                style={{
+                    flex: 1,
+                    backgroundColor: this.props.color,
+                    borderColor: this.props.isEmpty ? this.props.color : "#393939",
+                    borderStyle: 'solid',
+                    borderWidth: 1,
+                    aspectRatio: 1,
+                }}
+            />
+        );
+    }
+
+
 }
 
 export default withTheme(Cell);

screens/Tetris/components/Grid.js

@@ -25,7 +25,8 @@ class Grid extends React.Component<Props>{
         let cells = [];
         for (let i = 0; i < this.props.width; i++) {
             let cell = this.props.grid[rowNumber][i];
-            cells.push(<Cell color={cell.color} isEmpty={cell.isEmpty}/>);
+            let key = rowNumber + ':' + i;
+            cells.push(<Cell color={cell.color} isEmpty={cell.isEmpty} id={key}/>);
         }
         return(
             <View style={{