DEV Community

Cover image for React Native Conditional Rendering
Vladimir Vovk
Vladimir Vovk

Posted on

React Native Conditional Rendering

In general, conditional rendering in React Native is the same as in React. But be aware, that in React Native we can render strings only inside the Text component. So, for example, if we will try to put a string inside a View we will get an error.

Inline if with logical && operator.

<View>
  {!!error && <ErrorMessage />}
</View>
Enter fullscreen mode Exit fullscreen mode

☝🏻 Double negation !! operator is very important here (also we can use the Boolean function), because it ensures that the left part of the condition will be a boolean value.

Why it is important? Because logical β€œand” operator && will return the right side of the condition if the left side is truthy. And will return the left side of the condition if the left side is falsy.

Imaging we have a component:

<View>
  {error && <ErrorMessage />}
</View>
Enter fullscreen mode Exit fullscreen mode

If the error variable will be an object, null or undefined everything will work as expected. But if we will get an empty string for the error (error = '') then our component will brake, because we can’t render strings inside a View component.

// error = ''
// {error && <something>} will return the error variable,
// which equals to the empty string and we will get:
<View>
  ''
</View>
// which will throw an error, because we 
// can't render strings inside a View
Enter fullscreen mode Exit fullscreen mode

Inline if-else with ternary ? operator.

{error ? <ErrorMessage /> : <SuccessMessage />}
Enter fullscreen mode Exit fullscreen mode

or

{error ? <ErrorMessage /> : null}
Enter fullscreen mode Exit fullscreen mode

Here we can return null or <></> (React Fragment) depend on our component structure and return type.

if statement

...

const Error = () => {
  if (!error) {
    return null
  }

  return <ErrorMessage />
}

return (
  <View>
    <Error />
  </View>
)
Enter fullscreen mode Exit fullscreen mode

Code example

Please use this Expo Snack to see the full code and play with it, press πŸ’– button and happy hacking! πŸŽ‰

Credits

Photo by Isaac Struna on Unsplash.

Top comments (0)