When working with Expo and React Native in TypeScript, VS code IntelliSense recommends using 'react-native/types' instead of just 'react-native'

My React Native TypeScript setup is showing react-native/types instead of react-native in IntelliSense. How can I fix this issue?

I initialized my project using 

npx create-expo-app MyApp --template Typescript
.

Here is my tsconfig.json configuration.

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "jsx": "react"
  },
  "exclude": ["node_modules"]
}

I have already added @types/react-native as a dev dependency. Below is my package.json file.

"dependencies": {
    "expo": "~48.0.10",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-native": "0.71.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.0.14",
    "@types/react-native": "^0.71.5",
    "typescript": "^4.9.4"
  },
typescriptreact-nativevisual-studio-codeexpointellisense

Answer №1

This configuration is my go-to for any project. Give it a shot!

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"],
  "jsx": "react-jsx",
  "baseUrl": "."
}

Answer №2

Give this line a shot in your tsconfig.json file and see if it helps:

"types": ["react", "react-native"]

Check out my tsconfig.json file below:

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "types": ["react", "react-native"]
  }
}

Also, take a look at my package.json file for reference:

{
  "name": "name",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "expo": "~48.0.18",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-native": "0.71.8",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.0.14",
    "@types/react-native": "^0.72.2",
    "typescript": "^4.9.4"
  },
  "private": true
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

TS2531: Potentially null object

I am facing an issue in my React-TypeScript project with the following code snippet. Despite having null checks, I am still getting an error "object is possibly null" while running the app. The error specifically occurs in the last part of the if conditio ...

reactjstypescriptreact-typescript

Identifying the specific type within a union of types using a discriminator

How can I specify the correct typing for the action argument in the function withoutSwitchReducer as shown below? enum ActionTypesEnum { FOO = 'FOO', BAR = 'BAR', } type ActionTypes = { type: ActionTypesEnum.FOO, paylo ...

typescripttypescript2.0typescript3.0

Getting the readonly-item type from an array in TypeScript: A step-by-step guide

Is it possible to create a readonly item array from a constant array? const const basicValueTypes = [{ value: 'number', label: 'Number' },{ value: 'boolean', label: 'Boolean' }]; type ReadonlyItemArray = ??? ...

typescripttypescript-generics

Buttons for camera actions are superimposed on top of the preview of the capacitor camera

I am currently using the Capacitor CameraPreview Library to access the camera functions of the device. However, I have encountered a strange issue where the camera buttons overlap with the preview when exporting to an android device. This issue seems to on ...

angulartypescriptandroid-studioionic-frameworkcapacitor

Issue with Next.js: Router.push not causing page to refresh

I'm currently developing a next.js page called /page/data/[dataId] (this page is accessed when a user clicks on a link from the page /page/data, where I fetch the list of items through an API). When a user clicks on a button, I make an API call to de ...

reactjstypescriptnext.jsnext-router

Formatting numbers in Angular 2 to include a space every three zeros in a money amount

Let's say I have the number 30000 and I want to format it as 30 000. What method should I use to achieve this? Here are more examples: 300000 -> 300 000, 3000000 -> 3 000 000. Just to clarify, this is not about using dots or commas, but rathe ...

javascriptangulartypescriptinternationalization

The current Angular 11 build seems to lack in producing sufficient Lazy chunk files

Currently, I am working on implementing lazy loading for modules from different libraries in my project. This involves utilizing two libraries located in the node_modules directory, which are then lazily loaded by the main application. Below is a snippet o ...

angulartypescriptlazy-loadingangular-library

What is the solution for addressing 42 vulnerabilities: 3 considered low severity, 15 moderate, and 24 deemed as high

My Configuration Details: Environment and Versions: nodeJS: v14.18.1 npm: 8.1.1 expo-cli: 4.12.10 OS: MacOS Big Sur 11.6 Contents of my package.json: { "main": "node_modules/expo/AppEntry.js", "scripts": { "star ...

node.jsreact-nativenpmexpo

Exploring the capabilities of UIGrid in conjunction with TypeScript DefinitelyTyped has been a

I've noticed that the latest release of UI Grid (RC3) has undergone significant architectural changes compared to nggrid. I am encountering some problems with the definitelytyped files for nggrid because they are from a different version. Will there ...

angularjstypescriptng-griddefinitelytyped

Challenges with Type Casting in TypeScript

Upon reviewing a specific piece of code, I noticed that it is not producing any compile time or run time errors even though it should: message: string // this variable is of type string -- Line 1 <br> abc: somedatatype // lets assume abc is of some ...

typescript

Insert a new item into the array located within an Observable entity

In my angular application, I have a page where I am showcasing an object that contains an array of comments within it. This object is loaded into my class as an Observable and then displayed in the HTML using: <div class="container-fluid mt--7" ...

angulartypescriptobservable

Is it possible to customize the default typography settings for Textfields and other components using a theme in Material UI v5?

Is there a method to customize the default typography for TextField and all inputs using themes? I am aware of this approach: components: { MuiInput: { styleOverrides: { root: { fontSize: '16px', ...

reactjstypescriptmaterial-ui

Unsynchronized state of affairs in the context of Angular navigation

Within my Angular project, I am currently relying on an asynchronous function called foo(): Promise<boolean>. Depending on the result of this function, I need to decide whether to display component Foo or Bar. Considering my specific need, what woul ...

javascriptangulartypescriptangular-ui-routerangular-router

Encountering a problem when utilizing webview in react native due to an error with the evaluation of

While utilizing webview for trading charts, I am encountering an issue where a warning is displayed and the URL fails to load. Below is the code snippet used for loading. It seems like the video URI works fine in full screen mode, but other URIs are not ...

javascriptreactjsreact-nativewebviewwkwebview

UI not reflecting updated form validation after changes made

Currently, I have a situation where I am passing a form from the Parent component to the Child component. All the validations are being handled in the Parent component and the Child component is simply rendering it. However, there is a specific field calle ...

angulartypescriptformsangular8angular-reactive-forms

Resolving the Duplicate Identifier Issue in Ionic 2 with Firebase Integration

I'm struggling with setting up ionic2 + Firebase 3. Following a tutorial, I installed Firebase and Typings using the commands below: npm install firebase --save npm install -g typings typings install --save firebase However, when I try to run ioni ...

typescriptfirebaseionic2typescript-typings

The 'xxx' type is lacking various properties compared to the 'xxx[]' type, such as length, pop, push, concat, and many others

Utilizing typescript and reactjs, the issue lies within this component import type { InputProps } from "../utils/types" const Input = (props: InputProps) => { const makeChildren = () => { return ( <> ...

javascriptreactjstypescript

Instructions for activating the "Navigate to Declaration" feature in TypeScript for JSON files using i18next

Currently, I am actively engaged in a project that involves the use of i18next with react and typescript. In this project, translation keys are defined within .json files. However, a notable drawback of transitioning to json for the translation files is l ...

jsontypescriptintellij-ideafindi18next

The TypeScript compiler does not make assumptions about variable types within an if statement

I'm currently tackling the challenge named 'Merge Two Binary Tree' on leetcode with TypeScript. My solution is passing the tests successfully, but the compiler is throwing an error that says: https://i.sstatic.net/KZYmJ.png What's puz ...

typescriptif-statementcompiler-errors

How to handle an already initialised array in Angular?

I came across an interesting demo on exporting data to Excel using Angular 12. The demo can be found at the following link: This particular example utilizes an array within the component TypeScript file. import { Component } from '@angular/core' ...

angulartypescriptweb