Using PropTypes in React Native with Typescript

Hey there, I'm currently working on a new app in React Native using TypeScript and TSX syntax. I have a question regarding defining a prop type function without resorting to using the "any" type. In JavaScript with PropTypes, I can define a prop type as "function", but I am unsure of how to achieve this in TypeScript.

import React from 'react'
import { View, StyleSheet, Text, Modal, TouchableOpacity } from 'react-native';
import { RNCamera } from 'react-native-camera';

interface propTypes {
  isVisible : boolean,
  scanCallback: any,
  OnCloseModal: any
}


const ScannerModal = ({isVisible, scanCallback, OnCloseModal}: propTypes) => {

  if (!isVisible) {
    return null
  }
  
  const onBarCodeRead = (e : {data : string, type: string}) => {
    scanCallback(e.data, e.type)
  }
  return (
      .....
  )
}

Answer №1

A solution could be as follows:

interface propTypes {
  visible : boolean,
  callback: (_data: string, _type: string) => void,
  closeModal: () => void
}

For more information on using TypeScript with React, check out this useful resource. It can also be applied to React Native projects.

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

Can you share the appropriate tsconfig.json configuration for a service worker implementation?

Simply put: TypeScript's lib: ['DOM'] does not incorporate Service Worker types, despite @types/service_worker_api indicating otherwise. I have a functional TypeScript service worker. The only issue is that I need to use // @ts-nocheck at t ...

There was an issue encountered when creating the class: The parameters provided do not correspond to any valid call target signature

I am facing an issue with my code. Here is the scenario: export class MyClass { public name:string; public addr:string; constructor() {} } I have imported MyClass and trying to use it like this: import { MyClass } from './MyClass' ...

Realizing mistakes once ng build is complete

Working on an Angular/CLI/TypeScript 2.3 project, I encountered a common error type: TypeError: Cannot assign to read only property 'myValue' of object '#' This issue usually arises when there's an attempt to modify a property ...

Using TypeScript to Limit the Generic Type Parameter Passed into a Function

I am working with a generic interface that has specific constraints applied to its parameters. Here is an example of how it is used: interface Fetcher<Params,Resp> { fetch(params: Params): Resp; }; In my code, I have a function that uses this inte ...

Troubleshooting notifications generated by react-hook-form and zod

My customer registration form is causing all my error messages to show as "required." I suspect it might be a misconfiguration in zod or react-hook-form. Below, you'll find the code snippets. This is my generic input component: import { DetailedHTMLP ...

Convert an enum value to a String representation

I need assistance with converting my enum value to a string format export enum Roles { manager = "manager", user = "user" } console.log(" Roles.manager: ", Roles[Roles.manager]); The following is displayed in the console: Roles.manager: manage ...

Rx.js struggles to access historical values

Seeking assistance with retrieving the last 3 values emitted. Despite using the provided code to populate uiOrder and invoking cancelOrderItem() multiple times, I am unable to access the last 3 revisions of the order via getHistory(). Instead, I receive th ...

Developing a TypeScript NodeJS module

I've been working on creating a Node module using TypeScript, and here is my progress so far: MysqlMapper.ts export class MysqlMapper{ private _config: Mysql.IConnectionConfig; private openConnection(): Mysql.IConnection{ ... } ...

AngularJS2 brings a powerful and seamless implementation of indexedDB for efficient

I'm on the hunt for an indexeddb implementation that works seamlessly with Angularjs2. While I stumbled upon this api at https://github.com/gilf/angular2-indexeddb, it appears to be lacking in active development and may not be ready for production use ...

Refresh Form Following Submission

When using a react form that triggers a graphql mutation upon button click, the text entered in the form fields remains even after the mutation has been executed. This necessitates manual deletion of text for subsequent mutations to be run. Is there a way ...

Is it possible to automatically deduce a mapped type from function overloads in TypeScript?

Considering the following function overloads: function f(p: 'a'): 'x'; function f(p: 'b'): 'y'; function f(p: 'c'): 'z'; Is there a way to deduce this mapping from f? type M = { 'a' ...

Using Angular2, assign a value to the session and retrieve a value from the session

I am having trouble getting and setting a session. Here is my code: login_btnClick() { var NTLoginID = ((document.getElementById("NTLoginID") as HTMLInputElement).value); this._homeService.get(Global.BASE_USER_ENDPOINT + '/EmployeeDe ...

From milliseconds to hours: a straightforward conversion

Given a start date, time and end date, time, I am trying to calculate the total travel duration. The output is in milliseconds and needs to be converted into hours format. Despite attempting some solutions shared here, I haven't been successful. < ...

Typescript turns a blind eye to improper usage of a passed prop function within React components

My React component is structured like this: const BirthdaySearch: FC<{ onSearch: (year: string, month: string) => void }> = (props) => { const monthInputRef = useRef<HTMLInputElement>(null); const dayInputRef = useRef<HTMLInp ...

Rearrange the provided string in a particular manner

Looking to transform a string like '12:13:45.123 UTC Sun Oct 17 2021' into 'Sun Oct 17 2021 12:13:45.123 UTC' without calling slice twice. Is there a more elegant and efficient way to achieve this? Currently using: str.slice(18)+&apo ...

React-Native was having trouble connecting to the development server

While my project was running smoothly on my iPhone 6s, today I encountered an issue with Xcode and Node.js displaying the 'Unable to execute JS call: __fbBatchedBridge is undefined' error. Even though I have ensured that the IP address is correct ...

Pipe for Angular that allows for searching full sentences regardless of the order of the words

I am looking to create a search bar that can search for the 'title' from the table below, regardless of the word order in the sentence. I attempted to use a filter pipe to check if the search string exists in the title. I also experimented with ...

Triggering Backbutton actions in Ionic 3Just a heads-up

I need to capture the back button event before it triggers. Once the listener is activated, the back signal has already been sent. This is my approach so far: document.addEventListener("backbutton", () => { console.log("[WARN] Back button pres ...

What are the steps to globalize the ng-bootstrap datepicker?

For my current project, I am utilizing the ng-bootstrap datePicker component. The demo for my simple datePicker widget can be found here. However, I am now seeking to internationalize it by setting it to use the Russian language. Any assistance with this ...

Ways to pass styling properties to a nested component

I am working on a component that includes an input field: <mat-form-field appearance="standard"> <mat-label >{{label}}<span>*</span></mat-label> <input [type]="type" <span matSuffix>{{suffix} ...