How to apply values from props to styles?

Question

I created a custom component:

import React from 'react';
import {View, StyleSheet, TouchableOpacity} from 'react-native';

const Square = ({size, color, onPress, children}) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.sqr}>{children}</View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  sqr: {
    width: this.size,
    height: this.size,
    backgroundColor: this.color,
    ...
  },
});

export default Square;

As you can see above in the sqr style, I try to use the size and color passed in via props.

I use the Square in another component in following way:

<Square size={30} color="black" .../>

However the size and color are not applied when run my app.

So, how can I use passed in values in styles of custom component?

sammyt · Accepted Answer · 2020-07-29T17:34:48.977

1

There are a few ways of handling conditional styles within your react-native components. In your example, you only have access to size and color within the Square component itself, not the object created by Stylesheet.create. In this case, it's common to pass a list of objects to your style attribute where you have access to those values:

const Square = ({size, color, onPress, children}) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <View
        style={[styles.sqr, { height: size, width: size, color: color }]}
      >
        {children}
      </View>
    </TouchableOpacity>
  );
};

Since the style attribute accepts a list of objects, you can also take this quite a bit further to provide 'active' classes based on props passed to your component. Here's a more complex example if you needed to pass in a style object from a parent and potentially toggle on/off some hypothetical 'active' style:

const Square = ({size, color, onPress, otherStyles, active, children}) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <View
        style={[
          styles.sqr,
          otherStyles,
          { height: size, width: size, color },
          active ? styles.active : null,
        ]}
      >
        {children}
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  active: {
    backgroundColor: 'red',
  },
});

edited Jul 29 '20 at 17:34

answered Jul 29 '20 at 16:12

sammyt

216
2
9

Thanks. Now I would like to also pass addtional style, I tried this `` , but the `otherStyle` doesn't have effect. Why? – Leem.fin Jul 29 '20 at 16:26
Where is `otherStyle` coming from? Is it an within your `styles`? Or, is it passed in as a prop? – sammyt Jul 29 '20 at 16:34
It is passed in as props. I tried to pass in marginLeft:30, no effect . `` – Leem.fin Jul 29 '20 at 16:35
Could you include everything you're now doing? I'm able to properly add additional style objects in that list. I can update my example after I see what you're trying to do. – sammyt Jul 29 '20 at 17:03
I've updated my answer to include a few more examples to hopefully be more helpful. If your `otherStyle` prop isn't working it might be a typo. – sammyt Jul 29 '20 at 17:22
Thanks, I will accept your answer but have you tried the example I mentioned in my previous comment, does the `marginLeft:40` passed from parent works for you? – Leem.fin Jul 29 '20 at 17:37
Passing an object with a `marginLeft` attribute is working for me. I did notice in your previous comment that you're referencing `otherStyles` in your `View` component, but you're passing it in as `otherStyle` (notice there's no trailing 's') when you call your `Square` component. Is that a typo in your actual component or just your comment? Also, I've included an `otherStyles` example in my answer which is working for me. – sammyt Jul 29 '20 at 17:41

How to apply values from props to styles?

1 Answers1