{"id":11663,"date":"2023-11-30T20:18:36","date_gmt":"2023-11-30T20:18:36","guid":{"rendered":"https:\/\/cheesecakelabs.com\/blog\/"},"modified":"2023-11-30T20:25:41","modified_gmt":"2023-11-30T20:25:41","slug":"react-native-app-typescript","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/","title":{"rendered":"How to Create a React Native App Using Typescript"},"content":{"rendered":"\n<p>At Cheesecake Labs, we recognize that business requirements, budget constraints, and set timelines inherently drive application development. These factors provide the essential backdrop for the development of value in applications.<\/p>\n\n\n\n<p>Whether you\u2019re dealing with an <a href=\"https:\/\/cheesecakelabs.com\/blog\/mvp-meaning\/\">MVP<\/a> or an app with mature business rules, we know how important it is to have a structured approach from the start.<\/p>\n\n\n\n<p>This structure is built based on principles of evolutionary architecture, optimizing team productivity, adhering to robust standards to ensure code quality, and is highly flexible to facilitate technological evolution and scalability. This approach drives efficient project delivery <em>and<\/em> sustains continuous evolution and maturity of business rules over time.<\/p>\n\n\n\n<p>One of the ways we make this happen is by building <a href=\"https:\/\/cheesecakelabs.com\/blog\/native-vs-cross-platform-development\/#Developing-with-native-languages-vs.-native-cross-platform-development\" target=\"_blank\" rel=\"noreferrer noopener\">cross-platform mobile apps<\/a> using tools like React Native and TypeScript. Let\u2019s get into the details.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>In this article<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#What-is-React-Native?\">What is React Native?<\/a><\/li>\n\n\n\n<li><a href=\"#What-is-TypeScript?\">What is TypeScript?<\/a><\/li>\n\n\n\n<li><a href=\"#Why-build-a-React-Native-app-with-TypeScript?\">Why build a React Native app with TypeScript?<\/a><\/li>\n\n\n\n<li><a href=\"#The-philosophy-behind-the-code\">The philosophy behind the code<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#Architecture\">Architecture<\/a><\/li>\n\n\n\n<li><a href=\"#Components\">Components<\/a><\/li>\n\n\n\n<li><a href=\"#Application\">Application<\/a><\/li>\n\n\n\n<li><a href=\"#Testing\">Testing<\/a><\/li>\n\n\n\n<li><a href=\"#Pipeline-CI\/CD\">Pipeline CI\/CD<\/a><\/li>\n\n\n\n<li><a href=\"#A-jumping-off-point-for-further-customization\">A jumping-off point for further customization<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#Learn-more-about-how-we-build-apps-at-Cheesecake-Labs\">Learn more about how we build apps at Cheesecake Labs<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"What-is-React-Native?\"><strong>What is React Native?<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/reactnative.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">React Native<\/a> is a JavaScript framework you can use to <a href=\"https:\/\/cheesecakelabs.com\/blog\/how-to-build-an-app\/\" target=\"_blank\" rel=\"noreferrer noopener\">build mobile apps<\/a> on multiple platforms using the same base code. That means you can create web applications that also work natively as iOS apps and Android apps.&nbsp;<\/p>\n\n\n\n<p>React Native is based on <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">React<\/a>, a JavaScript framework Meta developed to build user interfaces. Because <a href=\"https:\/\/cheesecakelabs.com\/blog\/react-native-examples-innovative-brands\/\" target=\"_blank\" rel=\"noreferrer noopener\">React Native<\/a> is based on React and JavaScript, it\u2019s a great option for web developers looking to dive into <a href=\"https:\/\/cheesecakelabs.com\/blog\/mobile-application-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">mobile application development.&nbsp;<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"What-is-TypeScript?\"><strong>What is TypeScript?<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/www.typescriptlang.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">TypeScript<\/a> is an open-source programming language created by Microsoft. It is a superset of JavaScript meant to add more features and functionality for using JavaScript at scale. TypeScript adds syntax to JavaScript, letting developers add type definitions to data in their code.&nbsp;<\/p>\n\n\n\n<p>These clearly defined types make developing larger-scale apps easier in a few important ways:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Documentation:<\/strong> TypeScript automatically builds documentation for your code by letting you specify types.&nbsp;<\/li>\n\n\n\n<li><strong>Better debugging:<\/strong> TypeScript can check if your code works before execution, making it easier to spot errors.<\/li>\n<\/ul>\n\n\n\n<p>Essentially, TypeScript helps fill in JavaScript\u2019s gaps, making it more useful for scaling applications.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Why-build-a-React-Native-app-with-TypeScript?\"><strong>Why build a React Native app with TypeScript?<\/strong><\/h2>\n\n\n\n<p>There are a couple of reasons why putting these two tools together works so well for mobile app development.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/cheesecakelabs.com\/blog\/native-vs-cross-platform-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">Native cross-platform apps:<\/a> <\/strong>React Native lets you create a single codebase that works natively across multiple platforms, including web, iOS, and Android.&nbsp;<\/li>\n\n\n\n<li><strong>Built-in type checking:<\/strong> TypeScript double-checks your <a href=\"https:\/\/cheesecakelabs.com\/blog\/efficient-way-structure-react-native-projects\/\" target=\"_blank\" rel=\"noreferrer noopener\">React Native<\/a> code, helping you ensure you\u2019re using the right types.<\/li>\n\n\n\n<li><strong>Friendlier code:<\/strong> TypeScript makes your code more readable and easier to understand, which is helpful if you\u2019re working with other developers or expect your code to be revisited later.<\/li>\n\n\n\n<li><strong>Changes are easier:<\/strong> Because you have defined types, refactoring is easier if you decide to make changes.<\/li>\n\n\n\n<li><strong>Easier to scale: <\/strong>TypeScript\u2019s defined typing helps you expand projects quickly as needed, letting you create <a href=\"https:\/\/cheesecakelabs.com\/blog\/scalable-applications\/\" target=\"_blank\" rel=\"noreferrer noopener\">scalable applications<\/a> from the start.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>We\u2019ve used React Native and TypeScript to build a starting point for our mobile app development projects. A componentized, Atomic approach to app development lets us speed up development and ensure our clients have robust, scalable applications that can grow with them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"The-philosophy-behind-the-code\"><strong>The philosophy behind the code<\/strong><\/h2>\n\n\n\n<p>We start all our projects with a set structure that we\u2019ve refined through 10 years of tackling challenges at Cheesecake Labs. This approach reflects our accumulated experience and underscores our commitment to delivering technological solutions that exceed expectations and stand out as industry benchmarks.<\/p>\n\n\n\n<p>Here\u2019s what we\u2019ve put together as our standard methodology.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Architecture\"><strong>Architecture<\/strong><\/h3>\n\n\n\n<p>Our methodology for application development is based on <a href=\"https:\/\/atomicdesign.bradfrost.com\/chapter-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Atomic Design<\/a> principles, which involve efficient componentization of visual elements and layered structuring of the architecture. This approach uses interfaces responsible for the entire transport layer.<\/p>\n\n\n\n<p>At the application layer, we use a <strong>Package-by-feature concept<\/strong> to organize modules in an independent and scalable way. In addition, we introduced the <strong>Core layer<\/strong>, centralizing common resources and services throughout the application.<\/p>\n\n\n\n<p>Here is a representation of the ideal structure where our projects begin, providing a solid foundation for continuous development and improvement.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"406\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image2-1200x406.png\" alt=\"structure for react native app \" class=\"wp-image-11666\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image2-1200x406.png 1200w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image2-600x203.png 600w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image2-768x260.png 768w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image2-1536x520.png 1536w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image2-760x257.png 760w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image2.png 1999w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Components\"><strong>Components<\/strong><\/h3>\n\n\n\n<p>We use the concepts of Atoms, Molecules, and Organisms present in Atomic Design. If you want to dive deep into these concepts and how we use them, check out our previous blog post,<em> <\/em><a href=\"https:\/\/cheesecakelabs.com\/blog\/rethinking-atomic-design-react-projects\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Rethinking Atomic Design for React projects<\/em><\/a><em>.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"707\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image4-1200x707.png\" alt=\"components react native app with typescript\" class=\"wp-image-11668\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image4-1200x707.png 1200w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image4-600x354.png 600w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image4-768x452.png 768w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image4-760x448.png 760w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image4.png 1368w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Application\"><strong>Application<\/strong><\/h3>\n\n\n\n<p>In the application layer, we concentrate on modules responsible for all business logic.<\/p>\n\n\n\n<p>We adhere to the Package-by-feature concept, which involves creating independent and self-contained modules. This approach makes the codebase more readable and less prone to errors.<\/p>\n\n\n\n<p>We also use services and repositories to help us distribute responsibilities and achieve better code reusability.<\/p>\n\n\n\n<p>For state management, we employ <a href=\"https:\/\/github.com\/pmndrs\/zustand\" target=\"_blank\" rel=\"noreferrer noopener\">Zustand<\/a>. Due to its lack of boilerplate code, it is a fast and simple tool that enables clean and scalable code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"705\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image1-1200x705.png\" alt=\"application layer react native app typescript\" class=\"wp-image-11670\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image1-1200x705.png 1200w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image1-600x352.png 600w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image1-768x451.png 768w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image1-760x446.png 760w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image1.png 1367w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Testing\"><strong>Testing<\/strong><\/h3>\n\n\n\n<p>For our applications, we run unit tests as standard. This ensures satisfactory coverage of our components and how they render. We can guarantee that the Store facilitates the expected flow for state transitions.&nbsp;<\/p>\n\n\n\n<p>For repositories, we test whether all exceptions are properly handled and if all behaviors align with expectations.<\/p>\n\n\n\n<p>Here\u2019s an example of the tests for the SignIn Store, where a desired sequence in state change is expected.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"709\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image3-1200x709.png\" alt=\"example test for signin store react native app\" class=\"wp-image-11672\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image3-1200x709.png 1200w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image3-600x354.png 600w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image3-768x454.png 768w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image3-760x449.png 760w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/image3.png 1366w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Pipeline-CI\/CD\"><strong>Pipeline CI\/CD<\/strong><\/h3>\n\n\n\n<p>For customizable and flexible deployment processes, we use <a href=\"https:\/\/fastlane.tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">Fastlane<\/a>. This tool automates the creation of builds and the publication of applications in a personalized manner. It stands out for its efficient integration with GitHub actions, streamlining our workflow during continuous development.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"A-jumping-off-point-for-further-customization\"><strong>A jumping-off point for further customization<\/strong><\/h3>\n\n\n\n<p>This structure is our ideal starting point for most cross-platform app projects. It gives us a solid jumping-off point to work from at the outset of a project that we\u2019ll then modify and evolve based on the context of the project. This approach lets us bake scalability into apps from the start and prepare our code for future technological developments.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Learn-more-about-how-we-build-apps-at-Cheesecake-Labs\"><strong>Learn more about how we build apps at Cheesecake Labs<\/strong><\/h2>\n\n\n\n<p>If you found this look behind the curtain at <a href=\"https:\/\/cheesecakelabs.com\/en\/\">Cheesecake Labs<\/a> interesting, you should check out the rest of <a href=\"https:\/\/cheesecakelabs.com\/blog\/\">our blog<\/a> to learn more about our processes and approach to development.<\/p>\n\n\n\n<p>We\u2019ve got lots of posts covering all sorts of topics, including <a href=\"https:\/\/cheesecakelabs.com\/blog\/scalable-systems-django\/\" target=\"_blank\" rel=\"noreferrer noopener\">building scalable systems with Django<\/a>, <a href=\"https:\/\/cheesecakelabs.com\/blog\/market-research-product-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">how we conduct market research<\/a>, and <a href=\"https:\/\/cheesecakelabs.com\/blog\/decision-making-in-business\/\" target=\"_blank\" rel=\"noreferrer noopener\">how product managers can make effective decisions<\/a> \u2014 to name just a few!&nbsp;&nbsp;<\/p>\n\n\n\n<p>And if you\u2019re looking for an experienced partner to help you build robust, scalable applications, <a href=\"https:\/\/cheesecakelabs.com\/en\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\">let\u2019s chat<\/a>! We have the right team, the right skills, and a proven process to help you bring your ideas to life.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>At Cheesecake Labs, we recognize that business requirements, budget constraints, and set timelines inherently drive application development. These factors provide the essential backdrop for the development of value in applications. Whether you\u2019re dealing with an MVP or an app with mature business rules, we know how important it is to have a structured approach from [&hellip;]<\/p>\n","protected":false},"author":81,"featured_media":11675,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[432],"tags":[1237,54,1201],"class_list":["post-11663","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","tag-cross-platform","tag-tag-mobile-app-development","tag-react-native"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Create a React Native App Using Typescript<\/title>\n<meta name=\"description\" content=\"Discover how to create a React Native cross-platform mobile app using Typescript, an open-source programming language created by Microsoft.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a React Native App Using Typescript\" \/>\n<meta property=\"og:description\" content=\"Discover how to create a React Native cross-platform mobile app using Typescript, an open-source programming language created by Microsoft.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/\" \/>\n<meta property=\"og:site_name\" content=\"Cheesecake Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cheesecakelabs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-30T20:18:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-30T20:25:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/react-native-app-typescript-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"860\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Cheesecake Labs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:site\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/\"},\"author\":{\"name\":\"Natam Oliveira\"},\"headline\":\"How to Create a React Native App Using Typescript\",\"datePublished\":\"2023-11-30T20:18:36+00:00\",\"dateModified\":\"2023-11-30T20:25:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/\"},\"wordCount\":1131,\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/react-native-app-typescript-1.jpg\",\"keywords\":[\"cross platform\",\"mobile app development\",\"react native\"],\"articleSection\":[\"Engineering\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/\",\"name\":\"How to Create a React Native App Using Typescript\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/react-native-app-typescript-1.jpg\",\"datePublished\":\"2023-11-30T20:18:36+00:00\",\"dateModified\":\"2023-11-30T20:25:41+00:00\",\"author\":{\"@type\":\"person\",\"name\":\"Natam Oliveira\"},\"description\":\"Discover how to create a React Native cross-platform mobile app using Typescript, an open-source programming language created by Microsoft.\",\"breadcrumb\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/#primaryimage\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/react-native-app-typescript-1.jpg\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/react-native-app-typescript-1.jpg\",\"width\":1920,\"height\":860,\"caption\":\"how to create react native app with typescript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cheesecakelabs.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a React Native App Using Typescript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/\",\"name\":\"Cheesecake Labs\",\"description\":\"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"name\":\"Natam Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2022\/06\/1665394374251.jpeg\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2022\/06\/1665394374251.jpeg\",\"caption\":\"Natam Oliveira\"},\"url\":\"https:\/\/cheesecakelabs.com\/blog\/autor\/natam-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a React Native App Using Typescript","description":"Discover how to create a React Native cross-platform mobile app using Typescript, an open-source programming language created by Microsoft.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a React Native App Using Typescript","og_description":"Discover how to create a React Native cross-platform mobile app using Typescript, an open-source programming language created by Microsoft.","og_url":"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2023-11-30T20:18:36+00:00","article_modified_time":"2023-11-30T20:25:41+00:00","og_image":[{"width":1920,"height":860,"url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/react-native-app-typescript-1.jpg","type":"image\/jpeg"}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Written by":null,"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/#article","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/"},"author":{"name":"Natam Oliveira"},"headline":"How to Create a React Native App Using Typescript","datePublished":"2023-11-30T20:18:36+00:00","dateModified":"2023-11-30T20:25:41+00:00","mainEntityOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/"},"wordCount":1131,"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/react-native-app-typescript-1.jpg","keywords":["cross platform","mobile app development","react native"],"articleSection":["Engineering"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/","url":"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/","name":"How to Create a React Native App Using Typescript","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/#primaryimage"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/react-native-app-typescript-1.jpg","datePublished":"2023-11-30T20:18:36+00:00","dateModified":"2023-11-30T20:25:41+00:00","author":{"@type":"person","name":"Natam Oliveira"},"description":"Discover how to create a React Native cross-platform mobile app using Typescript, an open-source programming language created by Microsoft.","breadcrumb":{"@id":"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/#primaryimage","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/react-native-app-typescript-1.jpg","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2023\/11\/react-native-app-typescript-1.jpg","width":1920,"height":860,"caption":"how to create react native app with typescript"},{"@type":"BreadcrumbList","@id":"https:\/\/cheesecakelabs.com\/blog\/react-native-app-typescript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cheesecakelabs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a React Native App Using Typescript"}]},{"@type":"WebSite","@id":"https:\/\/cheesecakelabs.com\/blog\/#website","url":"https:\/\/cheesecakelabs.com\/blog\/","name":"Cheesecake Labs","description":"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","name":"Natam Oliveira","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2022\/06\/1665394374251.jpeg","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2022\/06\/1665394374251.jpeg","caption":"Natam Oliveira"},"url":"https:\/\/cheesecakelabs.com\/blog\/autor\/natam-2\/"}]}},"_links":{"self":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/11663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=11663"}],"version-history":[{"count":2,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/11663\/revisions"}],"predecessor-version":[{"id":11677,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/11663\/revisions\/11677"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media\/11675"}],"wp:attachment":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=11663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=11663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=11663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}