Question 108382 in React native Question posted in
The official React Native documentation can be found here.

No overload matches this call on Button – React Native + TypeScript

I got some problem here on my code:

No overload matches this call.
  Overload 1 of 2, '(props: { ref?: Ref<View> | undefined; children?: ReactNode; hitSlop?: Insets | undefined; onLayout?: ((event: LayoutChangeEvent) => void) | undefined; ... 64 more ...; key?: Key | ... 1 more ... | undefined; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children: Element[]; underlayColor?: string | undefined; activeOpacity?: number | undefined; onPress?: ((pointerInside: boolean) => void) | undefined; onLongPress?: (() => void) | undefined; ... 26 more ...; disallowInterruption?: boolean | undefined; }' is not assignable to type '{ ref?: Ref<View> | undefined; children?: ReactNode; hitSlop?: Insets | undefined; onLayout?: ((event: LayoutChangeEvent) => void) | undefined; ... 64 more ...; key?: Key | ... 1 more ... | undefined; }'.
      Types of property 'style' are incompatible.
        Type 'import("c:/Users/gusta/OneDrive/u00C1rea de Trabalho/Cursos/wallet-app/node_modules/react-native/Libraries/StyleSheet/StyleSheet").StyleProp<import("c:/Users/gusta/OneDrive/u00C1rea de Trabalho/Cursos/wallet-app/node_modules/react-native/Libraries/StyleSheet/StyleSheetTypes").ViewStyle>' is not assignable to type 'import("c:/Users/gusta/OneDrive/u00C1rea de Trabalho/Cursos/wallet-app/node_modules/@types/styled-components-react-native/node_modules/@types/react-native/index").StyleProp<import("c:/Users/gusta/OneDrive/u00C1rea de Trabalho/Cursos/wallet-app/node_modules/@types/styled-components-react-native/node_modules/@types/...'.
          Type 'ViewStyle' is not assignable to type 'StyleProp<ViewStyle>'.
            Type 'import("c:/Users/gusta/OneDrive/u00C1rea de Trabalho/Cursos/wallet-app/node_modules/react-native/Libraries/StyleSheet/StyleSheetTypes").ViewStyle' is not assignable to type 'import("c:/Users/gusta/OneDrive/u00C1rea de Trabalho/Cursos/wallet-app/node_modules/@types/styled-components-react-native/node_modules/@types/react-native/index").ViewStyle'.
              Types of property 'aspectRatio' are incompatible.
                Type 'string | number | undefined' is not assignable to type 'number | undefined'.
                  Type 'string' is not assignable to type 'number'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof View, DefaultTheme, {}, never, typeof View, typeof View>): ReactElement<StyledComponentPropsWithAs<typeof View, DefaultTheme, {}, never, typeof View, typeof View>, string | JSXElementConstructor<...>>', gave the following error.
    Type '{ children: Element[]; underlayColor?: string | undefined; activeOpacity?: number | undefined; onPress?: ((pointerInside: boolean) => void) | undefined; onLongPress?: (() => void) | undefined; ... 26 more ...; disallowInterruption?: boolean | undefined; }' is not assignable to type '{ ref?: Ref<View> | undefined; children?: ReactNode; hitSlop?: Insets | undefined; onLayout?: ((event: LayoutChangeEvent) => void) | undefined; ... 64 more ...; key?: Key | ... 1 more ... | undefined; }'.
      Types of property 'style' are incompatible.
        Type 'import("c:/Users/gusta/OneDrive/u00C1rea de Trabalho/Cursos/wallet-app/node_modules/react-native/Libraries/StyleSheet/StyleSheet").StyleProp<import("c:/Users/gusta/OneDrive/u00C1rea de Trabalho/Cursos/wallet-app/node_modules/react-native/Libraries/StyleSheet/StyleSheetTypes").ViewStyle>' is not assignable to type 'import("c:/Users/gusta/OneDrive/u00C1rea de Trabalho/Cursos/wallet-app/node_modules/@types/styled-components-react-native/node_modules/@types/react-native/index").StyleProp<import("c:/Users/gusta/OneDrive/u00C1rea de Trabalho/Cursos/wallet-app/node_modules/@types/styled-components-react-native/node_modules/@types/...'.

This is my code:

import React from 'react'
import { RectButtonProps } from 'react-native-gesture-handler'
import { IconeGoogle, Button, Title } from './styles'

interface Props extends RectButtonProps {
    title: string
}

import PngGoogle from '../../assets/google.png'
const ButtonSocialGoogle: React.FC<Props> = ({title, ...rest}) => {
  return (
    <Button {...rest}>
        <IconeGoogle
            source={PngGoogle}
            resizeMode="contain"
        />
        <Title>{title}</Title>
    </Button>
  )
}

export {ButtonSocialGoogle}

My styles:

import styled from "styled-components/native";
import { RectButton } from "react-native-gesture-handler";
import {RFValue} from 'react-native-responsive-fontsize'

export const Button = styled.View`
    width: ${RFValue(130)}px;
    height: ${RFValue(60)}px;
    border-radius: ${RFValue(5)}px;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-bottom: 16px;
    background-color: ${({theme}) => theme.COLORS.GRAY6};
`;

export const IconeGoogle = styled.Image`
    width: ${RFValue(45)}px;
    height: ${RFValue(45)}px;
`

export const Title = styled.Text `
    font-size: ${RFValue(15)}px;
    font-family: ${({theme}) => theme.FONTS.POPPINSLIGHT};
`

and my package.json:

{
  "name": "wallet-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo-google-fonts/dm-sans": "^0.2.3",
    "@expo-google-fonts/dm-serif-display": "^0.2.3",
    "@expo-google-fonts/inter": "^0.2.3",
    "@expo-google-fonts/poppins": "^0.2.3",
    "@expo/webpack-config": "^18.0.1",
    "@types/react-native": "0.63.40",
    "@types/styled-components": "^5.1.26",
    "expo": "~48.0.15",
    "expo-app-loading": "^2.1.1",
    "expo-font": "~11.1.1",
    "expo-modules-core": "~1.2.6",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.7",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-responsive-fontsize": "^0.5.1",
    "react-native-web": "~0.18.10",
    "styled-components": "^5.3.10"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.0.14",
    "@types/styled-components-react-native": "^5.2.1",
    "babel-plugin-module-resolver": "4.1.0",
    "typescript": "^4.9.4"
  },
  "private": true
}

The <Button {...rest}> in the main code is where my VSCode shows the error, more specifically in the Button word. After testing the solutions I got here with similar questions, I saw this guys explaining something like my problem here: https://github.com/callstack/react-native-paper/issues/2482#issuecomment-754398895 and I had made the same thing but the error didn’t have gone, just like the other solutions here. Anyone knows what I could do here? For real, I don’t understand nothing about this error.

Tags:

2

Answers


  1. 0

    Your Button is a styled.View, but you’re passing it RectButton props. Either make your Button a RectButton or change your props to

    interface Props extends ViewProps {
    title: string
}

    or whichever props are appropriate for your styled.View.

    Login or Signup to reply.
  2. 0

    you can use ViewStyle

    • Example
    import { TouchableOpacity, TouchableOpacityProps } from "react-native";

export const Button = styled.TouchableOpacity`
    width: ${RFValue(130)}px;
    height: ${RFValue(60)}px;
    border-radius: ${RFValue(5)}px;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-bottom: 16px;
    background-color: ${({theme}) => theme.COLORS.GRAY6};
`;
...
import { ViewStyle } from "react-native";
interface Props extends TouchableOpacityProps {
    title: string
    style?: ViewStye
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search