Unable to use StatelessComponent in typescript using react native

Question

I am trying to extend Button component of react-native-button library.

The class using the extended component:

import { DefaultButton } from "../../support/ui/DefaultButton";

...

render() {
    const loginProps = {
            title: "login",
            style: {backgroundColor: DefaultTheme.blueColor},
            containerStyle: {backgroundColor: DefaultTheme.blueColor, flex: 0.5}
        };

    return (<DefaultButton {...loginProps}>test</DefaultButton>);
}

My extended component class, DefaultButton.tsx:

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


// default button component using stateless functional component
// https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.vizff8ap4
// http://donormal.com/writing/stateless-components-in-react-typescript/
const DefaultButton : React.StatelessComponent<IButtonProperties> = (props: IButtonProperties) => (
    <Button style={props.style}
            containerStyle={props.containerStyle}>
        {props.children}
    </Button>
)

export { DefaultButton };

But the above code would result in:

Any clues on what is going wrong with my code?

P.S. here is the library version I am using:

"react-native": "0.39.2",
"react-native-button": "1.7.1",
"typescript": "2.1.4",

Would you provide how to import `DefaultButton`? And in TypeScript you can just do `export const DefaultButton...` — HKTonyLee, Jan 08 '17 at 16:36

score 0 · Answer 1 · answered Feb 07 '17 at 13:07

0

You should import Button like:

import Button from 'react-native-button';

answered Feb 07 '17 at 13:07

Akhilesh Mourya

666
1
4
15

score -1 · Answer 2 · answered Jan 08 '17 at 19:37

-1

You should pass "title" props for Button because in new react native version it updated. You should create component like this in your DefaultButton component class:

const DefaultButton : React.StatelessComponent<IButtonProperties> = (props: IButtonProperties) => (

<Button title='Button_Title'
        style={props.style}
        containerStyle={props.containerStyle}>
        {props.children}
</Button>
)

if you are creating your own button then you can write as old style in any component like:

<DefaultButton>
  Button_Title
</DefaultButton>

But you should access the child component from DefaultButton. Thanks!

answered Jan 08 '17 at 19:37

Akhilesh Mourya

666
1
4
15

But I am using react native version 0.39.2. – chubao Jan 09 '17 at 01:22
I am not using react native's `Button` component. I am using https://github.com/ide/react-native-button instead. – chubao Jan 09 '17 at 02:01
Hey, you should use Button without braces around it on import as: `import Button from 'react-native-button'` This is working for me. Thanks! – Akhilesh Mourya Jan 09 '17 at 13:32
The reason behind it is, Button is a component class inside react-native-button library and we can not access component created as class with {} braces. Thanks! – Akhilesh Mourya Jan 09 '17 at 13:38

Unable to use StatelessComponent in typescript using react native

2 Answers2