DEV Community

Daniel Odii
Daniel Odii

Posted on

Styling in React Native: Choosing What Works for You

#reactnative #mobile #expo

I recently started out with native development, coming from a web background with Vue and mostly React. The transition wasn’t as difficult as I expected. A lot of the concepts carry over, so I got comfortable quickly and jumped straight into building and maintaining existing apps.

As someone who leans heavily into design, one thing that stood out to me was styling. It felt familiar… but not completely. At first, I assumed styling in React Native was limited to StyleSheet. Turns out, that’s not the full picture.

Then I came across NativeWind, which is basically Tailwind for React Native, and it changed how I approached styling entirely.

In this article, I’ll walk through the different ways you can style a React Native app, with a bit more focus on NativeWind since it’s what I naturally gravitated toward.

1. The Default Way (StyleSheet)

This is the foundation. Every React Native project supports this out of the box.

Example 

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello World</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  title: "{"
    fontSize: 20,
    fontWeight: 'bold',
  },
});
Enter fullscreen mode Exit fullscreen mode

Why people use it

It’s simple, predictable, and performs well. No extra setup needed.

The downside

It starts to feel repetitive as your UI grows. Reusing styles across components isn’t always clean.

2. Inline Styling (Quick but Limited)

You can also define styles directly inside your components.

Example 

<View style={{ padding: 20, backgroundColor: 'white' }}>
  <Text style={{ fontSize: 18 }}>Hello World</Text>
</View>
Enter fullscreen mode Exit fullscreen mode

When it works

  • Quick prototyping
  • Small components

Where it breaks

It gets messy fast. Hard to maintain, harder to reuse.

3. Utility-First Styling with NativeWind

This is where things get interesting.

Instead of writing styles in objects, you use utility classes directly on your components, similar to Tailwind on the web.

Example 

import { View, Text } from 'react-native';

export default function App() {
  return (
    <View className="flex-1 justify-center items-center bg-white">
      <Text className="text-lg font-bold">Hello World</Text>
    </View>
  );
}
Enter fullscreen mode Exit fullscreen mode

Why it stands out

  • Very fast to write
  • Less switching between files
  • Encourages consistency in spacing, sizing, and layout

Real advantage

If you're coming from web development, this feels natural. You already know how to think in utility classes, so you move faster almost immediately.

Tradeoffs

  • Long class strings
  • Requires setup
  • Can look noisy if not structured well

Still, for many developers (myself included), the speed and familiarity make it worth it.

4. Component-Based Styling with Styled Components

This approach lets you create styled components with styles attached to them.

Example 

import styled from 'styled-components/native';

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: white;
`;

const Title = styled.Text`
  font-size: 20px;
  font-weight: bold;
`;

export default function App() {
  return (
    <Container>
      <Title>Hello World</Title>
    </Container>
  );
}
Enter fullscreen mode Exit fullscreen mode

Why people like it

  • Clean separation
  • Reusable components
  • Easy to scale

Downsides

  • Slight overhead
  • Can feel heavy for simple apps

5. UI Libraries (Pre-styled Components)

Sometimes you don’t want to style everything from scratch.

Libraries like React Native Paper or NativeBase give you ready-made components.

Example 

import { Button } from 'react-native-paper';

<Button mode="contained">Click Me</Button>
Enter fullscreen mode Exit fullscreen mode

Why use them

  • Faster development
  • Consistent design out of the box

Tradeoffs

  • Less control over design
  • Can feel generic if not customized

6. Platform-Specific Styling

React Native also allows you to style differently for iOS and Android when needed.

Example 

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  text: {
    fontSize: Platform.OS === 'ios' ? 20 : 18,
  },
});
Enter fullscreen mode Exit fullscreen mode

This is useful when platform differences actually matter.

So… What Should You Use?

It depends on your workflow.

  • Want stability and simplicity → StyleSheet
  • Want speed and less repetition → NativeWind
  • Want structured, reusable components → Styled Components
  • Want ready-made UI → Component libraries

Before you sleep...

There isn’t a single “correct” way to style a React Native app. Most real-world apps mix approaches.

For me, NativeWind made things click faster because it felt like home coming from the web. But that doesn’t make it the best for everyone.

Pick what helps you move fast and stay organized.

Disclaimer

This article is not sponsored by NativeWind.
I just like things that let me write less code and still feel like I know what I’m doing.

Top comments (0)