Issue

The following code throws an error. The code is a minimal executable code to reproduce the error of the original one.

import React from 'react';
import { Button, StyleSheet } from 'react-native';

const MyButton = () => {
  return (
    <Button
      title="Click me"
      style={styles.button}
    />
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#0f0',
    color: '#fff',
    padding: 10,
  },
});

The error:

No overload matches this call.
  Overload 1 of 2, '(props: ButtonProps): Button', gave the following error.
    Type '{ title: string; style: { backgroundColor: string; color: string; padding: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Button> & Readonly<ButtonProps>'.
      Property 'style' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Button> & Readonly<ButtonProps>'.
  Overload 2 of 2, '(props: ButtonProps, context: any): Button', gave the following error.
    Type '{ title: string; style: { backgroundColor: string; color: string; padding: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Button> & Readonly<ButtonProps>'.
      Property 'style' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Button> & Readonly<ButtonProps>'.ts(2769)

As a result, the react native webpage is empty.

Environment

• Windows 11
• npm 10.8.2

What I did so far

I checked the following pages in vain.

• reactjs – React + TypeScript error: No overload matches this call – Stack Overflow
• typescript – Why is there a “No overload matches this call” error when passing a reactive prop? – Stack Overflow
• reactjs – how to solve No overload matches this call error typescript – Stack Overflow

What should I do to solve this?