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",

Answer 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!

Answer 2

You should import Button like:

import Button from 'react-native-button';