3. Typescript is a superset of Javascript which
uses static typing, classes, interfaces and is
hence called Object Oriented programming
language (OOP). Many developers widely
use it to minimize errors and for type
checking in applications. Adding a strict
type makes it a more self-expressive code.
Due to the strict behavior, sometimes
developers find it difficult to work with
typescript in their project.
Typescript code can be run on any browser,
device, or operating system. Since
typescript is a superset of Javascript, it
compiles into Javascript, and every valid
Javascript is a valid Typescript. Typescript
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.
4. In this tutorial, we will learn about react
native app with typescript and see how can
we build a basic Quiz application.
8. typescript: To install typescript
@types/react: To install react types for
typescript
@types/react-native: To install React
Native types for typescript
@types/react-test-renderer: To install
types for test-renderer for typescript
@types/jest: To install types for jest
testing for typescript
Use the below command to install the
dependencies.
npm install typescript @types/react
@types/react-native
@types/react-test-renderer @types/jest
Let’s see the purpose of the installed
typescript libraries.
9. We will require Axios for API calls and the
library required for the elements used in
code. Run the below command for the same.
npm install axios react-native-elements
11. We need to configure Typescript for react-
native to work. Create a config file named
tsconfig.json using the tsc command.
tsc --init
Note– To use the tsc command, you need to
have typescript installed globally.
In order to build your react native app with
typescript, change App.js to App.tsx.
13. Screen
Components
API Call
Let’s get started with creating components
for our application. Our basic Quiz
application will consist of the following
components-
➡Quiz.tsx
➡Headers.tsx
➡Questions.tsx
➡Answers.tsx
➡Buttons.tsx
Now, we will go through each component
files step by step and look into the code.
15. textAlign: 'center',
fontSize: 18,
},
});
export default HeaderClass;
Explanation:
interface Header {
title: string,
}
const HeaderClass: FC<Header>=
(props) => {/*content*/}
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,
‘title’ with a specific type ‘string.’
16. Here comes the benefit- it gives us some
validation when we use this component.
Moreover, we have react native code which
shows the text as header title with style
defined to it.
// Buttons.tsx
import React, {FC} from 'react';
import {useEffect} from 'react';
import {SafeAreaView, StyleSheet, Text,
TouchableOpacity} from 'react-native';
interface Title {
key: number;
answer: string;
onPress: () => void;
correct: boolean;
disabled: boolean;
}
19. 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.
// Answers.tsx
import React, {FC} from 'react';
import {SafeAreaView, StyleSheet, View}
from 'react-native';
import Buttons from
'../components/Buttons';
import {AnswerObject} from
'../screens/Quiz';
interface Answers {
useranswer: AnswerObject | undefined;
answers: string[];
setcorrectanswer: any;
checkanswer: () => void;
22. In this file, we have an interface named
Answers which defines an answer,
useranswer, having another type interface
AnswerObject (used in the class Quiz),
correctanswer, checkanswer function. This
file shows the multiple options below the
question to choose from the prop of the
child class.
// Question.tsx
import React, {FC} from 'react';
import {SafeAreaView, StyleSheet, Text,
View} from 'react-native';
interface Question {
QuestionNo: number;
Question: string;
}
const Questions: FC<Question> = props => {
return (
<SafeAreaView>
24. marginTop: 10,
paddingRight: 16,
},
textstyle: {padding: 15, fontSize: 15, color:
'blue'},
});
export default Questions;
In this file we have an interface named
Question which defines props for
QuestionNo and Question.
25. // Quiz.tsx
import React, {FC, useEffect, useRef,
useState} from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
ActivityIndicator,
} from 'react-native';
import {getquestiojns, Question} from
'../utils/api';
import Questions from
'../components/Question';
import Answers from
'../components/Answers';
import {Icon} from 'react-native-elements';
export type AnswerObject = {
question: string;
35. 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.
The answers class uses a function called
checkanswer, which checks the current
reference of the selected answer and checks it
with the API’s correct answer. If they match,
then the score gets increased by one and
proceeds to the next question.
39. You can visit here – Github Repository and
play around with code or follow the steps
mentioned above for developing a React
Native app with Typescript.
41. So, this was all about building a basic React
Native App with Typescript. A simple Quiz
application flow to better understand how
typescript works in react native. I hope
your purpose for landing on this tutorial
has been fulfilled. For more such tutorials,
feel free to visit the React Native tutorials
page. We have step-by-step guidelines
comprising basic and advanced React
Native knowledge; we also provide source
code to explore on your own.
In case you are looking for skilled and
dedicated React Native developers for your
project, please contact us without giving a
second thought and hire React Native
developer.