State management is a crutial part of any web application, it helps keeping track of information (state) such as user inputs or app data. There are many different options that are available to use when it comes to this topic. One such library is Zustand.

In today's blog we are going to understand what Zustand is and how it works. This is going to be a series of blogs based on Zustand where we will be starting with simple example and ultimately performing CRUD operations.

Zustand: where bears, beets, and state management meet! 🐻🍠 Unleashing the wild side of React with a touch of Dwight's beary charm.

Understanding Zustand

A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy API based on hooks, isn't boilerplatey or opinionated.

This is the definition on its GitHub repository GitHub - pmndrs/zustand: 🐻

Just the definition is enough to understand how Zustand works. Here, coding is as important to know as how it actually works behind the scenes.

bearbones - Actually it's called barebones - reduced to the essential elements.

The first key term in the definition is Flux Principles, but what is Flux?

Flux is the application architecture that Facebook uses for building client-side web applications.

The architecture comprises of 4 parts:

1. Actions

2. Dispatchers

3. Store

4. Views

To understand how Flux architecture works, let us imagine a simple scenario of Supermarket Checkout System.

Imagine being at a supermarket.

• View:

  • Anything we can see or interact with.

  • e.g.->Each product represents view.

• Actions:

  • Things you want to do.

  • e.g.->Adding a product to shopping cart is like an Action. For example, putting an apple in the cart is similar to dispatching an "ADD_TO_CART" action.

• Dispatcher:

  • A traffic controller.

  • e.g.->The cashier is the dispatcher. He/she makes sure that each and every item is processed. It processes one item and then takes another, basically managing the flow of actions.

• Store:

  • Stores contain the application state and logic.

  • e.g.->When we add items to the cart, the store gets updated.

This was a simple overview, below is the detailed view.

Now that you understand what flux principles is, it would be easy to understand the code, let us take one simple example.

Implementation

I am using Vite, I have initialized the project using yarn create vite

Also while setting up, I have installed Zustand using yarn add zustand

Now when you initialize a project using Vite, the default App.tsx file has a counter example, will replace it by using Zustand later.

Cleaned up the code a little, now there are two button with basic onClick function which will increase and decrease the count by 1.

import { useState } from "react";
import "./App.css";
function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>Increase</button>
        <h1>count is {count}</h1>
        <button onClick={() => setCount((count) => count - 1)}>Decrease</button>
      </div>
    </>
  );
}
export default App;

Now, as Zustand is based on flux architecture, let us create a store. Remember Zustand is unopinionated, meaning that you can have folder and code structure as you like, I personally like to keep it different, so will create a folder named store and have a file named useCountStore.ts.

To use Zustand, we first bring in a special function called create by importing it.

import { create } from "zustand";

We then use this function by providing a set of instructions (a callback function) that defines our state and the actions to change it. The result is a custom hook, like a bundled package, containing our state and functions neatly organized for use in our application.

As I am using typescript, I defined types for my State and Actions.

type State = {
  count: number;
};
type Actions = {
  increment: () => void;
  decrement: () => void;
  reset: () => void;
};

Here is my main code, as you can see, I have defined increment and decrement functions. If you observer carefully there is set parameter provided by zustand within the callback function. It is used to update the state within the store.

const useCountStore = create<State & Actions>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

Now this set function takes an argument, it can either be a function or an object:

• Function: If we pass a function to set, it receives the current state, and we can use that to calculate the new state. You can see the increment and decrement function, in that function we are using current state to increase or decrease the count by 1.

• Object: If we pass an object, it will directly replace the current state with the new object. You can see this with reset function.

Let us now export this function.

import { create } from "zustand";

type State = {
  count: number;
};

type Actions = {
  increment: () => void;
  decrement: () => void;
  reset: () => void;
};

const useCountStore = create<State & Actions>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

export default useCountStore;

Now we can use this hook anywhere. Let us import this hook in App.tsx file. I have modified the code and now replaced useState with our hook.

import "./App.css";
import useCountStore from "./store/useCountStore";

function App() {
  const { count, increment, decrement, reset } = useCountStore();
  return (
    <>
      <div className="card">
        <button onClick={() => increment()}>Increase</button>
        <button onClick={() => decrement()}>Decrease</button>
        <h1>count is {count}</h1>
        <button onClick={() => reset()}>Reset Count</button>
      </div>
    </>
  );
}

export default App;

Now if you try to increment or decrement, the value of count will be changed globally and you can get the current value of count using the useCountStore hook anywhere in the project.

Conclusion:

As we conclude this introduction to Zustand with a simple example, get ready for the next blog, where we'll delve into more advanced features.

Any questions or tech thoughts? I'm here and excited to connect. Don't miss the upcoming part; make sure to follow for updates.

The default tab bar in React Navigation is rather basic, and attempting to customize it can lead to a messy outcome. Fortunately, there is a straightforward way to implement custom tabs using the Material Top Tab Bar in React Native with React Navigation. The setup process is quick and can be completed in just a few minutes. Today in this blog we are going to understand how it works.

I am assuming you did the setup of React Navigation in your project, if not follow the steps to set up React Navigation and create a native stack navigator, it's pretty easy.

To have a tab bar on the top of the screen, that lets us switch between routes by tapping the tabs or swiping horizontally, we have Material Tob Tabs Navigator by React Navigation. Please refer docs.

This is how my App.tsx looks. It is always a good idea to create separate files for your stack screens. Once your project grows and there are multiple screens the App.tsx becomes cluttered!

import {NavigationContainer} from '@react-navigation/native';
// ...
function App(): React.JSX.Element {
  return (
    <NavigationContainer>
      <SafeAreaView style={styles.mainContainer}>
        <Navigation />
      </SafeAreaView>
    </NavigationContainer>
  );
}

Navigation.tsx

import {createNativeStackNavigator} from '@react-navigation/native-stack';
// ...
const Navigation = () => {
  const Stack = createNativeStackNavigator();
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen
        options={{headerShown: false}}
        name="Home"
        component={Homescreen}
      />
    </Stack.Navigator>
  );
};
export default Navigation;

Homescreen.tsx

import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
//...
const Homescreen = () => {
  const Tab = createMaterialTopTabNavigator();
  return (
    <Tab.Navigator
      tabBar={props => <CustomTabBar {...props} />}
      style={styles.tabStyle}>
      <Tab.Screen name="Demo1" component={DemoScreen1} />
      <Tab.Screen name="Demo2" component={DemoScreen2} />
      <Tab.Screen
        options={{title: 'Demo Screen 3'}}
        name="Demo3"
        component={DemoScreen3}
      />
    </Tab.Navigator>
  );
};

Here is the custom tabBar function

CustomTabBar.tsx

import {Animated, View, TouchableOpacity} from 'react-native';

export default function CustomTabBar({state, descriptors, navigation, position}: any) {
  return (
    <View style={{flexDirection: 'row'}}>
      {state.routes.map((route, index) => {
        const {options} = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name, route.params);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        const inputRange = state.routes.map((_, i) => i);
        const opacity = position.interpolate({
          inputRange,
          outputRange: inputRange.map(i => (i === index ? 1 : 0)),
        });

        return (
          <TouchableOpacity
            key={route.key}
            accessibilityRole="button"
            accessibilityState={isFocused ? {selected: true} : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{flex: 1}}>
            <Animated.Text style={{color: 'black'}}>{label}</Animated.Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

Let us break down the function.

Internal working

These 4 parameters are important while building a Custom tab component:

State

• Imagine this as a snapshot of where you are in your app. It keeps track of which screen you're currently viewing and provides a list of all possible routes.

• If you just console.log the state, you will get this object, each time you change a screen the state will get updated.

• history -> The history is like a record or list of all the screens you have visited in the past. Not all parts of the app have this history feature—only certain parts, like tabs or drawers, might keep track of where you've been

• Index -> Position of the focused screen in the routes array.

• routesNames -> Name of the screen defined in the navigator.

// console.log(state)  
{
    "history": [
      {
        "key": "Demo1-tDHcPmmRmdJs837m1-olK",
        "type": "route"
      },
      {
        "key": "Demo3--0m-QGhSnWqixDeKdoS7D",
        "type": "route"
      }
    ],
    "index": 2,
    "key": "tab-rsFLKC9b4gow_h2x6QelX",
    "routeNames": [
      "Demo1",
      "Demo2",
      "Demo3"
    ],
    "routes": [
      {
        "key": "Demo1-tDHcPmmRmdJs837m1-olK",
        "name": "Demo1",
        "params": undefined
      },
      {
        "key": "Demo2-EimNrVsIA-ZXW8mCSSxua",
        "name": "Demo2",
        "params": undefined
      },
      {
        "key": "Demo3--0m-QGhSnWqixDeKdoS7D",
        "name": "Demo3",
        "params": undefined
      }
    ],
    "stale": false,
    "type": "tab"
  }

Descriptors

• Think of descriptors as a set of instructions for each route. It tells the app how to handle and display each screen, including any special instructions for the tab bar.

    // console.log(descriptors)
    "Demo3-4vfsJoiMZndxF-MRA2cpj": {
      "navigation": {
        "addListener": [
          FunctionaddListener
        ],
        "isFocused": [
          FunctionisFocused
        ],
        "navigate": [
          Functionanonymous
        ],
        "replace": [
          Functionanonymous
        ],
    ...and many more
      },
      "options": {
        "title": "Demo SCreen 3"
      },
      "render": [
        Functionrender
      ],
      "route": {
        "key": "Demo3-4vfsJoiMZndxF-MRA2cpj",
        "name": "Demo3",
        "params": undefined
      }
    }
  

Navigation

• The navigation prop is like a remote control for moving around in your app. It gives you buttons to go to different screens, go back, and perform other actions related to navigation.

•       // console.log(navigation)
       {
          "addListener": [
            FunctionaddListener
          ],
          "dispatch": [
            Functiondispatch
          ],
          "pop": [
            Functionanonymous
          ],
          "popToTop": [
            Functionanonymous
          ],
          "push": [
            Functionanonymous
          ],
          "replace": [
            Functionanonymous
          ],
        //....and many more
        }
  

Position

• The position helps in creating cool effects, like making tabs fade in or out based on where you are on the list of screens.

•   // console.log(position)
    0.8722222447395325
  

Now that we know why each parameter is important, it is easy to understand the code. Let us have a look at onPress function.

const onPress = () => {
    const event = navigation.emit({
        type: 'tabPress',
        target: route.key,
        canPreventDefault: true,
        });
        if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name, route.params);
          }
    };

The default behavior is what normally happens when you tap a tab: it takes you to the screen connected to that tab. The code checks if anything wants to stop this default action before allowing it to happen.

Conclusion

In this post, we've explored how a custom tab bar function works in React Navigation, focusing on the Material Top Tab Bar in React Native. By breaking down the essential parameters—state, descriptors, navigation, and position—we've unveiled the function's operation.

If you have any questions or just want to talk about tech in general, feel free to reach out to me. Hopefully, this helps you understand React Navigation better.