From dc4052cc6accc99f58584f05aaeb8057bdef5a5a Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Sun, 12 Jun 2022 17:56:59 -0700
Subject: [PATCH 01/22] rebase

---
 packages/docs/components-listview.md | 51 ++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 packages/docs/components-listview.md

diff --git a/packages/docs/components-listview.md b/packages/docs/components-listview.md
new file mode 100644
index 0000000..f5de9b1
--- /dev/null
+++ b/packages/docs/components-listview.md
@@ -0,0 +1,51 @@
+---
+id: components-listview
+title: ListView
+sidebar_label: ListView
+---
+
+## ListView
+
+List View is a special type of view that can display items one by one based in a list.
+
+```JS
+const DATA = [
+  {
+    title: 'Main dishes',
+    data: ['Pizza', 'Burger', 'Risotto'],
+  },
+  {
+    title: 'Sides',
+    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
+  },
+  {
+    title: 'Drinks',
+    data: ['Water', 'Coke', 'Beer'],
+  },
+  {
+    title: 'Desserts',
+    data: ['Cheese Cake', 'Ice Cream'],
+  },
+];
+
+function Item({ title }) {
+  return (
+    <View style={styles.item}>
+      <Text style={styles.title}>{title}</Text>
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+      <SectionList
+        sections={DATA}
+        keyExtractor={(item, index) => item + index}
+        renderItem={({ item }) => <Item title={item} />}
+        renderSectionHeader={({ section: { title } }) => (
+          <Text>{title}</Text>
+        )}
+      />
+  );
+}
+```

From 68939d1c2dbe3c69311bcde213eb016ff9695dbf Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Mon, 13 Jun 2022 00:55:24 -0700
Subject: [PATCH 02/22] create Button.js && Button-test.js

---
 .../react-ape/renderer/elements/Button.js     | 71 +++++++++++++++++++
 .../elements/__tests__/Button-test.js         |  0
 2 files changed, 71 insertions(+)
 create mode 100644 packages/react-ape/renderer/elements/Button.js
 create mode 100644 packages/react-ape/renderer/elements/__tests__/Button-test.js

diff --git a/packages/react-ape/renderer/elements/Button.js b/packages/react-ape/renderer/elements/Button.js
new file mode 100644
index 0000000..5f7b3fd
--- /dev/null
+++ b/packages/react-ape/renderer/elements/Button.js
@@ -0,0 +1,71 @@
+/**
+ * @https://github.com/facebook/react-native/blob/main/Libraries/Components/Button.js
+ *
+ * @flow
+ *
+ */
+
+type ButtonProps = {|
+        title:string,
+        onPress:(event?:OnPressEvent):mixed,
+        touchSoundDisabled?:?boolean,
+        color?:?string,
+          /**
+   * TV next focus down (see documentation for the View component).
+   *
+   * @platform android
+   */
+  nextFocusDown?: ?number,
+    /**
+   * TV next focus forward (see documentation for the View component).
+   *
+   * @platform android
+   */
+     nextFocusForward?: ?number,
+
+  /**
+   * TV next focus left (see documentation for the View component).
+   *
+   * @platform android
+   */
+   nextFocusLeft?: ?number,
+
+   /**
+    * TV next focus right (see documentation for the View component).
+    *
+    * @platform android
+    */
+   nextFocusRight?: ?number,
+ 
+   /**
+    * TV next focus up (see documentation for the View component).
+    *
+    * @platform android
+    */
+   nextFocusUp?: ?number,
+ 
+   /**
+    * Text to display for blindness accessibility features
+    */
+   accessibilityLabel?: ?string,
+ 
+   /**
+    * If true, disable all interactions for this component.
+    */
+   disabled?: ?boolean,
+ 
+   /**
+    * Used to locate this view in end-to-end tests.
+    */
+   testID?: ?string,
+
+    |}
+
+function renderButton( 
+    props,
+    apeContext,
+    parentLayout)
+{
+
+
+}
\ No newline at end of file
diff --git a/packages/react-ape/renderer/elements/__tests__/Button-test.js b/packages/react-ape/renderer/elements/__tests__/Button-test.js
new file mode 100644
index 0000000..e69de29

From 25ad213ee84de35e1d36183972c373c0e1949b94 Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Wed, 15 Jun 2022 01:30:48 -0700
Subject: [PATCH 03/22] draw Button

---
 packages/app/src/Sidebar.js                   |  6 ++
 packages/react-ape/reactApeEntry.js           |  1 +
 .../react-ape/renderer/constants/index.js     | 22 ++++++
 .../react-ape/renderer/elements/Button.js     | 69 ++++++++++++++++++-
 .../react-ape/renderer/reactApeComponent.js   |  2 +
 5 files changed, 99 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/Sidebar.js b/packages/app/src/Sidebar.js
index 8a85de2..b62d3e9 100644
--- a/packages/app/src/Sidebar.js
+++ b/packages/app/src/Sidebar.js
@@ -6,6 +6,7 @@ import {
   StyleSheet,
   registerComponent,
   Navigation,
+  Button
 } from '../../react-ape/reactApeEntry';
 
 const {height} = Dimensions.get('screen');
@@ -40,6 +41,11 @@ class Sidebar extends Component {
           <Text>Rio de Janeiro</Text>
           <Text>Kyoto</Text>
           <Text>Stockholm</Text>
+          <Button
+            onPress ={()=>{}}
+            color={"red"}
+            title="Click me"
+          />
         </View>
       </View>
     );
diff --git a/packages/react-ape/reactApeEntry.js b/packages/react-ape/reactApeEntry.js
index ae2e7ce..a13859b 100644
--- a/packages/react-ape/reactApeEntry.js
+++ b/packages/react-ape/reactApeEntry.js
@@ -23,6 +23,7 @@ export const render = ReactApeRenderer.render;
 export const Image = 'Image';
 export const View = 'View';
 export const Text = 'Text';
+export const Button = 'Button'
 
 export const StyleSheet = StyleSheetModule;
 export const Dimensions = DimensionsModule;
diff --git a/packages/react-ape/renderer/constants/index.js b/packages/react-ape/renderer/constants/index.js
index 244fb24..658ae21 100644
--- a/packages/react-ape/renderer/constants/index.js
+++ b/packages/react-ape/renderer/constants/index.js
@@ -12,6 +12,28 @@ export const ViewDefaults = {
   size: 200, // 200x200
   lineHeight: 24,
 };
+export const ButtonDefaults ={
+   containerStyle:{
+    width:85,
+    elevation:4,
+    height : 30,
+    backgroundColor:"#2196F3",
+    borderRadius:2
+   },
+   textStyle:{
+     textAlign:"center",
+     margin:8,
+     fontSize:18
+   },
+   buttonDisabled:{
+     elevation:0,
+     backgroundColor: '#dfdfdf',
+   },
+   textDisabled:{
+    color: '#cdcdcd',
+   }
+
+}
 
 // ReactApe Internal Constants
 export const _SectionBlockSize: number = 80; // 80x80
diff --git a/packages/react-ape/renderer/elements/Button.js b/packages/react-ape/renderer/elements/Button.js
index 5f7b3fd..1e606e3 100644
--- a/packages/react-ape/renderer/elements/Button.js
+++ b/packages/react-ape/renderer/elements/Button.js
@@ -5,9 +5,11 @@
  *
  */
 
+import { ButtonDefaults } from "../constants";
+
 type ButtonProps = {|
         title:string,
-        onPress:(event?:OnPressEvent):mixed,
+        onPress:(event?:any)=>mixed,
         touchSoundDisabled?:?boolean,
         color?:?string,
           /**
@@ -66,6 +68,71 @@ function renderButton(
     apeContext,
     parentLayout)
 {
+const {spatialGeometry={},relativeIndex} = parentLayout
+const {ctx} = apeContext
+  // If is relative and x and y haven't be processed, don't render
+if(!spatialGeometry) return null
+// start drawing the canvas
+const  {title} = props
+const borderRadius = ButtonDefaults.containerStyle.borderRadius 
+const backgroundColor = ButtonDefaults.containerStyle.backgroundColor
+const width = ButtonDefaults.containerStyle.width
+const height = ButtonDefaults.containerStyle.height
+let x = spatialGeometry.x || 20
+let y = spatialGeometry.y || 40
+const antiClockWise = false
+ctx.beginPath()
+//ctx.lineWidth = borderWidth
+ctx.fillStyle = backgroundColor
+//ctx.strokeStyle = borderColor
+//ctx.rect(x,y,borderRadius,width,height,antiClockWise)
+//ctx.rect(x,y,width,height)
+ctx.moveTo(x, y);
+ /**
+        *  Top Right Radius
+        */
+ctx.lineTo(x + width - borderRadius, y);
+ctx.quadraticCurveTo(x + width, y, x + width, y + borderRadius);
+     /**
+        *  Bottom right Radius
+        */
+
+      ctx.lineTo(x + width, y + height - borderRadius);
+      ctx.quadraticCurveTo(
+        x + width,
+        y + height,
+        x + width - borderRadius,
+        y + height
+      );
+
+   /**
+        *  Bottom Left Radius
+        */
+    ctx.lineTo(x + borderRadius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - borderRadius);
+       /** Top left Radius */
+       ctx.lineTo(x, y + borderRadius);
+       ctx.quadraticCurveTo(x, y, x + borderRadius, y);
+
+
+ctx.fill()
+ctx.stroke()
+ctx.fillStyle = '#000000';
+ctx.font = `${ButtonDefaults.textStyle.fontSize} Helvetica`;
+//ctx.fillText('Start', x+ width/2 , y + height / 2);
+ctx.textAlign = 'center'
+ctx.fillText(title,x + width / 2,y + height /2)
+//ctx.fillText('Start', x  + height /2, y + height /2 );
+ctx.closePath()
+
+
+
+}
 
 
+export default function createButtonInstance(props:Props):mixed{
+    return {
+        type:'Button',
+        render:renderButton.bind(this,props)
+    }
 }
\ No newline at end of file
diff --git a/packages/react-ape/renderer/reactApeComponent.js b/packages/react-ape/renderer/reactApeComponent.js
index 360a2b5..d2e14f2 100644
--- a/packages/react-ape/renderer/reactApeComponent.js
+++ b/packages/react-ape/renderer/reactApeComponent.js
@@ -9,6 +9,7 @@
 import Image from './elements/Image';
 import Text from './elements/Text';
 import View from './elements/View';
+import Button from  './elements/Button'
 import {CustomComponents} from '../modules/Register';
 
 const CHILDREN = 'children';
@@ -36,6 +37,7 @@ const ReactApeComponent = {
       Image: Image(props),
       Text: Text(props),
       View: new View(props),
+      Button : Button(props)
     };
 
     if (!COMPONENTS[type]) {

From cef39353442d13b2ea53000cdbe74d97dc86a6af Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Wed, 15 Jun 2022 02:11:28 -0700
Subject: [PATCH 04/22] make the button width Dynamic

---
 packages/app/src/Sidebar.js                    |  4 ++--
 packages/react-ape/renderer/constants/index.js |  1 +
 packages/react-ape/renderer/elements/Button.js | 11 ++++-------
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/app/src/Sidebar.js b/packages/app/src/Sidebar.js
index b62d3e9..be1c6ab 100644
--- a/packages/app/src/Sidebar.js
+++ b/packages/app/src/Sidebar.js
@@ -43,8 +43,8 @@ class Sidebar extends Component {
           <Text>Stockholm</Text>
           <Button
             onPress ={()=>{}}
-            color={"red"}
-            title="Click me"
+          
+            title="PRESS ME"
           />
         </View>
       </View>
diff --git a/packages/react-ape/renderer/constants/index.js b/packages/react-ape/renderer/constants/index.js
index 658ae21..b5d956d 100644
--- a/packages/react-ape/renderer/constants/index.js
+++ b/packages/react-ape/renderer/constants/index.js
@@ -23,6 +23,7 @@ export const ButtonDefaults ={
    textStyle:{
      textAlign:"center",
      margin:8,
+     color:"white",
      fontSize:18
    },
    buttonDisabled:{
diff --git a/packages/react-ape/renderer/elements/Button.js b/packages/react-ape/renderer/elements/Button.js
index 1e606e3..1b42086 100644
--- a/packages/react-ape/renderer/elements/Button.js
+++ b/packages/react-ape/renderer/elements/Button.js
@@ -73,14 +73,13 @@ const {ctx} = apeContext
   // If is relative and x and y haven't be processed, don't render
 if(!spatialGeometry) return null
 // start drawing the canvas
-const  {title} = props
+const  {title,color} = props
 const borderRadius = ButtonDefaults.containerStyle.borderRadius 
 const backgroundColor = ButtonDefaults.containerStyle.backgroundColor
-const width = ButtonDefaults.containerStyle.width
-const height = ButtonDefaults.containerStyle.height
 let x = spatialGeometry.x || 20
 let y = spatialGeometry.y || 40
-const antiClockWise = false
+const width = x + y 
+const height = ButtonDefaults.containerStyle.height
 ctx.beginPath()
 //ctx.lineWidth = borderWidth
 ctx.fillStyle = backgroundColor
@@ -117,7 +116,7 @@ ctx.quadraticCurveTo(x + width, y, x + width, y + borderRadius);
 
 ctx.fill()
 ctx.stroke()
-ctx.fillStyle = '#000000';
+ctx.fillStyle = color || ButtonDefaults.textStyle.color;
 ctx.font = `${ButtonDefaults.textStyle.fontSize} Helvetica`;
 //ctx.fillText('Start', x+ width/2 , y + height / 2);
 ctx.textAlign = 'center'
@@ -125,8 +124,6 @@ ctx.fillText(title,x + width / 2,y + height /2)
 //ctx.fillText('Start', x  + height /2, y + height /2 );
 ctx.closePath()
 
-
-
 }
 
 

From 4c0947a47ef110796308e6d94668cf5442883588 Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Wed, 15 Jun 2022 02:14:07 -0700
Subject: [PATCH 05/22] format[prettier]

---
 packages/app/src/Sidebar.js                   |   8 +-
 packages/react-ape/reactApeEntry.js           |   2 +-
 .../react-ape/renderer/constants/index.js     |  43 +++--
 .../react-ape/renderer/elements/Button.js     | 158 +++++++++---------
 .../react-ape/renderer/reactApeComponent.js   |   4 +-
 5 files changed, 101 insertions(+), 114 deletions(-)

diff --git a/packages/app/src/Sidebar.js b/packages/app/src/Sidebar.js
index be1c6ab..06f2279 100644
--- a/packages/app/src/Sidebar.js
+++ b/packages/app/src/Sidebar.js
@@ -6,7 +6,7 @@ import {
   StyleSheet,
   registerComponent,
   Navigation,
-  Button
+  Button,
 } from '../../react-ape/reactApeEntry';
 
 const {height} = Dimensions.get('screen');
@@ -41,11 +41,7 @@ class Sidebar extends Component {
           <Text>Rio de Janeiro</Text>
           <Text>Kyoto</Text>
           <Text>Stockholm</Text>
-          <Button
-            onPress ={()=>{}}
-          
-            title="PRESS ME"
-          />
+          <Button onPress={() => {}} title="PRESS ME" />
         </View>
       </View>
     );
diff --git a/packages/react-ape/reactApeEntry.js b/packages/react-ape/reactApeEntry.js
index a13859b..2addf0e 100644
--- a/packages/react-ape/reactApeEntry.js
+++ b/packages/react-ape/reactApeEntry.js
@@ -23,7 +23,7 @@ export const render = ReactApeRenderer.render;
 export const Image = 'Image';
 export const View = 'View';
 export const Text = 'Text';
-export const Button = 'Button'
+export const Button = 'Button';
 
 export const StyleSheet = StyleSheetModule;
 export const Dimensions = DimensionsModule;
diff --git a/packages/react-ape/renderer/constants/index.js b/packages/react-ape/renderer/constants/index.js
index b5d956d..387a7ad 100644
--- a/packages/react-ape/renderer/constants/index.js
+++ b/packages/react-ape/renderer/constants/index.js
@@ -12,29 +12,28 @@ export const ViewDefaults = {
   size: 200, // 200x200
   lineHeight: 24,
 };
-export const ButtonDefaults ={
-   containerStyle:{
-    width:85,
-    elevation:4,
-    height : 30,
-    backgroundColor:"#2196F3",
-    borderRadius:2
-   },
-   textStyle:{
-     textAlign:"center",
-     margin:8,
-     color:"white",
-     fontSize:18
-   },
-   buttonDisabled:{
-     elevation:0,
-     backgroundColor: '#dfdfdf',
-   },
-   textDisabled:{
+export const ButtonDefaults = {
+  containerStyle: {
+    width: 85,
+    elevation: 4,
+    height: 30,
+    backgroundColor: '#2196F3',
+    borderRadius: 2,
+  },
+  textStyle: {
+    textAlign: 'center',
+    margin: 8,
+    color: 'white',
+    fontSize: 18,
+  },
+  buttonDisabled: {
+    elevation: 0,
+    backgroundColor: '#dfdfdf',
+  },
+  textDisabled: {
     color: '#cdcdcd',
-   }
-
-}
+  },
+};
 
 // ReactApe Internal Constants
 export const _SectionBlockSize: number = 80; // 80x80
diff --git a/packages/react-ape/renderer/elements/Button.js b/packages/react-ape/renderer/elements/Button.js
index 1b42086..b281a29 100644
--- a/packages/react-ape/renderer/elements/Button.js
+++ b/packages/react-ape/renderer/elements/Button.js
@@ -5,131 +5,123 @@
  *
  */
 
-import { ButtonDefaults } from "../constants";
+import {ButtonDefaults} from '../constants';
 
 type ButtonProps = {|
-        title:string,
-        onPress:(event?:any)=>mixed,
-        touchSoundDisabled?:?boolean,
-        color?:?string,
-          /**
+  title: string,
+  onPress: (event?: any) => mixed,
+  touchSoundDisabled?: ?boolean,
+  color?: ?string,
+  /**
    * TV next focus down (see documentation for the View component).
    *
    * @platform android
    */
   nextFocusDown?: ?number,
-    /**
+  /**
    * TV next focus forward (see documentation for the View component).
    *
    * @platform android
    */
-     nextFocusForward?: ?number,
+  nextFocusForward?: ?number,
 
   /**
    * TV next focus left (see documentation for the View component).
    *
    * @platform android
    */
-   nextFocusLeft?: ?number,
+  nextFocusLeft?: ?number,
 
-   /**
+  /**
     * TV next focus right (see documentation for the View component).
     *
     * @platform android
     */
-   nextFocusRight?: ?number,
- 
-   /**
+  nextFocusRight?: ?number,
+
+  /**
     * TV next focus up (see documentation for the View component).
     *
     * @platform android
     */
-   nextFocusUp?: ?number,
- 
-   /**
+  nextFocusUp?: ?number,
+
+  /**
     * Text to display for blindness accessibility features
     */
-   accessibilityLabel?: ?string,
- 
-   /**
+  accessibilityLabel?: ?string,
+
+  /**
     * If true, disable all interactions for this component.
     */
-   disabled?: ?boolean,
- 
-   /**
+  disabled?: ?boolean,
+
+  /**
     * Used to locate this view in end-to-end tests.
     */
-   testID?: ?string,
-
-    |}
+  testID?: ?string,
+|};
 
-function renderButton( 
-    props,
-    apeContext,
-    parentLayout)
-{
-const {spatialGeometry={},relativeIndex} = parentLayout
-const {ctx} = apeContext
+function renderButton(props, apeContext, parentLayout) {
+  const {spatialGeometry = {}, relativeIndex} = parentLayout;
+  const {ctx} = apeContext;
   // If is relative and x and y haven't be processed, don't render
-if(!spatialGeometry) return null
-// start drawing the canvas
-const  {title,color} = props
-const borderRadius = ButtonDefaults.containerStyle.borderRadius 
-const backgroundColor = ButtonDefaults.containerStyle.backgroundColor
-let x = spatialGeometry.x || 20
-let y = spatialGeometry.y || 40
-const width = x + y 
-const height = ButtonDefaults.containerStyle.height
-ctx.beginPath()
-//ctx.lineWidth = borderWidth
-ctx.fillStyle = backgroundColor
-//ctx.strokeStyle = borderColor
-//ctx.rect(x,y,borderRadius,width,height,antiClockWise)
-//ctx.rect(x,y,width,height)
-ctx.moveTo(x, y);
- /**
+  if (!spatialGeometry) return null;
+  // start drawing the canvas
+  const {title, color} = props;
+  const borderRadius = ButtonDefaults.containerStyle.borderRadius;
+  const backgroundColor = ButtonDefaults.containerStyle.backgroundColor;
+  let x = spatialGeometry.x || 20;
+  let y = spatialGeometry.y || 40;
+  const width = x + y;
+  const height = ButtonDefaults.containerStyle.height;
+  ctx.beginPath();
+  //ctx.lineWidth = borderWidth
+  ctx.fillStyle = backgroundColor;
+  //ctx.strokeStyle = borderColor
+  //ctx.rect(x,y,borderRadius,width,height,antiClockWise)
+  //ctx.rect(x,y,width,height)
+  ctx.moveTo(x, y);
+  /**
         *  Top Right Radius
         */
-ctx.lineTo(x + width - borderRadius, y);
-ctx.quadraticCurveTo(x + width, y, x + width, y + borderRadius);
-     /**
+  ctx.lineTo(x + width - borderRadius, y);
+  ctx.quadraticCurveTo(x + width, y, x + width, y + borderRadius);
+  /**
         *  Bottom right Radius
         */
 
-      ctx.lineTo(x + width, y + height - borderRadius);
-      ctx.quadraticCurveTo(
-        x + width,
-        y + height,
-        x + width - borderRadius,
-        y + height
-      );
+  ctx.lineTo(x + width, y + height - borderRadius);
+  ctx.quadraticCurveTo(
+    x + width,
+    y + height,
+    x + width - borderRadius,
+    y + height
+  );
 
-   /**
+  /**
         *  Bottom Left Radius
         */
-    ctx.lineTo(x + borderRadius, y + height);
-    ctx.quadraticCurveTo(x, y + height, x, y + height - borderRadius);
-       /** Top left Radius */
-       ctx.lineTo(x, y + borderRadius);
-       ctx.quadraticCurveTo(x, y, x + borderRadius, y);
-
-
-ctx.fill()
-ctx.stroke()
-ctx.fillStyle = color || ButtonDefaults.textStyle.color;
-ctx.font = `${ButtonDefaults.textStyle.fontSize} Helvetica`;
-//ctx.fillText('Start', x+ width/2 , y + height / 2);
-ctx.textAlign = 'center'
-ctx.fillText(title,x + width / 2,y + height /2)
-//ctx.fillText('Start', x  + height /2, y + height /2 );
-ctx.closePath()
+  ctx.lineTo(x + borderRadius, y + height);
+  ctx.quadraticCurveTo(x, y + height, x, y + height - borderRadius);
+  /** Top left Radius */
+  ctx.lineTo(x, y + borderRadius);
+  ctx.quadraticCurveTo(x, y, x + borderRadius, y);
 
+  ctx.fill();
+  ctx.stroke();
+  ctx.fillStyle = color || ButtonDefaults.textStyle.color;
+  ctx.font = `${ButtonDefaults.textStyle.fontSize} Helvetica`;
+  //ctx.fillText('Start', x+ width/2 , y + height / 2);
+  ctx.textAlign = 'center';
+  ctx.fillText(title, x + width / 2, y + height / 2);
+  //ctx.fillText('Start', x  + height /2, y + height /2 );
+  ctx.closePath();
 }
 
-
-export default function createButtonInstance(props:Props):mixed{
-    return {
-        type:'Button',
-        render:renderButton.bind(this,props)
-    }
-}
\ No newline at end of file
+export default function createButtonInstance(props: Props): mixed {
+  return {
+    type: 'Button',
+    render: renderButton.bind(this, props),
+  };
+}
diff --git a/packages/react-ape/renderer/reactApeComponent.js b/packages/react-ape/renderer/reactApeComponent.js
index d2e14f2..9a0b591 100644
--- a/packages/react-ape/renderer/reactApeComponent.js
+++ b/packages/react-ape/renderer/reactApeComponent.js
@@ -9,7 +9,7 @@
 import Image from './elements/Image';
 import Text from './elements/Text';
 import View from './elements/View';
-import Button from  './elements/Button'
+import Button from './elements/Button';
 import {CustomComponents} from '../modules/Register';
 
 const CHILDREN = 'children';
@@ -37,7 +37,7 @@ const ReactApeComponent = {
       Image: Image(props),
       Text: Text(props),
       View: new View(props),
-      Button : Button(props)
+      Button: Button(props),
     };
 
     if (!COMPONENTS[type]) {

From 5ed046599d32353a717a7542eb9cf33121313915 Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Tue, 21 Jun 2022 18:08:13 -0700
Subject: [PATCH 06/22] add button-test.js

---
 .../react-ape/renderer/elements/Button.js     | 38 ++++++------
 .../elements/__tests__/Button-test.js         | 59 +++++++++++++++++++
 2 files changed, 79 insertions(+), 18 deletions(-)

diff --git a/packages/react-ape/renderer/elements/Button.js b/packages/react-ape/renderer/elements/Button.js
index b281a29..610f8ec 100644
--- a/packages/react-ape/renderer/elements/Button.js
+++ b/packages/react-ape/renderer/elements/Button.js
@@ -7,9 +7,11 @@
 
 import {ButtonDefaults} from '../constants';
 
+//TODO adjust Opacity when focus, Blur
+type PressEvent = {||};
 type ButtonProps = {|
   title: string,
-  onPress: (event?: any) => mixed,
+  onPress: (event?: PressEvent) => mixed,
   touchSoundDisabled?: ?boolean,
   color?: ?string,
   /**
@@ -62,8 +64,8 @@ type ButtonProps = {|
   testID?: ?string,
 |};
 
-function renderButton(props, apeContext, parentLayout) {
-  const {spatialGeometry = {}, relativeIndex} = parentLayout;
+function renderButton(props: ButtonProps, apeContext, parentLayout) {
+  const {spatialGeometry = {x: 0, y: 0}, relativeIndex} = parentLayout;
   const {ctx} = apeContext;
   // If is relative and x and y haven't be processed, don't render
   if (!spatialGeometry) return null;
@@ -71,25 +73,25 @@ function renderButton(props, apeContext, parentLayout) {
   const {title, color} = props;
   const borderRadius = ButtonDefaults.containerStyle.borderRadius;
   const backgroundColor = ButtonDefaults.containerStyle.backgroundColor;
-  let x = spatialGeometry.x || 20;
-  let y = spatialGeometry.y || 40;
-  const width = x + y;
-  const height = ButtonDefaults.containerStyle.height;
+  let x = spatialGeometry.x || 0;
+  let y = spatialGeometry.y || 0;
+  let width = x + y;
+  let height = ButtonDefaults.containerStyle.height;
+  // if(parentLayout && parentLayout.style){
+  //   width = parentLayout.style.width
+  //   height = parentLayout.style.height
+  // }
   ctx.beginPath();
-  //ctx.lineWidth = borderWidth
   ctx.fillStyle = backgroundColor;
-  //ctx.strokeStyle = borderColor
-  //ctx.rect(x,y,borderRadius,width,height,antiClockWise)
-  //ctx.rect(x,y,width,height)
   ctx.moveTo(x, y);
   /**
-        *  Top Right Radius
-        */
+*  Top Right Radius
+*/
   ctx.lineTo(x + width - borderRadius, y);
   ctx.quadraticCurveTo(x + width, y, x + width, y + borderRadius);
   /**
-        *  Bottom right Radius
-        */
+*  Bottom right Radius
+*/
 
   ctx.lineTo(x + width, y + height - borderRadius);
   ctx.quadraticCurveTo(
@@ -100,8 +102,8 @@ function renderButton(props, apeContext, parentLayout) {
   );
 
   /**
-        *  Bottom Left Radius
-        */
+*  Bottom Left Radius
+*/
   ctx.lineTo(x + borderRadius, y + height);
   ctx.quadraticCurveTo(x, y + height, x, y + height - borderRadius);
   /** Top left Radius */
@@ -119,7 +121,7 @@ function renderButton(props, apeContext, parentLayout) {
   ctx.closePath();
 }
 
-export default function createButtonInstance(props: Props): mixed {
+export default function createButtonInstance(props: ButtonProps): mixed {
   return {
     type: 'Button',
     render: renderButton.bind(this, props),
diff --git a/packages/react-ape/renderer/elements/__tests__/Button-test.js b/packages/react-ape/renderer/elements/__tests__/Button-test.js
index e69de29..6f8eee0 100644
--- a/packages/react-ape/renderer/elements/__tests__/Button-test.js
+++ b/packages/react-ape/renderer/elements/__tests__/Button-test.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {ButtonDefaults} from '../../constants'
+import CreateButtonInstance from '../Button';
+
+describe('Button', () => {
+  describe('Call the button with Props', () => {
+    it('Should render properly', () => {
+      const title = 'Press Me'
+      const color = '#f8a978'
+      const x = 40
+      const y = 20
+      const width = x + y
+      const height = ButtonDefaults.containerStyle.height
+      const props = {title, color};
+      const apeContext = {
+        ctx: {
+          beginPath: jest.fn(),
+          fillStyle: jest.fn(),
+          moveTo: jest.fn(),
+          fillText: jest.fn(),
+          fill: jest.fn(),
+          stroke: jest.fn(),
+          closePath: jest.fn(),
+          lineTo: jest.fn(),
+          quadraticCurveTo: jest.fn(),
+          font: 'Helvetica',
+        },
+      };
+
+      const Button = CreateButtonInstance(props);
+      Button.render(apeContext, {spatialGeometry: {x, y}});
+      const {
+        beginPath,
+        fillStyle,
+        moveTo,
+        fillText,
+        fill,
+        stroke,
+        closePath,
+        lineTo,
+        quadraticCurveTo,
+        font,
+      } = apeContext.ctx;
+      expect(beginPath.mock.calls.length).toBe(1);
+      expect(beginPath).toBeCalledWith()
+      expect(closePath).toBeCalledWith()
+      expect(stroke).toBeCalledWith()
+      expect(moveTo).toBeCalledWith(x,y)
+      expect(lineTo.mock.calls.length).toEqual(4)
+      expect(fill.mock.calls.length).toBe(1)
+      expect(fillText.mock.calls.length).toBe(1)
+      expect(fillText).toBeCalledWith(title,x + width/2,y+height/2)
+      expect(font).toEqual(`${ButtonDefaults.textStyle.fontSize} Helvetica`)
+      expect(quadraticCurveTo.mock.calls.length).toEqual(4)
+      expect(fillStyle).toBe(color)
+    });
+  });
+});

From 6aeaeb608ae937bd81393fe06608ce8e4cf53067 Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Wed, 22 Jun 2022 00:48:12 -0700
Subject: [PATCH 07/22] adding onClick event to Button

---
 .../react-ape/renderer/elements/Button.js     | 56 +++++++++++++++++--
 .../elements/__tests__/Button-test.js         | 36 ++++++------
 2 files changed, 69 insertions(+), 23 deletions(-)

diff --git a/packages/react-ape/renderer/elements/Button.js b/packages/react-ape/renderer/elements/Button.js
index 610f8ec..72950be 100644
--- a/packages/react-ape/renderer/elements/Button.js
+++ b/packages/react-ape/renderer/elements/Button.js
@@ -12,6 +12,7 @@ type PressEvent = {||};
 type ButtonProps = {|
   title: string,
   onPress: (event?: PressEvent) => mixed,
+  onClick: (event?: PressEvent) => mixed,
   touchSoundDisabled?: ?boolean,
   color?: ?string,
   /**
@@ -65,7 +66,7 @@ type ButtonProps = {|
 |};
 
 function renderButton(props: ButtonProps, apeContext, parentLayout) {
-  const {spatialGeometry = {x: 0, y: 0}, relativeIndex} = parentLayout;
+  const {spatialGeometry = {x: 0, y: 0}} = parentLayout;
   const {ctx} = apeContext;
   // If is relative and x and y haven't be processed, don't render
   if (!spatialGeometry) return null;
@@ -77,10 +78,11 @@ function renderButton(props: ButtonProps, apeContext, parentLayout) {
   let y = spatialGeometry.y || 0;
   let width = x + y;
   let height = ButtonDefaults.containerStyle.height;
-  // if(parentLayout && parentLayout.style){
-  //   width = parentLayout.style.width
-  //   height = parentLayout.style.height
-  // }
+
+  //  ctx.addEventListener('click',()=>{
+  //   alert('hi')
+  // })
+
   ctx.beginPath();
   ctx.fillStyle = backgroundColor;
   ctx.moveTo(x, y);
@@ -119,6 +121,50 @@ function renderButton(props: ButtonProps, apeContext, parentLayout) {
   ctx.fillText(title, x + width / 2, y + height / 2);
   //ctx.fillText('Start', x  + height /2, y + height /2 );
   ctx.closePath();
+
+  //const canvas = document.getElementById('root')
+  //const context = canvas.getContext('2d')
+  const onClick = (event: SyntheticEvent<HTMLButtonElement>) => {
+    const rect = {
+      x,
+      y,
+      height,
+      width,
+    };
+    // const clientX = event.clientX  -  ctx.canvas.offsetLeft
+    // const clientY = event.clientY  -  ctx.canvas.offsetTop
+    const mousePosition = getMousePos(ctx.canvas, event);
+
+    // console.log('mouse',x,y)
+    console.log('rect', rect);
+    console.log('mouse', mousePosition);
+    if (isInside(mousePosition, rect)) {
+      alert('hi');
+    } else {
+      //alert('not inside')
+    }
+  };
+  function getMousePos(canvas, event) {
+    var rect = canvas.getBoundingClientRect();
+    return {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top,
+    };
+  }
+  const isInside = (pos, rect) => {
+    return (
+      pos.x > rect.x &&
+      pos.x < rect.x + rect.width &&
+      pos.y < rect.y + rect.heigth &&
+      pos.y > rect.y
+    );
+  };
+  const redrawButton = () => {};
+  ctx.canvas.addEventListener('click', onClick, false);
+  ctx.canvas.addEventListener('focus', redrawButton);
+  ctx.canvas.addEventListener('blur', redrawButton);
+
+  // events
 }
 
 export default function createButtonInstance(props: ButtonProps): mixed {
diff --git a/packages/react-ape/renderer/elements/__tests__/Button-test.js b/packages/react-ape/renderer/elements/__tests__/Button-test.js
index 6f8eee0..fa2ec78 100644
--- a/packages/react-ape/renderer/elements/__tests__/Button-test.js
+++ b/packages/react-ape/renderer/elements/__tests__/Button-test.js
@@ -1,17 +1,17 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import {ButtonDefaults} from '../../constants'
+import {ButtonDefaults} from '../../constants';
 import CreateButtonInstance from '../Button';
 
 describe('Button', () => {
   describe('Call the button with Props', () => {
     it('Should render properly', () => {
-      const title = 'Press Me'
-      const color = '#f8a978'
-      const x = 40
-      const y = 20
-      const width = x + y
-      const height = ButtonDefaults.containerStyle.height
+      const title = 'Press Me';
+      const color = '#f8a978';
+      const x = 40;
+      const y = 20;
+      const width = x + y;
+      const height = ButtonDefaults.containerStyle.height;
       const props = {title, color};
       const apeContext = {
         ctx: {
@@ -43,17 +43,17 @@ describe('Button', () => {
         font,
       } = apeContext.ctx;
       expect(beginPath.mock.calls.length).toBe(1);
-      expect(beginPath).toBeCalledWith()
-      expect(closePath).toBeCalledWith()
-      expect(stroke).toBeCalledWith()
-      expect(moveTo).toBeCalledWith(x,y)
-      expect(lineTo.mock.calls.length).toEqual(4)
-      expect(fill.mock.calls.length).toBe(1)
-      expect(fillText.mock.calls.length).toBe(1)
-      expect(fillText).toBeCalledWith(title,x + width/2,y+height/2)
-      expect(font).toEqual(`${ButtonDefaults.textStyle.fontSize} Helvetica`)
-      expect(quadraticCurveTo.mock.calls.length).toEqual(4)
-      expect(fillStyle).toBe(color)
+      expect(beginPath).toBeCalledWith();
+      expect(closePath).toBeCalledWith();
+      expect(stroke).toBeCalledWith();
+      expect(moveTo).toBeCalledWith(x, y);
+      expect(lineTo.mock.calls.length).toEqual(4);
+      expect(fill.mock.calls.length).toBe(1);
+      expect(fillText.mock.calls.length).toBe(1);
+      expect(fillText).toBeCalledWith(title, x + width / 2, y + height / 2);
+      expect(font).toEqual(`${ButtonDefaults.textStyle.fontSize} Helvetica`);
+      expect(quadraticCurveTo.mock.calls.length).toEqual(4);
+      expect(fillStyle).toBe(color);
     });
   });
 });

From c1175094e167123331f68e364d0e69f30e091d83 Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Wed, 22 Jun 2022 11:12:15 -0700
Subject: [PATCH 08/22] add focus style to the button

---
 packages/app/src/Sidebar.js                   |  2 +-
 .../react-ape/renderer/elements/Button.js     | 99 +++++++++++--------
 2 files changed, 59 insertions(+), 42 deletions(-)

diff --git a/packages/app/src/Sidebar.js b/packages/app/src/Sidebar.js
index 06f2279..6587e4d 100644
--- a/packages/app/src/Sidebar.js
+++ b/packages/app/src/Sidebar.js
@@ -41,7 +41,7 @@ class Sidebar extends Component {
           <Text>Rio de Janeiro</Text>
           <Text>Kyoto</Text>
           <Text>Stockholm</Text>
-          <Button onPress={() => {}} title="PRESS ME" />
+          <Button onClick={()=>alert('hi')} title="PRESS ME" />
         </View>
       </View>
     );
diff --git a/packages/react-ape/renderer/elements/Button.js b/packages/react-ape/renderer/elements/Button.js
index 72950be..274712f 100644
--- a/packages/react-ape/renderer/elements/Button.js
+++ b/packages/react-ape/renderer/elements/Button.js
@@ -7,12 +7,14 @@
 
 import {ButtonDefaults} from '../constants';
 
+
+
 //TODO adjust Opacity when focus, Blur
 type PressEvent = {||};
 type ButtonProps = {|
   title: string,
   onPress: (event?: PressEvent) => mixed,
-  onClick: (event?: PressEvent) => mixed,
+  onClick: (event?: SyntheticMouseEvent<T>) => mixed,
   touchSoundDisabled?: ?boolean,
   color?: ?string,
   /**
@@ -66,8 +68,11 @@ type ButtonProps = {|
 |};
 
 function renderButton(props: ButtonProps, apeContext, parentLayout) {
+  //
+   console.log('[RENDER]')
   const {spatialGeometry = {x: 0, y: 0}} = parentLayout;
   const {ctx} = apeContext;
+ 
   // If is relative and x and y haven't be processed, don't render
   if (!spatialGeometry) return null;
   // start drawing the canvas
@@ -78,11 +83,30 @@ function renderButton(props: ButtonProps, apeContext, parentLayout) {
   let y = spatialGeometry.y || 0;
   let width = x + y;
   let height = ButtonDefaults.containerStyle.height;
+  let globalStyle = {
+    width: width,
+    height:height,
+    color: color,
+    borderRadius:borderRadius,
+    backgroundColor,
+    lineWidth:0,
+    borderColor: 'transparent'
+  }
+const resetStyle = (newStyle)=>{
+  globalStyle = {...globalStyle,newStyle}
+  console.log('style)))))', globalStyle)
+}
+  const redrawButton = (ctx)=>{
+    // TODO reset Style on focus
+    let newStyle ={
+      lineWidth:2,
+      borderColor:'#ccc'
+    }
+    //let prevStyle = globalStyle
+    resetStyle(newStyle)
 
-  //  ctx.addEventListener('click',()=>{
-  //   alert('hi')
-  // })
-
+  }
+ 
   ctx.beginPath();
   ctx.fillStyle = backgroundColor;
   ctx.moveTo(x, y);
@@ -113,58 +137,51 @@ function renderButton(props: ButtonProps, apeContext, parentLayout) {
   ctx.quadraticCurveTo(x, y, x + borderRadius, y);
 
   ctx.fill();
+  ctx.lineWidth = globalStyle.lineWidth
+  ctx.strokeStyle = globalStyle.borderColor
   ctx.stroke();
   ctx.fillStyle = color || ButtonDefaults.textStyle.color;
   ctx.font = `${ButtonDefaults.textStyle.fontSize} Helvetica`;
   //ctx.fillText('Start', x+ width/2 , y + height / 2);
   ctx.textAlign = 'center';
   ctx.fillText(title, x + width / 2, y + height / 2);
-  //ctx.fillText('Start', x  + height /2, y + height /2 );
   ctx.closePath();
 
-  //const canvas = document.getElementById('root')
-  //const context = canvas.getContext('2d')
-  const onClick = (event: SyntheticEvent<HTMLButtonElement>) => {
-    const rect = {
+  const onClick = (event:SyntheticMouseEvent<HTMLButtonElement>)=>{
+    const rect ={
       x,
       y,
       height,
-      width,
-    };
-    // const clientX = event.clientX  -  ctx.canvas.offsetLeft
-    // const clientY = event.clientY  -  ctx.canvas.offsetTop
-    const mousePosition = getMousePos(ctx.canvas, event);
-
-    // console.log('mouse',x,y)
-    console.log('rect', rect);
-    console.log('mouse', mousePosition);
-    if (isInside(mousePosition, rect)) {
-      alert('hi');
-    } else {
-      //alert('not inside')
+      width
     }
-  };
-  function getMousePos(canvas, event) {
-    var rect = canvas.getBoundingClientRect();
+    const mousePosition = trackMousePosition(ctx.canvas,event)
+     if(isInside(mousePosition,rect)){
+        redrawButton(ctx)
+        if(props.onClick && typeof props.onClick === "function"){
+          props.onClick(event)
+        }
+    
+     }
+   
+  }
+  function trackMousePosition(canvas, event) {
     return {
-      x: event.clientX - rect.left,
-      y: event.clientY - rect.top,
+      x: event.clientX - canvas.offsetLeft,
+      y: event.clientY - canvas.offsetTop
     };
   }
-  const isInside = (pos, rect) => {
-    return (
-      pos.x > rect.x &&
-      pos.x < rect.x + rect.width &&
-      pos.y < rect.y + rect.heigth &&
-      pos.y > rect.y
-    );
-  };
-  const redrawButton = () => {};
-  ctx.canvas.addEventListener('click', onClick, false);
-  ctx.canvas.addEventListener('focus', redrawButton);
-  ctx.canvas.addEventListener('blur', redrawButton);
-
+  const isInside=(pos,rect)=>{
+    return pos.x > rect.x && pos.x < rect.x+rect.width && pos.y < rect.y+rect.height && pos.y > rect.y
+  }
+ 
+  ctx.canvas.addEventListener('click',onClick,false)
+  ctx.canvas.addEventListener('focus',redrawButton)
+  ctx.canvas.addEventListener('blur',redrawButton)
+  
   // events
+
+ 
+
 }
 
 export default function createButtonInstance(props: ButtonProps): mixed {

From 9319f06e746127ba0637d948e6360e5603554936 Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Wed, 22 Jun 2022 11:22:20 -0700
Subject: [PATCH 09/22] update Button-test.js

---
 packages/app/src/Sidebar.js                   |  2 +-
 .../react-ape/renderer/elements/Button.js     | 93 +++++++++----------
 .../elements/__tests__/Button-test.js         |  6 ++
 .../__snapshots__/Button-test.js.snap         |  8 ++
 4 files changed, 60 insertions(+), 49 deletions(-)
 create mode 100644 packages/react-ape/renderer/elements/__tests__/__snapshots__/Button-test.js.snap

diff --git a/packages/app/src/Sidebar.js b/packages/app/src/Sidebar.js
index 6587e4d..e5c9c99 100644
--- a/packages/app/src/Sidebar.js
+++ b/packages/app/src/Sidebar.js
@@ -41,7 +41,7 @@ class Sidebar extends Component {
           <Text>Rio de Janeiro</Text>
           <Text>Kyoto</Text>
           <Text>Stockholm</Text>
-          <Button onClick={()=>alert('hi')} title="PRESS ME" />
+          <Button onClick={() => alert('hi')} title="PRESS ME" />
         </View>
       </View>
     );
diff --git a/packages/react-ape/renderer/elements/Button.js b/packages/react-ape/renderer/elements/Button.js
index 274712f..d640fca 100644
--- a/packages/react-ape/renderer/elements/Button.js
+++ b/packages/react-ape/renderer/elements/Button.js
@@ -7,14 +7,12 @@
 
 import {ButtonDefaults} from '../constants';
 
-
-
 //TODO adjust Opacity when focus, Blur
 type PressEvent = {||};
 type ButtonProps = {|
   title: string,
   onPress: (event?: PressEvent) => mixed,
-  onClick: (event?: SyntheticMouseEvent<T>) => mixed,
+  onClick: (event?: SyntheticMouseEvent<HTMLButtonElement>) => mixed,
   touchSoundDisabled?: ?boolean,
   color?: ?string,
   /**
@@ -69,10 +67,10 @@ type ButtonProps = {|
 
 function renderButton(props: ButtonProps, apeContext, parentLayout) {
   //
-   console.log('[RENDER]')
+  console.log('[RENDER]');
   const {spatialGeometry = {x: 0, y: 0}} = parentLayout;
   const {ctx} = apeContext;
- 
+
   // If is relative and x and y haven't be processed, don't render
   if (!spatialGeometry) return null;
   // start drawing the canvas
@@ -85,28 +83,27 @@ function renderButton(props: ButtonProps, apeContext, parentLayout) {
   let height = ButtonDefaults.containerStyle.height;
   let globalStyle = {
     width: width,
-    height:height,
+    height: height,
     color: color,
-    borderRadius:borderRadius,
+    borderRadius: borderRadius,
     backgroundColor,
-    lineWidth:0,
-    borderColor: 'transparent'
-  }
-const resetStyle = (newStyle)=>{
-  globalStyle = {...globalStyle,newStyle}
-  console.log('style)))))', globalStyle)
-}
-  const redrawButton = (ctx)=>{
+    lineWidth: 0,
+    borderColor: 'transparent',
+  };
+  const resetStyle = newStyle => {
+    globalStyle = {...globalStyle, newStyle};
+    console.log('style)))))', globalStyle);
+  };
+  const redrawButton = ctx => {
     // TODO reset Style on focus
-    let newStyle ={
-      lineWidth:2,
-      borderColor:'#ccc'
-    }
+    let newStyle = {
+      lineWidth: 2,
+      borderColor: '#ccc',
+    };
     //let prevStyle = globalStyle
-    resetStyle(newStyle)
+    resetStyle(newStyle);
+  };
 
-  }
- 
   ctx.beginPath();
   ctx.fillStyle = backgroundColor;
   ctx.moveTo(x, y);
@@ -137,8 +134,8 @@ const resetStyle = (newStyle)=>{
   ctx.quadraticCurveTo(x, y, x + borderRadius, y);
 
   ctx.fill();
-  ctx.lineWidth = globalStyle.lineWidth
-  ctx.strokeStyle = globalStyle.borderColor
+  ctx.lineWidth = globalStyle.lineWidth;
+  ctx.strokeStyle = globalStyle.borderColor;
   ctx.stroke();
   ctx.fillStyle = color || ButtonDefaults.textStyle.color;
   ctx.font = `${ButtonDefaults.textStyle.fontSize} Helvetica`;
@@ -147,41 +144,41 @@ const resetStyle = (newStyle)=>{
   ctx.fillText(title, x + width / 2, y + height / 2);
   ctx.closePath();
 
-  const onClick = (event:SyntheticMouseEvent<HTMLButtonElement>)=>{
-    const rect ={
+  const onClick = (event: SyntheticMouseEvent<HTMLButtonElement>) => {
+    const rect = {
       x,
       y,
       height,
-      width
+      width,
+    };
+    const mousePosition = trackMousePosition(ctx.canvas, event);
+    if (isInside(mousePosition, rect)) {
+      redrawButton(ctx);
+      if (props.onClick && typeof props.onClick === 'function') {
+        props.onClick(event);
+      }
     }
-    const mousePosition = trackMousePosition(ctx.canvas,event)
-     if(isInside(mousePosition,rect)){
-        redrawButton(ctx)
-        if(props.onClick && typeof props.onClick === "function"){
-          props.onClick(event)
-        }
-    
-     }
-   
-  }
+  };
   function trackMousePosition(canvas, event) {
     return {
       x: event.clientX - canvas.offsetLeft,
-      y: event.clientY - canvas.offsetTop
+      y: event.clientY - canvas.offsetTop,
     };
   }
-  const isInside=(pos,rect)=>{
-    return pos.x > rect.x && pos.x < rect.x+rect.width && pos.y < rect.y+rect.height && pos.y > rect.y
-  }
- 
-  ctx.canvas.addEventListener('click',onClick,false)
-  ctx.canvas.addEventListener('focus',redrawButton)
-  ctx.canvas.addEventListener('blur',redrawButton)
-  
-  // events
+  const isInside = (pos, rect) => {
+    return (
+      pos.x > rect.x &&
+      pos.x < rect.x + rect.width &&
+      pos.y < rect.y + rect.height &&
+      pos.y > rect.y
+    );
+  };
 
- 
+  ctx.canvas.addEventListener('click', onClick, false);
+  ctx.canvas.addEventListener('focus', redrawButton);
+  ctx.canvas.addEventListener('blur', redrawButton);
 
+  // events
 }
 
 export default function createButtonInstance(props: ButtonProps): mixed {
diff --git a/packages/react-ape/renderer/elements/__tests__/Button-test.js b/packages/react-ape/renderer/elements/__tests__/Button-test.js
index fa2ec78..a747e7e 100644
--- a/packages/react-ape/renderer/elements/__tests__/Button-test.js
+++ b/packages/react-ape/renderer/elements/__tests__/Button-test.js
@@ -25,6 +25,10 @@ describe('Button', () => {
           lineTo: jest.fn(),
           quadraticCurveTo: jest.fn(),
           font: 'Helvetica',
+          canvas:{
+            addEventListener:jest.fn()
+          }
+       
         },
       };
 
@@ -54,6 +58,8 @@ describe('Button', () => {
       expect(font).toEqual(`${ButtonDefaults.textStyle.fontSize} Helvetica`);
       expect(quadraticCurveTo.mock.calls.length).toEqual(4);
       expect(fillStyle).toBe(color);
+      expect(Button).toMatchSnapshot()
+      
     });
   });
 });
diff --git a/packages/react-ape/renderer/elements/__tests__/__snapshots__/Button-test.js.snap b/packages/react-ape/renderer/elements/__tests__/__snapshots__/Button-test.js.snap
new file mode 100644
index 0000000..7ba1ddc
--- /dev/null
+++ b/packages/react-ape/renderer/elements/__tests__/__snapshots__/Button-test.js.snap
@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button Call the button with Props Should render properly 1`] = `
+Object {
+  "render": [Function],
+  "type": "Button",
+}
+`;

From 763f8d0299b9ceb05154a73978548c4b55a842cd Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Wed, 22 Jun 2022 11:24:12 -0700
Subject: [PATCH 10/22] add Button Snapshopt

---
 .../renderer/elements/__tests__/Button-test.js         | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/react-ape/renderer/elements/__tests__/Button-test.js b/packages/react-ape/renderer/elements/__tests__/Button-test.js
index a747e7e..41d856e 100644
--- a/packages/react-ape/renderer/elements/__tests__/Button-test.js
+++ b/packages/react-ape/renderer/elements/__tests__/Button-test.js
@@ -25,10 +25,9 @@ describe('Button', () => {
           lineTo: jest.fn(),
           quadraticCurveTo: jest.fn(),
           font: 'Helvetica',
-          canvas:{
-            addEventListener:jest.fn()
-          }
-       
+          canvas: {
+            addEventListener: jest.fn(),
+          },
         },
       };
 
@@ -58,8 +57,7 @@ describe('Button', () => {
       expect(font).toEqual(`${ButtonDefaults.textStyle.fontSize} Helvetica`);
       expect(quadraticCurveTo.mock.calls.length).toEqual(4);
       expect(fillStyle).toBe(color);
-      expect(Button).toMatchSnapshot()
-      
+      expect(Button).toMatchSnapshot();
     });
   });
 });

From c568eb19805805462c806d0579801ec4e1335519 Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Mon, 27 Jun 2022 01:47:05 -0700
Subject: [PATCH 11/22] delete docs/components-listview.md

---
 packages/docs/components-listview.md | 51 ----------------------------
 1 file changed, 51 deletions(-)
 delete mode 100644 packages/docs/components-listview.md

diff --git a/packages/docs/components-listview.md b/packages/docs/components-listview.md
deleted file mode 100644
index f5de9b1..0000000
--- a/packages/docs/components-listview.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-id: components-listview
-title: ListView
-sidebar_label: ListView
----
-
-## ListView
-
-List View is a special type of view that can display items one by one based in a list.
-
-```JS
-const DATA = [
-  {
-    title: 'Main dishes',
-    data: ['Pizza', 'Burger', 'Risotto'],
-  },
-  {
-    title: 'Sides',
-    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
-  },
-  {
-    title: 'Drinks',
-    data: ['Water', 'Coke', 'Beer'],
-  },
-  {
-    title: 'Desserts',
-    data: ['Cheese Cake', 'Ice Cream'],
-  },
-];
-
-function Item({ title }) {
-  return (
-    <View style={styles.item}>
-      <Text style={styles.title}>{title}</Text>
-    </View>
-  );
-}
-
-export default function App() {
-  return (
-      <SectionList
-        sections={DATA}
-        keyExtractor={(item, index) => item + index}
-        renderItem={({ item }) => <Item title={item} />}
-        renderSectionHeader={({ section: { title } }) => (
-          <Text>{title}</Text>
-        )}
-      />
-  );
-}
-```

From 85cd94c7b6c8bd021e540c16eb11373390deeea0 Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Mon, 27 Jun 2022 02:27:55 -0700
Subject: [PATCH 12/22] reabse main

---
 packages/react-ape/renderer/elements/Button.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-ape/renderer/elements/Button.js b/packages/react-ape/renderer/elements/Button.js
index d640fca..79b850d 100644
--- a/packages/react-ape/renderer/elements/Button.js
+++ b/packages/react-ape/renderer/elements/Button.js
@@ -86,7 +86,7 @@ function renderButton(props: ButtonProps, apeContext, parentLayout) {
     height: height,
     color: color,
     borderRadius: borderRadius,
-    backgroundColor,
+    backgroundColor:color,
     lineWidth: 0,
     borderColor: 'transparent',
   };
@@ -105,7 +105,7 @@ function renderButton(props: ButtonProps, apeContext, parentLayout) {
   };
 
   ctx.beginPath();
-  ctx.fillStyle = backgroundColor;
+  ctx.fillStyle = color;
   ctx.moveTo(x, y);
   /**
 *  Top Right Radius
@@ -137,7 +137,7 @@ function renderButton(props: ButtonProps, apeContext, parentLayout) {
   ctx.lineWidth = globalStyle.lineWidth;
   ctx.strokeStyle = globalStyle.borderColor;
   ctx.stroke();
-  ctx.fillStyle = color || ButtonDefaults.textStyle.color;
+  ctx.fillStyle =  ButtonDefaults.textStyle.color;
   ctx.font = `${ButtonDefaults.textStyle.fontSize} Helvetica`;
   //ctx.fillText('Start', x+ width/2 , y + height / 2);
   ctx.textAlign = 'center';

From d3ca89823b8c2760abdb713502421104240f4ff5 Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Mon, 27 Jun 2022 02:39:59 -0700
Subject: [PATCH 13/22] rebase

---
 packages/app/src/Sidebar.js                   | 14 ++++++++++
 .../react-ape/renderer/elements/Button.js     | 26 +++++--------------
 packages/react-ape/renderer/utils.js          | 18 +++++++++++++
 3 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/packages/app/src/Sidebar.js b/packages/app/src/Sidebar.js
index b6e4d44..1e5ad60 100644
--- a/packages/app/src/Sidebar.js
+++ b/packages/app/src/Sidebar.js
@@ -4,6 +4,7 @@ import {
   View,
   Dimensions,
   StyleSheet,
+  Button,
   registerComponent,
   withFocus,
 } from '../../react-ape/reactApeEntry';
@@ -27,6 +28,11 @@ const styles = StyleSheet.create({
     lineHeight: 40,
     backgroundColor: 'orange',
   },
+  buttonContainer:{
+      bottom:0,
+      position:"absolute"
+    
+  }
 });
 
 class Item extends React.Component {
@@ -65,6 +71,14 @@ class Sidebar extends Component {
         />
         <FocusableItem focusKey="sidebar-item-2" text="Kyoto" idx={160} />
         <FocusableItem focusKey="sidebar-item-3" text="Stockholm" idx={200} />
+        <View style={styles.buttonContainer}>
+        <Button
+        color="blue'"
+         title="Navigate"
+         onClick = {()=>{}}
+        />
+        </View>
+      
         {/*</View>*/}
       </View>
     );
diff --git a/packages/react-ape/renderer/elements/Button.js b/packages/react-ape/renderer/elements/Button.js
index 79b850d..253cd43 100644
--- a/packages/react-ape/renderer/elements/Button.js
+++ b/packages/react-ape/renderer/elements/Button.js
@@ -6,7 +6,7 @@
  */
 
 import {ButtonDefaults} from '../constants';
-
+import {trackMousePosition,isMouseInside} from '../utils'
 //TODO adjust Opacity when focus, Blur
 type PressEvent = {||};
 type ButtonProps = {|
@@ -66,8 +66,6 @@ type ButtonProps = {|
 |};
 
 function renderButton(props: ButtonProps, apeContext, parentLayout) {
-  //
-  console.log('[RENDER]');
   const {spatialGeometry = {x: 0, y: 0}} = parentLayout;
   const {ctx} = apeContext;
 
@@ -79,7 +77,7 @@ function renderButton(props: ButtonProps, apeContext, parentLayout) {
   const backgroundColor = ButtonDefaults.containerStyle.backgroundColor;
   let x = spatialGeometry.x || 0;
   let y = spatialGeometry.y || 0;
-  let width = x + y;
+  let width = x + y * title.length /3;
   let height = ButtonDefaults.containerStyle.height;
   let globalStyle = {
     width: width,
@@ -105,7 +103,7 @@ function renderButton(props: ButtonProps, apeContext, parentLayout) {
   };
 
   ctx.beginPath();
-  ctx.fillStyle = color;
+  ctx.fillStyle = backgroundColor;
   ctx.moveTo(x, y);
   /**
 *  Top Right Radius
@@ -152,27 +150,15 @@ function renderButton(props: ButtonProps, apeContext, parentLayout) {
       width,
     };
     const mousePosition = trackMousePosition(ctx.canvas, event);
-    if (isInside(mousePosition, rect)) {
+    if (isMouseInside(mousePosition, rect)) {
       redrawButton(ctx);
       if (props.onClick && typeof props.onClick === 'function') {
         props.onClick(event);
       }
     }
   };
-  function trackMousePosition(canvas, event) {
-    return {
-      x: event.clientX - canvas.offsetLeft,
-      y: event.clientY - canvas.offsetTop,
-    };
-  }
-  const isInside = (pos, rect) => {
-    return (
-      pos.x > rect.x &&
-      pos.x < rect.x + rect.width &&
-      pos.y < rect.y + rect.height &&
-      pos.y > rect.y
-    );
-  };
+
+
 
   ctx.canvas.addEventListener('click', onClick, false);
   ctx.canvas.addEventListener('focus', redrawButton);
diff --git a/packages/react-ape/renderer/utils.js b/packages/react-ape/renderer/utils.js
index a1d2618..cf9d001 100644
--- a/packages/react-ape/renderer/utils.js
+++ b/packages/react-ape/renderer/utils.js
@@ -6,3 +6,21 @@
 export function unsafeCreateUniqueId(): string {
   return (Math.random() * 10e18 + Date.now()).toString(36);
 }
+type MouseEventType={|
+   x:number,
+   y:number
+  |}
+export function trackMousePosition(canvas, event):MouseEventType {
+  return {
+    x: event.clientX - canvas.offsetLeft,
+    y: event.clientY - canvas.offsetTop,
+  };
+}
+export const isMouseInside = (pos, rect):Boolean => {
+  return (
+    pos.x > rect.x &&
+    pos.x < rect.x + rect.width &&
+    pos.y < rect.y + rect.height &&
+    pos.y > rect.y
+  );
+};
\ No newline at end of file

From 5691c824abac274596d85823cdb324df48da1083 Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Mon, 4 Jul 2022 01:14:33 -0700
Subject: [PATCH 14/22] add docs for button

---
 packages/app/src/Sidebar.js                   |  2 +-
 packages/docs/components-button.md            | 29 +++++++++++++++++++
 .../react-ape/renderer/elements/Button.js     | 18 ++++++++++--
 .../react-ape/renderer/reactApeRenderer.js    |  2 +-
 packages/react-ape/renderer/utils.js          |  2 +-
 packages/website/sidebars.json                |  4 ++-
 6 files changed, 50 insertions(+), 7 deletions(-)
 create mode 100644 packages/docs/components-button.md

diff --git a/packages/app/src/Sidebar.js b/packages/app/src/Sidebar.js
index 1e5ad60..2163579 100644
--- a/packages/app/src/Sidebar.js
+++ b/packages/app/src/Sidebar.js
@@ -73,7 +73,7 @@ class Sidebar extends Component {
         <FocusableItem focusKey="sidebar-item-3" text="Stockholm" idx={200} />
         <View style={styles.buttonContainer}>
         <Button
-        color="blue'"
+        color="#2196F3''"
          title="Navigate"
          onClick = {()=>{}}
         />
diff --git a/packages/docs/components-button.md b/packages/docs/components-button.md
new file mode 100644
index 0000000..1b40443
--- /dev/null
+++ b/packages/docs/components-button.md
@@ -0,0 +1,29 @@
+---
+id: components-button
+title: Button
+sidebar_label: Button
+---
+
+
+A component for creating a Button.
+
+The following example shows how to render a Button.
+```JS
+import React from "react";
+import { Button, View, render } from "react-ape";
+
+class ImageExample extends React.Component {
+  render() {
+    return (
+      <View>
+        <Button
+         title="Click Me"
+         color="#2196F3'"
+         onClick ={()=>{}}
+        />
+      </View>
+    );
+  }
+}
+```
+<iframe src="https://codesandbox.io/embed/24zmzm07my?hidenavigation=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
\ No newline at end of file
diff --git a/packages/react-ape/renderer/elements/Button.js b/packages/react-ape/renderer/elements/Button.js
index 253cd43..aff33bb 100644
--- a/packages/react-ape/renderer/elements/Button.js
+++ b/packages/react-ape/renderer/elements/Button.js
@@ -7,6 +7,7 @@
 
 import {ButtonDefaults} from '../constants';
 import {trackMousePosition,isMouseInside} from '../utils'
+import type {CanvasComponentContext} from '../types'
 //TODO adjust Opacity when focus, Blur
 type PressEvent = {||};
 type ButtonProps = {|
@@ -65,8 +66,8 @@ type ButtonProps = {|
   testID?: ?string,
 |};
 
-function renderButton(props: ButtonProps, apeContext, parentLayout) {
-  const {spatialGeometry = {x: 0, y: 0}} = parentLayout;
+function renderButton(props: ButtonProps, apeContext:CanvasComponentContext, parentLayout) {
+  const {spatialGeometry } = parentLayout;
   const {ctx} = apeContext;
 
   // If is relative and x and y haven't be processed, don't render
@@ -160,11 +161,22 @@ function renderButton(props: ButtonProps, apeContext, parentLayout) {
 
 
 
+
+// TODO:  
+/**
+ * We need to remove addEventListeners from the renderButton 
+ * function because this function runs for each state/prop update.
+ *  It will keep creating/refreshing listeners for every render.
+
+We can keep this way, if we run this addEventListener 
+once by checking if the listener already exist. 
+Note onClick will need to share scope with this function to work properly.
+ */
   ctx.canvas.addEventListener('click', onClick, false);
   ctx.canvas.addEventListener('focus', redrawButton);
   ctx.canvas.addEventListener('blur', redrawButton);
 
-  // events
+ 
 }
 
 export default function createButtonInstance(props: ButtonProps): mixed {
diff --git a/packages/react-ape/renderer/reactApeRenderer.js b/packages/react-ape/renderer/reactApeRenderer.js
index 88ed963..e9a8433 100644
--- a/packages/react-ape/renderer/reactApeRenderer.js
+++ b/packages/react-ape/renderer/reactApeRenderer.js
@@ -116,7 +116,7 @@ const ReactApeFiber = reconciler({
 
       if (diff) {
         const parentLayout = element.parentLayout || element.getParentLayout();
-        if (type === 'Text') {
+        if (type === 'Text' ) {
           parentLayout.resetLayout(); // View needs to be reset on text updates
         }
 
diff --git a/packages/react-ape/renderer/utils.js b/packages/react-ape/renderer/utils.js
index cf9d001..241c437 100644
--- a/packages/react-ape/renderer/utils.js
+++ b/packages/react-ape/renderer/utils.js
@@ -16,7 +16,7 @@ export function trackMousePosition(canvas, event):MouseEventType {
     y: event.clientY - canvas.offsetTop,
   };
 }
-export const isMouseInside = (pos, rect):Boolean => {
+export const isMouseInside = (pos, rect):boolean => {
   return (
     pos.x > rect.x &&
     pos.x < rect.x + rect.width &&
diff --git a/packages/website/sidebars.json b/packages/website/sidebars.json
index 0d7234b..f29b8de 100644
--- a/packages/website/sidebars.json
+++ b/packages/website/sidebars.json
@@ -16,8 +16,10 @@
     "Components": [
       "components-image",
       "components-text",
-      "components-view"
+      "components-view",
+      "components-button"
     ],
+    
     "APIs": [
       "apis-dimensions",
       "apis-platform",

From 0faeb16cb4e0501356d97712514c05465d7608a5 Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Fri, 22 Jul 2022 11:55:50 -0700
Subject: [PATCH 15/22] Fix color props

---
 packages/app/src/Clock.js                     |  1 +
 packages/app/src/Sidebar.js                   | 19 ++++------
 .../react-ape/renderer/elements/Button.js     | 35 ++++++++++++-------
 3 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/packages/app/src/Clock.js b/packages/app/src/Clock.js
index c9f66af..f4b54a6 100644
--- a/packages/app/src/Clock.js
+++ b/packages/app/src/Clock.js
@@ -51,6 +51,7 @@ class Clock extends React.Component {
         <Text style={styles.time}>
           {this.state.time}
         </Text>
+       
         {/*<Text style={styles.time}>
           {this.state.time}
         </Text>
diff --git a/packages/app/src/Sidebar.js b/packages/app/src/Sidebar.js
index 2163579..a303abd 100644
--- a/packages/app/src/Sidebar.js
+++ b/packages/app/src/Sidebar.js
@@ -28,11 +28,7 @@ const styles = StyleSheet.create({
     lineHeight: 40,
     backgroundColor: 'orange',
   },
-  buttonContainer:{
-      bottom:0,
-      position:"absolute"
-    
-  }
+
 });
 
 class Item extends React.Component {
@@ -64,6 +60,11 @@ class Sidebar extends Component {
     return (
       <View style={styles.sidebar}>
         {/*<View style={styles.container}>*/}
+        <Button
+          color={"#000"}
+         title="Click Me 🚀"
+         onClick = {()=>{alert('hi')}}
+        />
         <FocusableItem
           focusKey="sidebar-item-1"
           text="Rio de Janeiro"
@@ -71,13 +72,7 @@ class Sidebar extends Component {
         />
         <FocusableItem focusKey="sidebar-item-2" text="Kyoto" idx={160} />
         <FocusableItem focusKey="sidebar-item-3" text="Stockholm" idx={200} />
-        <View style={styles.buttonContainer}>
-        <Button
-        color="#2196F3''"
-         title="Navigate"
-         onClick = {()=>{}}
-        />
-        </View>
+        
       
         {/*</View>*/}
       </View>
diff --git a/packages/react-ape/renderer/elements/Button.js b/packages/react-ape/renderer/elements/Button.js
index aff33bb..d35d53e 100644
--- a/packages/react-ape/renderer/elements/Button.js
+++ b/packages/react-ape/renderer/elements/Button.js
@@ -8,6 +8,7 @@
 import {ButtonDefaults} from '../constants';
 import {trackMousePosition,isMouseInside} from '../utils'
 import type {CanvasComponentContext} from '../types'
+
 //TODO adjust Opacity when focus, Blur
 type PressEvent = {||};
 type ButtonProps = {|
@@ -67,18 +68,21 @@ type ButtonProps = {|
 |};
 
 function renderButton(props: ButtonProps, apeContext:CanvasComponentContext, parentLayout) {
-  const {spatialGeometry } = parentLayout;
   const {ctx} = apeContext;
 
   // If is relative and x and y haven't be processed, don't render
-  if (!spatialGeometry) return null;
   // start drawing the canvas
+  console.log('[PROPS]',props)
   const {title, color} = props;
+  if(!title){
+    throw Error("Title required!")
+  }
   const borderRadius = ButtonDefaults.containerStyle.borderRadius;
   const backgroundColor = ButtonDefaults.containerStyle.backgroundColor;
-  let x = spatialGeometry.x || 0;
-  let y = spatialGeometry.y || 0;
-  let width = x + y * title.length /3;
+  let x = 40;
+  let y = 300;
+  const textWidth = ctx.measureText(title).width;
+  let width =  textWidth * 1.5;
   let height = ButtonDefaults.containerStyle.height;
   let globalStyle = {
     width: width,
@@ -91,7 +95,7 @@ function renderButton(props: ButtonProps, apeContext:CanvasComponentContext, par
   };
   const resetStyle = newStyle => {
     globalStyle = {...globalStyle, newStyle};
-    console.log('style)))))', globalStyle);
+
   };
   const redrawButton = ctx => {
     // TODO reset Style on focus
@@ -99,12 +103,11 @@ function renderButton(props: ButtonProps, apeContext:CanvasComponentContext, par
       lineWidth: 2,
       borderColor: '#ccc',
     };
-    //let prevStyle = globalStyle
     resetStyle(newStyle);
   };
 
   ctx.beginPath();
-  ctx.fillStyle = backgroundColor;
+  ctx.fillStyle = color || ButtonDefaults.containerStyle.backgroundColor
   ctx.moveTo(x, y);
   /**
 *  Top Right Radius
@@ -137,10 +140,16 @@ function renderButton(props: ButtonProps, apeContext:CanvasComponentContext, par
   ctx.strokeStyle = globalStyle.borderColor;
   ctx.stroke();
   ctx.fillStyle =  ButtonDefaults.textStyle.color;
-  ctx.font = `${ButtonDefaults.textStyle.fontSize} Helvetica`;
-  //ctx.fillText('Start', x+ width/2 , y + height / 2);
-  ctx.textAlign = 'center';
-  ctx.fillText(title, x + width / 2, y + height / 2);
+
+  //set the fontSize
+const fontArgs = ctx.font.split(' ');
+const newSize =` ${ButtonDefaults.textStyle.fontSize}px`;
+  ctx.font = newSize + ' ' + fontArgs[fontArgs.length - 1];
+
+// ctx.textAlign = 'center';
+
+// ctx.fillText(title,  400 / 2, y + height / 2,textWidth);
+ctx.fillText(title , (x + textWidth /2.5), y + height /2);
   ctx.closePath();
 
   const onClick = (event: SyntheticMouseEvent<HTMLButtonElement>) => {
@@ -179,6 +188,8 @@ Note onClick will need to share scope with this function to work properly.
  
 }
 
+
+
 export default function createButtonInstance(props: ButtonProps): mixed {
   return {
     type: 'Button',

From 0875e2b95077331b87d9dc11ea38382a395d9415 Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Sun, 7 Aug 2022 23:07:31 -0700
Subject: [PATCH 16/22] remove onClick from the Button render

---
 packages/app/src/Clock.js                     |   2 +-
 packages/app/src/Sidebar.js                   |  13 ++-
 .../react-ape/renderer/elements/Button.js     | 109 +++++++++---------
 .../react-ape/renderer/reactApeComponent.js   |  32 +++++
 .../react-ape/renderer/reactApeRenderer.js    |   2 +-
 packages/react-ape/renderer/utils.js          |  14 +--
 6 files changed, 103 insertions(+), 69 deletions(-)

diff --git a/packages/app/src/Clock.js b/packages/app/src/Clock.js
index f4b54a6..6ceaf72 100644
--- a/packages/app/src/Clock.js
+++ b/packages/app/src/Clock.js
@@ -51,7 +51,7 @@ class Clock extends React.Component {
         <Text style={styles.time}>
           {this.state.time}
         </Text>
-       
+
         {/*<Text style={styles.time}>
           {this.state.time}
         </Text>
diff --git a/packages/app/src/Sidebar.js b/packages/app/src/Sidebar.js
index a303abd..4aff134 100644
--- a/packages/app/src/Sidebar.js
+++ b/packages/app/src/Sidebar.js
@@ -28,7 +28,6 @@ const styles = StyleSheet.create({
     lineHeight: 40,
     backgroundColor: 'orange',
   },
-
 });
 
 class Item extends React.Component {
@@ -61,10 +60,13 @@ class Sidebar extends Component {
       <View style={styles.sidebar}>
         {/*<View style={styles.container}>*/}
         <Button
-          color={"#000"}
-         title="Click Me 🚀"
-         onClick = {()=>{alert('hi')}}
+          color={'#000'}
+          title="Click Me 🚀"
+          onClick={() => {
+            alert('hi');
+          }}
         />
+         
         <FocusableItem
           focusKey="sidebar-item-1"
           text="Rio de Janeiro"
@@ -72,8 +74,7 @@ class Sidebar extends Component {
         />
         <FocusableItem focusKey="sidebar-item-2" text="Kyoto" idx={160} />
         <FocusableItem focusKey="sidebar-item-3" text="Stockholm" idx={200} />
-        
-      
+
         {/*</View>*/}
       </View>
     );
diff --git a/packages/react-ape/renderer/elements/Button.js b/packages/react-ape/renderer/elements/Button.js
index d35d53e..a4cd6ed 100644
--- a/packages/react-ape/renderer/elements/Button.js
+++ b/packages/react-ape/renderer/elements/Button.js
@@ -6,8 +6,8 @@
  */
 
 import {ButtonDefaults} from '../constants';
-import {trackMousePosition,isMouseInside} from '../utils'
-import type {CanvasComponentContext} from '../types'
+import {trackMousePosition, isMouseInside} from '../utils';
+import type {CanvasComponentContext} from '../types';
 
 //TODO adjust Opacity when focus, Blur
 type PressEvent = {||};
@@ -15,6 +15,7 @@ type ButtonProps = {|
   title: string,
   onPress: (event?: PressEvent) => mixed,
   onClick: (event?: SyntheticMouseEvent<HTMLButtonElement>) => mixed,
+  //handleOnClick:(event?:SyntheticMouseEvent<HTMLButtonElement>)=>mixed,
   touchSoundDisabled?: ?boolean,
   color?: ?string,
   /**
@@ -60,54 +61,58 @@ type ButtonProps = {|
     * If true, disable all interactions for this component.
     */
   disabled?: ?boolean,
-
+  getDimension?: () => mixed,
   /**
     * Used to locate this view in end-to-end tests.
     */
   testID?: ?string,
 |};
 
-function renderButton(props: ButtonProps, apeContext:CanvasComponentContext, parentLayout) {
+function renderButton(
+  props: ButtonProps,
+  apeContext: CanvasComponentContext,
+  parentLayout
+) {
   const {ctx} = apeContext;
 
   // If is relative and x and y haven't be processed, don't render
   // start drawing the canvas
-  console.log('[PROPS]',props)
+  console.log('[PROPS]', props);
   const {title, color} = props;
-  if(!title){
-    throw Error("Title required!")
+  if (!title) {
+    throw Error('Title required!');
   }
   const borderRadius = ButtonDefaults.containerStyle.borderRadius;
   const backgroundColor = ButtonDefaults.containerStyle.backgroundColor;
   let x = 40;
   let y = 300;
+
   const textWidth = ctx.measureText(title).width;
-  let width =  textWidth * 1.5;
+  let width = textWidth * 1.5;
   let height = ButtonDefaults.containerStyle.height;
   let globalStyle = {
     width: width,
     height: height,
     color: color,
     borderRadius: borderRadius,
-    backgroundColor:color,
+    backgroundColor: color,
     lineWidth: 0,
     borderColor: 'transparent',
   };
   const resetStyle = newStyle => {
     globalStyle = {...globalStyle, newStyle};
-
-  };
-  const redrawButton = ctx => {
-    // TODO reset Style on focus
-    let newStyle = {
-      lineWidth: 2,
-      borderColor: '#ccc',
-    };
-    resetStyle(newStyle);
   };
+  // const redrawButton = ctx => {
+  //   // TODO reset Style on focus
+  //   let newStyle = {
+  //     lineWidth: 2,
+  //     borderColor: '#ccc',
+  //   };
+  //   resetStyle(newStyle);
+  // };
 
   ctx.beginPath();
-  ctx.fillStyle = color || ButtonDefaults.containerStyle.backgroundColor
+  ctx.fillStyle = color || ButtonDefaults.containerStyle.backgroundColor;
   ctx.moveTo(x, y);
   /**
 *  Top Right Radius
@@ -139,40 +144,40 @@ function renderButton(props: ButtonProps, apeContext:CanvasComponentContext, par
   ctx.lineWidth = globalStyle.lineWidth;
   ctx.strokeStyle = globalStyle.borderColor;
   ctx.stroke();
-  ctx.fillStyle =  ButtonDefaults.textStyle.color;
+  ctx.fillStyle = ButtonDefaults.textStyle.color;
 
   //set the fontSize
-const fontArgs = ctx.font.split(' ');
-const newSize =` ${ButtonDefaults.textStyle.fontSize}px`;
+  const fontArgs = ctx.font.split(' ');
+  const newSize = ` ${ButtonDefaults.textStyle.fontSize}px`;
   ctx.font = newSize + ' ' + fontArgs[fontArgs.length - 1];
 
-// ctx.textAlign = 'center';
+  // ctx.textAlign = 'center';
 
-// ctx.fillText(title,  400 / 2, y + height / 2,textWidth);
-ctx.fillText(title , (x + textWidth /2.5), y + height /2);
+  // ctx.fillText(title,  400 / 2, y + height / 2,textWidth);
+  ctx.fillText(title, x + textWidth / 2.5, y + height / 2);
   ctx.closePath();
-
-  const onClick = (event: SyntheticMouseEvent<HTMLButtonElement>) => {
-    const rect = {
-      x,
-      y,
-      height,
-      width,
-    };
-    const mousePosition = trackMousePosition(ctx.canvas, event);
-    if (isMouseInside(mousePosition, rect)) {
-      redrawButton(ctx);
-      if (props.onClick && typeof props.onClick === 'function') {
-        props.onClick(event);
-      }
-    }
-  };
-
-
-
-
-// TODO:  
-/**
+  // if(props.handleOnClick){
+  // onClick()
+  // }
+
+  // const onClick = (event: SyntheticMouseEvent<HTMLButtonElement>) => {
+  //   const rect = {
+  //     x,
+  //     y,
+  //     height,
+  //     width,
+  //   };
+  //   const mousePosition = trackMousePosition(ctx.canvas, event);
+  //   if (isMouseInside(mousePosition, rect)) {
+  //     redrawButton(ctx);
+  //     if (props.onClick && typeof props.onClick === 'function') {
+  //       props.onClick(event);
+  //     }
+  //   }
+  // };
+
+  // TODO:
+  /**
  * We need to remove addEventListeners from the renderButton 
  * function because this function runs for each state/prop update.
  *  It will keep creating/refreshing listeners for every render.
@@ -181,15 +186,11 @@ We can keep this way, if we run this addEventListener
 once by checking if the listener already exist. 
 Note onClick will need to share scope with this function to work properly.
  */
-  ctx.canvas.addEventListener('click', onClick, false);
-  ctx.canvas.addEventListener('focus', redrawButton);
-  ctx.canvas.addEventListener('blur', redrawButton);
-
- 
+  // ctx.canvas.addEventListener('click', onClick, false);
+  // ctx.canvas.addEventListener('focus', redrawButton);
+  // ctx.canvas.addEventListener('blur', redrawButton);
 }
 
-
-
 export default function createButtonInstance(props: ButtonProps): mixed {
   return {
     type: 'Button',
diff --git a/packages/react-ape/renderer/reactApeComponent.js b/packages/react-ape/renderer/reactApeComponent.js
index 9a0b591..5ede772 100644
--- a/packages/react-ape/renderer/reactApeComponent.js
+++ b/packages/react-ape/renderer/reactApeComponent.js
@@ -11,6 +11,7 @@ import Text from './elements/Text';
 import View from './elements/View';
 import Button from './elements/Button';
 import {CustomComponents} from '../modules/Register';
+import {trackMousePosition, isMouseInside} from './utils';
 
 const CHILDREN = 'children';
 const STYLE = 'style';
@@ -32,6 +33,37 @@ const ReactApeComponent = {
       );
     });
 
+    const tag = '[CREATE_ELEMENT]';
+
+    if (type === 'Button') {
+      const {ctx} = apeContextGlobal;
+      ctx.canvas.addEventListener(
+        'click',
+        event => {
+          props.onClick(event);
+        },
+        false
+      );
+    }
+    /**
+     *  Handling click button event
+     * @param {*} event 
+     */
+    const onClick = (event: SyntheticMouseEvent<HTMLButtonElement>) => {
+      const rect = {
+        x,
+        y,
+        height,
+        width,
+      };
+      const mousePosition = trackMousePosition(ctx.canvas, event);
+      if (isMouseInside(mousePosition, rect)) {
+        //redrawButton(ctx);
+        if (props.onClick && typeof props.onClick === 'function') {
+          props.onClick(event);
+        }
+      }
+    };
     const COMPONENTS = {
       ...customDict,
       Image: Image(props),
diff --git a/packages/react-ape/renderer/reactApeRenderer.js b/packages/react-ape/renderer/reactApeRenderer.js
index e9a8433..88ed963 100644
--- a/packages/react-ape/renderer/reactApeRenderer.js
+++ b/packages/react-ape/renderer/reactApeRenderer.js
@@ -116,7 +116,7 @@ const ReactApeFiber = reconciler({
 
       if (diff) {
         const parentLayout = element.parentLayout || element.getParentLayout();
-        if (type === 'Text' ) {
+        if (type === 'Text') {
           parentLayout.resetLayout(); // View needs to be reset on text updates
         }
 
diff --git a/packages/react-ape/renderer/utils.js b/packages/react-ape/renderer/utils.js
index 241c437..231ea3c 100644
--- a/packages/react-ape/renderer/utils.js
+++ b/packages/react-ape/renderer/utils.js
@@ -6,21 +6,21 @@
 export function unsafeCreateUniqueId(): string {
   return (Math.random() * 10e18 + Date.now()).toString(36);
 }
-type MouseEventType={|
-   x:number,
-   y:number
-  |}
-export function trackMousePosition(canvas, event):MouseEventType {
+type MouseEventType = {|
+  x: number,
+  y: number,
+|};
+export function trackMousePosition(canvas, event): MouseEventType {
   return {
     x: event.clientX - canvas.offsetLeft,
     y: event.clientY - canvas.offsetTop,
   };
 }
-export const isMouseInside = (pos, rect):boolean => {
+export const isMouseInside = (pos, rect): boolean => {
   return (
     pos.x > rect.x &&
     pos.x < rect.x + rect.width &&
     pos.y < rect.y + rect.height &&
     pos.y > rect.y
   );
-};
\ No newline at end of file
+};

From 6b656c12650bdac16de0bf721e5834700c4fef07 Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Sun, 7 Aug 2022 23:08:05 -0700
Subject: [PATCH 17/22] update ReactComponent.js

---
 .../react-ape/renderer/reactApeComponent.js   | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/react-ape/renderer/reactApeComponent.js b/packages/react-ape/renderer/reactApeComponent.js
index 5ede772..6bd81df 100644
--- a/packages/react-ape/renderer/reactApeComponent.js
+++ b/packages/react-ape/renderer/reactApeComponent.js
@@ -34,7 +34,6 @@ const ReactApeComponent = {
     });
 
     const tag = '[CREATE_ELEMENT]';
-
     if (type === 'Button') {
       const {ctx} = apeContextGlobal;
       ctx.canvas.addEventListener(
@@ -49,21 +48,21 @@ const ReactApeComponent = {
      *  Handling click button event
      * @param {*} event 
      */
-    const onClick = (event: SyntheticMouseEvent<HTMLButtonElement>) => {
-      const rect = {
-        x,
-        y,
-        height,
-        width,
-      };
-      const mousePosition = trackMousePosition(ctx.canvas, event);
-      if (isMouseInside(mousePosition, rect)) {
-        //redrawButton(ctx);
-        if (props.onClick && typeof props.onClick === 'function') {
-          props.onClick(event);
-        }
-      }
-    };
+    // const onClick = (event: SyntheticMouseEvent<HTMLButtonElement>) => {
+    //   const rect = {
+    //     x,
+    //     y,
+    //     height,
+    //     width,
+    //   };
+    //   const mousePosition = trackMousePosition(ctx.canvas, event);
+    //   if (isMouseInside(mousePosition, rect)) {
+    //     //redrawButton(ctx);
+    //     if (props.onClick && typeof props.onClick === 'function') {
+    //       props.onClick(event);
+    //     }
+    //   }
+    // };
     const COMPONENTS = {
       ...customDict,
       Image: Image(props),

From 5d0ad3b0f35b4c40ae41c6902836df3352ff41b0 Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Sun, 7 Aug 2022 23:09:34 -0700
Subject: [PATCH 18/22] run prettier

---
 packages/app/src/Sidebar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/src/Sidebar.js b/packages/app/src/Sidebar.js
index 4aff134..00f5961 100644
--- a/packages/app/src/Sidebar.js
+++ b/packages/app/src/Sidebar.js
@@ -66,7 +66,7 @@ class Sidebar extends Component {
             alert('hi');
           }}
         />
-         
+
         <FocusableItem
           focusKey="sidebar-item-1"
           text="Rio de Janeiro"

From 8be0ae1ed93a0e92d5951a105644aed61d1d70f3 Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Mon, 8 Aug 2022 01:33:18 -0700
Subject: [PATCH 19/22] update button-test.js

---
 .../__snapshots__/render-updates.js.snap             | 12 ++++++------
 .../renderer/elements/__tests__/Button-test.js       |  1 +
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/react-ape/__tests__/render-tests/__snapshots__/render-updates.js.snap b/packages/react-ape/__tests__/render-tests/__snapshots__/render-updates.js.snap
index c919d7f..1d25718 100644
--- a/packages/react-ape/__tests__/render-tests/__snapshots__/render-updates.js.snap
+++ b/packages/react-ape/__tests__/render-tests/__snapshots__/render-updates.js.snap
@@ -2,18 +2,18 @@
 
 exports[`Render Updates Relative View Render relative view with props and children updates 1`] = `"data:image/png;base64,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"`;
 
-exports[`Render Updates Relative View Render relative view with props and children updates 2`] = `"data:image/png;base64,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"`;
+exports[`Render Updates Relative View Render relative view with props and children updates 2`] = `"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAABmJLR0QA/wD/AP+gvaeTAAAXeElEQVR4nO3de1xUdf7H8ddhRgSRO4OICoFYIErmvWwrCWx72M0uVq7mrXtbv3Iv5W7+ytI2S6Pbry017efmb8s7babWY9Nc3bS0MkVRRFFJ17gZKPfh8/vjyMAA4qgYHPs8Hw8fM/Od73zPd0bP2/P9njPzNUREUEo1yTAMo7X7oOp4tXYHlFLKUxpYSinL0MBSSlmGBpZSyjI0sJRSlqGBpZSyDA0spZRlaGAppSxDA0spZRkaWEopy9DAUkpZhgaWUsoyNLCUUpahgaWUsgwNLKWUZWhgKaUsQwNLKWUZGlhKKcvQwFJKWYYGllLKMjSwlFKWoYGllLIMDSyllGXYAZYvX45hGCQnJzN58mRycnLw9/cnJiaG0aNHk5iY2OSL165dy5IlS86q/vPPP09OTg5FRUVMnDixRdp/7rnnWLduHb6+vh7VV0pZjIhI//79ZdCgQZKRkSEdO3aU3r17S0xMjHh5eYlhGHLfffeJ0+mU+h599FEBzrr+xo0b5ZZbbpHExEQpKCiQhs62fS8vL4/qK+WJ1t07VSMidYGVm5srJSUlrr+s/Px8eeyxx6RPnz6yYMECV3l6eroAMnr0aLf6BQUFcvPNNwsg8+bNa1R/3Lhxcvz4cVd5bWAdOHBAioqK3Nppqv3CwkIZM2bMKduPioqShIQEV3leXp4MHz68UX2lPNWKu6ZqgtscVkREBB07dnQ9DgwM5OGHH2bJkiWMHDnSVb5ixQoMw+Ctt95y1T9y5AgiwvLly1m4cCFfffWVq/6GDRtYsmQJ8+fPx+l0NtmRjIwM1/3vv/+etLQ00tLS3PoTHBzMggULyMzM5MCBAwAUFxezfv16PvjgA/r27YuXV91bCgsLIz09nT//+c+kp6ef1QeklGo73AKrpqbGdf+VV14hPDyc+Ph44uLiiImJYf78+QAYhkFsbCze3t5MmTKF0NBQIiMjCQsLIzIykuzsbNLS0lxtTZ48mczMTMLCwggMDCQoKIhZs2a5ng8NDaVv374ArFq1igceeIAnnngCh8NBQkICixYtcuv0xRdfjN1ud7U3Z84ccnNzm3yDNpuNP/zhD0yYMOEcPyqlVKsTqRsSZmVlyb59++TFF18UQCZOnChffPGFfPrpp66h3jvvvCOZmZny9ttvy4wZMwSQxx9/XNatWyefffaZjBw5UgD54IMPXIfVL730kgCSnJws8+bNk5kzZ0pYWJh07NhREhMTXfU++eQTsdls0r9/f3nzzTdl6dKlcv311wvgNiT1tD2lzlUr7pqqKSJ1gVVcXCwFBQXSoUMHufbaa6WgoED++c9/SmlpqVRXV8ull14qDodDqqqq5OjRo3LTTTfJNddcIz/88IM8+uijsmzZMikrKxMvLy+ZNGmSiIiUlJRIaGioDBkyRPLy8uTxxx+XuXPnytatW8UwDElMTBSn0ynV1dUSGxsrCQkJUlZW5prTqqqqkqSkJHE4HDJ37lw5duyYq73q6mrXP6za9kJCQmThwoVu/+h0wl2drdbeP5U7tyGhv78/a9eupbS0lAkTJjB9+nSuvfZaoqOjOXr0KLfffjt5eXns2LGD8PBw0tPTWbt2LZ07dyYtLY3+/fuzePFiampqqKysBMxLEwoKCnjkkUdo3749SUlJ/Otf/8LhcDBgwAAADh8+zNdff82+ffsYPXo0Pj4+BAUFAWC32xk+fDh5eXnce++9LFy40NWezWZz9b1v37707dsXX19fPvvsM/Ly8lzP7d27l40bN573D1MpdX7ZGxbk5OQAEB8fT3JyMna7nZdffpl58+bRuXNnAFcYFBUVMX36dFatWkVWVhZVVVVERka6tZednQ1A9+7d8ff3Z/z48YwfPx6A6Ohodu7cSU1NDdu3bwfghRdeYObMmW5tVFRUALBmzRo2b97saq+h2NhYysvLXXNttZxOJ2PGjCE7OxvDMM7g41FKtSX2hmftandop9NJREQEM2bMYPfu3dTU1FBUVARAx44dqa6uZtiwYWzfvp0HHniAadOmkZCQQFxcHO3atXO1V1ZWBkBVVVWjjZeWlgLg6+vrmvB/6KGH6NOnD4GBgfj4+LjVHzBgAFu3bj1tew35+/uzf/9+Dh48SHR09Ok/FaVUm+RV/zIAqDty2bZtm6vM4XAwbNgwNm3ahN1uJzExkR07drBlyxaefPJJXnvtNUaMGEF8fDyFhYVu7fXo0QOAb7/91q3c6XS6jqpsNhsxMTG1HSIpKYlBgwaRkpJCSkoKIsI333yDn5+fR+01ZLPZCAgIIDg4+Iw+HKVU2+JVf4hUXl5OSkoKISEhpKWlUVpaSkFBAbfddhshISGsXLmSESNG4O3t7Toiqq6udr3e6XTyzDPPAFA7X3ndddcRFBTEG2+8wU8//eSqO3v2bA4ePAiYR0ZJSUn07NmT+fPnU15e7hoG5ubmMmrUKNasWYPdbueqq65ytVdSUtJkew0VFxczdepUAgICWuIzU0q1EkNEZMCAAdhsNubNm8euXbsQEe666y6ioqJITU1FRFi6dCk+Pj78+9//JiQkBKfTSWpqKt999x0jR44kODiYTz/9lE6dOvGf//yHyspKpk6dyrhx41i8eDF33303kZGRJCcnk5+fz7p16+jTpw/Hjh1j9erVhIeHs23bNlJTU2nfvj3XXHMN3t7erFy5EhFh6NChHD58mDlz5pCZmdlsezt27HB7k7t378bf37/R/JpSp2PopGebYgcYO3YshmHgcDiYMmUKf/rTn1i/fj2vv/46mzdvpkOHDtx7771MmjSJTp06AVBZWcnq1auZPn06mzdvprCwkEmTJjFx4kTWr1/PnDlzXEdhd9xxBw6Hg1dffZXt27eTkJDAxo0b2b9/P/v37ycyMhIvLy/XHNXLL7/M1q1b8fHxYdy4caSmpjJ58mSio6OJiIigd+/ezbbXUFxcnNsZRaWUNRl6rYlSp6ZHWG2L/h6WUsoyNLCUUpahgaWUsgwNLKWUZWhgKaUsQwNLKWUZGlhKKcvQwFJKWYYGllLKMrzAXJdwxYoVP/vGly1bxrvvvut6vGjRIj766KOfvR9KKWtw+/Lzpk2bftaNjxgxgqysLNeXlXv27ElISAgbNmz4Wfuh1KnoV3Palka/ONqann322UY/2qeUUrWaDazq6mqys7Ox2+3ExMTQ8Mf+6jty5Aje3t6EhoY2u8Hi4uJT/i5V/bUPG3I6nRw9epTAwED8/PxOWa+kpAR/f/9m+6CUsqZTJlDDdQm7du3a6LfSq6qqGq1L2LlzZ55//nm3NQ5FhOnTp59yXcJaw4YNcwutwYMHM2HCBBYsWEC3bt3o0qULAQEB3HrrrZw4ccLttbNmzSI8PJyAgAAiIiJ4++23efLJJxk7duxZfzhKqTZGpG6Zr1qnW5ewVkuvS5iQkCBDhgxxe+xwOMThcMiMGTNk4cKFcuONNwogzzzzjKve9OnTBZDbbrtN3n//fZk2bZoEBQVJcHCwDBw4sMWWfFK/PK24a6qmiLgHVmFhoWtdwvoarksoIq51Cetrbl3CptYRPF1gGYYhX375paussrJSQkNDXdstKCgQX19fueGGG9z6sWHDBgE0sNQ5ae39U7lrNCT8/PPPXesS1mez2dzWJQRc6xKCOcd06NChZtclbLiOYO26hM1JSEhg8ODBrsft2rWje/fuFBQUALBu3TrKysq455573F43ZMgQEhMTPfoQlFLW0Ciw6q9L2FBT6xL+/ve/JzExEV9fX6KionjqqafcXlN/XcKGPFlyKywsrFGZ3W53zZEdOnQIMNckPJv2lVLW0Siw6q9L2FBT6xK++eabpKSk8OGHH7Jr1y4OHDjg9hpP1iVsjt3e/JUXzfW3vLz8tO0rpayjUWA1tS5hrfO1LuG5uOiiiwDYuXOnW3l5eTlbtmw55/aVUm1Ho8BquC5hrT179rjWJQwICDirdQk9XUfwTAwdOpTAwEBmzpzpmtcSEf74xz9SXFzsVnfbtm3Mnj2bPXv2nHGZUqoNEGl8WcPixYvFZrNJTEyM3H///XLfffdJSEiIREZGSk5OjoiIVFVVSf/+/cVut8uoUaPkkUcekR49esiVV14pcXFxEhUVJfPnzxcRkUWLFonNZpNu3brJ2LFjZfjw4eLn5ydDhgw57VnC5OTkRmdurrjiCrfXrVixQgICAiQsLEyGDRsm3bt3l65du0pCQoLb+6q9DKO2X2dSpn6ZWnn3VA3Ynn322WcrKyu59NJLGThwIGB+py8lJYXc3Fy2bdtGUVERI0aM4L333qNLly6AuaT87bffTkVFBRkZGZSWljJ+/Hhef/11evfuzY8//khsbCyXXXYZiYmJXHXVVRw4cICsrCy6devGu+++S8+ePYmJieHyyy8HoKKiwu3sYUVFBf369aNfv35una6srCQpKcn1uvj4eEaPHk1wcDCGYZCamspf//pXli1bRmBgIGPGjAHMo8FOnToxdOhQ16KqnpapX6apU6dObe0+qDqWX5fwxIkTfPLJJ/Tq1YuEhARXudPpJDQ0lFGjRvHWW2+1Yg+VlemXn9sWy/8elo+PDw8++CBjx451zWFVVVXx9NNPU1xczJ133tnKPVRKtZQ29WsNZ8Nms/HGG29w//3306VLF7p27Up+fj4lJSVMmzaNq6++urW7qJRqIZYfEtYqKipi9erV/PDDD4SFhZGcnExUVFRrd0tZnA4J25YLJrCUOh80sNoWy89hKaV+OTSwlFKWoYGllLIMDSyllGVoYCmlLEMDSyllGRpYSinL0MBSSlmGBpZSyjI0sJRSlqGBpZSyDA0spZRlaGAppSxDA0spZRkaWEopy9DAUkpZhgaWUsoyNLCUUpahgaWUsgwNLKWUZWhgKaUsQwNLKWUZGlhKKcuw/MrPSp1PIhIP/AbzP/ePgQogFagBPjEMI6MVu/eLowupXigq8qGmEnzCwWjm/yFP67X0dlvCoeVgGND1lvO7HXcfc2jZDVQWQfeJu0+WXXLy9kvDMK440wZlIbcCwcZveLfFevkLoUPCtq4iDz7whn3/2/Tz2XMh/SJY6oDlXWBJKHzzOzNEzqZeS2/X0/Y8kfECZLx49q8/O77s/xtkppn3wa/ec35Nv+S0xgBPnGvHfol0SNiW1VTAd09BTVXTz+cshM33QehASPwzGF5w4O+Q+Yp5/7KXz6xeS2/X0/aspeQU9wEQER+gG3DcMIwjTbZg2LzAyy5SaTcMo/r8dPPCpIHVFh37HrY+AYVboeqnU9fbOQP8oiBlHdh8zbLYcbBmIOx+DXo9De0CPa/X0tv1tL1zJdVQkg1edvCLMUPzVMqOgJc3tA9tvs2qYmgXADC4wTM7gITa+3L8wALsHW6kfZgA3wMDMY/EEJHdwKOGYXwm7xPAbyQQeJn1t9xAyV4v4ISIfA7EYY523jUM44Uze/O/LDokbIsMO/jHQfSd0HlY03WcZXBsO3S5sS40AAwbRKSYRzPFmZ7Xa+ntetreucp8BZaGw8fx8FEcrOgK++a716mpgu+nmMPW5ZGwNAyWdYYdz4PU1KsokDHdfH5xICwOgl2zGg77Lgfg8Cr4R4+xpEePYakjiI8Tgjm46GpOhtXJ9i5hx7RV8n+2Igx+YlFADrtm3VkvUb2BX2MGVizm5L5qhh5htUWBPWHgO+b9Q8vhyKeN60iNWSekf+PniveYtx26eV6vpbfraXvnYucMc6jZfSLE3GMOPff8D2yaYIZU3P1mvcw02DEN4h83J+xrqmDvHPj+v8H/YjNQAXbNhG1PQ6dkiBkNFYWw80VwloNfdN12D6+CL26EoN41XD6/EHtACNlzYcOdcHkFxIypa+/7KTYCe5cSOyYXvHo12V4do2U/oAuPBpZV2f3qdkgXgT1vQm66uWP6RprFntZr6e2eT5VFsOM5iLgWBs2tK++UDKv7mcHTfYJ5lJe/ETpdA33T6uo5roRDS6DgKzOwqo+bAegYAsmfmkeMAJ2Gwup64SxO2PJbM+iu+zIbL59gIISuN8GqfvDN704QM+Z3VB9/lZ0zfHAMgZQv2mPYerm1V370CLAWGHWeP6kLig4JLxQnDsAXN8GWxyD8Shg059zqtfR2W9rRz6G6FGInuJcbNuh2u3lW8tgOs+yqdLh2rXlfnFB6CA4uNo8Wa89qHl0LFQVw8SN1YQUQ0ncfoQPqHhd87c3xfeYRmJdP3SVBhh263lBCRZ4f7xsfcXhlXr32Quu1B74ROVTkFwL3AE1PzKsm6RGW1Uk1ZPzF/GPzgf5vQI+H3He6M6nX0ts9X47nmLcB8Y2f8+1s3lbkmbeVRebc1OFVUJJlDgkbHgWWZJu3Hbs3bG03ftGx/LTz5Hb3mm8w4wXYOSMRDMM1JeUsM+e7hFCKs+ynaA8MWw7gMAzDKSJZQGcP3rFCA8vaqo/D2ushbyPE3QuX/qXps1+e1mvp7Z5PxsnpHnE2fq6yyLy1dzSD9fNh5omCHg9A0jQITDBPBvy9Xd1rnGXmbeNLL/yoLq2/YfOmx0Pg+NUBvOz+eHk7AKg+nsX6Eb/Fh0M4S41TtAc1NfUm5unoydtVJg0sK9vyGBRshquWNX/1t6f1Wnq751PtkcuxbbgN2QDyN5lDtMBEc1hYuAV6/TckTa2rU/6j+2v8e5i3Rd+a81i1xHkZP20Hu//JepeY100ZXtD1puOYZ/pMuctB6IuDdfhfUnmK9qCmNB7IFZGLgaT63RCRAGAc5tnGEmDeyW2ctswwjPJmPrELggaWVVXkQ877cMljzYeGp/VaervnqnALFH5jTpb7X9z4+YgU8A4xzwBGjwJ7B7O8ZA8cXgndRpjXUdVetiD1rs8UJ2x/pvaBedP5OvAOgt1vQMxYaHcyoPbO9ufEQTP8AEL7VRHYE7LnQ4+H27nO9pXmwqYJ3TG4zhjKS1Jxc0m99spo598e8GLvbKg8FkjH2HbAVzTeBx8G/lLvcTkQ7mHZvGY+0QuCBpZV5X9pDjd2zTL/NOXXX5sXSnpSr6nLFM5lu562dyq5/zDPAg6e33Rg2f3MSyY23gWf9IKIVEDg4FIzyGqvtg9OMvuy8yU4kQPeweblFT6dzGHhD/8wn48dBwNnw8a7YWUiRCRDeT78uM48Qqo8dnLDBgx+Dz5PhdV9e9B5WCXYzZA0w+9BALyDalztfRzvTVCv/Rjtutdrr0MT71qAhuV+Z1B2wdPAausCLoaeT0JQb/dyn3CzvDk+EebRhCf1Wnq7nrZ3KuFXQugg86r0WrFjcbtUKep26LAedr9uDlFtHcw5tfhJZiCBOTRMXmNeh5W/GdoVms/H3QtHv4DsOXVHYVF3QHsH7H7VnPMKSIDUjXBiPxzfD+YvNXgROgCu3wrbphRxLCOAdgFm4PV45FsjIC7rZO8qXO3tfLGcwq8NIlIrSd3oXa+9ho4BDb+MWXEGZRc8/bUG1XatGw5Jz5uXArSe/wI6ATZgDWZi1l62n445h1T7eKlhGF8DiMjlwM0ny/cDb9dr8zvMr/F4A3fVK/8QePTkH2+gFEgDfDwpMwyj0XcbLzQaWKpt2vsO/LgBrvhbq3bDMIxzvvpcRDoABZghA+Zvaf0IhAL1TlUyzjCMc/g5iwufBpZqm5xl7t9VbCUtEVgAIvIBcGczVTKAAYZhlLXE9i5UeqW7apvaQFi1sAeBFbhOS7rZBAzXsDo9PcJSqhktdYRVS0QSgF8BkUARZlh9ZRiG7oce0MBSqhktHVjq3OiQUCllGRpYSinL0MBSSlmGBpZSyjI0sJRSlqGBpZSyDA0spZRlaGAppSxDA0spZRkaWEopy9DAUkpZhgaWUsoyNLCUUpahgaWUsgwNLKWUZWhgKaUsQwNLKWUZGlhKKcvQwFJKWYYGllLKMjSwlFKWoYGllLIMDSyllGVoYCmlLEMDSyllGRpYSinL0MBSSlmGBpZSyjI0sJRSlqGBpZSyDA0spZRlaGAppSxDA0spZRkaWEopy9DAUkpZhgaWUsoyNLCUUpahgaWUsgwNLKWUZfw/ypckz4cCRsEAAAAASUVORK5CYII="`;
 
-exports[`Render Updates Text Test "Text" multiples content change 1`] = `"data:image/png;base64,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"`;
+exports[`Render Updates Text Test "Text" multiples content change 1`] = `"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAABmJLR0QA/wD/AP+gvaeTAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII="`;
 
-exports[`Render Updates Text Test "Text" multiples content change 2`] = `"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAABmJLR0QA/wD/AP+gvaeTAAAV9klEQVR4nO3deXxU1d0G8OdMNkgCIVGDgiRRTCQsCa0gFK0oCr7IoqJIy1LAHelbARHLUqigbSh1fRVb1MQiIkhTwa2CStWqgELZBBGRJZIASUgChIQkM/O8f5w7k8kQwkSo0Pd9vp/PfJJ77ll+587cM/eeuTMXEBERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERERGRIOZUKyD5YwC9AXgBvGOM2XLKUf2bkewKoBcAN4Alxpi8MxzSafef+LyInBICgwjc0WAechtrrSP5NMk/k/zvHyrOxsrOzi764IMPfDEvPNPxnA4EbiMw0L9c93n57EzGJvKDIPA6gS8bzEN+F7BjFLKu1j9UrI2RlJTkGTZsmC/GZWc6ntOBwFYCn/iX6z4vG89kbCKnS3jgAsnzAFwCe6q4Bsb40qMAJAOoAlAI4DwALgB7ARwJqMIdVH8kySYA2gAod8q29pU1xgTnP45T/kIABcaYCictwqmzGkC+MYYB+cOcNpoACANQAWCfMab6ZG3V07avrggAhD29Oi5uZ7tdCGA/gENOmZ3GGE+I7TSqjwHlap+X2NhHcPRoecDqIyf4v068xph9ocQoclYg+QTJcpKeiooK7tq4kYcPHybJQ2zXbgOTkw+RrAl4t/aSJIuLyaKiEpJfB6xzBx5eud3umr1791aXl5fXt/4gyT+SbBYUzzySJSRLPB5P0f79++l2u33tLiA5o6CgoLSsrIxOHB7m579LMprk75yyLCgoYHFxsa+tSpKLaE+TSlJSUhhwhFXtlDnM4uJqFhWVkSwl+THJYttEcW1dR4+WctWq5zllygUkB5Ms81VUU1PDwkL/QeaSerc34OI337xMt7vEafcTktXcv58sK/P4+uhsH5+dJAcQuIDAOSTbk1wS9LxUOmUvcbbjayTJigryiy8WEmjmxLuDdW0h2e+HeK2JnDKSBXt27+Zf0tJYDJAAywDmdOzIqhtuIDt0IElmZmZy4MCB5Dvv2DQn786oKD7Zo4f/1X9j584sj4xkVUwMy1wulgAsAXgkIoLeFi3IbduC9hd+STIesKegZeHhHNWvHxctWsTExEQC4CVxcaxq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"`;
+exports[`Render Updates Text Test "Text" multiples content change 2`] = `"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAABmJLR0QA/wD/AP+gvaeTAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII="`;
 
-exports[`Render Updates Text Test "Text" multiples content change 3`] = `"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAABmJLR0QA/wD/AP+gvaeTAAAT30lEQVR4nO3deZhU1Z3G8e/tBZBVdgQRRBBQFlFcIkYiCAY1BFFQWUwwD4nGNWQEDRnHJSQQoybGcYkokcENJSYaHYHouCVxIUFwAIMbS4PsDSNbdXf1O3+cW9XVRS/VggOZ5/08Tz1Q557ld6ruPX3uqVt1wczMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMskTVbZDUAxgL5AF/jKLor9XkOxEYApQDL0ZRtOzLCPRAkXQycBlwNLAYeCiKojUHN6r9U9V78M/2vpjtF0nPq8IHNeT7ICPf3yTdI+lBSddkZb0UGPTlRl07SatV2eMHO6b9lfUe/KW6tHR+GC0YfnCiNdtPgnME0wWN0mnSnzJ2+NXVlpXWZuTblDUYdMjI+ikw58vsRy4kbcmK8Q8HO6b9lfUeLKkuLZ0flgvePDjRmn1xBfG/ZwJTmDfvRY0c2Q9YQ+XTxUjSsUAC2AS0A44ANgI7M/KVZdXfRFIvoGlBQUG+pCiZTB5FOM0siqIoO38lkhoAx8T5P46iaLekQsLpXCtgPaA41qIoisok5cfbuwBJYDWwJoqiklraygc6ZMYWpx0FHBm3sQ7YHfd/QxRFn8VlW8d5dgCNgRLgwyiKktX06UhgfRRFu+O0JkB/oAj4KIoixf3sGNe1DqgHdCK8B59FUVQiqX6ctjejic+z/gUol3REKl66dr2Lnj0b67nnKtLM/hlIuls33lgmkDZvVjKZ1IYNG1RWVlbx97m0VJuWLdP27dsrz022bAmP2Pr168u3bMmewASdO3fW2LFjM5O2SvpFfLCitWt/py1bEhVVbymtoq4ySaWZCaWlpdq0aZMkbZO0RFIiu1CsRFu2lGnfOkuqKFMuqUjS7mrqCv3evHlnnLcqTwsO07vvPqEdO4rj+N6M20tJaN9T1M8lPS5pq5JJacMGqaxsp0Lfg88+S2jbtrWV0io8AaBVqxZV0de1ktZnpS2TdB6A4DBBF0GTg7lPmlVLZ55ZmsjLk0AljRrp3oYNBej1ggKtOf10rbzjDm3Pz9dfQVEUadiwYdr1zDPS8cdLIIE2tWypyxs3FmG2o/6tW2vPYYdJzZunH9vz8rSzXr3w/IMPlEgkdOGFF+riJk3KduTlrUnVtbNjR0068sh0XT169NBTTz1V6Qg766yz9E6HDko0aaJjmzfXaaedVrFx0yapZUvpiisq0l58sVK86tFDyqxz1apKse7z+OCD3OuSpNWrpUGDdqfz5OdLI0ZIW7dWMb5kOfVUaeRI6cknpTZtQvnDDw9tvP12RdtRJA0bJu3YUVG2pESaOjWp+vV3pttu10667TYpmazIN2SINGpUZrxlat/+3XQZKBM8K2hxUHdOs2z63e/0euPGEujWZs0097rrNHPmTC2pV08fR5H2ghYfdZQWjRuniRMnahgoGUXSaadJjz+uZ8eP14vxjr7iRz/SwoULdfmIEZoOWj58uDRlijRliubGbahlSyXWrdP555+v4YWFKs/Lk7p23aCpU5/529Sp+s8okkB/ufJKzZs3T8OGDROg2bNnp4+v/v37a0p8MN/bt6/uvvvuioPvvvtCOwsWVAww+fnpeDVvXjjQQUrVuXVrOs70Y8KEdLzavDn3uiTplFOko48uF1ygV17ZqDvvlBo3li68sPYBq2dPqVUrqUMH6Ze/lGbOlI46SmrYUGrRQrr8cmnOHGnixNDuTTdVlJ0xI6Rdc02JXn1VWrhQGj06pD35ZOU2BgyoHG/HjgnBBYIBgkmCzwXPHOz906wSSXqwVSsJtOTllyVpr6SyTZ06SaD7zzgjvV+Xl5ZqdUGBVjVsKO3dK0kaPny4Bg8cKPXpI3XqJEnas2eP8vLyNGnSpFAwkdC7DRqoLC9PiZde0tChQ0sbNWigXe3ahYNn795kaWnp0i5duqhXjx4q7907XVdpaan69OmjTvHz1IDVBFRar540dGjlA37gQKljRymZTKisLKkuXVJtVOQpLa0Ub5akEgnpjDOkwkLplVdCalmZcqpr48YwQPz4x5J0q8KpoHTHHdLpp0vl5c9J2pXVZrGkd9KDSV6etGhRxeliahC++OKdSp3SlZeHQe2EE4ol7YjfDOlrX6tc8549ob7Ue5Fqo3PnVZJeTsc7dWq5wvpa2C/gXwR/Vg2Xvpj9n5MqBqz0TELStmOO0RrQnDlzKnb0RYsk0K/att33ML/1Vgm0btEizZ49W4CuuuqqsL5z+eUS6MF+/TR06FABeuG220Kb06bFVS8SoGnTpqXr0vr10saNenr0aI0CbXvwQWnuXA3s108dO3aUxo4Ng0rqVKuoKBycU6dWijfVRlXxan32kk5FvLr//n36Xmtde/eG2VSLFmGg2bBh3/wbNyY1d67Sj0mTfqOPP74yPZh07SqFTzMflCQ980yoP/O9kMJA2bv3vvWXl5errExasybM/EC6+uqK7RUzrNJ0vI0bJ5SX931B24O8S5pVT6p+wHoL9MILL1Ts6HPnSqDdeXnp9Z3yww/X7gYNtCdeB+sFat++vQBdffXV0l13SaDZTZooiiI1bNhQ+fn5mn7SSaHNRo2k5s2VaNRI20DFUaTd8Wnh6U2baniTJhXrRfFjVK9eOvXUU6X580PaI4+E+O6+O6ztrFxZKd5UG5UeDRuGbe+/X/lgj+PV979fOb0udS1YENa2UjH36hVO3YqKwvZXXtmnT3rqqZvSg8mZZ0rhEpFLVV4eTj1Bynwvqhqwtm2TfvhDqVu3hAoLQ5n27WsasCribdVqY0Y87wt+qvCpqdkho6D2LBmicHbwVIsWfPuJJ0gmk1x77bV8+umnnP/Nb9K3b1/mnXsuXfr1o7CwkOPWrIH774fBg7n1o49oXljI888/z9y5c1n0q1+FOq+8Es45h7def53bb7+dURddRP/+/QGY1r07kcTfV64EoHv37jRq1IgNU6aEsoMHQ4cOMG8eTJgATz4JAwZAt26V4k21EUtdBhF07FjRv5deghtuCPWm4svqe1ZdlaXqGjIEVqyAd96B+fPh+edh+nR47DFYskSccEI5Cxfmp8u99to0BgzYmn5eUABwGPBAut3alJXB0KHw/vswZswOZsxoRc+eEV27QmFhzWWHDIHNm1szcuQInn22D/AN4EZgrKBvBNtzC8LsS5Y1w0pIWiqprMoZ1nvvSaBHWreWJC1evFiAbr755vBXesYMqbRUGzduVA/Q7vr1w+nN1q2VLmvYvn37rrNbtUoKtPuaayRJb7zxxtuAJk+eXKmuMAFYoBkzZqg0ft6/f/8ww5KkyZOlevWkxYvD7GrmzFS0O1PxavJk7SOrDa1YET6Ni+PdR251lWnpUmn69DDbkZ5U6kLVBx4I5ceNm6RwSUemiyV9Kz37GTSo8taaZlhdu+6SVKzFi0Oem2+unCe1RpU9w+rTp1jS6qx4R6X3C/hePNsadvD2TrPK8iB82QyAkpJ6hIsVq/6z3qcPnzRowIjiYli/nvLyULJRcTGMGQPz55OMImbceCPPQdjdn3sOWlT+dLxZs2b537vvvmg5UPbQQ7BmzSdf/epXTzv22GNL5z/8MOWXXBJmJgUFFBUVMWbMGObPn09BQRUTwssug5KSMMNq2BBGj05taUSfPnDccTBrFqxfX1GmqCgdLwUFUFwMw4dXG2+q7znUVcKuXXDjjfD00wAPAHvCK50X8s+Z81qVr+0XVb9+A6AZ8XtBWca1uMkk/Nu/hf9Llcslk0lgXVa8mzNypHaLTQc0XrP9IUmTU+sc3btLv/61pGrWsCRd2rWrPs/Pl9q0Uflll+nFli21DfR5/fq6ZexYdevWTY927Biu64oiJeI1n0rXYf3+95Kk6wcM0HZQol69XYLfbh48eE9xFGlbXp4mX3CBxo0bp+bNm6tly5ZamVqXUtYMS5JS62Hjx+87+3nnHalZs3BN07e+JY0bF2Jo2bJirWvq1FA+FV/2I443p7rKy6Wzzw6L//XqPasbbtih8eOl+vWlgQOLFb41kMsM63NJ22udYaXWsEpLpf79pYICacwY6aqrpG7dwqedXbuGSyNmzaqYYaXWsLLjhdsEswV7BX/0p4R2KMm/5ZZbrlpWXt4oatqUI485Bk46CY47ju0bN/KPBg04duxYWrVqlS6wtrycj088kX6dOhEtXcrRrVuzqE0bprRrx6egCRMmRN++5BLWSryZTFLWty9tzz2X9/LzSfTqReuvfx0GDoS2bekxaBAzVqxY2nLlylVHQvuGrVu32Tt0aMHPjz+elz/5hJ07d3Leeefx6KOPcvTRR6djKCkpoW/fvpxyyikhoXPnsJb13e9Cu3aVe9ihA4waBdu2wZIlsHMnnHcePPoopOrcuzesP33lK6H/2Y843pzqiiIYMWIvCxbMpaioGVu3dqWwMJ9x4+Cee/4e/exnD99yyy2TCF/hSXmMMDBcRCKRancz8ANgJMkkNG0KgwZBxntBIgH9+sFpp4UZ3EUXhbRly2D37jDrvOce6N0bNm2CLl1C/kQCTjwRTj5533jhFMLsag7wgwhK93svMztAIklnADcBXwMaEA6cJLAFWAa0j9M3EQ6yTkDDjHw74m1vEb7gPJ7wPcMk8BnwalzuTKANFd/JewuYFUXRn1LBSBoETAS6AoXAEmAlUB8YTPjUag3wEuEDg4lAS8L36/4GfAxcEKel4lsNbAOOJSxkl8TpUbztHaA5cAZwOOH7kFsJXw7uAvQlfI+PuNxuwnf3PiIczMfE5fKAT4A/A/emfs4l7tPQuPy8KIrelTSMsKhdL477h3H5e4BecX+mRVG0UNIVwLWE705uAp6PY74V6BznXRT3pWf8un0aP74Rvxb58WuzIe73EfH7WgS8nxmvmZmZmZmZmZmZmZmZmZmZmZmZmZmZmdmXR77/oFnNVMU9Du3gkO8/aFYzwbT4d5Ra1Z7bvkyeYdn/a8rxvnSClgpfqq1qW40DVk1lD5QD2UYudeX6utVQPk/QVuFLypnpbQXNail7RF37ur/xmh1UgqMEL2b8pneV96UTDBP8d0a+FYLRGdtfEeyJtxULfp5r2Rpie1awRdA6K711nH5/HeLrJNhWw6N7XeLN9XWrpl9vCeYJLhakfk+9OJ4VnZLRdnncRtOMsoWC2wVbM9r+TPCvin+UMc63QDD3QMRrdsgQvC34WDXcly4+gMsEfxVcKhiZsfOPj/NckJE2STAg17I1xDYhzjcxK/3KOH1IHeJrobC+lvl4JM6zRfGsMNd4c3ndaujXcsFmQZHgOsF3BKsFu+KB6GGF31T/TdzuTzPKTo7T7hYMFJwteCpOuzirjTcznn/heM0OCYI28Y5+e1Z6+r50gvx4R1+u8NtUqTwFgiWCVRlplU4J61K2mviaxAfx/Kz0VwVrFE6nvlAbgnqCNwQlgrPqEm8ur1st/VouSApOzEhLDcKPZqRF8aD2ekbaHwT/lVVfg7i+O7PaePNAxGt2SBDUj//Kbo0PmH3uSyc4Kd7Zf1TFtpvjbUfEz7MHrJzKxgfUqKxH0zjfnHhQaRE/7xAfnD+pa3xZ2x6Ot11R177m+LrV1Kflgg+z8l8Y1z82K32JYGl2/fG2fEFHwfi47K8ztmUOWLXGa/ZPQTBEYY2myvvSxQeaBDu177rPrnhbrzhv9oCVU1nBWRntpx494zqGxs8nxM+vV1jb6VbX+DL6/IM4/d+z0uvS19pet5r6tFzwWlbbI+M852alVxqwBM0FvxAsUxjIJVhX04CVS7xmh7oCgAgWAj0Vfs/7HLLuSwcozn8/WadmGdZWk55r2XXE61EZ1sT/vhxvvxCYBVwC/DmqmKHUKT7B14E74nqv+4Lx5vK6vVdDnyD8HHOdKLxnC4DewIPAj4EVVPxkc7Vqi9f3H7RDnqC3YIrC75pnpqfvSyfoG/9/RhXlhygsAhfEz7NnWDmXrSXOGYKE4IR4dvWdjG11ia+HwqdxH6qKT8dyrSuX162W/ixXGDAz02qdYcX9l8JvumfmSa1RVXdKuF/xmh0K8ghXpE8HRmVty7wv3VJgOeETu/apDIIjgceBc6KK2UKqXOrGDXUpW5PZcZ2zCDeCmJuxLac24oP1OcIC8/Ao3JwiW67x5vK6fRlSly2kB3mF67dSA1h1i+cHK16zA0fhU6iFCovYT6ua+9IJThZsV7hm6LeC/1BY19mieC0pzjcu/ov9geDqupTNIdZFcd2zq9hWaxuCn8TlE6r6Oqxv1qGunF63GvryRWdYBYJ3BaWCxwT3ClYqfNr5ocKlEd/OaCM1w9qveM0OBanBqCkwGTiZMKtYR9jR74xSdy4O+Y4BbgBOItzq6l3grijcLiqVpxC4HjgO+GME83ItWxuF22UNAp6Iwi3AsrfX2EY8EJxZQxOPReG2V7n2NafXrZq+TAI+j+ChjLRewDhgVgT/yEi/HiCCX8bPWxDWrk4F/gf4AzATGEi4Xm1BFK4vmwTsieKLa/cnXjMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzOzXP0vEfjVz663gNcAAAAASUVORK5CYII="`;
+exports[`Render Updates Text Test "Text" multiples content change 3`] = `"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAABmJLR0QA/wD/AP+gvaeTAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII="`;
 
 exports[`Render Updates Text Test "Text" simple text change 1`] = `"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAABmJLR0QA/wD/AP+gvaeTAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII="`;
 
 exports[`Render Updates Text Test "Text" simple text change 2`] = `"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAABmJLR0QA/wD/AP+gvaeTAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII="`;
 
-exports[`Render Updates Text Test "Text" style props change 1`] = `"data:image/png;base64,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"`;
+exports[`Render Updates Text Test "Text" style props change 1`] = `"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAABmJLR0QA/wD/AP+gvaeTAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII="`;
 
-exports[`Render Updates Text Test "Text" style props change 2`] = `"data:image/png;base64,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"`;
+exports[`Render Updates Text Test "Text" style props change 2`] = `"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAABmJLR0QA/wD/AP+gvaeTAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII="`;
diff --git a/packages/react-ape/renderer/elements/__tests__/Button-test.js b/packages/react-ape/renderer/elements/__tests__/Button-test.js
index 41d856e..484936f 100644
--- a/packages/react-ape/renderer/elements/__tests__/Button-test.js
+++ b/packages/react-ape/renderer/elements/__tests__/Button-test.js
@@ -25,6 +25,7 @@ describe('Button', () => {
           lineTo: jest.fn(),
           quadraticCurveTo: jest.fn(),
           font: 'Helvetica',
+          measureText: jest.fn(),
           canvas: {
             addEventListener: jest.fn(),
           },

From 7b161c60922e69fb5fd01c9424039d7b347216b8 Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Mon, 8 Aug 2022 02:01:07 -0700
Subject: [PATCH 20/22] update Button-test.js

---
 packages/react-ape/renderer/elements/Button.js     |  2 +-
 .../renderer/elements/__tests__/Button-test.js     | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/react-ape/renderer/elements/Button.js b/packages/react-ape/renderer/elements/Button.js
index a4cd6ed..6fb88d0 100644
--- a/packages/react-ape/renderer/elements/Button.js
+++ b/packages/react-ape/renderer/elements/Button.js
@@ -148,7 +148,7 @@ function renderButton(
 
   //set the fontSize
   const fontArgs = ctx.font.split(' ');
-  const newSize = ` ${ButtonDefaults.textStyle.fontSize}px`;
+  const newSize = `${ButtonDefaults.textStyle.fontSize}px`;
   ctx.font = newSize + ' ' + fontArgs[fontArgs.length - 1];
 
   // ctx.textAlign = 'center';
diff --git a/packages/react-ape/renderer/elements/__tests__/Button-test.js b/packages/react-ape/renderer/elements/__tests__/Button-test.js
index 484936f..b272171 100644
--- a/packages/react-ape/renderer/elements/__tests__/Button-test.js
+++ b/packages/react-ape/renderer/elements/__tests__/Button-test.js
@@ -9,7 +9,7 @@ describe('Button', () => {
       const title = 'Press Me';
       const color = '#f8a978';
       const x = 40;
-      const y = 20;
+      const y = 300;
       const width = x + y;
       const height = ButtonDefaults.containerStyle.height;
       const props = {title, color};
@@ -25,7 +25,11 @@ describe('Button', () => {
           lineTo: jest.fn(),
           quadraticCurveTo: jest.fn(),
           font: 'Helvetica',
-          measureText: jest.fn(),
+          measureText: jest.fn(() => {
+            return {
+              width: 100,
+            };
+          }),
           canvas: {
             addEventListener: jest.fn(),
           },
@@ -54,10 +58,10 @@ describe('Button', () => {
       expect(lineTo.mock.calls.length).toEqual(4);
       expect(fill.mock.calls.length).toBe(1);
       expect(fillText.mock.calls.length).toBe(1);
-      expect(fillText).toBeCalledWith(title, x + width / 2, y + height / 2);
-      expect(font).toEqual(`${ButtonDefaults.textStyle.fontSize} Helvetica`);
+      expect(fillText.mock.calls.length).toBe(1);
+      expect(font).toEqual(`${ButtonDefaults.textStyle.fontSize}px Helvetica`);
       expect(quadraticCurveTo.mock.calls.length).toEqual(4);
-      expect(fillStyle).toBe(color);
+      expect(fillStyle).toEqual('white');
       expect(Button).toMatchSnapshot();
     });
   });

From 7dbe3df93b7de46fa313a53e858591bc33f4798b Mon Sep 17 00:00:00 2001
From: hayanisaid <info.said.dev@gmail.com>
Date: Mon, 8 Aug 2022 02:17:36 -0700
Subject: [PATCH 21/22] resolve conflicts

---
 packages/app/src/Clock.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/app/src/Clock.js b/packages/app/src/Clock.js
index 6ceaf72..c9f66af 100644
--- a/packages/app/src/Clock.js
+++ b/packages/app/src/Clock.js
@@ -51,7 +51,6 @@ class Clock extends React.Component {
         <Text style={styles.time}>
           {this.state.time}
         </Text>
-
         {/*<Text style={styles.time}>
           {this.state.time}
         </Text>

From 4738b50574789690896a8731c361b70dd2209bef Mon Sep 17 00:00:00 2001
From: Said Hayani <info.said.dev@gmail.com>
Date: Mon, 8 Aug 2022 05:19:01 -0400
Subject: [PATCH 22/22] Delete render-updates.js.snap

---
 .../__snapshots__/render-updates.js.snap      | 19 -------------------
 1 file changed, 19 deletions(-)
 delete mode 100644 packages/react-ape/__tests__/render-tests/__snapshots__/render-updates.js.snap

diff --git a/packages/react-ape/__tests__/render-tests/__snapshots__/render-updates.js.snap b/packages/react-ape/__tests__/render-tests/__snapshots__/render-updates.js.snap
deleted file mode 100644
index 1d25718..0000000
--- a/packages/react-ape/__tests__/render-tests/__snapshots__/render-updates.js.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render Updates Relative View Render relative view with props and children updates 1`] = `"data:image/png;base64,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"`;
-
-exports[`Render Updates Relative View Render relative view with props and children updates 2`] = `"data:image/png;base64,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"`;
-
-exports[`Render Updates Text Test "Text" multiples content change 1`] = `"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAABmJLR0QA/wD/AP+gvaeTAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII="`;
-
-exports[`Render Updates Text Test "Text" multiples content change 2`] = `"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAABmJLR0QA/wD/AP+gvaeTAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII="`;
-
-exports[`Render Updates Text Test "Text" multiples content change 3`] = `"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAABmJLR0QA/wD/AP+gvaeTAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII="`;
-
-exports[`Render Updates Text Test "Text" simple text change 1`] = `"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAABmJLR0QA/wD/AP+gvaeTAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII="`;
-
-exports[`Render Updates Text Test "Text" simple text change 2`] = `"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAABmJLR0QA/wD/AP+gvaeTAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII="`;
-
-exports[`Render Updates Text Test "Text" style props change 1`] = `"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAABmJLR0QA/wD/AP+gvaeTAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII="`;
-
-exports[`Render Updates Text Test "Text" style props change 2`] = `"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAABmJLR0QA/wD/AP+gvaeTAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII="`;