From ab111dfda4c956a57c5609c0ca45923e89176063 Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Wed, 15 Jul 2020 16:32:41 +0200
Subject: [PATCH] replace state usage comparison image with the code blocks
 (#2026)

---
 docs/tutorial.md            | 67 +++++++++++++++++++++++++++++++++++--
 website/static/css/docs.css | 22 ++++++++++++
 2 files changed, 87 insertions(+), 2 deletions(-)

diff --git a/docs/tutorial.md b/docs/tutorial.md
index 1c221834fb4..861df1b49fa 100644
--- a/docs/tutorial.md
+++ b/docs/tutorial.md
@@ -108,9 +108,72 @@ In a React component, the props are the variables that we pass from a parent com
 
 #### There are differences between React and React Native to handle the state?
 
-![image](https://user-images.githubusercontent.com/20761166/61405629-48270680-a8a8-11e9-906e-aa80d51e51e3.png)
+<div class="two-columns">
 
-As shown in the image, there is no difference in handling the `state` between [React](https://reactjs.org/docs/state-and-lifecycle.html) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)!
+```jsx
+// ReactJS Counter Example using Hooks!
+
+import React, { useState } from 'react';
+
+
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="container">
+      <p>You clicked {count} times</p>
+      <button
+        onClick={() => setCount(count + 1)}>
+        Click me!
+      </button>
+    </div>
+  );
+};
+
+
+// CSS
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+```
+
+```jsx
+// React Native Counter Example using Hooks!
+
+import React, { useState } from 'react';
+import { View, Text, Button, StyleSheet } from 'react-native';
+
+const App = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <View style={styles.container}>
+      <Text>You clicked {count} times</Text>
+      <Button
+        onPress={() => setCount(count + 1)}
+        titles="Click me!"
+      />
+    </View>
+  );
+};
+
+// React Native Styles
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});
+```
+
+</div>
+
+As shown above, there is no difference in handling the `state` between [React](https://reactjs.org/docs/state-and-lifecycle.html) and `React Native`. You can use the state of your components both in classes and in functional components using [hooks](https://reactjs.org/docs/hooks-intro.html)!
 
 In the following example we will show the same above counter example using classes.
 
diff --git a/website/static/css/docs.css b/website/static/css/docs.css
index 3e8ae268ab8..3510f20d87f 100644
--- a/website/static/css/docs.css
+++ b/website/static/css/docs.css
@@ -403,3 +403,25 @@ td .label.required {
   line-height: 10px;
   font-weight: 600;
 }
+
+/* Two columns */
+.two-columns {
+  display: grid;
+  gap: 0 2%;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  grid-template-areas: ". .";
+}
+
+.two-columns pre code {
+  white-space: pre-wrap;
+}
+
+@media only screen and (max-width: 1023px) {
+  .two-columns {
+    gap: 0;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    grid-template-areas: "." ".";
+  }
+}