Advanced TODO App in react-native using expo,shopify-restyle, zustand, and typescript PART-1

We’ll use react-native to make a todo list app using typescript, zustand, shopify-restyle hop over to the video tutorials

Setting up boilerplate using expo

npx create-expo-app --template

Folder structure

Absolute imports

yarn add babel-plugin-module-resolver

Update the babel.config.js

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          alias: {
            "@": "./src",
          },
        },
      ],
    ],
  }
}

Update ts-config

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Data Model Design

Setup navigation

Install the dependencies

yarn add  @react-navigation/native @react-navigation/native-stack

Setup types for navigation

We’ll use single stack navigator which will have

1. Home Screen
2. Create task
3. Edit task
4. Create category
5. Edit category

Define types, create navigation/types.ts

export type RootStackParamList = {
  HomeScreen: undefined
  CreateTaskScreen: undefined
  EditTaskScreen: {
    task: ITask
  }
  CreateCategoryScreen: undefined
  EditCategoryScreen: {
    category: ICategory
  }
}

annotate useNavigation()

export type RootStackScreenProps<T extends keyof RootStackParamList> =
  StackScreenProps<RootStackParamList, T>


declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

create navigation/index.tsx

import CreateNewCategory from "@/screens/create-new-category"
import CreateNewTask from "@/screens/create-new-task"
import EditCategory from "@/screens/edit-category"
import EditTask from "@/screens/edit-task"
import Home from "@/screens/home"
import { createStackNavigator } from "@react-navigation/stack"
import { RootStackParamList } from "./types"

const Stack = createStackNavigator<RootStackParamList>()

const Navigation = () => {
  return (
    <Stack.Navigator
      initialRouteName="HomeScreen"
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen name="HomeScreen" component={Home} />
      <Stack.Screen name="CreateTaskScreen" component={CreateNewTask} />
      <Stack.Screen name="CreateCategoryScreen" component={CreateNewCategory} />
      <Stack.Screen name="EditCategoryScreen" component={EditCategory} />
      <Stack.Screen name="EditTaskScreen" component={EditTask} />
    </Stack.Navigator>
  )
}

export default Navigation

Wrap the application in NavigationContainer

 <NavigationContainer>
   <Navigation />
</NavigationContainer>

Theme setup

We’ll choose Shopify-restyle solution for styling in react-native

yarn add @shopify/restyle

Create theme folder and within it create

1. index.ts
2. colors.ts
3. textVariants.ts

textVariants

We’ll be using the goodies of tailwind naming conventions

create text-variants.ts

export const textVariants = {
  defaults:{},
  textBase: {
    fontSize: 16,
    lineHeight: 24,
  },
  textLg: {
    fontSize: 18,
    lineHeight: 28,
  },
  textXl: {
    fontSize: 20,
    lineHeight: 28,
  },
  text2Xl: {
    fontSize: 24,
    lineHeight: 32,
  },
  text4Xl: {
    fontSize: 36,
    lineHeight: 40,
  },

}

create colors.ts

const palette = {
  white: "#ffffff",

  gray50: "#f9fafb",
  gray100: "#f3f4f6",
  gray200: "#e5e7eb",
  gray900: "#111827",

  // Reds

  red500: "#ef4444",
  red600: "#dc2626",

  // ambers

  amber300: "#fcd34d",
  amber400: "#fbbf24",

  green400: "#4ade80",
  green500: "#22c55e",


  blu200: "#bfdbfe",
  blu500: "#3b82f6",
  blu600: "#2563eb",

  violet500: "#6366f1",
  violet600: "#4f46e5",

  purple500: "#a855f7",
  purple600: "#9333ea",


  pink500: "#ec4899",
  pink600: "#db2777",

  rose400: "#fb7185",
  rose500: "#f43f5e",
}


export const colors = {
  white: palette.white,
  // grays
  gray50: palette.gray50,
  gray100: palette.gray100,
  gray200: palette.gray200,
  gray900: palette.gray900,

  red500: palette.red500,

  orange400: palette.orange400,
  orange500: palette.orange500,

  amber300: palette.amber300,
  amber400: palette.amber400,

  green400: palette.green400,
  green500: palette.green500,

  sky400: palette.sky400,
  sky500: palette.sky500,

  blu200: palette.blu200,
  blu500: palette.blu500,

  purple500: palette.purple500,

  fuchsia500: palette.fuchsia500,

  pink500: palette.pink500,

  rose400: palette.rose400,
  rose500: palette.rose500,
}

Define theme using createTheme that @shopify/restyle exports then we’ll define spacing,colors which can be imported from colors.ts,borderRadius

theme/index.ts

Let’s use everything

import { textVariants } from "./text-variants"
import { createBox, createText, createTheme } from "@shopify/restyle"
import { colors } from "./colors"

export const theme = createTheme({
  colors: colors,
  breakpoints: {},
  spacing: {
    "-1": -4,
    "-2": -8,
    "-3": -12,
    "-4": -16,
    "1": 4,
    "2": 8,
    "3": 12,
    "4": 16,
  },
  textVariants: textVariants ,
})

export const Box = createBox<Theme>()
export const Text = createText<Theme>()

export type Theme = typeof theme
export default theme

Let’s wrap our entire application so that we can use the theme

import Navigation from "@/navigation"
import theme from "@/utils/theme"
import { NavigationContainer } from "@react-navigation/native"
import { ThemeProvider } from "@shopify/restyle"

export default function App() {
  return (
    <NavigationContainer>
      <ThemeProvider theme={theme}>
        <Navigation />
      </ThemeProvider>
    </NavigationContainer>
  )
}