Custom button Component in React Native is not accepting props

Question

I made a custom Button(component) in react native to use it in the whole app with required parametric values(color,title,onPress funtion etc) but it's not accepting the values,I'm passing on calling

here's my button class

import React from 'react';
import {Button,Text} from 'react-native';
export const CustomButton = ({btnTitle, btnBgColor,btnPress}) =>
(

    <Button
        title={btnTitle}

        style={
            {
                width:'200',
                height:'40',
                padding:10,
                marginTop:20,
                backgroundColor:'btnBgColor',
        }}

        onPress = {btnPress}>
    </Button>
);

here I'm using it

export class Login extends Component<Props> {
render() {
    return(
        <View style={styles.containerStyle}>
            <ImageBackground source={require ('./../../assets/images/bg.jpg')}
                             style={styles.bgStyle}/>

            <View style={styles.loginAreaViewStyle}>

                <Image />

                <CustomInputField
                    inputPlaceholder={'Email'}
                    userChoice_TrF={false}

                />
                <CustomInputField
                    inputPlaceholder={'Password'}
                    userChoice_TrF={true}

                />

           <CustomButton
                btnTitle={'Login'}
                btnBgColor={'black'}
                btnPress={this._LoginFunction()}/>


        </View>
        </View>
    );
}

_LoginFunction()
{
    return(alert('Login successful'))

}}

here's outn put

you can see my parametric values, color,widh,height etc made no effect on button

Answer 1

The issue is because you have basically created a wrapper around the Button component from react-native

https://facebook.github.io/react-native/docs/button

If you look at the documentation for the button there are only 7 props that you can use https://facebook.github.io/react-native/docs/button#props

• onPress
• title
• accessibilityLabel
• color
• disabled
• testID
• hasTVPreferredFocus

There is no style prop. So what you are passing is just ignored.

What you need to do in your CustomButton is use one of the Touchables https://facebook.github.io/react-native/docs/handling-touches#touchables

So you're component could become something like this (you may need to adjust the styling etc):

import React from 'react';
import {TouchableOpacity,Text} from 'react-native';
export const CustomButton = ({btnTitle, btnBgColor,btnPress}) =>
(
    <TouchableOpacity
        style={{
             width:200,
             height:40,
             padding:10,
             marginTop:20,
             backgroundColor:{btnBgColor},
        }}
        onPress = {btnPress}>
      <Text>{btnTitle}</Text>
    </TouchableOpacity>
);

Also the values that you need to pass for the width and height need to be numbers.

Here is a snack with it working https://snack.expo.io/@andypandy/custom-button-example

Answer 2

Use arrow funtion like this

See the diffrence

export const CustomButton = ({btnTitle, textColor, textSize, btnBgColor, btnPress}) =>
({
  <Button
    title={btnTitle}
    style={{
       width:'200',
       height:'40',
       padding:10,
       marginTop:20,
       backgroundColor:{btnBgColor},
    }}
    onPress = {btnPress}>
  </Button>
});

<CustomButton
   btnTitle='login' 
   btnBgColor='black'
   btnPress={this._LoginFunction()}
/>

Answer 3

here i made some changes in your code.

import React from "react";
import {TouchableOpacity,Text} from 'react-native';

export const AppButton = ({btnTitle, btnBgColor, textColor, btnTextSize, btnPress, btnPadding})=>(

    <TouchableOpacity style={{backgroundColor:btnBgColor  }} onPress={btnPress}>

        <Text style={{color:textColor, fontSize:btnTextSize, padding: btnPadding}}>
            {btnTitle}
        </Text>

    </TouchableOpacity>
)

And use it like this, definitely it will solve your problem.

import {AppButton} from "../../components/AppButton";

                <AppButton
                    btnBgColor={'#2abec7'}
                    btnPadding={10}
                    btnPress={this._LoginFunction}
                    btnTextSize={18}
                    btnTitle={'list'}
                    textColor={'#000'}
                />

and don't use () at
btnPress={this._LoginFunction()}

simply use it as
btnPress={this._LoginFunction}