CODEWITHSUNDEEP
react-nativereact-props
Asleepace
Asleepace

Reputation: 3745

Dynamically add properties in React Native

Let's say I have a component like this:

<TouchableOpacity activeOpacity={1} />

And in some cases I would like to add a property pointerEvents or something similar like so:

<TouchableOpacity pointerEvents={'box-none'} activeOpacity={1} />

Recently I have been accomplishing this by setting a variable and passing it to the component based on some internal state like so:

render() {
    const pointerType = this.state.isVisible ? 'box-none' : 'box-only';
    return (
       <TouchableOpacity pointerEvents={pointerType} activeOpacity={1} />
    )
}

However, in some cases this is not ideal and I was wondering if there was a way to dynamically include the property like so:

render() {
    const pointerJSX = this.state.isVisible ? {pointerEvent:'box-none'} : null;
    return (
       <TouchableOpacity {pointerJSX} activeOpacity={1} />
    )
}

Upvotes: 1

Views: 2855

Answers (1)

Timothy Alfares
Timothy Alfares

Reputation: 317

Can your try this? 

render() {
  const pointerJSX = this.state.isVisible ? {pointerEvent:'box-none'} : null;
  return (
    <TouchableOpacity {...pointerJSX} activeOpacity={1} />
  )
}

Edit

I think it is better for me to explain a little bit so that you and other developers know what is happening in this problem.

Basically 

const pointerJSX = this.state.isVisible ? {pointerEvent:'box-none'} : null;

means that pointerJSX variable is assigned based on the isVisible state. If isVisible is true, it will be assigned to an object of { pointerEvent: 'box-none' }, otherwise if it false then it is null

Then if you want to use it into a component, it will be just like this

<TouchableOpacity {...pointerJSX} activeOpacity={1} />

{...pointerJSX} in here means that it will assign the content of pointerJSX object into TouchableOpacity component. Then if the pointerJSX variable is null, it will not put any props into TouchableOpacity.

Hope it helps to explain this bit of code.

Upvotes: 6

Related Questions