All Questions
Tagged with react-native typescript
3,823
questions
150
votes
9
answers
245k
views
How to specify (optional) default props with TypeScript for stateless, functional React components?
I'm trying to create a stateless React component with optional props and defaultProps in Typescript (for a React Native project). This is trivial with vanilla JS, but I'm stumped as to how to achieve ...
- 6,291
132
votes
2
answers
66k
views
import * as React from 'react'; vs import React from 'react';
I've noticed that React can be imported like this:
import * as React from 'react';
...or like this:
import React from 'react';
The first imports everything in the react module (see: Import an ...
- 45k
66
votes
11
answers
70k
views
TypeScript React Native Flatlist: How to give renderItem the correct type of it's item?
I'm building a React Native app with TypeScript. renderItem complains that the destructured item implicitly has an any type. I googled and found this question and tried to implement what they teach ...
- 14.2k
65
votes
13
answers
50k
views
react native typescript 'string' is not assignable to parameter of type 'never.' in useNavigation
[I keep getting the error that says 'string' is not assignable to parameter of type 'never' in react native typescript and I don't know why. Can someone help me fix this bug.
Thank you in advance.
...
- 653
60
votes
8
answers
48k
views
How do I configure absolute paths for imports in TypeScript based React Native apps?
In order to avoid '../../../../' style relative imports in a TypeScript based React Native app, I would like to configure the app so that I can use absolute imports instead.
It is important that the ...
- 3,176
59
votes
14
answers
83k
views
Add strong typing for react navigation props
I'm using typescript in my react-native project(expo).
The project uses react-navigation, so on my screens I can set navigationOptions and I have access to the prop navigation.
Now I'm trying to ...
- 1,266
52
votes
6
answers
65k
views
How to mock React Navigation's navigation prop for unit tests with TypeScript in React Native?
I'm building a React Native app with TypeScript. For my navigation I use React Navigation and for my unit testing I use Jest and Enzyme.
Here is the (stripped down) code for one of my screen (...
- 14.2k
44
votes
8
answers
42k
views
['type aliases' can only be used in a .ts file]
I use command react-native init "name project" then open vscode appear to have error message code. (image)
- 451
42
votes
6
answers
16k
views
'Stack.Navigator' cannot be used as a JSX component
There is a type issue using react navigation, when use Stack.Navigation or Stack.Group from createNativeStackNavigator
The issue saids that the types dont match with JSX.element at the end of the ...
- 643
42
votes
4
answers
70k
views
Typescript optional chaining error: Expression expected.ts(1109)
I am trying to do optional chaining in Typescript + React Native.
Let's say I have the following interfaces:
interface Bar {
y: number
}
interface Foo {
x?: Bar
}
and I try to run the ...
- 2,232
38
votes
6
answers
64k
views
typescript Cannot add headers to a fetch api using react-native
I am using Fetch API from react-native and I am using typescript.
My code looks like this:
let responseLogin = await fetch('http://url_example', {
method: 'POST',
headers: {'Content-...
- 1,464
38
votes
3
answers
33k
views
What is useCallback in React and when to use it?
I have gone through a couple of articles on useCallback and useMemo on when to use and when not to use but I have mostly seen very contrived code. I was looking at a code at my company where I noticed ...
- 11.4k
37
votes
3
answers
35k
views
React native with typescript - how to use the useRoute from @react-navigation/native with typescript
I'm trying to get my incident object from route.params but I don't know how to do it to make typescript recognize this prop.
Here is the function that navigate to my Detail page passing incident to ...
- 373
34
votes
5
answers
17k
views
Sharing a typescript library in a monorepo
I'm trying to setup a monorepo with 3 services sharing some library code.
This is the current situation:
repo: web
pdf/
package.json
reference to shared-ts using github url
tsconfig.json
...
- 5,920
31
votes
7
answers
10k
views
Platform specific import component in react native with typescript
I am using react native with typescript. I have a component with the following structure
component
- component.ios.tsx
- component.android.tsx
Now I want to import the component. So, I am ...
- 2,007
29
votes
1
answer
24k
views
React navigation 5 error Binding element 'navigation' implicitly has an 'any' type.ts
I am new to react-native. I am trying to implement navigation using react-navigation 5. I have two screens Home and profile. These both components have received a navigation prop but typescript is ...
- 2,035
29
votes
4
answers
25k
views
Typescript: onPress type
I just ported my react-native project to typescript and have a question about functions as props
im passing:
<DisplayCardsWithLikes
data={testData}
likes={500}
onPress={() => this.props....
- 340
28
votes
4
answers
26k
views
Could not find a declaration file for module 'styled-components/native'
If you add styled-components to your React Native project, there's a sub-directory for the native components specifically:
import styled from 'styled-components/native`;
export const Container = ...
- 4,815
28
votes
3
answers
89k
views
Type 'Element | undefined' is not assignable to type 'ReactElement<any, string | ((props: any)
I have a component that looks like this. This version works perfectly:
export default function StatusMessage(isAdded: boolean, errorMessage: string) {
if (isAdded) {
return <ResultAlert ...
user13101751
28
votes
6
answers
32k
views
How to properly type useNavigation in React Navigation?
I'm trying to type the useNavigation from React Navigation. I would like to be able to pass only the name of the route, but I get an error unless I also pass props for that route.
Following the ...
- 5,958
28
votes
2
answers
3k
views
Why does my React Native app build successfully despite TypeScript compiler error?
I've recently started using TypeScript with Expo. I've done all the linter/formatter integrations like typescript-eslint so I can catch most of the errors during coding. To check if the code compiles, ...
- 585
27
votes
3
answers
40k
views
React Navigation route.params typescript
I'm creating a Expo managed React Native app with TypeScript and having some problems with React Navigation and TypeScript.
I want to specify the icon for the Bottom Tab Navigator on the Tab.Screen ...
- 283
27
votes
7
answers
35k
views
Unknown Option error from Babel in React-Native app
I am building a react-native app with typescript in order to learn react native. Once I run the app with expo start and try to run on emulator I get this error:
index.js: [BABEL] ......../index.js: ...
- 943
24
votes
2
answers
74k
views
Pass style as props in react component
I created a event-box component in react. What I want is whenever is it called, I passed color values as props which later get used to set its border. Currently, I set two hardcoded class names and ...
- 2,135
22
votes
3
answers
39k
views
Difference b/w React Typescript , React JavaScript and React Native?
I have confusion about React JavaScript , React Typescript and React Native.
I just have idea that we use React Native for mobile applications and and React (Javascript,Typescript) for web ...
- 684
22
votes
1
answer
13k
views
TypeScript issues when creating ref for React Native TextInput
I came across an issue when defining refs i.e.
inputRef = React.createRef(null)
//...
const someFunction () => {
if (this.inputRef && this.inputRef.current) {
this.inputRef.current....
- 45.7k
21
votes
7
answers
23k
views
Unable to use typescript with expo - "It looks like you're trying to use TypeScript but don't have the required dependencies installed"
I am receiving an error while trying to use Typescript with my existing expo project.
While following the docs, I created a tsconfig.json file in the project root.
When running expo start, I am ...
- 329
20
votes
7
answers
25k
views
Typescript definitions for Animated.View's style prop
I have component whose Props interface extends ViewProps from React Native, i.e:
export interface Props extends ViewProps {
// Custom props
}
Naturally, this extends the style prop. There is one ...
- 45.7k
19
votes
10
answers
24k
views
Invariant Violation: requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UIManager
I am having a headache with the error mentioned in the title.
I am using react-native-gifted-charts (https://www.npmjs.com/package/react-native-gifted-charts/v/1.0.3)
The charts works perfectly in ios ...
- 191
19
votes
2
answers
18k
views
This expression is not callable. Not all constituents of type 'string | ((searchTerm: string) => Promise<void>) | []' are callable
I have my custom useResults hook like this
import { useEffect, useState } from 'react';
import yelp from '../api/yelp';
export default () => {
const [results, setResults] = useState([]);
const ...
- 1,502
19
votes
3
answers
18k
views
Cannot find module '@env' or its corresponding type declarations
Why I get this TypeScript error message and how can I fix it ?
Cannot find module '@env' or its corresponding type declarations
This occurs when I use this:
import { FB_ID } from '@env';
Tt should ...
- 933
19
votes
8
answers
21k
views
React native Typescript path alias unable to resolve module
so basically, I created my React Native with Typescript using the commandline in RN homepage:
npx react-native init MyApp --template react-native-template-typescript
After that, I ran the project and ...
- 311
18
votes
2
answers
28k
views
TypeScript and React Native: Are the type definitions for RN styles wrong?
I thought in React it is allowed to assign arrays to styles?
Like this:
import React from 'react';
import { Text } from "react-native";
// ...
render() {
const textStyles = [styles.text];
...
- 14.2k
18
votes
1
answer
14k
views
type for material UI icons
I have a component that looks like this:
type IconButtonProps = { text: string ; onClick: () => void, icon: any};
export const IconButton: FunctionComponent<IconButtonProps> = ({
text,
...
user13101751
18
votes
2
answers
18k
views
Jest encountered an unexpected token with react-native
So I'm trying to write tests on my React Native app with Jest and TypeScript. While using old babel version everything worked fine, but because of some project problems we had to upgrade babel to 7.0....
- 1,034
18
votes
1
answer
19k
views
How do you set the Typescript type for useRef hook in React Native?
How do I correctly type the useRef for a React Native TextInput?
With the below code I get the following error.
Property 'isFocused' does not exist on type 'MutableRefObject<TextInput>'
...
- 25.9k
18
votes
7
answers
15k
views
React Native SectionList: What are the correct TypeScript types
I'm building a React Native app using TypeScript. I'm trying to use a SectionList. I followed the docs, and here is my code:
renderSectionHeader = ({ section: { title } }: { section: { title: ...
- 14.2k
18
votes
0
answers
1k
views
Vscode breakpoints in TypeScript files not hit in React Native
I have a React Native 0.61 project, TypeScript 3.6.2 and Vscode 1.38.1.
Here is my launch config:
{
"name": "Debug iOS",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request":...
- 34.4k
17
votes
4
answers
11k
views
How to set navigationOptions on stateless component with Typescript
I have a react component like
const Example = () => (<View>...</View>);
Using react-navigation I would normally apply navigation options by saying
Example.navigationOptions = { ...
- 2,069
17
votes
2
answers
17k
views
error TS2300: Duplicate identifier 'RequestInfo'
I'm working in a ReactXP project where I must use React Native native modules.
So I've included the react-native types as a dev dependency.
My project does not compile right now with the following ...
anon
17
votes
3
answers
8k
views
React Native with Typescript and Jest is broken after 0.57 Update: Couldn't find preset "module:metro-react-native-babel-preset" relative to directory
If you integrate test with Jest and Enzyme in the new React Version 0.57 and TypeScript, they won't work. Here are the steps to reproduce:
Create a new React Native project:
react-native init MyApp -...
- 14.2k
17
votes
3
answers
34k
views
Export all files in `index.ts`
Would like to be able to import any component in the components directory, directly from the components directory.
The current directory structure is:
src
├── components
│ ├── Camera.tsx
│ ├── ...
- 815
17
votes
5
answers
18k
views
Cannot find module '@babel/runtime/helpers/interopRequireDefault' from 'node_modules/react-native/jest/setup.js' when I run tests
I'm trying to build a mobile application with typescript, react-native, expo and jest. When I'm trying to run tests:
FAIL src/components/Button/tests/Button.test.tsx
● Test suite failed to run
...
- 181
17
votes
1
answer
2k
views
Is it already possible to use top-level await in react-native?
Is it already possible to use top-level await in react-native? I saw it's been added to TypeScript 3.8 (I was not using TS, I just tried to see if it would help but no). However in react-native file ...
- 16.7k
16
votes
6
answers
9k
views
Cannot import `getReactNativePersistence` in `[email protected]`
I cannot import the getReactNativePersistence module from the firebase/auth. I'm using Typescript.
Importing the function as below was possible, but it didn't work when I updated the Firebase SDK from ...
- 257
16
votes
3
answers
25k
views
tsconfig.json shows error: Entry point for implicit type library 'glob'
I have a Monorepo which uses Typescript. I have a common folder which shows this error on the top of the file -> Entry point for implicit type library 'glob'. I am not sure what is wrong with the ...
- 1,343
16
votes
7
answers
21k
views
React Native: 'Component' cannot be used as a JSX component. Type '{}' is not assignable to type 'ReactNode'
I just started a new project but i'm getting the following error with various packages, for example React Native Reanimated and React Navigation Stack.
This is my package.json.
{
"name": &...
16
votes
3
answers
23k
views
React Native Align button on top of keyboard for all devices
I need to align a button, which is not at the bottom of the screen by design, to be in the middle of the screen. However, it should align to be on top of the keyboard for all devices.
If you check ...
- 3,408
16
votes
2
answers
12k
views
React Native TypeScript: Unable to resolve module (but it exists)
I have a fresh React Native 0.61.1 project with TypeScript. It used to display the new project welcome screen perfectly. I've added a class, tried to import it (it even autocompleted), but it says the ...
- 34.4k
16
votes
1
answer
14k
views
Usage of types and interface without importing
I recently moved to typescript to write React Native applications and one thing I have noted is that I can use types without importing/exporting them. I have placed all the definition files under the @...
- 419