Need help with expo-and-typescript?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

janaagaard75
227 Stars 37 Forks MIT License 575 Commits 0 Opened issues

Description

Showcase of an Expo app written in TypeScript.

Services available

!
?

Need anything else?

Contributors list

# 121,476
iis
React
Markdow...
iOS
465 commits
# 134,646
Homebre...
TeX
TypeScr...
React N...
1 commit
# 254,813
React
Android
React N...
iOS
1 commit
# 732,930
TypeScr...
iOS
Android
Mobile
1 commit
# 573,897
Java
TypeScr...
iOS
Android
1 commit
# 99,871
Less
Sass
koa2
hoc
1 commit
# 732,931
TypeScr...
iOS
Android
Mobile
1 commit
# 404,133
Shell
React
atomic-...
HTML
1 commit

React Native using Expo and Typescript

This is a React Native demo app using the Expo framework and written in TypeScript. It uses the managed workflow.

This repo used to also contain a type definition file for Expo. That work was merged into the

@types/expo
package.

@types/expo
is now deprecated in favor of definition types includes with the
expo
package. TypeScript FTW!

Screen shot

Prerequisites

  • Node.js.
  • Yarn.
  • Optional: XCode, since it includes the iOS Simulator. XCode only runs on Macs.
  • Optional: Android Studio, since it includes the Android Virtual Device Manager.

You don't need to install any global npm packages for this repo.

expo-cli
is included as a dev dependency.

Warnings When Installing Packages

There are a surprising amount of of warnings when installing Node packages, because of peer dependencies not being correct. My guess is that the Expo team has a tough time getting all the added React Native libraries to play well together. This app seems to run fine, so I believe it's safe to ignore the warnings.

Running the App

Start the local server. This will give you a QR code that you can scan using the Expo Client app on your mobile device.

yarn start

If you're on a Mac and have Xcode installed, you can run the app using the iOS Simulator with the following command. I am sure you can do something similar with Android.

yarn ios

Packages

List of the packages that this project uses. I really wish it was possible to write comments in

package.json
.

When upgrading Expo,

expo-cli
will also upgrade the versions of all the package that it knows about. This list naturally includes all the
expo-
packages, but also a few more. Do not change the version numbers of the known packages. Unknown packages may be upgraded. More info in my blog post Upgrade an Expo App.

| Package Name | Known? | Notes | | -------------------------------- | ------ | ------------------------------------------------ | | @react-navigation/native | | Used to navigate between screens. | | @react-navigation/stack | | Used to navigate between screens. | | expo | Known | | | expo-analytics-amplitude | Known | Used by AmplitudeScreen. | | expo-apple-authentication | Known | Used by AppleAuthenticationScreen. | | expo-asset | Known | Used by AssetsScreen. | | expo-av | Known | Used by AudioScreen. | | expo-barcode-scanner | Known | Used by BarCodeScannerScreen. | | expo-blur | Known | Used by BlurScreen. | | expo-camera | Known | Used by CameraScreen. | | expo-constants | Known | Used by the constants screens. | | expo-facebook | Known | Used by FacebookScreen. | | expo-font | Known | Used by FontScreen. | | expo-linear-gradient | Known | Used by LinearGradientScreen. | | expo-local-authentication | Known | Used by LocalAuthenticationScreen. | | expo-sensors | Known | Used by accelerometer and gyroscope. | | react | Known | | | react-native | Known | | | react-native-gesture-handler | Known | TODO: Where is this used? | | react-native-maps | Known | Used by MapsViewScreen. | | react-native-reanimated | Known | TODO: Where is this used? | | react-native-safe-area-context | Known | Use by react-navigation. | | react-native-screens | Known | Used by react-navigation. | | react-native-svg | Known | Used by SvgScreen. | | @babel/core | Known | Peer dependency. | | @types/react | Known | | | @types/react-native | Known | | | @typescript-eslint/eslint-plugin | | Add TypeScript support to ESLint. | | @typescript-eslint/parser | | Add TypeScript support to ESLint. | | babel-preset-expo | Known | Configure Babel for Expo. | | eslint | | Linter. | | eslint-config-prettier | | Prettier rules for ESLint. | | eslint-plugin-prettier | | Run prettier through ESLint. TODO: Is this used? | | eslint-plugin-react | | React rules for ESLint. | | expo-cli | | Ensure everybody has the same version. | | prettier | | File formatter. | | typescript | Known | |

Troubleshooting

If you have issues running the app it may help clearing the React Native packager cache. Use the command

yarn expo start --clear
to do this.

More tips found in this thread on the Expo Forum.

Automated Tests

This project hasn't been set up with automated tests. The blog post [setting up tests for React-Native-Expo-Typescript] can probably help.

Similar Projects

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.