Modern Approaches to Styling React Native Apps

React Native is a known framework for building mobile applications with React. In its workspace you will find some similarities with web development, such as styling. In RN apps, we style using plain JavaScript objects with no extra dependencies, which will ultimately have a syntax closer to plain CSS.

const styles = StyleSheet.create({
    button: {
        paddingVertical: 10,
        paddingHorizontal: 16,
        backgroundColor: "#000",
        borderRadius: 10,
        alignItems: "center"
    }
})

Although using objects can be kind of annoying sometimes, thankfully, there are better options, which is what we’re going to explore in this post.

Layout engine

Have you ever thought about how we can use the same properties we usually use on CSS in mobile environments? We’re not talking about having the styles in embedded browsers or webviews, but rather in regular native views.

This is courtesy of the Yoga layout engine, a C++-flavored API embeddable layout engine compatible with CSS features. This is what React Native uses under the hood to map our JS objects into layout changes in those views.

So, what we would usually write as:

.container {
    border: 1px solid red;
}

Would need to be written as:

container: {
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: 'red'
}

This comes with some caveats though, there is a limited amount of properties and units, and some properties can act differently when compared to CSS. For instance, the default orientation for a Flexbox container is a column instead of a row, while the box sizing default is always to border-box.

You can see the full list of props here.

The developer also needs to handle the time-consuming process of making sure UI components look and feel the same or, more realistically, closer when comparing one platform versus another (Android, iOS, Web, tvOS, visionOS).

(Native UI date-picker component from iOS and Android compared)

Themes and StyleSheet superset

The StyleSheet API is pretty much lean and simple, thus it can be extended to allow theming and more strict typing.

const theme = {
    colors: {...},
    typography: {...},
    sizes: {...}
} as const;

type StyleRules<T> = {
  [P in keyof T]: ViewStyle | TextStyle | ImageStyle;
};

const style = <T extends StyleRules<T> | StyleRules<any>>(
  fn: (custom: typeof theme) => StyleRules<T>
) => {
  return StyleSheet.create(fn(theme));
};

We quickly gain some typescript benefits from this:

This API also provides two more methods we can use to better compose our styles.

compose()

Compose combines two styles such as typographyStyles1 and typographyStyles2 in one object. If the property present in style1 is used on styles2 this one will be overridden.

const typographyStyles1 = StyleSheet.create({
  header: {
    fontSize: 20,
    fontWeight: 700,
    lineHeight: 22,
  },
});

const typographyStyles2 = StyleSheet.create({
  paragraph: {
    fontSize: 16,
    fontWeight: 400,
  },
});

const composed = StyleSheet.compose(
  typographyStyles1.header,
  typographyStyles2.paragraph
);
// [{"fontSize": 20, "fontWeight": 700, "lineHeight": 22}, {"fontSize": 16, "fontWeight": 400}]

flatten()

Flatten also combines styles except that for this case it will exclude duplicated keys in one aggregated style object.

const stylesA = StyleSheet.create({ a: { flex: 1, color: "red" } });
const stylesB = StyleSheet.create({ b: { color: "blue" } });

const flatten = StyleSheet.flatten([stylesA.a, stylesB.b]);
// {"color": "blue", "flex": 1}}

react-native-unistyles

This introduces the first styling solution, which is essentially a superset of the StyleSheet that comes with a familiar API for the module plus some extras:

• Variants
• Compound variants
• Themes
• Dynamic functions

Variants

Variants can be used to determine reusable variants for your component’s style to address specific needs or quickly switch between possible states based on conditions.

import { StyleSheet } from "react-native-unistyles";

const uniStyles = StyleSheet.create({
  card: {
     variants: {
       size: {
         sm: {
           width: 100,
           height: 100,
         },
         md: {
            width: 200,
            height: 200,
         },
         lg: {
            width: 300,
            height: 300
         },
       },
       shadowed: {
           true: {
                elevation: 10
           }
        },
     },
   },
 });

Which then can be used as such:

const Box = () => {
    unistyles.useVariants({
        size: "md"
    })

    return <View style={unistyles.card} />
}

Compound variants

Compound variants are essentially super variants that are activated based on multiple variants that are met.

We can benefit from avoiding to have to deal with multiple style objects and complex conditions to just one set of intents defined under compoundVariants:

import { StyleSheet } from "react-native-unistyles";

const linkStyles = StyleSheet.create({
    // ...,
    compoundVariants: [
        {
            isUnderline: true,
            color: 'link',
            icon: false
        }
    ]
})

Utility-first

Ok, I get it — people will keep following the Tailwind hype train.

But have you ever thought about using Tailwind in React Native apps? Today this is possible by using the NativeWind library.

NativeWind is a package that intersects between React Native’s layout engine with Tailwind config. So, you can actually use tailwind classes in Views, Text, Image, or Pressable components.

The biggest advantage of this is no longer having to deal with arbitrary values and choosing values for your styles. In other words, you will take advantage of the Tailwind default theme, or customize it with your own.

It works by first compiling Tailwind styles to StyleSheet.create objects at build time, then determining the styles to be applied to the component at runtime. This allows to also mix-and-match between plain StyleSheet objects and tailwind classes.

    <View className="p-3">
      <View className="shadow-sm shadow-stone-300 border border-gray-100 rounded-md bg-white">
        <Image
          style={{ width: "100%", height: 100 }}
          source={{ uri: images.card }}
        />
        <View className="p-5 gap-4">
          <Text className="font-extrabold text-xl">Heading</Text>
          <Text className="font-light text-md leading-6 text-gray-600">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Dignissimos, veniam.
          </Text>
        </View>
        <View className="p-5">
          <Pressable className="bg-black p-5 w-36 max-w-screen-sm rounded-md">
            <Text className="font-bold text-white">Get started</Text>
          </Pressable>
        </View>
      </View>
    </View>

UI Frameworks

The next step forward is component-based styling provided by UI frameworks.

For this need, we’re going to use gluestack-ui (previously known as NativeBase) is a UI library that provides ready-made components built on top of NativeWind.

Gluestack components are universal, styled, and accessible components that work on mobile and web.

Adding a new component is as simple as copy-paste:

npx gluestack-ui add box

import { Box } from "@/components/ui/box";
import { Text } from "@/components/ui/text";
import { Heading } from "@/components/ui/heading";

function Card() {
    return (
        <Box className="p-5 gap-4">
          <Heading>Heading</Heading>
          <Text>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Dignissimos, veniam.
          </Text>
        </Box>
    )
}

A second styling approach would be tamagui UI kit, a collection of styled and performant cross-platform components.

import { Button, View, Card, H2, Paragraph, Image } from "tamagui";

const DemoCard = () => (
  <Card elevate elevation={30} bordered>
    <Image
      objectFit="cover"
      alignSelf="center"
      height={100}
      width="100%"
      source={{ uri: images.card }}
    />
    <Card.Header margin={0}>
      <H2 size="$4" fontWeight={800}>
        Heading
      </H2>
      <Paragraph>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos,
        veniam.
      </Paragraph>
    </Card.Header>
    <Card.Footer paddingHorizontal="$4" paddingVertical="$3">
      <Avatar circular size="$6">
        <Avatar.Image src="https://i.pravatar.cc/200?img=68" />
        <Avatar.Fallback backgroundColor="red" />
      </Avatar>
      <Stack padding="$2">
        <H4 size="$1" fontWeight={600}>
          John Doe
        </H4>
        <Paragraph>Writer</Paragraph>
      </Stack>
    </Card.Footer>
  </Card>
);

Should I use them?

Someone could argue that these solutions can be overkill and that using the regular StyleSheet API should be enough, which is not entirely wrong.

However, there is a major concern when building consistent components from scratch which is to handle specific accessibility cases and have the design to match between native and web platforms.

Tools, such as react-native-unistyles, provide more granular control over your styles, while gluestack-ui shines in the developer experience.

Alternatives

In this article, we’ve explored react-native-unistyles, NativeWind, gluestack-ui and tamagui styling approaches to help in development speed and consistency. However, these are not the only options for styling RN apps.

Some honorable mentions:

• magnus-ui
• Shopify restyle
• styled-components/native
• react-native-extended-stylesheet

We want to work with you. Check out our "What We Do" section!