In this tutorial guide, we will cover how to build React Native apps with Typescript. Using React Native and Typescript will improve code maintainability with static typing, support IDE, decrease runtime errors, and develop an efficient application. <\/p>\n
Typescript is a superset of Javascript that uses static typing, classes, and interfaces and is hence called an Object-Oriented programming language (OOP). Many developers widely use it to minimize errors and check application type. Adding a strict type makes it a more self-expressive code. Due to the strict behavior, sometimes developers find it challenging to work with Typescript in their projects.<\/p>\n
Typescript code can be run on any browser, device, or operating system. Since it is a superset of Javascript, it compiles into JS, and every valid Javascript is a valid Typescript. It also detects bugs at the compile-time, so the chances of getting errors reduce at the runtime. Typescript has a disadvantage over Javascript in that it takes time to complete the code.<\/p>\n
In this tutorial, we will learn about React native app with Typescript<\/strong> and see how can we build a basic quiz application.<\/p>\n Initially, you need to create a React native app by using the below command.<\/p>\n Use the below command to install the dependencies.<\/p>\n Let\u2019s see the purpose of the installed Typescript libraries. <\/p>\n We will require Axios for API calls and the library required for the elements used in code. Run the below command for the same.<\/p>\n We need to configure Typescript for react-native to work. Create a config file named tsconfig.json<\/em> using the tsc<\/mark> command.<\/p>\n Note<\/strong>– To use the tsc command, you need to have Typescript installed globally.<\/em><\/p>\n In order to build your React Native app with Typescript, change App.js<\/em> to App.tsx<\/em>.<\/p>\n Let\u2019s get started with creating components for our application. Our basic Quiz application will consist of the following components- <\/p>\n \u27a1 Quiz.tsx<\/p>\n \u27a1 Headers.tsx Now, we will go through each component file step by step and look into the code.<\/p>\n Explanation:<\/strong><\/p>\n In typescript, we can define what to take and how to take in the component. Here, we have declared an interface named Header, which defines a structure for the props object to access the component. For that, define propsTo, \u2018title\u2019<\/strong> with a specific type \u2018string.\u2019<\/strong> <\/p>\n Here comes the benefit- it gives us some validation when we use this component.<\/p>\n Moreover, we have react native code which shows the text as header title with style defined to it.<\/p>\n In the file Buttons.tsx, we have an interface named Title which holds the structure for props. It changes style according to the correct answer on pressing the button and disables other buttons according to passed props from the parent class.<\/p>\n In this file, we have an interface named Answers which defines an answer, useranswer, having another type interface AnswerObject<\/em> (used in the class Quiz), correctanswer<\/em>, checkanswer<\/em> function. This file shows the multiple options below the question to choose from the prop of the child class. <\/p>\n In this file we have an interface named Question which defines props for QuestionNo and Question.<\/p>\n This is the main screen which is shown on loading. When the screen gets rendered, it sets all the states to the initial phases and calls API to set questions and options to display. When API returns data, the Question and Answers classes are called to render the items with the help of props.<\/p>\n The answers class uses a function called checkanswer, which checks the current reference of the selected answer and checks it with the API\u2019s correct answer. If they match, then the score gets increased by one and proceeds to the next question.<\/p>\n Want to leverage the advanced features of the New React Native Architecture?<\/span> In this file, we have an interface named Question<\/em>, which has a structure to use as props to return the desired options in this Quiz App. It uses the Axios library to fetch details from the API. It returns the result from API, which has questions and answers based on multiple options.<\/p>\n These were the tutorials for React Native with TypeScript. However, if you are still confused about whether to opt for it, you can contact a React Native app development company<\/a>. They will simplify the process and guide you through it. <\/p>\n Also Read: Understanding Flexbox Layout in React Native<\/a><\/p>\n You can visit here – Github Repository<\/a> and play around with code or follow the steps React Native app with Typescript.<\/em><\/p>\nStep-by-step guide on how to create React Native App<\/h2>\n
react-native init QuizApp\r\ncd QuizApp<\/pre>\n
Install Dependencies<\/h2>\n
npm install typescript @types\/react @types\/react-native \r\n@types\/react-test-renderer @types\/jest<\/pre>\n
\n
npm install axios react-native-elements<\/pre>\n
TypeScript Configuration<\/h2>\n
tsc --init<\/pre>\n
Create Components<\/h2>\n
\n
\n \u27a1 Questions.tsx
\n \u27a1 Answers.tsx
\n \u27a1 Buttons.tsx<\/p>\n\/\/ Headers.tsx<\/h3>\n
import React, {FC} from 'react';\r\nimport {SafeAreaView, StyleSheet, Text, StatusBar} from 'react-native';\r\n \r\ninterface Header {\r\n title: string;\r\n}\r\nconst HeaderClass: FCinterface Header {\r\n title: string,\r\n}\r\nconst HeaderClass: FC>\/\/ Buttons.tsx<\/h3>\n
import React, { FC } from 'react';\r\nimport { useEffect } from 'react';\r\nimport { SafeAreaView, StyleSheet, Text, TouchableOpacity} from 'react-native';\r\n \r\ninterface Title {\r\n key: number;\r\n answer: string;\r\n onPress: () = > void;\r\n correct: boolean;\r\n disabled: boolean;\r\n}\r\n \r\nconst Buttons: FC< Title > = props = > {\r\n useEffect(() => {}, []);\r\n return (\r\n < SafeAreaView >\r\n < TouchableOpacity\r\n style={{\r\n backgroundColor: !props.disabled ? '#F5F5DC' : '#F5DEB3',\r\n width: '80%',\r\n elevation: 5,\r\n justifyContent: 'center',\r\n alignContent: 'center',\r\n marginLeft: 27,\r\n height: 38,\r\n marginTop: 10,\r\n }}\r\n onPress={() = > {\r\n props.onPress();\r\n }} >\r\n < Text\r\n style={[\r\n styles.textstyle,\r\n { color: props.correct ? 'brown' : 'black' },\r\n ]} >\r\n {props.answer}\r\n < \/Text >\r\n < \/TouchableOpacity >\r\n < \/SafeAreaView >\r\n );\r\n};\r\n \r\nconst styles = StyleSheet.create \r\n{\r\n textstyle: {\r\n textAlign: 'left',\r\n fontSize: 17,\r\n marginLeft: 8,\r\n },\r\n});\r\n \r\nexport default Buttons;<\/pre>\n\/\/ Answers.tsx<\/h3>\n
import React, {FC} from 'react';\r\nimport { SafeAreaView, StyleSheet, View } from 'react-native';\r\nimport Buttons from '..\/components\/Buttons';\r\nimport { AnswerObject } from '..\/screens\/Quiz';\r\n \r\ninterface Answers {\r\n useranswer: AnswerObject | undefined;\r\n answers: string[];\r\n setcorrectanswer: any;\r\n checkanswer: () = > void;\r\n}\r\n \r\nconst Answers: FC\/\/ Question.tsx<\/h3>\n
import React, {FC} from 'react';\r\nimport { SafeAreaView, StyleSheet, Text, View } from 'react-native';\r\n \r\ninterface Question {\r\n QuestionNo: number;\r\n Question: string;\r\n}\r\n \r\nconst Questions: FC\/\/ Quiz.tsx<\/h3>\n
import React, {FC, useEffect, useRef, useState} from 'react';\r\nimport {\r\n StyleSheet,\r\n Text,\r\n View,\r\n TouchableOpacity,\r\n ActivityIndicator,\r\n} from 'react-native';\r\nimport {getquestiojns, Question} from '..\/utils\/api';\r\nimport Questions from '..\/components\/Question';\r\nimport Answers from '..\/components\/Answers';\r\nimport {Icon} from 'react-native-elements';\r\n \r\nexport type AnswerObject = {\r\n question: string;\r\n answer: string;\r\n correct: boolean;\r\n correctanswer: string;\r\n};\r\n \r\nconst Quiz: FC = props = > {\r\n const [loader, setloader] = useState( false );\r\n const [question, setquestion] = useState
\nHire React Native developer<\/a> from us who will bring the best of React ecosystem<\/a> to outshine your cross-platform mobile application at the top<\/i><\/strong><\/p>\n\/\/ src\/utils\/api.tsx<\/h3>\n
import axios from 'axios';\r\n \r\nexport const _ = (array: any[]) => [...array].sort(() => Math.random() - 0.7);\r\n \r\nexport type Question = {\r\n category: string;\r\n incorrect_answers: string[];\r\n correct_answer: string;\r\n difficulty: string;\r\n question: string;\r\n type: string;\r\n};\r\nexport const getquestiojns = async () = > {\r\n const endpoint = 'https:\/\/opentdb.com\/api.php?amount=10&category=9';\r\n const promise = await axios.get(endpoint);\r\n return promise.data.results.map((question: Question) = > ({\r\n ...question,\r\n answers: _([...question.incorrect_answers, question.correct_answer]),\r\n }));\r\n};<\/pre>\nGithub Repository: React Native App with Typescript <\/h2>\n
Conclusion<\/h2>\n