diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..4cebcff
Binary files /dev/null and b/.DS_Store differ
diff --git a/Components-and-Hooks/HOC-Props-and-Custom-Hooks.md b/Components-and-Hooks/HOC-Props-and-Custom-Hooks.md
index dc12c7a..46400b2 100644
--- a/Components-and-Hooks/HOC-Props-and-Custom-Hooks.md
+++ b/Components-and-Hooks/HOC-Props-and-Custom-Hooks.md
@@ -35,19 +35,19 @@ So here are some codes for basic understanding HOC.
 ```javascript
 function ParentElement(props) {
   return (
-    <div>
-      <div>Hi</div>
-      <diuv>{props.children}</diuv>
-    </div>
+    <View>
+      <Text>Hi</Text>
+      <View>{props.children}</View>
+    </View>
   );
 }
 
 function ChildComponentOne() {
-  return <div>Child</div>;
+  return <Text>Child 1</Text>;
 }
 
 function ChildComponentTwo() {
-  return <div>Child</div>;
+  return <Text>Child 2</Text>;
 }
 
 export default function App() {
@@ -73,20 +73,20 @@ So here are some codes for basic understanding.
 ```javascript
 function ParentElement(props) {
   return (
-    <div>
-      <div>Hi</div>
-      <diuv>{props.ChildComponentOne}</diuv>
-      <diuv>{props.ChildComponentTwo}</diuv>
-    </div>
+    <View>
+      <Text>Hi</Text>
+      <View>{props.ChildComponentOne}</View>
+      <View>{props.ChildComponentTwo}</View>
+    </View>
   );
 }
 
 function ChildComponentOne() {
-  return <div>Child</div>;
+  return <View>Child 1</View>;
 }
 
 function ChildComponentTwo() {
-  return <div>Child</div>;
+  return <View>Child 2</View>;
 }
 
 export default function App() {
@@ -106,36 +106,36 @@ In the above code props rendering occurred by **_props.ChildComponentOne_** & **
 Besides regular JSX components, we can pass functions as children to React components. This function is available to us through the children prop, which is technically also a render prop.
 
 ```javascript
-    function ParentElement(props) {
-      const [stateValue, setStateValue] = useState(“Child”);
-      return (
-        <div>
-          <div>Parent</div>
-          <diuv>{props.children(stateValue)}</diuv>
-        </div>
-      );
-    }
+function ParentElement(props) {
+  const [stateValue, setStateValue] = useState(“Child”);
+  return (
+    <View>
+      <Text>Parent</Text>
+      <View>{props.children(stateValue)}</View>
+    </View>
+  );
+}
 
-    function ChildComponentOne(props) {
-      return <div>{props.value}</div>;
-    }
+function ChildComponentOne(props) {
+  return <View>{props.value}</View>;
+}
 
-    function ChildComponentTwo(props) {
-      return <div>{props.value}</div>;
-    }
+function ChildComponentTwo(props) {
+  return <View>{props.value}</View>;
+}
 
-    export default function App(){
-      return (
-        <ParentElement>
-              {(data) => (
-                <>
-                  <ChildComponentOne value={data}></ChildComponentOne>
-                  <ChildComponentTwo value={data}></ChildComponentTwo>
-                </>
-              )}
-        </ParentElement>
-      )
-    }
+export default function App(){
+  return (
+    <ParentElement>
+          {(data) => (
+            <>
+              <ChildComponentOne value={data}></ChildComponentOne>
+              <ChildComponentTwo value={data}></ChildComponentTwo>
+            </>
+          )}
+    </ParentElement>
+  )
+}
 ```
 
 In the above code **_props.children(stateValue)_** created props rendering.
@@ -149,21 +149,25 @@ A **Higher Order Component (HOC)** is a component that receives another componen
 Say that we always wanted to add a certain styling to multiple components in our application. Instead of creating a style object locally each time, we can simply create a HOC that adds the style objects to the component that we pass to it.
 
 ```javascript
-    function withStyles(Component) {
-      return props => {
-        const style = { padding: '0.2rem', margin: '1rem' }
-        return <Component style={style} {...props} />
-      }
+function withStyles(Component) {
+  return props => {
+    const style = {
+      padding: '0.2rem',
+      margin: '1rem'
     }
 
-    const Button = () = <button>Click me!</button>
-    const Text = () => <p>Hello World!</p>
+    return <Component style={style} {...props} />
+  }
+}
 
-    const StyledButton = withStyles(Button)
-    const StyledText = withStyles(Text)
+const MyButton = () = <Button title="Press me!" />
+const MyText = () => <Text>Hello World!</Text>
+
+const StyledButton = withStyles(Button)
+const StyledText = withStyles(MyText)
 ```
 
-We just created a **StyledButton** and **StyledText** component, which are the modified versions of the Button and Text component. They now both contain the style that got added in the withStyles HOC!
+We just created a **StyledButton** and **StyledText** component, which are the modified versions of the `Button` and `Text` component. They now both contain the style that got added in the withStyles HOC!
 
 Let’s take a look at the same **DogImages** example that was previously used in the Container/Presentational pattern! The application does nothing more than rendering a list of dog images, fetched from an API.
 
@@ -194,48 +198,48 @@ function withLoader(Element, url) {
 A HOC returns an element, a functional component props => {} in this case, to which we want to add the logic that allows us to display a text with **_Loading…_** as the data is still being fetched. Once the data has been fetched, the component should pass the fetched data as a prop.
 
 ```javascript
-    // 💁‍♂️ 💁‍♂️ 💁‍♂️ DogImages.js
-
-    import React from "react";
-    import withLoader from "./withLoader";
+// 💁‍♂️ 💁‍♂️ 💁‍♂️ DogImages.js
 
-    function DogImages(props) {
-      return props.data.message.map((dog, index) => (
-        <img src={dog} alt="Dog" key={index} />
-      ));
-    }
+import React from "react";
+import withLoader from "./withLoader";
 
-    export default withLoader(
-      DogImages,
-      "https://dog.ceo/api/breed/labrador/images/random/6"
-    );
+function DogImages(props) {
+  return props.data.message.map((dog, index) => (
+    <Image source={dog} alt="Dog" key={index} />
+  ));
+}
 
+export default withLoader(
+  DogImages,
+  "https://dog.ceo/api/breed/labrador/images/random/6"
+);
 
-    // 💁‍♂️ 💁‍♂️ 💁‍♂️ withLoader.js
 
-    import React, { useEffect, useState } from "react";
+// 💁‍♂️ 💁‍♂️ 💁‍♂️ withLoader.js
 
-    export default function withLoader(Element, url) {
-      return (props) => {
-        const [data, setData] = useState(null);
+import React, { useEffect, useState } from "react";
 
-        useEffect(() => {
-          async function getData() {
-            const res = await fetch(url);
-            const data = await res.json();
-            setData(data);
-          }
+export default function withLoader(Element, url) {
+  return (props) => {
+    const [data, setData] = useState(null);
 
-          getData();
-        }, []);
+    useEffect(() => {
+      async function getData() {
+        const res = await fetch(url);
+        const data = await res.json();
+        setData(data);
+      }
 
-        if (!data) {
-          return <div>Loading...</div>;
-        }
+      getData();
+    }, []);
 
-        return <Element {...props} data={data} />;
-      };
+    if (!data) {
+      return <Text>Loading...</Text>;
     }
+
+    return <Element {...props} data={data} />;
+  };
+}
 ```
 
 _You can check the output from here: [hoc-pattern-2 — CodeSandbox](https://codesandbox.io/s/hoc-pattern-2-rslq4?from-embed)_
@@ -276,67 +280,66 @@ We can also compose multiple Higher Order Components. Let’s say that we also w
 We need to create a HOC that provides a hovering prop to the element that we pass. Based on that prop, we can conditionally render the text box based on whether the user is hovering over the DogImages list.
 
 ```javascript
-    // 💁‍♂️ 💁‍♂️ 💁‍♂️ DogImages.js
-    import React from "react";
-    import withLoader from "./withLoader";
-    import withHover from "./withHover";
-
-    function DogImages(props) {
-      return (
-        <div {...props}>
-          {props.hovering && <div id="hover">Hovering!</div>}
-          <div id="list">
-            {props.data.message.map((dog, index) => (
-              <img src={dog} alt="Dog" key={index} />
-            ))}
-          </div>
-        </div>
-      );
-    }
+// 💁‍♂️ 💁‍♂️ 💁‍♂️ DogImages.js
+import React from "react";
+import withLoader from "./withLoader";
+import withHover from "./withHover";
 
-    export default withHover(
-      withLoader(DogImages, "https://dog.ceo/api/breed/labrador/images/-%20%20%20%20random/6")
-    );
+function DogImages(props) {
+  return (
+    <View {...props}>
+      {props.hovering && <View id="hover">Hovering!</View>}
+      <View id="list">
+        {props.data.message.map((dog, index) => (
+          <Image source={dog} alt="Dog" key={index} />
+        ))}
+      </View>
+    </View>
+  );
+}
 
-    // 💁‍♂️ 💁‍♂️ 💁‍♂️ withHover.js
-    import React, { useState } from "react";
-
-    export default function withHover(Element) {
-      return props => {
-        const [hovering, setHover] = useState(false);
-
-        return (
-          <Element
-            {...props}
-            hovering={hovering}
-            onMouseEnter={() => setHover(true)}
-            onMouseLeave={() => setHover(false)}
-          />
-        );
-      };
-    }
+export default withHover(
+  withLoader(DogImages, "https://dog.ceo/api/breed/labrador/images/random/6")
+);
 
-    // 💁‍♂️ 💁‍♂️ 💁‍♂️ withLoader.js
-    import React, { useEffect, useState } from "react";
+// 💁‍♂️ 💁‍♂️ 💁‍♂️ withHover.js
+import React, { useState } from "react";
 
-    export default function withLoader(Element, url) {
-      return props => {
-        const [data, setData] = useState(null);
+export default function withHover(Element) {
+  return props => {
+    const [hovering, setHover] = useState(false);
 
-        useEffect(() => {
-          fetch(url)
-            .then(res => res.json())
-            .then(data => setData(data));
-        }, []);
+    return (
+      <Element
+        {...props}
+        hovering={hovering}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+      />
+    );
+  };
+}
 
-        if (!data) {
-          return <div>Loading...</div>;
-        }
+// 💁‍♂️ 💁‍♂️ 💁‍♂️ withLoader.js
+import React, { useEffect, useState } from "react";
 
-        return <Element {...props} data={data} />;
-      };
+export default function withLoader(Element, url) {
+  return props => {
+    const [data, setData] = useState(null);
+
+    useEffect(() => {
+      fetch(url)
+        .then(res => res.json())
+        .then(data => setData(data));
+    }, []);
+
+    if (!data) {
+      return <Text>Loading...</Text>;
     }
+
+    return <Element {...props} data={data} />;
+  };
+}
 ```
 
 _You can check the output from here: [hoc-pattern-3 — CodeSandbox](https://codesandbox.io/s/hoc-pattern-3-whhh0?from-embed)_
@@ -354,80 +357,80 @@ In some cases, we can replace the **HOC pattern** with **React Hooks**.
 Let’s replace the withHover HOC with a useHover hook. Instead of having a higher order component, we export a hook that adds a mouseOver and mouseLeave event listener to the element. We cannot pass the element anymore like we did with the HOC. Instead, we'll return a ref from the hook for that should get the mouseOver and mouseLeave events.
 
 ```javascript
-    // 💁‍♂️ 💁‍♂️ 💁‍♂️ DogImages.js
-
-    import React from "react";
-    import withLoader from "./withLoader";
-    import useHover from "./useHover";
-
-    function DogImages(props) {
-      const [hoverRef, hovering] = useHover();
-
-      return (
-        <div ref={hoverRef} {...props}>
-          {hovering && <div id="hover">Hovering!</div>}
-          <div id="list">
-            {props.data.message.map((dog, index) => (
-              <img src={dog} alt="Dog" key={index} />
-            ))}
-          </div>
-        </div>
-      );
-    }
+// 💁‍♂️ 💁‍♂️ 💁‍♂️ DogImages.js
 
-    export default withLoader(
-      DogImages,
-      "https://dog.ceo/api/breed/labrador/images/random/6"
-    );
+import React from "react";
+import withLoader from "./withLoader";
+import useHover from "./useHover";
+
+function DogImages(props) {
+  const [hoverRef, hovering] = useHover();
 
-    // 💁‍♂️ 💁‍♂️ 💁‍♂️ useHover.js
+  return (
+    <View ref={hoverRef} {...props}>
+      {hovering && <View id="hover">Hovering!</View>}
+      <View id="list">
+        {props.data.message.map((dog, index) => (
+          <Image source={dog} alt="Dog" key={index} />
+        ))}
+      </View>
+    </View>
+  );
+}
+
+export default withLoader(
+  DogImages,
+  "https://dog.ceo/api/breed/labrador/images/random/6"
+);
 
-    import { useState, useRef, useEffect } from "react";
+// 💁‍♂️ 💁‍♂️ 💁‍♂️ useHover.js
 
-    export default function useHover() {
-      const [hovering, setHover] = useState(false);
-      const ref = useRef(null);
+import { useState, useRef, useEffect } from "react";
 
-      const handleMouseOver = () => setHover(true);
-      const handleMouseOut = () => setHover(false);
+export default function useHover() {
+  const [hovering, setHover] = useState(false);
+  const ref = useRef(null);
 
-      useEffect(() => {
-        const node = ref.current;
-        if (node) {
-          node.addEventListener("mouseover", handleMouseOver);
-          node.addEventListener("mouseout", handleMouseOut);
+  const handleMouseOver = () => setHover(true);
+  const handleMouseOut = () => setHover(false);
 
-          return () => {
-            node.removeEventListener("mouseover", handleMouseOver);
-            node.removeEventListener("mouseout", handleMouseOut);
-          };
-        }
-      }, [ref.current]);
+  useEffect(() => {
+    const node = ref.current;
+    if (node) {
+      node.addEventListener("mouseover", handleMouseOver);
+      node.addEventListener("mouseout", handleMouseOut);
 
-      return [ref, hovering];
+      return () => {
+        node.removeEventListener("mouseover", handleMouseOver);
+        node.removeEventListener("mouseout", handleMouseOut);
+      };
     }
+  }, [ref.current]);
 
-    // 💁‍♂️ 💁‍♂️ 💁‍♂️ withLoader.js
+  return [ref, hovering];
+}
 
-    import React, { useEffect, useState } from "react";
+// 💁‍♂️ 💁‍♂️ 💁‍♂️ withLoader.js
 
-    export default function withLoader(Element, url) {
-      return props => {
-        const [data, setData] = useState(null);
+import React, { useEffect, useState } from "react";
 
-        useEffect(() => {
-          fetch(url)
-            .then(res => res.json())
-            .then(data => setData(data));
-        }, []);
+export default function withLoader(Element, url) {
+  return props => {
+    const [data, setData] = useState(null);
 
-        if (!data) {
-          return <div>Loading...</div>;
-        }
+    useEffect(() => {
+      fetch(url)
+        .then(res => res.json())
+        .then(data => setData(data));
+    }, []);
 
-        return <Element {...props} data={data} />;
-      };
+    if (!data) {
+      return <Text>Loading...</Text>;
     }
+
+    return <Element {...props} data={data} />;
+  };
+}
 ```
 
 _You can check the output from here: [hoc-pattern-4 — CodeSandbox](https://codesandbox.io/s/hoc-pattern-4-npo50?from-embed)_
@@ -483,69 +486,67 @@ Some libraries that relied on the HOC pattern added Hooks support after the rele
 One way to use Apollo Client is through the graphql() higher order component.
 
 ```javascript
-    // 💁‍♂️ 💁‍♂️ 💁‍♂️ InputHOC.js (Apollo by using Higher Order Component)
+// 💁‍♂️ 💁‍♂️ 💁‍♂️ InputHOC.js (Apollo by using Higher Order Component)
 
-    import React from "react";
-    import "./styles.css";
+import React from "react";
 
-    import { graphql } from "react-apollo";
-    import { ADD_MESSAGE } from "./resolvers";
+import { graphql } from "react-apollo";
+import { ADD_MESSAGE } from "./resolvers";
 
-    class Input extends React.Component {
-      constructor() {
-        super();
-        this.state = { message: "" };
-      }
+class Input extends React.Component {
+  constructor() {
+    super();
+    this.state = { message: "" };
+  }
 
-      handleChange = (e) => {
-        this.setState({ message: e.target.value });
-      };
+  handleChange = (e) => {
+    this.setState({ message: e.target.value });
+  };
 
-      handleClick = () => {
-        this.props.mutate({ variables: { message: this.state.message } });
-      };
+  handlePress = () => {
+    this.props.mutate({ variables: { message: this.state.message } });
+  };
 
-      render() {
-        return (
-          <div className="input-row">
-            <input
-              onChange={this.handleChange}
-              type="text"
-              placeholder="Type something..."
-            />
-            <button onClick={this.handleClick}>Add</button>
-          </div>
-        );
-      }
-    }
+  render() {
+    return (
+      <View className="input-row">
+        <input
+          onChange={this.handleChange}
+          type="text"
+          placeholder="Type something..."
+        />
+        <Button onPress={this.handlePress} title="Add" />
+      </View>
+    );
+  }
+}
 
-    export default graphql(ADD_MESSAGE)(Input);
+export default graphql(ADD_MESSAGE)(Input);
 
-    // 💁‍♂️ 💁‍♂️ 💁‍♂️ InputHooks.js (Apollo by using useMutation hook)
+// 💁‍♂️ 💁‍♂️ 💁‍♂️ InputHooks.js (Apollo by using useMutation hook)
 
-    import React, { useState } from "react";
-    import "./styles.css";
+import React, { useState } from "react";
 
-    import { useMutation } from "@apollo/react-hooks";
-    import { ADD_MESSAGE } from "./resolvers";
+import { useMutation } from "@apollo/react-hooks";
+import { ADD_MESSAGE } from "./resolvers";
 
-    export default function Input() {
-      const [message, setMessage] = useState("");
-      const [addMessage] = useMutation(ADD_MESSAGE, {
-        variables: { message }
-      });
+export default function Input() {
+  const [message, setMessage] = useState("");
+  const [addMessage] = useMutation(ADD_MESSAGE, {
+    variables: { message }
+  });
 
-      return (
-        <div className="input-row">
-          <input
-            onChange={(e) => setMessage(e.target.value)}
-            type="text"
-            placeholder="Type something..."
-          />
-          <button onClick={addMessage}>Add</button>
-        </div>
-      );
-    }
+  return (
+    <View className="input-row">
+      <input
+        onChange={(e) => setMessage(e.target.value)}
+        type="text"
+        placeholder="Type something..."
+      />
+      <Button onPress={addMessage} title="Add" />
+    </View>
+  );
+}
 ```
 
 _You can check output from here: [apollo-hoc-hooks — CodeSandbox](https://codesandbox.io/s/apollo-hoc-hooks-n3td8?from-embed)_
@@ -571,34 +572,38 @@ Using the **Higher Order Component** pattern allows us to keep logic that we wan
 The name of the prop that a HOC can pass to an element, can cause a **naming collision**.
 
 ```javascript
-    function withStyles(Component) {
-      return props => {
-        const style = { padding: '0.2rem', margin: '1rem' }
-        return <Component style={style} {...props} />
-      }
+function withStyles(Component) {
+  return props => {
+    const style = {
+      padding: '0.2rem',
+      margin: '1rem'
     }
 
-    const Button = () = <button style={{ color: 'red' }}>Click me!</button>
-    const StyledButton = withStyles(Button)
+    return <Component style={style} {...props} />
+  }
+}
+
+const MyButton = () = <Button title="Press me!" style={{ color: 'red' }} />
+const StyledButton = withStyles(MyButton)
 ```
 
 In this case, the withStyles HOC adds a prop called style to the element that we pass to it. However, the Button component already had a prop called style, which will be overwritten! Make sure that the HOC can handle accidental name collision, by either renaming the prop or merging the props.
 
 ```javascript
-    function withStyles(Component) {
-      return props => {
-        const style = {
-          padding: '0.2rem',
-          margin: '1rem',
-          ...props.style
-        }
-
-        return <Component style={style} {...props} />
-      }
+function withStyles(Component) {
+  return props => {
+    const style = {
+      padding: '0.2rem',
+      margin: '1rem',
+      ...props.style
     }
 
-    const Button = () = <button style={{ color: 'red' }}>Click me!</button>
-    const StyledButton = withStyles(Button)
+    return <Component style={style} {...props} />
+  }
+}
+
+const MyButton = () = <Button title="Press me!" style={{ color: 'red' }} />
+const StyledButton = withStyles(MyButton)
 ```
 
 When using multiple composed HOCs that all pass props to the element that’s wrapped within them, it can be difficult to figure out which HOC is responsible for which prop. **This can hinder debugging and scaling an application easily**.
@@ -614,7 +619,7 @@ Another way of making components very **reusable**, is by using the **render pro
 Imagine that we have a Title component. In this case, the Title component shouldn't do anything besides rendering the value that we pass. We can use a render prop for this! Let's pass the value that we want the Title component to render to the render prop.
 
 ```javascript
-<Title render={() => <h1>I am a render prop!</h1>} />
+<Title render={() => <Text>I am a render prop!</Text>} />
 ```
 
 Within the Title component, we can render this data by returning the invoked render prop!
@@ -631,25 +636,20 @@ To the Component element, we have to pass a prop called render, which is a funct
 import React from "react";
 import { render } from "react-dom";
 
-import "./styles.css";
-
 const Title = (props) => props.render();
 
 render(
-  <div className="App">
+  <View className="App">
     <Title
       render={() => (
-        <h1>
-          <span role="img" aria-label="emoji">
-            ✨
-          </span>
-          I am a render prop! <span role="img" aria-label="emoji">
-            ✨
-          </span>
-        </h1>
+        <Text>
+          <View role="img" aria-label="emoji">✨</View>
+          I am a render prop!
+          <View role="img" aria-label="emoji">✨</View>
+        </Text>
       )}
     />
-  </div>,
+  </View>,
   document.getElementById("root")
 );
 ```
@@ -661,16 +661,15 @@ Perfect, works smoothly! The **cool thing about render props**, is that **the co
 
 import React from "react";
 import { render } from "react-dom";
-import "./styles.css";
 
 const Title = (props) => props.render();
 
 render(
-  <div className="App">
-    <Title render={() => <h1>✨ First render prop! ✨</h1>} />
-    <Title render={() => <h2>🔥 Second render prop! 🔥</h2>} />
-    <Title render={() => <h3>🚀 Third render prop! 🚀</h3>} />
-  </div>,
+  <View className="App">
+    <Title render={() => <Text>✨ First render prop! ✨</Text>} />
+    <Title render={() => <Text>🔥 Second render prop! 🔥</Text>} />
+    <Title render={() => <Text>🚀 Third render prop! 🚀</Text>} />
+  </View>,
   document.getElementById("root")
 );
 ```
@@ -686,7 +685,6 @@ Let's rename the render props that were used in the previous example and give th
 
 import React from "react";
 import { render } from "react-dom";
-import "./styles.css";
 
 const Title = (props) => (
   <>
@@ -697,13 +695,13 @@ const Title = (props) => (
 );
 
 render(
-  <div className="App">
+  <View className="App">
     <Title
-      renderFirstComponent={() => <h1>✨ First render prop! ✨</h1>}
-      renderSecondComponent={() => <h2>🔥 Second render prop! 🔥</h2>}
-      renderThirdComponent={() => <h3>🚀 Third render prop! 🚀</h3>}
+      renderFirstComponent={() => <Text>✨ First render prop! ✨</Text>}
+      renderSecondComponent={() => <Text>🔥 Second render prop! 🔥</Text>}
+      renderThirdComponent={() => <Text>🚀 Third render prop! 🚀</Text>}
     />
-  </div>,
+  </View>,
   document.getElementById("root")
 );
 ```
@@ -713,17 +711,17 @@ Great! We’ve just seen that we can use **render props in order to make a compo
 A component that takes a render prop usually does a lot more than simply invoking the render prop. Instead, we usually want to pass data from the component that takes the render prop, to the element that we pass as a render prop!
 
 ```javascript
-    function Component(props) {
-      const data = { ... }
+function Component(props) {
+  const data = { ... }
 
-      return props.render(data)
-    }
+  return props.render(data)
+}
 ```
 
 The render prop can now receive this value that we passed as its argument.
 
 ```javascript
-    <Component render={data => <ChildComponent data={data} />}
+<Component render={data => <ChildComponent data={data} />}
 ```
 
 ### Complex example
@@ -734,7 +732,6 @@ Let’s look at an example! We have a simple app, where a user can type a **temp
 // App.js
 
 import React, { useState } from "react";
-import "./styles.css";
 
 function Input() {
   const [value, setValue] = useState("");
@@ -751,21 +748,21 @@ function Input() {
 
 export default function App() {
   return (
-    <div className="App">
-      <h1>☃️ Temperature Converter 🌞</h1>
+    <View className="App">
+      <Text>☃️ Temperature Converter 🌞</Text>
       <Input />
       <Kelvin />
       <Fahrenheit />
-    </div>
+    </View>
   );
 }
 
 function Kelvin({ value = 0 }) {
-  return <div className="temp">{value + 273.15}K</div>;
+  return <View className="temp">{value + 273.15}K</View>;
 }
 
 function Fahrenheit({ value = 0 }) {
-  return <div className="temp">{(value * 9) / 5 + 32}°F</div>;
+  return <View className="temp">{(value * 9) / 5 + 32}°F</View>;
 }
 ```
 
@@ -789,12 +786,12 @@ export default function App() {
   const [value, setValue] = useState("");
 
   return (
-    <div className="App">
-      <h1>☃️ Temperature Converter 🌞</h1>
+    <View className="App">
+      <Text>☃️ Temperature Converter 🌞</Text>
       <Input value={value} handleChange={setValue} />
       <Kelvin value={value} />
       <Fahrenheit value={value} />
-    </div>
+    </View>
   );
 }
 ```
@@ -824,8 +821,8 @@ function Input(props) {
 
 export default function App() {
   return (
-    <div className="App">
-      <h1>☃️ Temperature Converter 🌞</h1>
+    <View className="App">
+      <Text>☃️ Temperature Converter 🌞</Text>
       <Input
         render={(value) => (
           <>
@@ -834,7 +831,7 @@ export default function App() {
           </>
         )}
       />
-    </div>
+    </View>
   );
 }
 ```
@@ -845,7 +842,6 @@ Perfect, the **Kelvin** and **Fahrenheit** components now have access to the val
 // 💁‍♂️ 💁‍♂️ 💁‍♂️ App.js
 
 import React, { useState } from "react";
-import "./styles.css";
 
 function Input(props) {
   const [value, setValue] = useState("");
@@ -865,8 +861,8 @@ function Input(props) {
 
 export default function App() {
   return (
-    <div className="App">
-      <h1>☃️ Temperature Converter 🌞</h1>
+    <View className="App">
+      <Text>☃️ Temperature Converter 🌞</Text>
       <Input
         render={(value) => (
           <>
@@ -875,16 +871,16 @@ export default function App() {
           </>
         )}
       />
-    </div>
+    </View>
   );
 }
 
 function Kelvin({ value }) {
-  return <div className="temp">{parseInt(value || 0) + 273.15}K</div>;
+  return <View className="temp">{parseInt(value || 0) + 273.15}K</View>;
 }
 
 function Fahrenheit({ value }) {
-  return <div className="temp">{(parseInt(value || 0) * 9) / 5 + 32}°F</div>;
+  return <View className="temp">{(parseInt(value || 0) * 9) / 5 + 32}°F</View>;
 }
 ```
 
@@ -899,8 +895,8 @@ Let’s change the **Input** component. Instead of explicitly passing the render
 ```javascript
 export default function App() {
   return (
-    <div className="App">
-      <h1>☃️ Temperature Converter 🌞</h1>
+    <View className="App">
+      <Text>☃️ Temperature Converter 🌞</Text>
       <Input>
         {(value) => (
           <>
@@ -909,7 +905,7 @@ export default function App() {
           </>
         )}
       </Input>
-    </div>
+    </View>
   );
 }
 ```
@@ -940,7 +936,6 @@ Great, this way the **Kelvin** and **Fahrenheit** component have access to the v
 // 💁‍♂️ 💁‍♂️ 💁‍♂️ App.js
 
 import React, { useState } from "react";
-import "./styles.css";
 
 function Input(props) {
   const [value, setValue] = useState(0);
@@ -960,8 +955,8 @@ function Input(props) {
 
 export default function App() {
   return (
-    <div className="App">
-      <h1>☃️ Temperature Converter 🌞</h1>
+    <View className="App">
+      <Text>☃️ Temperature Converter 🌞</Text>
       <Input>
         {(value) => (
           <>
@@ -970,16 +965,16 @@ export default function App() {
           </>
         )}
       </Input>
-    </div>
+    </View>
   );
 }
 
 function Kelvin({ value }) {
-  return <div className="temp">{parseInt(value || 0) + 273.15}K</div>;
+  return <View className="temp">{parseInt(value || 0) + 273.15}K</View>;
 }
 
 function Fahrenheit({ value }) {
-  return <div className="temp">{(parseInt(value || 0) * 9) / 5 + 32}°F</div>;
+  return <View className="temp">{(parseInt(value || 0) * 9) / 5 + 32}°F</View>;
 }
 ```
 
@@ -997,7 +992,6 @@ One way to use **Apollo Client** is through the **Mutation** and **Query** compo
 // 💁‍♂️ 💁‍♂️ 💁‍♂️ InputRenderProp.js
 
 import React from "react";
-import "./styles.css";
 
 import { Mutation } from "react-apollo";
 import { ADD_MESSAGE } from "./resolvers";
@@ -1022,14 +1016,14 @@ export default class Input extends React.Component {
         }
       >
         {(addMessage) => (
-          <div className="input-row">
+          <View className="input-row">
             <input
               onChange={this.handleChange}
               type="text"
               placeholder="Type something..."
             />
-            <button onClick={addMessage}>Add</button>
-          </div>
+            <Button title="Add" onPress={addMessage} />
+          </View>
         )}
       </Mutation>
     );
@@ -1042,9 +1036,9 @@ _You can check output from here: [https://codesandbox.io/s/renderprops-7-jfdxg?f
 In order to **pass data down** from the **Mutation** component **to the elements that need the data**, we **pass a function as a child**. The function receives the value of the data through its arguments.
 
 ```javascript
-    <Mutation mutation={...} variables={...}>
-      {addMessage => <div className="input-row">...</div>}
-    </Mutation>
+<Mutation mutation={...} variables={...}>
+  {addMessage => <View className="input-row">...</View>}
+</Mutation>
 ```
 
 Although we can still use the **render prop pattern** and is often preferred compared to the higher order component pattern, it has its downsides.
@@ -1076,70 +1070,68 @@ One of the **downsides** is **deep component nesting**. We can nest multiple **M
 Let’s look at an example that uses the exact same data as we previously saw in the example with the Query render prop. This time, we'll provide the data to the component **by using the useQuery hook** that Apollo Client provided for us.
 
 ```javascript
-    // 💁‍♂️ 💁‍♂️ 💁‍♂️ InputHOC.js
+// 💁‍♂️ 💁‍♂️ 💁‍♂️ InputHOC.js
 
-    import React from "react";
-    import "./styles.css";
+import React from "react";
 
-    import { graphql } from "react-apollo";
-    import { ADD_MESSAGE } from "./resolvers";
+import { graphql } from "react-apollo";
+import { ADD_MESSAGE } from "./resolvers";
 
-    class Input extends React.Component {
-      constructor() {
-        super();
-        this.state = { message: "" };
-      }
+class Input extends React.Component {
+  constructor() {
+    super();
+    this.state = { message: "" };
+  }
 
-      handleChange = (e) => {
-        this.setState({ message: e.target.value });
-      };
+  handleChange = (e) => {
+    this.setState({ message: e.target.value });
+  };
 
-      handleClick = () => {
-        this.props.mutate({ variables: { message: this.state.message } });
-      };
+  handlePress = () => {
+    this.props.mutate({ variables: { message: this.state.message } });
+  };
 
-      render() {
-        return (
-          <div className="input-row">
-            <input
-              onChange={this.handleChange}
-              type="text"
-              placeholder="Type something..."
-            />
-            <button onClick={this.handleClick}>Add</button>
-          </div>
-        );
-      }
-    }
+  render() {
+    return (
+      <View className="input-row">
+        <input
+          onChange={this.handleChange}
+          type="text"
+          placeholder="Type something..."
+        />
+        <Button title="Add" onPress={this.handlePress} />
+      </View>
+    );
+  }
+}
 
-    export default graphql(ADD_MESSAGE)(Input);
+export default graphql(ADD_MESSAGE)(Input);
 
 
-    // 💁‍♂️ 💁‍♂️ 💁‍♂️ InputHooks.js
+// 💁‍♂️ 💁‍♂️ 💁‍♂️ InputHooks.js
 
-    import React, { useState } from "react";
-    import "./styles.css";
+import React, { useState } from "react";
 
-    import { useMutation } from "@apollo/react-hooks";
-    import { ADD_MESSAGE } from "./resolvers";
+import { useMutation } from "@apollo/react-hooks";
+import { ADD_MESSAGE } from "./resolvers";
 
-    export default function Input() {
-      const [message, setMessage] = useState("");
-      const [addMessage] = useMutation(ADD_MESSAGE, {
-        variables: { message }
-      });
+export default function Input() {
+  const [message, setMessage] = useState("");
+  const [addMessage] = useMutation(ADD_MESSAGE, {
+    variables: { message }
+  });
 
-      return (
-        <div className="input-row">
-          <input
-            onChange={(e) => setMessage(e.target.value)}
-            type="text"
-            placeholder="Type something..."
-          />
-          <button onClick={addMessage}>Add</button>
-        </div>
-      );
-    }
+  return (
+    <View className="input-row">
+      <input
+        onChange={(e) => setMessage(e.target.value)}
+        type="text"
+        placeholder="Type something..."
+      />
+      <Button title="Add" onPress={addMessage} />
+    </View>
+  );
+}
 ```
 
 By using the **useQuery hook**, we reduced the amount of code that was needed in order to provide the data to the component.
diff --git a/README.md b/README.md
index 10a6577..3fa4524 100644
--- a/README.md
+++ b/README.md
@@ -2,10 +2,12 @@
 
 ![Alt text](<images/Screenshot 2024-01-01 at 1.32.08 AM.png>)
 
-- This **Guide Book** was written by [**@anisurrahman072**](https://github.com/anisurrahman072) ([🐥 **CONNECT me in X**](https://twitter.com/anis_RNCore))
-- It consists of **12 chapters** & **70+ Advanced Topics** that were written with deep R&D and took 5 months to complete in **2023**. The guide was first published as 12 articles on ([**Medium**](https://medium.com/@anisurrahmanbup)).
+- This **Guide Book** was written by [**Anis**](https://github.com/anisurrahman072) ([🩵 **CONNECT me in X**](https://twitter.com/anis_RNCore))
+- It consists of **12 chapters** & **70+ Topics** that were written with deep R&D and took me **5 months** to complete.
+- The guide was first published as 12 articles on ([**Medium**](https://medium.com/@anisurrahmanbup)).
 - All the Articles were originally based on **RN v0.71**.
-- ### 🙏 If you find this BOOK helpful, please give a STAR ⭐️
+
+### 🩵 If you find this BOOK helpful, please give a STAR 🩵
 
 # Table of Contents (70+ TOPICS)
 
@@ -129,9 +131,14 @@
 
 ### 🟣 [This Book](https://github.com/anisurrahman072/React-Native-Advanced-Guide) - Featured on the Top [RN Radio Podcast](https://reactnativeradio.com/episodes/rnr-285-expo-dominates-the-app-store-and-other-news) - ( by [Jamon](https://twitter.com/jamonholmgren), [Infinite Red](https://twitter.com/infinite_red) )
 
-### 🟣 [RNTL Guide](https://github.com/anisurrahman072/React-Native-Advanced-Guide/blob/master/Testing/RNTL-Component-Testing-ultimate-guide.md) - Endorsed by [Official Doc of RNTL](https://callstack.github.io/react-native-testing-library/docs/community-resources#recommended-content) - ( by [Maciej](https://twitter.com/mdj_dev), [Callstack](https://twitter.com/callstackio) )
+### 🟣 [RNTL Guide](https://github.com/anisurrahman072/React-Native-Advanced-Guide/blob/master/Testing/RNTL-Component-Testing-ultimate-guide.md) - Endorsed by [Official Doc of RNTL](https://callstack.github.io/react-native-testing-library/docs/guides/community-resources) - ( by [Maciej](https://twitter.com/mdj_dev), [Callstack](https://twitter.com/callstackio) )
 
 # Contribution
 
 - If you find any issues in the guidebook, please create a pull request (PR). Your PR will help the community 🚀
 - Also, if you want to add more advanced guides to this repository, I will add you as a core contributor here 🔥
+
+# 🎯 PUBLISHED [RN SDK RELEASES R&D GUIDE](https://github.com/anisurrahman072/React-Native-SDK-Research) 🚀
+
+- I'm doing deep R&D on different RN SDK releases & new features
+- Doing R&D on React Native Skia, React Native Screen, React Native, Expo, many more new features
diff --git a/Testing/RNTL-Component-Testing-ultimate-guide.md b/Testing/RNTL-Component-Testing-ultimate-guide.md
index 570650d..003c084 100644
--- a/Testing/RNTL-Component-Testing-ultimate-guide.md
+++ b/Testing/RNTL-Component-Testing-ultimate-guide.md
@@ -1,12 +1,12 @@
 # React Native — UI Testing (Ultimate Guide)
 
-### A comprehensive guide to React Native Component Testing by RNTL ( [Endorsed by Official Doc of RNTL ⭐️](https://callstack.github.io/react-native-testing-library/docs/community-resources#recommended-content) )
+### A comprehensive guide to React Native Component Testing by RNTL ( [Endorsed by Official Doc of RNTL ⭐️](https://callstack.github.io/react-native-testing-library/docs/guides/community-resources) )
 
 ![](/images/rntl/image.png)
 
 Over the course of a month, I meticulously crafted this comprehensive guide on testing for **React Native** applications. Each code snippet included in this article was initially **_executed successfully_** on my MacBook, ensuring their reliability.
 
-### This guide is endorsed by the [Official Documentation of REACT NATIVE TESTING LIBRARY](https://callstack.github.io/react-native-testing-library/docs/community-resources#recommended-content), so you know it’s reliable and up-to-date.
+### This guide is endorsed by the [Official Documentation of REACT NATIVE TESTING LIBRARY](https://callstack.github.io/react-native-testing-library/docs/guides/community-resources), so you know it’s reliable and up-to-date.
 
 This article serves as an all-encompassing resource on **TESTING**, covering a wide array of topics such as **component testing**, **mocking**, **provider** tests, **fireEvent**, and **waitFor** asynchronous operations, among others. It is designed to equip you with a thorough understanding of testing a **React Native app**, from getting started and setting up configurations, to troubleshooting potential errors.
 
diff --git "a/images/Screenshot 2024-01-01 at 1.32.08\342\200\257AM.png" "b/images/Screenshot 2024-01-01 at 1.32.08\342\200\257AM.png"
index 99bca1a..233d283 100644
Binary files "a/images/Screenshot 2024-01-01 at 1.32.08\342\200\257AM.png" and "b/images/Screenshot 2024-01-01 at 1.32.08\342\200\257AM.png" differ
diff --git a/images/hoc.png b/images/hoc.png
index 911f5df..04e812e 100644
Binary files a/images/hoc.png and b/images/hoc.png differ
diff --git a/images/rntl/image-1.png b/images/rntl/image-1.png
index 9766efe..3eab0bf 100644
Binary files a/images/rntl/image-1.png and b/images/rntl/image-1.png differ
diff --git a/images/rntl/image-10.png b/images/rntl/image-10.png
index 76bf62b..7861c04 100644
Binary files a/images/rntl/image-10.png and b/images/rntl/image-10.png differ
diff --git a/images/rntl/image-11.png b/images/rntl/image-11.png
index fcb9b4a..702d05a 100644
Binary files a/images/rntl/image-11.png and b/images/rntl/image-11.png differ
diff --git a/images/rntl/image-12.png b/images/rntl/image-12.png
index b426e4f..74cd916 100644
Binary files a/images/rntl/image-12.png and b/images/rntl/image-12.png differ
diff --git a/images/rntl/image-13.png b/images/rntl/image-13.png
index 5176d45..2425303 100644
Binary files a/images/rntl/image-13.png and b/images/rntl/image-13.png differ
diff --git a/images/rntl/image-14.png b/images/rntl/image-14.png
index fdd378e..5495a8f 100644
Binary files a/images/rntl/image-14.png and b/images/rntl/image-14.png differ
diff --git a/images/rntl/image-15.png b/images/rntl/image-15.png
index 5a820ce..4c9473d 100644
Binary files a/images/rntl/image-15.png and b/images/rntl/image-15.png differ
diff --git a/images/rntl/image-16.png b/images/rntl/image-16.png
index d2849bb..8907dd4 100644
Binary files a/images/rntl/image-16.png and b/images/rntl/image-16.png differ
diff --git a/images/rntl/image-17.png b/images/rntl/image-17.png
index 3be3f2d..b0f05f8 100644
Binary files a/images/rntl/image-17.png and b/images/rntl/image-17.png differ
diff --git a/images/rntl/image-18.png b/images/rntl/image-18.png
index 3f09dd7..e37417d 100644
Binary files a/images/rntl/image-18.png and b/images/rntl/image-18.png differ
diff --git a/images/rntl/image-19.png b/images/rntl/image-19.png
index 7b5bf51..f82e082 100644
Binary files a/images/rntl/image-19.png and b/images/rntl/image-19.png differ
diff --git a/images/rntl/image-2.png b/images/rntl/image-2.png
index 3302f90..6b6a5e6 100644
Binary files a/images/rntl/image-2.png and b/images/rntl/image-2.png differ
diff --git a/images/rntl/image-20.png b/images/rntl/image-20.png
index 0444fff..20b6ec9 100644
Binary files a/images/rntl/image-20.png and b/images/rntl/image-20.png differ
diff --git a/images/rntl/image-21.png b/images/rntl/image-21.png
index 0b871d1..7d1aef8 100644
Binary files a/images/rntl/image-21.png and b/images/rntl/image-21.png differ
diff --git a/images/rntl/image-22.png b/images/rntl/image-22.png
index d831de1..8fac93c 100644
Binary files a/images/rntl/image-22.png and b/images/rntl/image-22.png differ
diff --git a/images/rntl/image-23.png b/images/rntl/image-23.png
index 2633f3d..496a0e1 100644
Binary files a/images/rntl/image-23.png and b/images/rntl/image-23.png differ
diff --git a/images/rntl/image-24.png b/images/rntl/image-24.png
index 15300b6..6d5986e 100644
Binary files a/images/rntl/image-24.png and b/images/rntl/image-24.png differ
diff --git a/images/rntl/image-25.png b/images/rntl/image-25.png
index b1f9440..fb56c52 100644
Binary files a/images/rntl/image-25.png and b/images/rntl/image-25.png differ
diff --git a/images/rntl/image-26.png b/images/rntl/image-26.png
index 3504ec4..92ffadd 100644
Binary files a/images/rntl/image-26.png and b/images/rntl/image-26.png differ
diff --git a/images/rntl/image-27.png b/images/rntl/image-27.png
index e85ce21..87b9935 100644
Binary files a/images/rntl/image-27.png and b/images/rntl/image-27.png differ
diff --git a/images/rntl/image-28.png b/images/rntl/image-28.png
index 060e0fb..038d6a7 100644
Binary files a/images/rntl/image-28.png and b/images/rntl/image-28.png differ
diff --git a/images/rntl/image-29.png b/images/rntl/image-29.png
index dd5f481..6395dc7 100644
Binary files a/images/rntl/image-29.png and b/images/rntl/image-29.png differ
diff --git a/images/rntl/image-3.png b/images/rntl/image-3.png
index e13a73c..c3ae4c6 100644
Binary files a/images/rntl/image-3.png and b/images/rntl/image-3.png differ
diff --git a/images/rntl/image-30.png b/images/rntl/image-30.png
index c6a348d..6d3f30c 100644
Binary files a/images/rntl/image-30.png and b/images/rntl/image-30.png differ
diff --git a/images/rntl/image-31.png b/images/rntl/image-31.png
index 1fa3c2f..21e1272 100644
Binary files a/images/rntl/image-31.png and b/images/rntl/image-31.png differ
diff --git a/images/rntl/image-32.png b/images/rntl/image-32.png
index 0900745..f36b5ce 100644
Binary files a/images/rntl/image-32.png and b/images/rntl/image-32.png differ
diff --git a/images/rntl/image-33.png b/images/rntl/image-33.png
index 89aaec2..2fd5103 100644
Binary files a/images/rntl/image-33.png and b/images/rntl/image-33.png differ
diff --git a/images/rntl/image-34.png b/images/rntl/image-34.png
index f05b92f..877a8bc 100644
Binary files a/images/rntl/image-34.png and b/images/rntl/image-34.png differ
diff --git a/images/rntl/image-35.png b/images/rntl/image-35.png
index d5c21d5..e9ff379 100644
Binary files a/images/rntl/image-35.png and b/images/rntl/image-35.png differ
diff --git a/images/rntl/image-36.png b/images/rntl/image-36.png
index ca40a38..e35e781 100644
Binary files a/images/rntl/image-36.png and b/images/rntl/image-36.png differ
diff --git a/images/rntl/image-37.png b/images/rntl/image-37.png
index 8464c69..1fe7229 100644
Binary files a/images/rntl/image-37.png and b/images/rntl/image-37.png differ
diff --git a/images/rntl/image-38.png b/images/rntl/image-38.png
index 74073a1..065069a 100644
Binary files a/images/rntl/image-38.png and b/images/rntl/image-38.png differ
diff --git a/images/rntl/image-39.png b/images/rntl/image-39.png
index 8af0d28..49ede07 100644
Binary files a/images/rntl/image-39.png and b/images/rntl/image-39.png differ
diff --git a/images/rntl/image-4.png b/images/rntl/image-4.png
index ffd03d5..85862d8 100644
Binary files a/images/rntl/image-4.png and b/images/rntl/image-4.png differ
diff --git a/images/rntl/image-40.png b/images/rntl/image-40.png
index 1c60f1d..f48ffdf 100644
Binary files a/images/rntl/image-40.png and b/images/rntl/image-40.png differ
diff --git a/images/rntl/image-41.png b/images/rntl/image-41.png
index de3d2b5..b1f74d4 100644
Binary files a/images/rntl/image-41.png and b/images/rntl/image-41.png differ
diff --git a/images/rntl/image-42.png b/images/rntl/image-42.png
index 22d829e..9e3ac13 100644
Binary files a/images/rntl/image-42.png and b/images/rntl/image-42.png differ
diff --git a/images/rntl/image-5.png b/images/rntl/image-5.png
index 396c22a..c1deb22 100644
Binary files a/images/rntl/image-5.png and b/images/rntl/image-5.png differ
diff --git a/images/rntl/image-6.png b/images/rntl/image-6.png
index 94255d5..687ee00 100644
Binary files a/images/rntl/image-6.png and b/images/rntl/image-6.png differ
diff --git a/images/rntl/image-7.png b/images/rntl/image-7.png
index f7b628a..0c38370 100644
Binary files a/images/rntl/image-7.png and b/images/rntl/image-7.png differ
diff --git a/images/rntl/image-8.png b/images/rntl/image-8.png
index a957d01..4d91f10 100644
Binary files a/images/rntl/image-8.png and b/images/rntl/image-8.png differ
diff --git a/images/rntl/image-9.png b/images/rntl/image-9.png
index 790c278..9492ece 100644
Binary files a/images/rntl/image-9.png and b/images/rntl/image-9.png differ
diff --git a/images/rntl/image.png b/images/rntl/image.png
index de277e8..13b1ac3 100644
Binary files a/images/rntl/image.png and b/images/rntl/image.png differ