react-native with styled-components parent prop

3
votes

I'm working with styled-components on my react-native project and I wonder how can I get the parent prop from a child element .. here is an example, I've 2 styled-components

const First = styled.View`
  display: flex;
  width: 50px;
  height: 50px;
  background-color: ${props => props.selected ? 'blue' : 'red'};
`
const Second = styled.Text`
  // here I want to check if First has the selected prop.
  color: ${props => props.selected ? '#fff' : '#000'};
`

and my own React component 

const Test = () = (
  <First selected>
    <Second>Test</Second>
  </First>
)

now how can I check if Seconds father (which is First) has the selected prop ? I know it will work if i'll give the selected attr to Second but it's not what I'm trying to achieve ... there must be a way because they nested, I tried to console log and props arg but I couldn't find the parent value in the object that the child returns.

thanks

2
react-nativestyled-components
Pass the parent props as new props to child.. - John
@John, thats the point that I dont want to use the same prop twice, I want to get it from the parent - greW
You are getting it from parent itself when you pass as props to child. This is the simplest way. However it is not recommended to access parent instance in child. Check this stackoverflow.com/a/34257785/1066839 - John
@John, thanks that's exactly what I looked for, I was kinda sure there is a 'helper' or something from styled-components that would help in these kind of situations. - greW

2 Answers

0
votes

If you want to follow React's pattern, there is one way. To pass the same prop to the <second>.

what you can do though, is to use an appropriate prop to the child like the following

const Test = () = (
  <First selected>
    <Second isParentSelected={selected} >Test</Second>
  </First>
)

and then

const Second = styled.Text`
  color: ${props => props.isParentSelected ? '#fff' : '#000'};
`
-1
votes

If you really need this behaviour you can style the child inside the parents as follows, however Matthew's answer is the preferred way:

import styled from "styled-components";

const Second = styled.Text`...`;
const First = styled.View`
    display: flex;
    width: 50px;
    height: 50px;
    background-color: ${props => props.selected ? 'blue' : 'red'};

    ${Second} {
        color: ${props => props.selected ? '#fff' : '#000'};
    }
`

Alternatively you can wrap all the new styles in block with the css function:

import styled, {css} from "styled-components";

const Second = styled.Text`
    color: #000
`;

const First = styled.View`
    display: flex;
    width: 50px;
    height: 50px;
    background-color: red;

    ${props => props.selected && css`
        background-color: blue;
        ${Second} {
            color: #fff;
        }
    `}
`