styled.View does not see props-CodePudding

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:

As you can see, buttons are in row

CodePudding user response：

You don't pass the props to StyledFlex.

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

CodePudding user response：

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"};
`;