E-Commerce UI

Welcome back! 🎨

It's no secret that using Tailwind CSS can save you a lot of time when creating beautiful apps. It also provides consistency in your UI.

NativeWind uses Tailwind CSS as scripting language to create a universal style system for React Native. NativeWind components can be shared between platforms and will output their styles as CSS StyleSheet on web and StyleSheet.create for native.

Its goals are to provide a consistent styling experience across all platforms, and improve Developer UX and code maintainability.

Create expo project

npx create-expo-app e-commerce-ui-react-native-nativewind

Install NativeWind usign Expo

You will need to install nativewindand it's peer dependency tailwindcss.

yarn add nativewind
yarn add --dev tailwindcss

Setup Tailwind CSS

Run npx tailwindcss init to create a tailwind.config.jsfile

npx tailwindcss init

Add the paths to all of your component files in your tailwind.config.js file.

// tailwind.config.js
 
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./<custom directory>/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Dark mode

Working with dark mode is quite easy. We use the hook useColorScheme provided by nativewind and use the functions provided to update the scheme. The key to dark mode is to add the prefix dark: to every Tailwind classname. Look at the example:

import { useColorScheme } from "nativewind";
const { colorScheme, toggleColorScheme } = useColorScheme();
return (
  <View className=" bg-gray-200 dark:bg-black">
    <Switch value={colorScheme === "dark"} onChange={toggleColorScheme} />
    <StatusBar style={colorScheme === "dark" ? "light" : "dark"} />
  </View>
);

Icons with expo

A great way to use icons inside Expo is to use the library expo vecto icons. it is very easy to use, look at the next example:

import { AntDesign } from "@expo/vector-icons";
 
return (
  <AntDesign
    name="minuscircleo"
    size={24}
    onPress={() => setCount(count - 1)}
  />
);

Links