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

RodSarhan · Accepted Answer · 2022-03-20 16:31:26Z

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

answered Mar 20, 2022 at 16:31

RodSarhan

1,4871 gold badge6 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahman Haroon · Accepted Answer · 2022-03-23 06:00:07Z

1

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..

edited Mar 23, 2022 at 6:00

answered Mar 21, 2022 at 6:15

Rahman Haroon

1,1533 gold badges16 silver badges43 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related