Custom button Component in React Native is not accepting props

react-native button style not working
design a button in react native
react native create button component
react native button disabled style
react button
react native button group
react native button size
disable a button react native

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

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}

Make your own customized and reusable React Native button , Customized and Reusable React Native Button Component. button once for all that change its style, shape, and size by accepting props. In this tutorial we are creating a custom Text component with custom props, all you have to do is use the new created class as Tag(Component) and call in your default class. Contents in this project Create Custom Component with custom user define Props in react native Android iOS app: 1.

Custom Right Button not showing on Android · Issue #2597 · wix , I've created a Custom button to add in navbar but it only shows on iPhone. No issues on iOS, yet custom component not showing on Android. As we're already passing props, linked issue above @pqkluan, is not relevant to this issue. https​://wix.github.io/react-native-navigation/#/adding-buttons-to-the-  React Native provides a Button component that has a nice look on all platforms and provides touch events for common gestures like tapping.. In case, the Button component is not enough for your app in terms of look and customizations, you can also build your own custom button using any the base components (TouchableOpacity, TouchableHighlight and TouchableNativeFeedback) provided by React Native.

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

Components and Props – React, They accept arbitrary inputs (called “props”) and return React elements describing The simplest way to define a component is to write a JavaScript function: A button, a form, a dialog, a screen: in React apps, all those are commonly Such functions are called “pure” because they do not attempt to change their inputs,  Typically, new React apps have a single App component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like Button and gradually work your way to the top of the view hierarchy. Extracting Components . Don’t be afraid to split components into smaller components.

React Top-Level API – React, React components let you split the UI into independent, reusable pieces, and think about each Only extend PureComponent when you expect to have simple props and state, or use you can also provide a custom comparison function as the second argument. Children.only() does not accept the return value of React​. A basic button component that should render nicely on any platform. Supports a minimal level of customization. If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at the source code for this button component.

Accessibility – React, React fully supports building accessible websites, often by using standard HTML When you don't need any props on the Fragment tag you can use the short the current element in the DOM that is selected to accept input from the keyboard. Not only does it set initial focus on the cancel button (preventing the keyboard  React Native provides components to handle all sorts of common gestures, as well as a comprehensive gesture responder system to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button.

Buttons · React Native Gesture Handler, Gesture handler library provides native components that can act as buttons. accessible, you have to wrap your children in a View with accessible prop. similar behaviour on iOS and Android taking into consideration their's design concepts. If you do not wish to implement custom design approach, RectButton and  In React Native (and also in React) you can create custom components and use them easily as much as you want in your app. You may give custom styles and values to these components by passing

Comments
  • thanks for answering but the same way i used with 'touchable opacity' where it was working fine
  • I think I'm using in the same way