react-native with styled-components parent prop

user_1927064 0
Viewed 2127

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

react-native styled-components
2 Answers

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'};
`
user_38616910
Related