{"componentChunkName":"component---src-templates-blog-post-jsx","path":"/blogs/learnReactNative-Part2","result":{"data":{"blog":{"frontmatter":{"title":"LEARN REACT NATIVE - PART 2","thumbnail":"blog63","date":"May 6, 2021","dsaCppCodeFile":null},"excerpt":"<div class=\"my-2 p-2\">\n              <h4>Introduction</h4>\n              <div class=\"m-2\">\n                <p>\n                  This blog is part 2 of learning React Native and do check out\n                  the <a href=\"/blogs/learnReactNative-Part1\">Part 1</a> if you\n                  haven't yet. In this blog, will see the topics to cover with\n                  resources to learn and once you learn them then it's more than\n                  enough to build projects. Also if you wish to learn more\n                  advanced concepts then you are good to go after learning\n                  these.\n                </p>\n                <p>\n                  Knowing the basics of\n                  <a href=\"/blogs/learnJavascript\">JavaScript</a> and\n                  <a href=\"/blogs/learnReactJS\">ReactJS</a> is must for getting\n                  into React Native.\n                </p>\n              </div>\n            </div>\n            <div class=\"row my-2 p-2\">\n              <div class=\"col-12\">\n                <p class=\"p-1 lead\">\n                  Let's see what topics you need to cover and my favourite\n                  resources for learning <strong>intermediate</strong> in React\n                  Native.\n                </p>\n              </div>\n              <div class=\"col-md-7 my-1\">\n                <h5>Topics to cover:</h5>\n                <ul class=\"pl-4\">\n                  <li>Async Storage</li>\n                  <li>Using custom fonts</li>\n                  <li>Using vector icons</li>\n                  <li>\n                    React Navigation\n                    <ul class=\"pl-4\">\n                      <li>Stack Navigator, Drawer Navigator & Tab Navigator</li>\n                      <li>useNavigation & useRoute hooks</li>\n                      <li>navigation & route props</li>\n                      <li>Passing params between screens</li>\n                      <li>Options for screens</li>\n                      <li>Authentication Flow</li>\n                    </ul>\n                  </li>\n                </ul>\n                <h6>Some more concepts:</h6>\n                <ul class=\"pl-4\">\n                  <li>Image or File Picker</li>\n                  <li>Adding google maps</li>\n                  <li>Adding social share method</li>\n                  <li>Integrating with Backend - Nodejs, Expressjs, Mongodb or any of your preferred backend stack</li>\n                  <li>Integrating with Firebase</li>\n                  <li>Gestures and Animations</li>\n                </ul>\n              </div>\n              <div class=\"col-md-5 my-1\">\n                <h5>Resource:</h5>\n                <iframe\n                  width=\"100%\"\n                  height=\"200\"\n                  src=\"https://www.youtube.com/embed/videoseries?list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                ></iframe>\n                <iframe\n                  width=\"100%\"\n                  height=\"200\"\n                  src=\"https://www.youtube.com/embed/videoseries?list=PL8kfZyp--gEXs4YsSLtB3KqDtdOFHMjWZ\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                ></iframe>\n                <iframe\n                  width=\"100%\"\n                  height=\"200\"\n                  src=\"https://www.youtube.com/embed/videoseries?list=PLYxzS__5yYQlHANFLwcsSzt3elIbYTG1h\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                ></iframe>\n              </div>\n            </div>\n            <div class=\"my-2 p-2\">\n                <strong>Similar posts:</strong>\n                <a href=\"/blogs/learnReactNative-Part1\"\n                >Basic Topics - Part 1</a\n                > |\n                <a href=\"/blogs/reactNativeProjects-Part1\"\n                >Projects - Part 1</a\n                > |\n                <a href=\"/blogs/reactNativeProjects-Part2\"\n                >Projects - Part 2</a\n                > \n            </div>\n","html":"<div class=\"my-2 p-2\">\n              <h4>Introduction</h4>\n              <div class=\"m-2\">\n                <p>\n                  This blog is part 2 of learning React Native and do check out\n                  the <a href=\"/blogs/learnReactNative-Part1\">Part 1</a> if you\n                  haven't yet. In this blog, will see the topics to cover with\n                  resources to learn and once you learn them then it's more than\n                  enough to build projects. Also if you wish to learn more\n                  advanced concepts then you are good to go after learning\n                  these.\n                </p>\n                <p>\n                  Knowing the basics of\n                  <a href=\"/blogs/learnJavascript\">JavaScript</a> and\n                  <a href=\"/blogs/learnReactJS\">ReactJS</a> is must for getting\n                  into React Native.\n                </p>\n              </div>\n            </div>\n            <div class=\"row my-2 p-2\">\n              <div class=\"col-12\">\n                <p class=\"p-1 lead\">\n                  Let's see what topics you need to cover and my favourite\n                  resources for learning <strong>intermediate</strong> in React\n                  Native.\n                </p>\n              </div>\n              <div class=\"col-md-7 my-1\">\n                <h5>Topics to cover:</h5>\n                <ul class=\"pl-4\">\n                  <li>Async Storage</li>\n                  <li>Using custom fonts</li>\n                  <li>Using vector icons</li>\n                  <li>\n                    React Navigation\n                    <ul class=\"pl-4\">\n                      <li>Stack Navigator, Drawer Navigator & Tab Navigator</li>\n                      <li>useNavigation & useRoute hooks</li>\n                      <li>navigation & route props</li>\n                      <li>Passing params between screens</li>\n                      <li>Options for screens</li>\n                      <li>Authentication Flow</li>\n                    </ul>\n                  </li>\n                </ul>\n                <h6>Some more concepts:</h6>\n                <ul class=\"pl-4\">\n                  <li>Image or File Picker</li>\n                  <li>Adding google maps</li>\n                  <li>Adding social share method</li>\n                  <li>Integrating with Backend - Nodejs, Expressjs, Mongodb or any of your preferred backend stack</li>\n                  <li>Integrating with Firebase</li>\n                  <li>Gestures and Animations</li>\n                </ul>\n              </div>\n              <div class=\"col-md-5 my-1\">\n                <h5>Resource:</h5>\n                <iframe\n                  width=\"100%\"\n                  height=\"200\"\n                  src=\"https://www.youtube.com/embed/videoseries?list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                ></iframe>\n                <iframe\n                  width=\"100%\"\n                  height=\"200\"\n                  src=\"https://www.youtube.com/embed/videoseries?list=PL8kfZyp--gEXs4YsSLtB3KqDtdOFHMjWZ\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                ></iframe>\n                <iframe\n                  width=\"100%\"\n                  height=\"200\"\n                  src=\"https://www.youtube.com/embed/videoseries?list=PLYxzS__5yYQlHANFLwcsSzt3elIbYTG1h\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                ></iframe>\n              </div>\n            </div>\n            <div class=\"my-2 p-2\">\n                <strong>Similar posts:</strong>\n                <a href=\"/blogs/learnReactNative-Part1\"\n                >Basic Topics - Part 1</a\n                > |\n                <a href=\"/blogs/reactNativeProjects-Part1\"\n                >Projects - Part 1</a\n                > |\n                <a href=\"/blogs/reactNativeProjects-Part2\"\n                >Projects - Part 2</a\n                > \n            </div>"},"thumbnail":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M40%202l-7%206c-6%204-7%205-7%2014-1%207-4%2015-9%2020-3%204-12%209-15%209-2%200-2%204-2%2087v87h44l2-4%203-5c-1-3%2010%202%2014%206l2%203h319l-6-14c-9-17-9-19-8-18l1-1c-1-1%205-6%209-7h20v20l1-65c0-91%200-100-3-98l-9%201c-10%200-16-2-23-9-9-8-11-8-19-5-10%205-22%201-28-8-2-4-2-5-2-13V0H42l-2%202m12%2032c-3%202-6%207-6%2012%200%204%203%204%203%200l3-6c4-6%205-6%2038-6%2020%200%2030%200%2029-1l-32-1c-30%200-32%200-35%202m10%202c-6%201-11%206-11%2011%200%202%200%202%2038%202h37v-5c-1-8-1-8-34-9l-30%201m-16%2076c0%2052%200%2059%202%2059l1-59-1-59c-2%200-2%207-2%2059m5-57v116h75V53H51v2m117%2041l-1%209v5l8-1c15%200%2014%200%2014-2s-1-2-4-2c-2%200-3%200-2-1l3-1%202-2-2-2c-4%200-4-2%200-2%203%200%204-1%204-2%200-2-1-2-5-2-7%200-6%200-7%206%200%205%200%206-3%206s-3-1-3-6c-1-8-3-10-4-3m90-3h-5v8c-1%209-1%209%206%208%204%200%205-1%205-2%200-2-1-2-3-2-5%200-5-2-1-2%204-1%204-4%200-4l-3-1%203-1c3%200%204%200%204-2%201-2%201-3-6-2m25%202c-6%206-3%2017%204%2014%203-1%205-5%204-6l-3%201-2%202v-8c0-3%202-2%202%200-1%202-1%202%201%202s3%200%203-2c0-6-5-7-9-3m72%200c-2%207-1%2015%201%2015s2-1%203-8v-7l2%207c1%206%202%208%204%208s2-1%204-7l3-8-2-2c-2-1-2-1-3%203s-3%205-3%201c0-3-1-4-5-4-4-1-4-1-4%202m23-2h-5v17l6-1c4%200%205-1%205-2%200-2-1-2-3-2-5%200-5-2-1-2%204-1%204-4%200-4l-3-1%204-1%204-2c1-2-1-3-7-2m-184%205c-3%208-4%2012-1%2012l3-2%202-2%201%202c2%203%205%203%205-1%200-8-2-13-5-14-2%200-3%201-5%205m12%200a964%20964%200%20001%2012c2%200%202-1%202-2%200-4%201-4%203-1%201%202%203%203%204%201v-6l1-5c0-3-1-4-6-4h-5v5m14-4l-1%208c0%207%200%208%202%208s2%200%202-4v-4l2%204c3%207%205%205%206-5%200-7%200-8-2-8s-2%201-2%203v3l-2-3c-1-3-4-4-5-2m20%207v8c1%202%203%201%203-1%200-4%201-4%203-1%201%202%203%203%204%201v-6l1-5c0-3-1-4-6-4h-5v8m28%200l-2%208h4c1-3%204-3%204-1%200%201%201%202%203%202s2%200%201-9c-2-7-3-8-5-8s-3%201-5%208m46-3c-2%2010-1%2012%201%2012l3-2a442%20442%200%20001-2c2%204%205%205%205%203l1-9c1-7%200-7-1-7-2%200-3%202-3%203l-1%203v-3l-3-3c-2%200-3%201-3%205m16-1l-3%2012c1%202%204%201%204%200%200-3%204-3%204-1%201%203%205%203%205%200l-3-13c0-4-5-3-7%202m11-1c0%202%200%202%202%202%202-1%202-1%202%205s0%207%202%207%202-1%202-6c0-6%200-7%202-7l2-2c0-2-1-2-6-2-6%200-6%200-6%203M51%20180c0%206%202%2010%207%2012%204%202%207%202%2032%202l29-1c4-1%206-5%206-12l1-5-38-1H51v5'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7699115044247788,"src":"/static/eeace25338be409d2dfb9b0cdeb6a2c6/ee604/blog63.png","srcSet":"/static/eeace25338be409d2dfb9b0cdeb6a2c6/69585/blog63.png 200w,\n/static/eeace25338be409d2dfb9b0cdeb6a2c6/497c6/blog63.png 400w,\n/static/eeace25338be409d2dfb9b0cdeb6a2c6/ee604/blog63.png 800w,\n/static/eeace25338be409d2dfb9b0cdeb6a2c6/f3583/blog63.png 1200w,\n/static/eeace25338be409d2dfb9b0cdeb6a2c6/e4d72/blog63.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"pageContext":{"blog":"learnReactNative-Part2","thumbnail":"thumbnails/blog63.png"}},"staticQueryHashes":["2987289216","63159454"]}