Typescript erorr while using 'react-native' button with additional props

Question

I am new to Typescript and was trying to add it in my react-native project, so after integrating it, i am stuck at the type error for Button .

Here is the code for below

import React from "react";
import { Button, Image, StyleSheet, Text, View } from "react-native";

interface Props {
  navigation: NavigationScreenProp<any, any>;
}
export const Landing: React.FC<Props> = ({}) => {
  return (
    <View style={styles.container}>
        <Button onPress={() => {}} title="button" style={styles.button} />
    </View>
  );
};

const styles = StyleSheet.create({
  button: {},
});

So the Button gives error

Property 'style' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.

I also tried extending the prop like

interface ButtonPropsNew extends ButtonProps {
  style: any;
}
type IProps = Props & ButtonPropsNew;

and then passing IProps to this component

export const Landing: React.FC<IProps> = (props) => {}

but i still get type error on using "style" prop on the button

Answer 1

https://reactnative.dev/docs/button as we can see here, Button does not support the style prop, you aren't doing anything wrong but the component just doesn't take that prop

You can try using TouchableOpacity instead of button and customize the view however you like, that would also help with getting a consistent look between Android and iOS

Answer 2

Their is no style in the ButtonProps for more reference

    title: string;
    onPress: (ev: NativeSyntheticEvent<NativeTouchEvent>) => void;
    color?: ColorValue | undefined;
    accessibilityLabel?: string | undefined;
    disabled?: boolean | undefined;

    /**
     * Used to locate this button in end-to-end tests.
     */
    testID?: string | undefined;

these are the accepted props for a button.

If you want to make a custom Button you can use TouchableOpacity, TouchableHighlight, Pressable etc..