TypeScript Example

This app has been made using:

• Expo
• React Query
• Typescript
• Magnus UI
• Eslint
• Eslint Rules by W. Candillon
• Env variables
• Auto to manage semver and auto publishing

how to run

navigate to the root folder of this project, checkout the correct branch, and:

yarn

OR

npm install

Env variables ⚠️

Create a new environment file with the following content before running this application:

GIPHY_API_URL=https://api.giphy.com/v1/gifs
GIPHY_API_TOKEN=xxxZZZYYYAAABBBCCCdddEEEfffGGGhhh

run scripts

iOS

yarn ios

OR

npm run ios

Android

yarn android

OR

npm run android

start all

yarn start

OR

npm run start

Improvements

• Unit tests
• Data tests
• Extracting more code into smaller chunks of components
• More custom hooks
• Web adaptation (Expo Universal App - Web | iOS | Android)

npx create-react-native-app -t with-typescript

TypeScript is a superset of JavaScript which gives you static types and powerful tooling in Visual Studio Code including autocompletion and useful inline warnings for type errors.

🚀 How to use

Creating a new project

• Install the CLI: npm i -g expo-cli
• Create a project: npx create-react-native-app -t with-typescript
• cd into the project

Adding TypeScript to existing projects

• Create a blank TypeScript config: touch tsconfig.json
• Run yarn start or npm run start to automatically configure TypeScript
• Rename files to TypeScript, .tsx for React components and .ts for plain typescript files

💡 You can disable the TypeScript setup in Expo CLI with the environment variable EXPO_NO_TYPESCRIPT_SETUP=1 expo start

📝 Notes

• Expo TypeScript guide