Invalid YGDirection 'row' should be one of: (inherit, ltr, rtl) - React Native

user_339205 0
Viewed 2115

I get the below error on iOS as a dismissable error. (pressing esc button hides the error and shows my app.)

Invalid YGDirection 'row' should be one of: (inherit, ltr, rtl) - React Native

I am using styled components on my project but I don't think this error caused by the component.

Since react-native uses flex layout, we should be able to use the flex-direction attribute.

My wrapper component is below:

const Wrapper = styled.View`
  flex: 1;
  align-items: ${props => props.align};
  justify-content: ${props => props.justify};
  flex-direction: ${props => props.direction};
  flex-grow: ${props => props.grow};
  flex-shrink: ${props => props.shrink};
`;

Wrapper.defaultProps = {
  direction: 'column',
  align: 'flex-start',
  justify: 'flex-start',
  grow: 1,
  shrink: 0,
};

Am I missing something? The full error is something like below: enter image description here

react-native-ios react-native
3 Answers

I faced the same problem and solved it after few hours.

Search for any Text component with direction prop in it.
<Text direction={value} />
change it to
<Text dir={value} /> or any prop name you like

Base on your code, it would be in your Wrapper with the prop name direction.

user_18479670

if you using nativebase and get the same error, find the <Flex></Flex> tag that have direction="row" options, comment that options will solve the error,

you can also replace <Flex></Flex> with <HStack></HStack> if you want to achieve a similar result

user_118447170

I faced a similar issue in my RN project. For me, the issue occurred because of flex-direction.

If you are using flex, instead of direction, it should be flexDirection.

So instead of:

<Flex direction="row"></Flex>

Do this:

<Flex flexDirection={"row"}></Flex>

This solved my issue.

user_30222480
Related