Expanding generic properties in React Native

Question

Expanding generic properties in React Native

Apologies if the title is confusing. I am struggling to come up with a suitable heading. I have two classes.

****************Form.tsx

interface Props{}
interface State{}
class Form extends Component<Props, State>{
   protected submit(){
      // includes code for form submission
   }
}



****************Login.tsx

class LoginForm extends Form{
   render(){
       return(
          <View>
            <Button onClick = {() => this.props.navigation.goBack()}
            <Button onClick= {() => this.submit()} />
          </View>

       );
   }
}

I want to achieve this

<LoginForm navigation = {someObject} />

But I'm unable to do so as I haven't found a workaround yet. I simply want to learn how to pass additional props to LoginForm.

typescript react-native react-navigation

Answer 1

Answer №1

After much exploration, I have come across a solution that may be useful for those who ensure their form is always extended and not utilized as a component. In my specific scenario, the form was never meant to be used as a Component. Here is the solution I discovered:

***********Form.tsx
interface State{}
class Form<P= {}> extends Component<P, State>{

}

***********Login.tsx
interface LoginFormProps{
   navigation: SomeObjectType
}

class Login extends Form<LoginFormProps>{
}

And with this structure in place, I am able to utilize the following code:

<LoginForm navigation = {someObject} />

Answer 2

After much exploration, I have come across a solution that may be useful for those who ensure their form is always extended and not utilized as a component. In my specific scenario, the form was never meant to be used as a Component. Here is the solution I discovered:

***********Form.tsx
interface State{}
class Form<P= {}> extends Component<P, State>{

}

***********Login.tsx
interface LoginFormProps{
   navigation: SomeObjectType
}

class Login extends Form<LoginFormProps>{
}

And with this structure in place, I am able to utilize the following code:

<LoginForm navigation = {someObject} />

Expanding generic properties in React Native

Answer №1

Similar questions

Tips for utilizing Provide/Inject in Vue.js while leveraging TypeScript

Avoid retrieving information from Firestore

Combining union types with partial types in TypeScript: A guide

During the transpiling process, the metadata of an Angular component may become lost

Tabulate the number of items in an array based on the month and

Enhance your Angular application with lazy loading and nested children components using named outlets

What is the best way to set up the user's editable information in the input field?

What is the correct way to modify the metro bundle port using RCT_METRO_PORT?

Deciding the conditional type within an IDE while using an If statement

"Encountering issues with React Native's Stack.Navigator functionality on iOS devices

React Native is throwing an error message saying that the Component cannot be used as a JSX component. It mentions that the Type '{}' is not assignable to type 'ReactNode'

Testing your Typescript code using Visual Studio's unit testing tools

A TypeScript function that converts a value into an array if it is not already an array, ensuring the correct type is output

"Exploring the process of retrieving URL parameters within an activated link using Angular 7 and executing a REST API call from a service

Converting a string to an HTML object in Angular using Typescript and assigning it to a variable

Generating a dynamic table using Angular

Guide on breaking down a primary element into two smaller components

Is there a way to incorporate margins into a React component using TypeScript?

What are some ways to control providers in targeted tests using ng-mocks?

Forwarding refs in React FC allows you to easily pass down