CODEWITHSUNDEEP
javascriptandroidreact-nativereact-props
Haseeb Warriach
Haseeb Warriach

Reputation: 352

Custom button Component in React Native is not accepting props

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

Upvotes: 2

Views: 2308

Answers (3)

Muhammad Ashfaq
Muhammad Ashfaq

Reputation: 2521

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()}
/>

Upvotes: 1

Andrew
Andrew

Reputation: 28539

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

Upvotes: 2

Asmat ullah
Asmat ullah

Reputation: 711

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}

Upvotes: 3

Related Questions