- How to pass parameters in StyleSheet in React native with Typescript
- React Native TypeScript WebSocket onerror Value of «this» must be of type Event
- Example of errors
- Styling React Native TextInput on Focus
- Time-Saving React Native Button Component
- How to solve ViewStyle typescript error in react native?
- Typescript Passing prop as one of the objects's keys
How to pass parameters in StyleSheet in React native with Typescript
UPDATE: I’ve managed to «work around» by turning the arrow function into a function with a function keyword: It «works» now, though this is not an actual solution as I still can’t use arrow functions, breaking my code style as I never use functions in code (other than top-level simple definitions) anywhere in the app. Solution: Example of errors Firstly, has type: And we can see the typeof in the arrow function would be Also, so that we can’ t assign this type to arrow function.
React Native TypeScript WebSocket onerror Value of «this» must be of type Event
I’m trying to implement WebSocket support into my app by following React Native’s own tutorial at https://reactnative.dev/docs/network#websocket-support.
function initializeSocket(socket:WebSocket) < socket.onopen = () =>< store.dispatch(toggleWebsocketConnected(true)); >; socket.onclose = () => < store.dispatch(toggleWebsocketConnected(false)); >; socket.onerror = (e:any) => < console.log('websocket error', e); store.dispatch(toggleWebsocketConnected(false)); >; socket.onmessage = (e) => < processMessage(e); >; > In onerror event handler (for now, ignore why error handler is called, this is not a «why can’t I connect» question, but a TypeScript question) when it’s triggered I’m getting a weird error at runtime:
TypeError [ERR_INVALID_THIS]: Value of "this" must be of type Event at new NodeError (/path/to/my/project/lib/internal/errors.js:371:5) at Event.[nodejs.util.inspect.custom] (/path/to/my/project/lib/internal/event_target.js:120:13) at formatValue (/path/to/my/project/lib/internal/util/inspect.js:763:19) at inspect (/path/to/my/project/lib/internal/util/inspect.js:340:10) at formatWithOptionsInternal (/path/to/my/project/lib/internal/util/inspect.js:2006:40) at formatWithOptions (/path/to/my/project/lib/internal/util/inspect.js:1888:10) at console.value (/path/to/my/project/lib/internal/console/constructor.js:323:14) at console.log (/path/to/my/project/lib/internal/console/constructor.js:359:61) at EventTarget.socket.onerror (/path/to/my/project/src/services/myproject/socket.ts:27:17) at EventTarget.dispatchEvent (/path/to/my/project/.vscode/.react/index.bundle:31193:27) Vscode linter shows everything is fine though. When I hover over the onerror function it shows:
(property) WebSocket.onerror: ((this: WebSocket, ev: Event) => any) | null
Two input arguments. So eventhough Vscode isn’t complaining about my initial code, I also tried to change it to the following:
Now, Vscode linter shows an error:
Type '(_: any, e: any) => void' is not assignable to type '(this: WebSocket, ev: Event) => any'.ts(2322) If I run the code regardless of the error, I don’t get a runtime error, yet _ is now an actual event object and e is undefined:
What am I doing wrong? What is the correct form of doing it? I’ve stumbled upon a weird problem with this keyword in arguments and TypeScript before (see Why are rest parameters undefined in TypeScript?) which indeed turned to be a Babel bug, which is now merged and fixed long ago.
How can I get it to work correectly?
UPDATE: I’ve managed to «work around» by turning the arrow function into a function with a function keyword:
socket.onerror = function(this:any, e:Event)< console.log('websocket error', e); store.dispatch(toggleWebsocketConnected(false)); >; It «works» now, though this is not an actual solution as I still can’t use arrow functions, breaking my code style as I never use function keyword functions in code (other than top-level simple definitions) anywhere in the app.
No it doesn’t, it seemed to step correctly yet actually threw an error again when I reached a line to console.log the event.
Example of errors
var wsWrong = new WebSocket('ws://host.com/path') wsWrong.onerror = ( ev // (parameter) e: Event ) => Firstly, wsWrong.onerror has type:
(property) WebSocket.onerror: ((this: WebSocket, ev: Event) => any) | null
And we can see the typeof this in the arrow function would be
this: typeof globalThis
The containing arrow function captures the global value of 'this'.(7041)
Also, An arrow function cannot have a 'this' parameter.(2730) so that we can' t assign this type to arrow function. we need to use a function to fit TypeScript's need.
Secondly, Because event type does not have a message property, the following will trigger an error: Property 'message' does not exist on type 'Event'.(2339) MDN: Event
To fix it, example of correct way
var wsRight = new WebSocket('ws://host.com/path') The follow line use a function here and TypeScript will resolve this for you. i.e. 1 argument needed.
wsRight.onerror = function(ev) We use instanceof Narrowing here MDN: errorevent
if(ev instanceof ErrorEvent) < console.log(ev.message) // and now TS can found the `message` property. >> How to get the value of input tag onSubmit without using onChange, This works fine for me, try with event.target[0].value; And also, setting a react component to the type FC is not needed, I guess you could call
Styling React Native TextInput on Focus
at styling the react native textinput when it is in focus to accept data. Part 5 of React Native Duration: 2:54
Time-Saving React Native Button Component
In this video, we create a time-saving custom reusable button component with typescript. Part 7
Duration: 3:46
How to solve ViewStyle typescript error in react native?
I'm trying to pass width parameter into StyleSheet like this :
const styles = StyleSheet.create(< modalContent: < flex: 1, justifyContent: 'center', margin: '5%', >, modalOverlay: < position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, backgroundColor: 'rgba(0,0,0,0.5)', >, children: (width: any) => (< width: width, backgroundColor: 'white', position: 'absolute', bottom: 0, borderTopRightRadius: 40, borderTopLeftRadius: 40, paddingVertical: 30, paddingHorizontal: 20, >), >); , But typescript throws an error This expression is not callable. No constituent of type 'ViewStyle | TextStyle | ImageStyle' is callable.
How can I solve this typescript problem ?
If you want to pass props to stylesheet you have to do something like this
you can use by creating a function which returns viewstyle
import * as React from "react" import from "react-native" const App = () => < return (> ) >) const Container = (width: number | string): ViewStyle => (< width: width, height: '50%', backgroundColor: 'white', position: 'absolute', bottom: 0, borderTopRightRadius: 40, borderTopLeftRadius: 40, paddingTop: 10, paddingHorizontal: 20, >) React native TextInput Property does not exist on type, TextInput value ;
Typescript Passing prop as one of the objects's keys
I am using react native and trying to pass one of string values to another component.
The type object looks like this:
export const ScannerAction = < move: 'move', inventory: 'inventory', demand: 'demand', supply: 'supply' >; so when I pass a value called operationType I want it to be one of the strings: move , inventory , demand or supply .
the child component would have an interface like this:
operationType: 'supply' | 'demand' | 'inventory' | 'move' but I want it to be dynamic and editable only in one place. What should I do?
The best way would be to use an enum instead of an object:
enum ScannerAction < move = 'move', inventory = 'inventory', demand = 'demand', supply = 'supply' >; interface IIProps
If you want to stick to an object, you can use keyof to get the keys and then get the values:
const ScannerAction = < move: 'move', inventory: 'inventory', demand: 'demand', supply: 'supply' >as const; // make this const so that ScannerActionValues becomes a union of all values instead of string type ScannerActionValues = typeof ScannerActionStylesheet react native typescript; interface IIProps
What about to use enum? https://www.typescriptlang.org/docs/handbook/enums.html
export enum ScannerAction
React native typescript number 0 read as NaN, I am trying to map an array and to use its values or keys as data for my return in React Native (Android). Can anyone explain why the value