Question 34367 in React native Question posted in
The official React Native documentation can be found here.

styled.View does not see props – React native

This is literally one of my first components on react (and react-native too), so don’t swear if the error is elementary.

I want to make a flex component and I pass the child components and the direction="column" parameter into it, but I still have the flex-direction: row

What is wrong?

file 'flex.js':

const StyledFlex = styled.View`
  display: flex;
  flex-direction: ${props => props.direction || "row"};
`;


 const Flex = (props) => {
   return <StyledFlex> {props.children}</StyledFlex>
 }

----
 
usage:

export default function App() {
  return (
    <View>
      <StatusBar />
      <Header>
        <Flex direction="column">
          <ButtonStatistic />
          <ButtonAdd />
        </Flex>
      </Header>
    </View>
  )
}

Result:

enter image description here

As you can see, buttons are in row

Tags:

2

Answers


  1. 0

    You don’t pass the props to StyledFlex.

    const Flex = (props) => {
  return <StyledFlex {...props}> 
    {props.children}</StyledFlex>
 }
    Login or Signup to reply.
  2. 0

    Yes, I coped with the same issue.

    Please try to install and to use these packages "native-base", "styled-system" and "styled-components"?

    And I am not sure the props is working here.

    const StyledFlex = styled.View`
  display: flex;
  flex-direction: ${props => props.direction || "row"};
`;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search