Create expo app typescript

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

3DJakob/expo-typescript-get-started-guide

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Expo Typescript get started guide

This guide will help you get started building mobile applications using expo and typescript in React Native.

Expo is a platform for building mobile applications that allow developers to quickly create native apps for both Android and iOS using a single codebase. It provides a set of tools, libraries, and services that allow developers to build and deploy their mobile applications with ease.

While Expo is built on top of the popular JavaScript framework React Native, it adds many ease-of-use features such as removing the requirement for Xcode or android studio and their respective files.

Expo also includes a suite of developer tools, such as a command-line interface (CLI) and a browser-based console, that makes it easy to build, test, and deploy mobile applications.

Overall, Expo is a useful platform for developers looking to build native mobile applications with minimal setup and effort. It allows developers to focus on building their apps without worrying about the underlying platform-specific details.

TypeScript is a programming language that is a strict syntactical superset of JavaScript, meaning that any valid JavaScript code is also valid TypeScript code. TypeScript was developed and is maintained by Microsoft.

One of the main features of TypeScript is its support for type annotations, which allow developers to specify the data types of variables, function parameters, and return values. This helps to catch type-related errors at compile time, rather than runtime and can make it easier to understand and maintain large codebases.

Here is an example of with and without typescript.

function helloWorld ()  return 'Hello world' >

function helloWorld(): string  return 'Hello World' >

Using typescript subsequent code can understand that helloWorld returns a string and can provide useful warnings and help when the developer tries to use it as something else.

1. Node.js: You will need to have Node.js and npm (the Node.js package manager) installed on your machine. You can download and install Node.js from the offical website. If you are using a package manager like brew run brew install node
2. You will need a text editor. vscode is free, built on open source and runs everywhere. You can download it from the official website or install it using the brew package manager by running brew install —cask visual-studio-code
3. Download the expo go app on your iOS or Android smartphone. This will be used for running your app during development.

Getting started with expo

1. Install the Expo CLI: The first step is to install the Expo command-line interface (CLI) on your computer. Open a terminal and run the following command:

This will install the Expo CLI globally on your system, allowing you to use it to create and manage Expo projects from the command line.

1. Create a new project: Once the Expo CLI is installed, you can create a new Expo project by running the expo init command and specifying a name for your project. For example:

expo init my-project -t expo-template-blank-typescript

This will create a new directory with the name «my-project» and initialize a new Expo project inside it. The -t flag is used to specify what template to use. The blank typescript template will provide a minimal setup for your app.

1. Install dependencies: Navigate to your project directory ( cd my-project ) and run the following command to install the dependencies for your project:

This will install all the required packages and libraries for your project.

1. Run the project: To start the Expo development server and preview your app, run the following command:

This will open a new window in your browser with the Expo developer console.

1. Preview the app: You can preview your app in the Expo client app on your device by scanning the QR code displayed in the browser window with the Expo app (android) or regular camera app (iOS). You can also use an emulator to preview the app.

Now you have your development environment set up and you should see your application in the Expo client app.

Optional add ts-standard linter

To enforce correct typings on everything as well as some defined style rules ts-standard can be used.

Install ts-standard by running

Then install the standard plugin for vscode by clicking the extension’s icon in the bar on the left (the one with 4 blocks).

Then search for standard and install the plugin StandardJS — JavaScript Standard Style

Once installed press the cogwheel and go to extension settings.

Here you can change the engine to ts-standard and enable auto fix on save .

To enable the module the first time you might need to restart vscode. You can do this by pressing cmd + shift + p and typing reload selecting reload window from the dropdown. Alternatively, you can simply quit and reopen the app.

Going to the App.tsx and saving the file will now automatically fix all auto-fixable problems. Now we only need to add a return type for the app component. This can be done by changing

export default function App ()  

import < ReactElement >from 'react' . export default function App (): ReactElement  

npx create-expo-app --template 

npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript 

yarn add --dev @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript 

  "extends": "@tsconfig/react-native/tsconfig.json" > 

import React from 'react'; import Button, StyleSheet, Text, View> from 'react-native';  export type Props =   name: string;  baseEnthusiasmLevel?: number; >;  const Hello: React.FCProps> = (  name,  baseEnthusiasmLevel = 0, >) =>   const [enthusiasmLevel, setEnthusiasmLevel] = React.useState(  baseEnthusiasmLevel, );  const onIncrement = () => setEnthusiasmLevel(enthusiasmLevel + 1); const onDecrement = () => setEnthusiasmLevel(  enthusiasmLevel > 0 ? enthusiasmLevel - 1 : 0, );  const getExclamationMarks = (numChars: number) =>  numChars > 0 ? Array(numChars + 1).join('!') : '';  return ( View style=styles.container>> Text style=styles.greeting>>  Hello name> getExclamationMarks(enthusiasmLevel)> Text> View> Button title="Increase enthusiasm" accessibilityLabel="increment" onPress=onIncrement> color="blue" /> Button title="Decrease enthusiasm" accessibilityLabel="decrement" onPress=onDecrement> color="red" /> View> View> ); >;  const styles = StyleSheet.create(  container:   flex: 1,  alignItems: 'center',  justifyContent: 'center', >,  greeting:   fontSize: 20,  fontWeight: 'bold',  margin: 16, >, >);  export default Hello; 

  - "extends": "@tsconfig/react-native/tsconfig.json" + "extends": "@tsconfig/react-native/tsconfig.json", + "compilerOptions":  + "baseUrl": ".", + "paths":  + "*": ["src/*"], + "tests": ["tests/*"], + "@components/*": ["src/components/*"], + >, + > > 

npm install --save-dev babel-plugin-module-resolver