Pass props to child component - React Native

Question

I want to pass props color to a icon child. This <Feather /> I want to add color as props

This is my component and the Feather child

import { Feather } from '@expo/vector-icons'

export default class CloseButton extends React.PureComponent {
  render () {
    const { style, ...props } = this.props
    return (
      <TouchableOpacity style={styles.close} link {...props} >
        <Feather name='x' size={26} /> // <-- want add color here
      </TouchableOpacity>
    )
  }
}

This is my component where I send props thas show in ThouchableOpacity

<Alert.CloseButton onPress={props.onRequestClose} />

How can pass color in this props and it only show on icon?

Tholle · Accepted Answer · 2018-08-03 16:32:02Z

1

You could use a prop called color for your CloseButton component that you pass to the Feather component.

export default class CloseButton extends React.PureComponent {
  render () {
    const { style, color, ...props } = this.props;

    return (
      <TouchableOpacity style={styles.close} link {...props} >
        <Feather name='x' size={26} color={color} />
      </TouchableOpacity>
    )
  }
}

Usage

<Alert.CloseButton
  onPress={props.onRequestClose}
  color="red"
/>

answered Aug 3, 2018 at 16:32

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass props to child component - React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related