CODEWITHSUNDEEP
react-native
CallyB
CallyB

Reputation: 158

Can I add backgroundColor as custom prop to react native elements button?

I've made a custom button from the react native elements button with 'title' and 'onPress' as props but I want to be able to change the background color of the button from inside the JSX of a screen and I can't work out how to put it in as a prop because it's inside the 'buttonStyle' prop. I've tried adding it as a prop as below and various other ways I've tried but I can't get it to work....does anyone know if it's possible and how? My code is below (I've stripped out a load of other irrelevant props so it is clear what I'm asking):

import React from "react";
import { Button } from "react-native-elements";
import { View } from "react-native";

const BandButton = ({ onPress, title }) => {
    return (

  <Button
    title={title}
    onPress={onPress} 
    buttonStyle={{
      height: 60,
      borderRadius: 5,
      backgroundColor:{backgroundColor}

    }}

  />
  )
};

export default BandButton;

The button in JSX:

<BandButton 
            title='Add details'
            onPress ={() => this.props.navigation.navigate('Create')}
            buttonStyle={{backgroundColor: '#FF9800'}}

            />

Thank you anyone who can help!

Upvotes: 1

Views: 3217

Answers (2)

Ray
Ray

Reputation: 9674

This should work:

import React from "react";
import { Button } from "react-native-elements";
import { View } from "react-native";

const BandButton = ({ onPress, title, customStyles }) => {
    const defaultStyles = {
      height: 60,
      borderRadius: 5,
    }
    return (
      <Button
        title={title}
        onPress={onPress} 
        buttonStyle={[defaultStyles, customStyles]}
      />
  )
};

export default BandButton;

Now use that component like so:

<BandButton 
    title='Add details'
    onPress ={() => this.props.navigation.navigate('Create')}
    customStyles={{backgroundColor: '#FF9800'}}
/>

Upvotes: 7

oma
oma

Reputation: 1894

The react-native supports style like this 

style={{backgroundColor: option.color}}

Try to do the same:

backgroundColor:backgroundColor

Where backgroundColor should be a string like '#ff0000'

Upvotes: 0

Related Questions