Giter Club home page Giter Club logo

expo-and-typescript's Introduction

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
@babel/core Known Peer dependency.
@react-navigation/native Used to navigate between screens.
@react-navigation/stack Used to navigate between screens.
@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 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-cli Ensure everybody has the same version.
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.
prettier File formatter.
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.
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

expo-and-typescript's People

Contributors

dependabot[bot] avatar elawhatson avatar janaagaard75 avatar jtmthf avatar mrtry avatar mui-x avatar pavelpz avatar somecatdad avatar sscotth avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

expo-and-typescript's Issues

check-types: should I pass a watch flag?

Hello!

Thank you for the incredible project. Should I be passing in --watch flag for check-types if I want to constantly be running this in my terminal?

I don't use vscode and I'm new to typescript, but would like to give this all shot. Please let me know what you think is best

expo.d.ts status

A search for Expo typings led me here. What is the status of your expo typings? How can I help?

No errors being displayed in VS Code

Just cloned the repo, and no matter what I do, it doesn't display any errors at all. Extension TSLint is installed. Other react projects work just fine.

image

Typescript module alias config ?

Hi,

I would like to config module alias, can you provide an example? how to do it with expo & typescript?

Thanks,
Diego

I tried changing the tsconfig.json as.

"baseUrl": "src",
"paths": {
"@models/": ["models/"],
"@components/": ["components/"],
"@plugins/": ["plugins/"],
}

Project doesn't load

Unable to resolve ./src/App" from ".//App.js:`

This above is what I get after migrating to TS. My App.js is copy/paste from here. App.tsx moved under src/. Sometimes I get a blank screen with no errors. As if it's not loading App from src.

Additionally, I get these warnings from expo:

Complete blocker for now. Tho, TS is worth the hassle.

P.S. I can upload it to github, so you can check it out

App is not running.

Please put the exact steps to run the project. I am not able to run the project in the simulator. It was showing error when I type

yarn run ios
yarn run v1.3.2
error Command "ios" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

How can I use javascript with hybrid environment?

I already have an Expo project, but when I import a JS file as absolute path, I get error like this:

// shared/something.js
import something from `shared/something`;

// error: unable to resolve module ...

TSLint Airbnb

Is there any way of integration with Airbnb TS Styleguide?

Issue loading the project for first time.

Hi @janaagaard75 ,

I'm trying to load the project for first time in Android device as I use to do with other projects but I got this issues that I want let you know. I don' t know if it's just me of something related with the last updates of the project & expo version.

Screen Shot 2020-01-06 at 14 01 49

Regards,
Diego

clarify hot reloading

the readme states "Hot reloading and debugging of TypeScript files works, but hot module replacement does not work." the two things, at least as I see them, are equivalent, so the question of whether hot reload work remains unanswered. Thanks.

Logo proposal

hello @janaagaard75 , I want to make a logotype for your project, what do you think? your project is cool, but I think it may need a new face, so if you agree with this I can start with sketches. this is absolutely free and no compromises at all.๐Ÿ˜ƒ

you can tell me what are your preferences and/or the colors that you want to have the logotype. regards.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.