Styled Components in React Native - Not receiving props

Question

I am new to React Native and also to Styled Components and I am having a problem when combining both and trying to make a Custom Styled Component reusable passing props to it.

I searched everywhere, not only in Stack Overflow, and it seems that my issue is not covered in any question/blog post.

My Custom Styled Component is as follows (inside CustomText.js ):

import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';

export default function CustomText({ children, companyName, jobTitle }) {
  return (
    <StyledText companyName jobTitle>
      {children}
    </StyledText>
  );
}

const StyledText = styled.Text`
  font-weight: bold;
  font-size: 20px;
  ${(props) => {
    if (props.jobTitle) {
      return css`
        color: green;
     `;
    }
    if (props.companyName) {
      return css`
        color: red;
      `;
    }
  }}
`;

CustomText.defaultProps = {
  companyName: null,
  jobTitle: null,
};

CustomText.propTypes = {
  children: PropTypes.string.isRequired,
  companyName: PropTypes.any,
  jobTitle: PropTypes.any,
};

and the way I am using it is (in ComponentA.js ):

<CustomText jobTitle>{item.title}</CustomText>

and (in ComponentB.js ):

<CustomText companyName>{item.name}</CustomText>

The weird thing is that only the first conditional is executed, independently of which property is received, like it is ignoring the prop's value at all. In the previous example, Both ComponentA.js and ComponentB.js render green text.

I tried many things, such as:

• writing the two conditionals under one global {}
• passing a single prop like textType="company" && textType="job" and applying the correct style for each one
• without using the css property of 'styled-components' library, set the desired style with: ${props => props.companyName && "color: red;"} && ${props => props. jobTitle && "color: green;"} ${props => props. jobTitle && "color: green;"}

Does anyone know how to solve this issue? It is driving my crazy as I am not being able to find a solution:S

Thank you in advance!

Answer 1

First of all, you are not passing any specific data to jobTitle prop of CustomText component, when you do the below the value of the jobTitle prop will be true . And in your case, I think that is all you want.

<CustomText jobTitle>{item.name}</CustomText>

If you want to pass the actual content of item.name to jobTitle you should to the bellow thing,

<CustomText jobTitle={item.name}>{item.name}</CustomText>

And once you extract that data in CustomText component from props you should pass that explicitly otherwise it will be true , and that's what happens in your case when you add both jobTitle and companyName to StyledText in CustomText both values will be true and only the first if condition in the StyledText will be executed because you are returning from there.

<StyledText jobTitle={jobTitle} companyName={companyName}>{children}</StyledText>

Tip : If you want to pass all props received in CustomText except children what you can do is the below,

export default function CustomText({ children, ...otherProps}) {
  return (
    <StyledText {...otherProps}>
      {children}
    </StyledText>
  );
}

Answer 2

After reading your answer I realized that I wasn't passing any prop to the Styled Component at all. I was forgetting to write the corresponding value right after the prop.

I was doing (wrong):

<CustomText companyName>{item.name}</CustomText>

instead of (correct):

<CustomText companyName={value}>{item.name}</CustomText>

Thanks a lot for your help Ajay!