According to a poll on my Twitter, most of you are interested in learning more about React state management in 2022. It took some time but I finally found the time to write it properly!

Today, I'm going to introduce you Recoil, a global state management library developed and maintained by Meta.

First, I will explain what Recoil is, why it is different from other common solutions and finally we'll build a small app to illustrate what we've seen (link to the github repo at the end).

This article was written and published using Xpost, a productivity tool for technical writer I'm currently building in public.

Here we go!

Why Recoil

A lot of solutions are available when it comes to handling global state management in React.

Disclaimer: this tutorial is focused on client side state management but it also exists server side ones (like react-query or SWR) that we can talk another time!

Context API

The first one, which I have already spoken about here, is the built-in Context API. As I explained, this API is really powerful and is enough for small/medium projects. However, it is intended to share global data only because it will re-render every child component on change which may result in performance issues.

Redux

Another one could be Redux. It's a really well-known library for managing global state, it's a robust and reliable solution, that's why a lot of companies still use it at the moment. Nevertheless, it requires a lot of configuration and boilerplates code to work properly. Moreover, from my experience, the learning curve for juniors is quite sharp.

Recoil

Recoil is (at the moment) less known but is the most promising way for the upcoming years. It offers to manage the global state at the atomic level (you will understand what does it means in a second).

Recoil made global state management way easier to maintain by drastically reducing boilerplates and configuration.

Unlike other solutions, it allows to keep the state as close as possible to the subscribers (components) thus avoiding unnecessary re-rendering and improving performance.

Moreover, Recoil provides a react-like syntax and behavior, the learning curve is therefore pretty soft when you already know how to use hook like useState.

Last but not least, because Recoil is developed and maintained by Meta it supports latest React features like concurrent mode, suspense, error boundaries... and works also with React Native!

There are other libraries like Jotai that share the same concept.

When to use

As for each library installed in your project, Recoil is an additional dependency, you need then to make sure it meets your needs (complexity, scalability, performance) before considering using it.

But you may ask yourself "how to know if it meets my needs ?" ?

In my case, as soon as a project get big enough (lots of components) and complex (multiple contexts, heavy component dependencies etc), I ask myself "would using Recoil help me improve the scalability and performance of the code base ?". If so, I consider implementing it.

Recoil concept

First of all, let's define some Recoil concept that will help you to follow along with this tutorial:

Atom

An Atom is a piece of global state that can be updated and subscribed by components. To be defined, an atom only needs a unique key and a default value. When a component subscribes to an atom it will be automatically re-render if the value changes.

// create atom
const nameState = atom({
  key: 'nameState', // mandatory, must be unique
  default: null, // mandatory default value
  effects: [   // optional array of effects similar to useEffect ]
});

// then use it in components with hooks:

// get value and setter
const [name, setName] = useRecoilState(nameState);
// get only value
const name = useRecoilValue(nameState);
// get only setter
const setName = useSetRecoilState(nameState);

Selector

A Selector is a pure function that can be used to derive atoms and other selectors (synchronously or asynchronously). The selector is automatically refreshed on each change of atom or selector consumed. They can then be used (just like atoms) in components.

// create selector
const charCountSelector = selector({
  key: 'charCountSelector', // mandatory & unique
  get: ({get}) => {
    // consume other atom or selector
    // if nameState change selector will be refreshed automatically
    // and it's subscribers too
    const name = get(nameState);
    return name.length;
  },
});

// use it in components
const count = useRecoilValue(charCountSelector);

Data flow graph

One of the most interesting things here is when you start building with atoms and selectors you get a scalable data graph that will automatically update subscribers (selectors & components) on state change.

Thanks to these data flow it is pretty easy to build reactive apps. Let's imagine we have an atom corresponding to a selected item and a selector responsible for getting latest selected item details. Using Recoil, updating the atom will automatically trigger the selector (request the selected item details) and then notify the subscriber (UI component) to re-render.

Looks like magic right ? 😅

Enough talk, let's see how to implement it in a new app!

Implementation

Disclaimer: I will focus on explaining the Recoil part of the app if you are interested by the style, or simply want to check the code here is the link to the repo. Feel free to send me a message on Twitter if you any questions / comments.

As you can see below, our app will contain a list of users, clicking on a user card will select them, get their information and retrieve their blog posts from the API. Before being displayed their posts will then be filtered by category to appear in a bar chart.

Configure Recoil

Configuring Recoil is really easy it only requires two steps. First, let's install the library:

npm install recoil
// or if you use yarn
yarn add recoil

Then, simply wrap your app in a RecoilRoot provider

function App() {
  // RecoilRoot needs to wrap all component using atoms and selectors
  return (
    <RecoilRoot>
      ...
    </RecoilRoot>
  );
}

And that's it! You're now able to create atoms and selectors! ⚡️

💡 Pro-tips: a good practice here is to use an ErrorBoundary and Suspense components to handle both loading and error states that could happen in your RecoilRoot. Here is my final version:

function App() {
  return (
    <ErrorBoundary>
      <RecoilRoot>
        <Suspense
          fallback={
            <Fallback>
              <Spinner />
            </Fallback>
          }
        >
          <Home />
        </Suspense>
      </RecoilRoot>
    </ErrorBoundary>
  );
}

export default App;

Architecture

Recoil doesn't impose architecture or naming convention. As you can see, in my case, I like to keep all my Recoil-related stuff into a store folder. Inside this folder, atoms and selectors are separated in folders respectively named.

💡 You could also choose to keep your atoms and selectors separated by concern (for ex. all user related stuff in a folder). Once again, it depends of your needs.

Finally, I like to suffix atoms and selectors with their type (for ex. nameAtom.ts and charCountSelector).

List of users

For our use case, we will need two atoms. The first one will contain the list of users and the second the id of the selected one.

// ./src/store/atoms/userListAtom.ts
import { atom } from 'recoil';
import { getUsers } from '../../lib/jsonPlaceholder';
import { User } from '../../models/User';

const userListAtom = atom<User[]>({
  key: 'userListAtom',
  // get users from API and use it as default value
  default: getUsers(),
});

export default userListAtom;

This first atom is simple, we just defined a key and a default value to be our list of users.

// ./src/store/atoms/selectedUserIdAtom.ts
import { atom } from 'recoil';

const selectedUserIdAtom = atom<number | null>({
  key: 'selectedUserIdAtom',
  default: null,
});

export default selectedUserIdAtom;

This second atom is similar, excepted that we defined our default value to null because no user is selected at first.

Once defined we can directly use these atoms in our UserList component. This component will display each user in a card, a click on card will update our selectedUserIdAtom.

UI components (List & ClickableCard) are available in the repo.

// ./src/components/UserInfo.tsx
export default function UserList() {
  const users = useRecoilValue(userListAtom);
  const [userId, setUserId] = useRecoilState(selectedUserIdAtom);

  return (
    <List>
      {users.map(({ id, name }) => (
        <ClickableCard
          key={id}
          isSelected={id === userId}
          onClick={() => setUserId(id)}
        >
          {name}
        </ClickableCard>
      ))}
    </List>
  );
}

Now that we have our working user list let's get the infos and posts for the selected user!

Selected user details

To do so, we we will need 3 selectors. Let's start by retrieving selected user informations.

const selectedUserSelector = selector({
  key: 'selectedUserSelector',
  get: ({ get }) => {
    // subscribe to our atoms
    // selector will be updated if any of the two change
    const users: User[] = get(userListAtom);
    const selectedId = get(selectedUserIdAtom);

    const result = users.find(({ id }) => id === selectedId);
    return result;
  },
});

export default selectedUserSelector;

This first selector will only be responsible for deriving our atoms. If found, it returns the selected user.

You can try it by adding this to the UserInfo component

// ./src/components/UserInfo.tsx
export default function UserInfo() {
  const selectedUser = useRecoilValue(selectedUserSelector);

  if (selectedUser) {
    return (
      <CenteredCard>
        <h3>Selected user details</h3>
        <span>name: {selectedUser.name}</span>
        <span>email: {selectedUser.email}</span>
        <span>company: {selectedUser.company.name}</span>
      </CenteredCard>
    );
  }
  return null;
}

Now, we need to get the posts for our selected user. A common pattern to fetch these data in React would be to use a useEffect hook. However, using Recoil we can delegate this task to another selector:

// ./src/store/selectors/postByUserSelector.ts
const postByUserSelector = selector({
  key: 'postByUserSelector',
  get: async ({ get }) => {
    try {
      // refresh each time we select a new user id
      const selectedId = get(selectedUserIdAtom);
      let result: Post[] | null = null;
      if (selectedId) {
        // if a user is selected => get posts for this id
        result = await getPostsByUser(selectedId);
      }
      return result;
    } catch (error) {
      throw error;
    }
  },
});

export default postByUserSelector;

This selector will be automatically called every time a new user is selected. By subscribing to it, it ensures we will have the posts for the latest user selected.

We need now to transform this output (array of posts) to a dataset for our chart (number of post per category). We could have implemented it in this selector, but it might be useful to be able to access "raw" posts data so we are going to create a last new selector.

// ./src/store/selectors/postByCategorySelector.ts
const postByCategorySelector = selector({
  key: 'postByCategorySelector',
  get: ({ get }) => {
    // subscribe to our previous selector
    const posts = get(postByUserSelector);

    // generate array of number
    const result = fakeCategories.map((category) => {
      const selectedPosts = posts?.filter((post) => post.category === category);
      return selectedPosts?.length ?? 0;
    });
    return result;
  },
});

export default postByCategorySelector;

Next, we need to subscribe to this selector in our BarChart component

// ./src/components/BarChart.tsx
export default function BarChart() {
  const values = useRecoilValue(postByCategorySelector);

  return (
    <ChartContainer>
      <ReactFrappeChart
        type='bar'
        colors={['#273E89']}
        axisOptions={{ xAxisMode: 'tick', yAxisMode: 'tick', xIsSeries: 1 }}
        height={250}
        data={{
          labels: fakeCategories,
          datasets: [{ values }],
        }}
      />
    </ChartContainer>
  );
}

And then, add it in UserInfo as follow

// ./src/components/UserInfo.tsx
export default function UserInfo() {
  const selectedUser = useRecoilValue(selectedUserSelector);

  if (selectedUser) {
    return (
      <CenteredCard>
        <h3>Selected user details</h3>
        <span>name: {selectedUser.name}</span>
        <span>email: {selectedUser.email}</span>
        <span>company: {selectedUser.company.name}</span>
+        <Suspense
+          fallback={
+            <Fallback>
+              <Spinner />
+            </Fallback>
+          }
+        >
+          <BarChart />
+        </Suspense>
      </CenteredCard>
    );
  }
  return null;
}

As you can see, we are using here another Suspense to wrap our BarChart component. Since BarChart subscribe to an async action (getting posts from the API endpoint) adding a Suspense here allow to manage its pending state separately from the rest of the app.

💡 Thanks to this Suspense we are able to display a spinner instead of the chart while fetching posts. Without it, BarChart would use the nearest Suspense (the one in App.tsx in our case) and therefore hide every components while loading (which results in a very bad user experience).

Finally, use our components in the Home page

export default function Home() {
  return (
    <HomeContainer>
      <RecoilLogo />
      <UserList />
      <UserInfo />
    </HomeContainer>
  );
}

Congrats! You made it through this entire tutorial! 🎉

Conclusion & going further

After this tutorial, you should now have a good understanding of the basics of Recoil. If you want to go further I suggest you to start by visiting the Recoil documentation website and more especially to check features like:

• atomFamily & selectorFamily
• concurrent requests (waitForAll, noWait...)
• persistence

I hope you learned something useful, if you have any questions/suggestions do not hesitate to join me on Twitter I will be happy to talk with you all.

See you soon! 👋

- Yannick

• Github repo

As you may have guess, Today’s article will be a little bit “special”, we are going to talk about the project I submitted to the Hashnode x Netlify hackathon!

Disclaimer, here are the links to the live version and the code:

• Live version
• GitHub repo

Oh and other disclaimer, I wrote this blog post using the tool I'm going to introduce 😄

The problem

First of all, let’s talk about the problem I tried to address. As technical writer and / or content creator we are often using multiple platforms to share our articles. This is called "cross-posting" and it allows (if it is well executed) to generate more traffic on your content.

This looks pretty straight right ?

However, it is not as easy for two main reasons:

• In order to keep your SEO as efficient as possible you have to define the original URL of your article (where it was initially published) aka canonical URL. This canonical URL must be passed to every other platform to let the search engine know it is not a duplicate.
• Once you published your blog post on a first platform and get your canonical URL you have to copy-paste your article on every other platforms you want to publish. It is a very repetitive and boring task.

Idea & features

To address this problem, my idea was to create a “hub”, where every content creator get a personal dashboard, the ability to connect their favorite platforms and to create articles thanks to a consistent writing editor. Once a draft is ready to be published, you only have to click a button to directly send it to one or multiple of your blogging platforms without worrying about anything.

Article editor

I started by focusing on the text editor because that’s where we all spend the most time. I wanted to create a nice writing experience so I chose a Notion-like editor. As the image show bellow, it is a markdown editor with instant rendering and shortcut commands (using /). This is (in my opinion) the best compromise between comfort and efficiency.

To make it more convenient I also added an auto-save feature so you don’t have to worry about forgetting.

It is also possible to add images (through a command or by dropping it), embedded videos (youtube).

Finally, just like Notion, you can highlight text to apply styling (bold, line through, etc).

Dashboard

Concerning the dashboard, the idea was to allow the user to manage his blogging platforms, get useful insight but most importantly to find his drafts and published articles.

I also added some quick actions. It is then possible to publish / delete a draft and visit a published article from the dashboard.

I tried to focus on the UI/UX to make each step as easy as possible for the user. You can see below the flow to add a new platform:

After choosing a platform, instructions are shown in a modal to explain to the user where to find the requested informations. He then only have to confirm to get ready.

The publication flow is quite similar:

After clicking “Publish”, a modal appear, the user must choose one or multiple platforms to publish his article. If more than one are selected, he can choose which one to use as original URL thanks to a simple dropdown. Once published the user has the ability to share the original URL on Twitter. That's it, all the hard work is automatically handled on our side.

Responsiveness

Of course, I made sure that XPost was fully usable on mobile as you can see here:

Landing page

Finally, I created a landing page to introduce XPost to new users. This is a simple page which quickly presents how it works and why they should use it.

Tech

Stack

This project required multiple technologies that i’m going to introduce:

• Next.js (typescript) for front-end and API
• styled-components & styled-system for custom UI components
• Netlify for hosting and serverless functions
• Next-auth for authentification
• planetscale & prisma for database
• cloudinary for images
• Hashnode & dev.to APIs

Coding practices

• Fully typed using Typescript
• Strict ESLint configuration
• Husky to run types and linter before committing
• Local Prettier to format code
• App architecture (splitting business logic and UI)
• data fetching best practices (SWR, caching, static props)
• Generic & reusable UI components
• SEO ready

My code is available here

What I learned

I really like hackathons to challenge myself on new stacks. This time it was the opportunity to work with Netlify, Planetscale and Prisma. I have to say, these are all amazing tools to work with, they greatly improved my efficiency during this hackathon.

Also, even for an experienced front-end developer like me, it's always nice to be able to add new skills and products to my portfolio 🙂

What to expect next

This is just the beginning for this project, I planned to add a lot of new features like:

• more blogging platforms
• scheduling article (almost ready)
• calendar view
• integrate other content creator tools (like communication)

If you are interested in this project, you can send me a message on Twitter ! 🙂

Thanks you so much for reading, I hope you enjoyed it as much as I do! Feel free to leave a comment if you have any questions!

See you soon!

Yannick 👋

Today, I'm gonna show you how I personally set up my ZSH terminal on my mac. At the end of this tutorial, you will be able to configure it according to your own needs/preferences.

Let's get started!

iTerm 2

iTerm 2 is a replacement for the default mac terminal app. It is totally free and brings a lot of very convenient features (like split panes, global search, triggers...) as well as multiple customization possibilities (we will see it later).

Start by downloading the app here and install it on your mac.

Configuration

Oh-my-zsh is an open-source framework that will help you managing your zsh configuration. It allows you to use built-in helpers, themes, plugins...

Install it using the following curl command:

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

By default, oh-my-zsh comes bundled with the git plugin. It means you can use all these aliases. If you want to try, go to a git repository and run gst to get your current git status.

To add another plugin, choose one from this list. Then, in your .zshrc (located at your ~), find the line containing plugins=(git) and add the name of your newly selected plugin to the plugins array. Finally, do not forget to restart your terminal.

For example to add z and GitHub cli:

plugins=(
  # other plugins...
  git z gh
)

z is one of my favorite plugins, it allows you to easily navigate to your most visited directories.

Adding auto-complete (optional)

It is also possible to easily add command autocomplete based on your history. I personally use it so I'm gonna share it with you.

First, go to ~/.oh-my-zsh/custom/plugins and clone this repository:

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

Then go back to your ~/.zshrc and add zsh-autosuggestions to the array like:

plugins=( 
    # other plugins...
    zsh-autosuggestions
)

Restart your iTerm and you are done! Try navigating around, you should now have nice suggestions 🎉

Theme

Powerlevel10k allows you to highly customize your terminal theme using a "configuration wizard". This wizard will ask for your preferences and create the corresponding theme configuration.

Go ahead and install it:

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ~/powerlevel10k
echo 'source ~/powerlevel10k/powerlevel10k.zsh-theme' >>~/.zshrc

Then restart iTerm. At the opening, you should access the powerlevel10k wizard.

At first, it can ask you to install a few fonts, install them to access all customization properties.

Once done, stop iTerm by using the shortcut ⌘Q and restart it. It should, then, ask you about your preferences as shown in the following video:

If the configuration wizard doesn't start automatically, use the command p10k configure

💡 Enable English subtitles if you want to see my choices

iTerm Customization

Open iTerm preferences. Here you will be able to customize your terminal colors, opacity, cursor, widgets, and much more.

Let's start by finding the right colors under Profiles > Colors. You can either directly choose your own colors or use a preset. To find a preset that suits you go to the iterm2colorschemes site.

To export a preset, open it and export it with save page as. The exported file will have the .itermcolors.txt extensions, rename it to keep only .itermcolors. Then import this file in iTerm to be able to use it in the color presets dropdown.

💡 At this time, my favorite color scheme is Guezwhoz. Do not hesitate to share yours with me in the comments below! You will maybe find my next favorite one 😄

In the following video, I show you how I changed:

• colors: to use an imported scheme
• cursor: to use blinking underscore
• background: to make it a little bit transparent (I like being able to see what's behind the terminal)
• widgets: to add some useful informations

💡 Just forgot to show one thing: in Colors I set Minimum Contrast to 50 to prevent white text on light colors etc.

Conclusion

Thanks for following this tutorial until the end! I hope your new terminal configuration will help you to improve your productivity as it does for me. As always, if you have any questions/suggestions do not hesitate to join me on Twitter I will be happy to talk with you all.

🙋‍♂️ In this tutorial, I tried including videos to make it shorter and easier to follow. What did you think about it? Did you like it?

See you next time! 👋

- Yannick

What are we going to build

In the today's blog, as promised, I will show you how to give a little more peps to our note-taking app !

As always, if you haven't already, I highly recommend you to read the two other posts of this series first to get all the context. I will start from where we left off last time.

This is what we are going to build in this tutorial :

You may have noticed, there are four main animations to take care of :

• list cards (layout animation)
• scroll list
• header content
• theme

Animation disclaimer

Nowadays, animations are really important tools that make your app unique and provide your users a feeling of satisfaction. On the other hand, too much or poorly implemented animations will give your app a cheap and useless feeling.

That's why, as app developer you need to pay attention to several things :

• don't over-use animations, especially complex ones, from my point of view micro-interactions are the keys to offer your users the best experience.
• your animations must serve your design / functionalities and not the other way around.
• make sure your animations run smoothly.

React native comes with a built-in library called animated. This library is really nice while animating non-layout properties like opacity, scale and others which can use native driver.

However, when it comes to animate properties like width or padding, the animated API suffers from serious performance issues. The main reason for this is : non-native-driver animation are defined on the JS thread and need to use a bridge to reach the UI thread. You surely guessed it, native-driver animation, directly use the UI thread and are, consequently, way more performant.

If you want more informations about how Animated API works and its caveats I recommend you to read this article

This is where react-native-reanimated@2 from Software Mansion comes up.

Reanimated 2

To keep it simple this (wonderful) library provides a way to declare your animation in JS but to have them all running on the UI thread. This means a huge performance increase.

It also provide a really nice API to manage gesture events, layout animations, ...

Reanimated 2 is available for expo since the SDK 44 only, before continuing make sure your project is up to date with this version !

Installation

Before starting we need to install and configure reanimated :

expo install react-native-reanimated

Then add the babel plugin :

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'babel-plugin-styled-components',
      [
        'module-resolver',
        {
          root: ['./src'],
          extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
          alias: {
            '@components': './src/components',
            '@navigation': './src/navigation',
            '@contexts': './src/contexts',
            '@models': './src/models',
            '@hooks': './src/hooks',
            '@pages': './src/pages',
          },
        },
      ],
      'react-native-reanimated/plugin',
    ],
  };
};

If you load other Babel plugins, the Reanimated plugin has to be the last item in the plugins array.

Restart your app and clean the cache with the following :

expo start -c

Congrats you can now build amazing animations 🤪

Card layout animation

Reanimated layout animation is a convenient way to provide component smooth entering / exiting / layout animations. It is especially useful if you have a filtrable / sortable list with moving items just like we do with our notes.

Go ahead and update your NoteCard component as bellow :

// src/components/NoteCard.tsx

+ // animated component can either be created using this method
+ // or directly in your template like <Animated.View> 
+const AnimatedStyledView = Animated.createAnimatedComponent(StyledView);

export default function NoteCard({
  note,
  showNoteEdit,
  ...props
}: NoteCardProps) {
  const showDetail = () => showNoteEdit(note.id, note.title);

  return (
    <Pressable
      onPress={showDetail}
      style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}
    >
+      <AnimatedStyledView entering={FadeInUp} exiting={FadeOutDown} {...props}>
-      <StyledView {...props}>
        <StyledText
          color='white'
          numberOfLines={1}
          fontWeight='bold'
          fontSize={2}
        >
          {note.title}
        </StyledText>
        <StyledText color='accent' mb={8}>
          {formatDistanceToNow(note.updatedAt, {
            addSuffix: true,
          })}
        </StyledText>
        <StyledText color='whitesmoke' numberOfLines={8}>
          {note.content}
        </StyledText>
+      </AnimatedStyledView>
-       </StyledView>
    </Pressable>
  );
}

Reanimated comes with a lot of predefined layout animation. For example you can replace FadeInUp with BounceIn. You can found a full list of animations here

And this is all that it takes! Try your app, search some notes, you should know have a nice fade in up entering and fade out down exiting animations ! 🎉

Scroll animation

In case of the user having a lot of notes, we want him to be able to see them all easily. To do so, we'll use the scroll event from our ScrollView to make our header "shrinkable". At the same time we'll move our SearchBar component to be part of the header when in the "shrink" state.

First, let's define some layout variables we are going to use to build our animations. Create a new file models/layout.ts and paste the following content inside :

export const SEARCH_BAR_HEIGHT = 40;
export const PADDING_TOP_BAR = 16;
export const HEADER_FULL_HEIGHT = 300;
export const HEADER_MIN_HEIGHT = 100 + SEARCH_BAR_HEIGHT + PADDING_TOP_BAR;
export const HEADER_SCROLL_DISTANCE = HEADER_FULL_HEIGHT - HEADER_MIN_HEIGHT;

💡 To be able to test while creating your animation, make sure to have enough notes to scroll.

Home page

In this component, we are going to get the vertical content offset from the scroll event emitted by the ScrollView. Once done, we are going to provide it to other components that need it (Header and SearchBar).

(check code comments)

// src/pages/Home.tsx
// ...imports
const StyledScrollView = styled.ScrollView<LayoutProps & SpaceProps>(
  compose(layout, space)
);

+const AnimatedScrollView = Animated.createAnimatedComponent(StyledScrollView);

export type HomeProps = NativeStackNavigationProp<HomeStackParamList, 'Home'>;

-const SEARCH_INPUT_HEIGHT = 40;
-const PADDING_VERTICAL_SEARCH = 32;

export default function Home() {
  const { notes } = useNote();
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [filteredNotes, setFilteredNotes] = useState<Note[]>([]);
  const [search, setSearch] = useState<string>('');
  const debouncedSearch = useDebounce<string>(search, 500);

  useEffect(() => {
    if (!notes) return;
    setFilteredNotes(notes);
    setSearch('');

    setTimeout(() => setIsLoading(false), 3000);
  }, [notes]);

  useEffect(() => {
    if (!notes) return;
    const nextData = notes.filter((note) =>
      note.title.toLocaleLowerCase().includes(search.toLocaleLowerCase())
    );
    setFilteredNotes(nextData);
  }, [debouncedSearch]);

+ // create a value that can be shared / used both on UI and JS threads
+ // used to hold animation value / progress
+  const headerScroll = useSharedValue(0);

+ // scroll event handler reference
+  const scrollHandler = useAnimatedScrollHandler((event) => {
+    headerScroll.value = event.contentOffset.y;
+  });

  return (
    <StyledView flex={1} alignItems='center' backgroundColor='background'>
-      <StyledScrollView
+      <AnimatedScrollView
        width='100%'
        px={16}
        contentContainerStyle={{
-          paddingTop: HEADER_FULL_HEIGHT + SEARCH_INPUT_HEIGHT + PADDING_VERTICAL_SEARCH,
+          paddingTop: HEADER_FULL_HEIGHT + SEARCH_BAR_HEIGHT + PADDING_TOP_BAR * 2,
        }}
+        keyboardShouldPersistTaps='never'
+        onScroll={scrollHandler}
+        scrollEventThrottle={16}
+        bounces={false}
      >
        <MasonryList
          notes={filteredNotes}
          search={search}
          isLoading={isLoading}
          userHasNotes={!!notes && notes?.length > 0}
        />
-      </StyledScrollView>
+      </AnimatedScrollView>
      {notes && notes?.length > 0 && (
        <SearchBar
          value={search}
          onChangeText={setSearch}
          placeholder='Search a title...'
+          scroll={headerScroll}
        />
      )}
      <CreateButton />
-      <Header />
+      <Header scroll={headerScroll} />
    </StyledView>
  );
}

Header

Now, we need to update our component to be able to use the new prop passed by the parent (named scroll). Then, we will animate our component style according to the scroll value.

(more explanations below)

// src/components/Header.tsx
const TWITTER_NAME = '@dpnick_';
-export const HEADER_FULL_HEIGHT = 300;

+const AnimatedHeaderView = Animated.createAnimatedComponent(StyledView);

+interface HeaderProps {
+  scroll: Animated.SharedValue<number>;
+}

- export default function Header() {
+ export default function Header({ scroll }: HeaderProps) {
  const { isDarkTheme, switchTheme } = useContext(ThemeContext);

  const openTwitter = async () => {...};

+ // animated style based on scroll shared value from parent
+  const headerAnimatedStyle = useAnimatedStyle(() => {
+    const height = interpolate(
+      scroll.value,
+      [0, HEADER_SCROLL_DISTANCE],
+      [HEADER_FULL_HEIGHT, HEADER_MIN_HEIGHT],
+      Extrapolate.CLAMP
+    );
+    const borderRadius = interpolate(
+      scroll.value,
+      [0, HEADER_SCROLL_DISTANCE],
+      [48, 24],
+      Extrapolate.CLAMP
+    );
+    return {
+      height,
+      borderBottomRightRadius: borderRadius,
+      borderBottomLeftRadius: borderRadius,
+    };
+  });

  return (
-    <StyledView
+    <AnimatedHeaderView
      bg='primary'
      position='absolute'
      width='100%'
      justifyContent='center'
+      style={headerAnimatedStyle}
    >
      <StyledView padding={4}>
        <StyledText fontSize={6} color='white'>
          Welcome
        </StyledText>
        <Pressable
          onPress={openTwitter}
          style={({ pressed }) => ({ opacity: pressed ? 0.3 : 1 })}
        >
          <StyledText fontSize={6} color='secondary' paddingLeft={36}>
            {TWITTER_NAME}
          </StyledText>
        </Pressable>
      </StyledView>
      <StyledView
        position='absolute'
        top={(StatusBar.currentHeight || 40) + 8}
        right={16}
      >
        <Pressable
          onPress={switchTheme}
          hitSlop={16}
          android_ripple={{ borderless: true, color: 'white' }}
          style={({ pressed }) => ({ opacity: pressed ? 0.3 : 1 })}
        >
          <Feather
            name={isDarkTheme ? 'sun' : 'moon'}
            size={24}
            color='white'
          />
        </Pressable>
      </StyledView>
-    </StyledView>
+    </AnimatedHeaderView>
  );
}

💡 As you may have noticed we used a hook called useAnimatedStyle. It is one of the most important piece of Reanimated. It allows you to create an association between a shared value and your animated component properties.

In this hook we are animating both the height and border radius of our header according to the actual scroll value from the parent.

"But wait... how to find a corresponding value between the header height and the scroll value ?"

Let's decrypt an example from our code:

    const height = interpolate(
      scroll.value, // shared value to apply the interpolate
      [0, HEADER_SCROLL_DISTANCE], // input range
      [HEADER_FULL_HEIGHT, HEADER_MIN_HEIGHT], // output range
      Extrapolate.CLAMP // extrapolation type
    );

We used an interpolate function. It allows us to convert an input range (in our case the scroll value) to an output one (corresponding header size). We defined bounds (min and max) for each range, each value between will be proportional. Thanks to the clamp extrapolation every value outside of our bounds will be ignored.

So in plain words it would give the following :

• when the scroll value is 0 we want the header to display full height.
• as soon as you start scrolling the header height must change accordingly.
• once you hit the total scroll distance, it means the height of your header is at its min height and won't reduce more.

(same principle in the other way)

From now on, you are officially able to create scrolling-aware animations 🚀

Search bar

It will be very similar to what we did just before for the header. If you feel confident enough, try it by yourself, the best way to learn is by getting your hands dirty. Don't worry I will still include my solution below 😄

The animation we want to build for this component is about translateY property : when the user scroll, the search bar must move with our header. At the end of the scroll the search bar must be inside the header as you can see here :

My solution (of course, others are possible) :

// src/components/SearchBar.tsx
interface SearchBarInterface {
  value: string;
  onChangeText: (next: string) => void;
  placeholder: string;
+  scroll: Animated.SharedValue<number>;
}

+const AnimatedSearchView = Animated.createAnimatedComponent(StyledView);

export default function SearchBar({
  value,
  onChangeText,
  placeholder,
+  scroll,
}: SearchBarInterface) {

+  const searchAnimatedStyle = useAnimatedStyle(() => {
+    const translateY = interpolate(
+      scroll.value,
+      [0, HEADER_SCROLL_DISTANCE],
+      [
+        HEADER_FULL_HEIGHT + PADDING_TOP_BAR,
+        HEADER_MIN_HEIGHT - SEARCH_BAR_HEIGHT - PADDING_TOP_BAR,
+      ],
+      Extrapolate.CLAMP
+    );
+    return {
+      transform: [{ translateY }],
+    };
+  });

  return (
-    <StyledView
+    <AnimatedSearchView
      px={20}
      pb={16}
+      zIndex={1}
      width='100%'
      position='absolute'
+      style={searchAnimatedStyle}
+      backgroundColor='transparent'
    >
      <StyledView
        bg='accent'
        borderRadius={8}
        flexDirection='row'
        justifyContent='flex-start'
        alignItems='center'
        height={40}
      >
        <Feather
          name='search'
          size={20}
          color='black'
          style={styles.iconStart}
        />
        <TextInput
          style={styles.input}
          placeholder={placeholder}
          value={value}
          onChangeText={onChangeText}
        />
        {value?.length > 0 && (
          <Feather
            name='x'
            size={24}
            color='black'
            style={styles.iconEnd}
            onPress={() => onChangeText('')}
          />
        )}
      </StyledView>
-    </StyledView>
+    </AnimatedSearchView>
  );
}

After that you should have animation very close to what we are aiming for ! But as you can see, our welcome message doesn't fit our header in "shrink" state. Let's take care of it!

Header content

The objective of this animation is the replace the header content when in "shrink" state.

After experimenting a little bit around it, the best user experience (to me at least) seems to be as follow :

• display the "full" title until reaching half our scrolling distance
• at this same distance, start displaying progressively our "shrink" title

// src/components/Header.tsx
// omitted previous code for conciseness

const AnimatedHeaderView = Animated.createAnimatedComponent(StyledView);
+const AnimatedText = Animated.createAnimatedComponent(StyledText);

interface HeaderProps {
  scroll: Animated.SharedValue<number>;
}

export default function Header({ scroll }: HeaderProps) {
  // omitted previous code for conciseness

+  const titleOpacity = useAnimatedStyle(() => {
+    const opacity = interpolate(
+      scroll.value,
+      [0, HEADER_SCROLL_DISTANCE / 2],
+      [1, 0],
+      Extrapolate.CLAMP
+    );

+    return {
+      opacity,
+    };
+  });

+  const reverseTitleOpacity = useAnimatedStyle(() => {
+    const opacity = interpolate(
+      scroll.value,
+      [HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
+      [0, 1],
+      Extrapolate.CLAMP
+    );

+    return {
+      opacity,
+    };
+  });

  return (
    <AnimatedHeaderView
      bg='primary'
      position='absolute'
      width='100%'
      justifyContent='center'
      style={headerAnimatedStyle}
    >
-      <StyledView padding={4}>
+      <AnimatedHeaderView padding={4} style={titleOpacity}>
-        <StyledText
+        <AnimatedText
+          entering={FadeInLeft.duration(1000)}
          fontSize={6}
          color='white'
        >
          Welcome
-      </StyledText>
+      </AnimatedText>
        <Pressable
          onPress={openTwitter}
          style={({ pressed }) => ({ opacity: pressed ? 0.3 : 1 })}
        >
-        <StyledText
+        <AnimatedText
+            entering={FadeInLeft.duration(1000).delay(1000)}
            fontSize={6}
            color='secondary'
            paddingLeft={36}
          >
            {TWITTER_NAME}
-      </StyledText>
+      </AnimatedText>
        </Pressable>
-      </StyledView>
+      </AnimatedHeaderView>
+      <AnimatedHeaderView
+        position='absolute'
+        top={(StatusBar.currentHeight || 40) + 8}
+        alignSelf='center'
+        style={reverseTitleOpacity}
+      >
+        <StyledText
+          color='white'
+          fontSize={3}
+        >
+          {TWITTER_NAME}
+        </StyledText>
+      </AnimatedHeaderView>
      <StyledView
        position='absolute'
        top={(StatusBar.currentHeight || 40) + 8}
        right={16}
      >
        <Pressable
          onPress={switchTheme}
          hitSlop={16}
          android_ripple={{ borderless: true, color: 'white' }}
          style={({ pressed }) => ({ opacity: pressed ? 0.3 : 1 })}
        >
          <Feather
            name={isDarkTheme ? 'sun' : 'moon'}
            size={24}
            color='white'
          />
        </Pressable>
      </StyledView>
    </AnimatedHeaderView>
  );
}

Theme animation

Our last animation will operate when the user changes the theme of the app. When clicked, the theme icon (either "moon" or "sun") should move outside of the screen, update the theme and then return to its initial position.

This animation will be a good usecase to show you how to use Reanimated helpers :

• withSequence allow to run multiple animations sequentially
• withTiming create a time based animation

(documentation and list of other helpers can be found here)

// src/components/Header

// omitted not-concerned code for conciseness

+const ICON_Y_OFFSET = 44;

export default function Header({ scroll }: HeaderProps) {
  const { isDarkTheme, switchTheme } = useContext(ThemeContext);
+  const themeAnim = useSharedValue(0);

+  const toggleThemeMode = useCallback(() => {
+    themeAnim.value = withSequence(
+      // 1st arg => value where to move
+      // 2nd arg => options (duration and easing)
+      // 3rd arg => finished callback
+      // first timing => move outside then update theme
+      withTiming(ICON_Y_OFFSET, undefined, (isFinished) => {
+        if (isFinished) {
+          // ensure the function to be called on the JS thread 
+          runOnJS(switchTheme)();
+        }
+      }),
+      // second timing => return to initial position
+      withTiming(0)
+    );
+  }, [switchTheme]);

+  const themeStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: themeAnim.value }],
+    };
+  });

// ...
  return (
    <AnimatedHeaderView
      bg='primary'
      position='absolute'
      width='100%'
      justifyContent='center'
      style={headerAnimatedStyle}
    >
      <AnimatedHeaderView padding={4} style={titleOpacity}>
        <AnimatedText
          entering={FadeInLeft.duration(1000)}
          fontSize={6}
          color='white'
        >
          Welcome
        </AnimatedText>
        <Pressable
          onPress={openTwitter}
          style={({ pressed }) => ({ opacity: pressed ? 0.3 : 1 })}
        >
          <AnimatedText
            entering={FadeInLeft.duration(1000).delay(1000)}
            fontSize={6}
            color='secondary'
            paddingLeft={36}
          >
            {TWITTER_NAME}
          </AnimatedText>
        </Pressable>
      </AnimatedHeaderView>
      <AnimatedHeaderView
        position='absolute'
        top={(StatusBar.currentHeight || 40) + 8}
        alignSelf='center'
        style={reverseTitleOpacity}
      >
        <StyledText color='white' fontSize={3}>
          {TWITTER_NAME}
        </StyledText>
      </AnimatedHeaderView>
-      <StyledView
+      <AnimatedHeaderView
+        style={themeStyle}
        position='absolute'
        top={(StatusBar.currentHeight || 40) + 8}
        right={16}
      >
        <Pressable
-          onPress={switchTheme}
+          onPress={toggleThemeMode}
          hitSlop={16}
          android_ripple={{ borderless: true, color: 'white' }}
          style={({ pressed }) => ({ opacity: pressed ? 0.3 : 1 })}
        >
          <Feather
            name={isDarkTheme ? 'sun' : 'moon'}
            size={24}
            color='white'
          />
        </Pressable>
-      </StyledView>
+      </AnimatedHeaderView>
    </AnimatedHeaderView>
  );
}

Conclusion

Congratulations, you have completed this entire series! You now have a fully functional and smoothly animated note-taking app! But this is only the beginning, you can keep improving it by adding new features. For example, it could be really interesting for the users to store their notes on a remote server (Firebase, Supabase or custom back-end) to be able to access it on all their devices.

Thanks for reading, I hope this series has been helpful to you, do not hesitate to leave a comment or to join me on twitter I would be really happy to get your feedbacks and your ideas for the next topic.

See you next time!

- Yannick 👋

Happy to see you again! In this second article of the series, we are going to take advantage of our configuration to efficiently design our pages/components and implement our business logic.

If you didn't read the first part I recommend you to check it out first by clicking here

We will start by creating our business data management. In our case, it is the user notes. Once done, it will be easier to build the corresponding UI components.

Let's dive right in!

Note context

First of all, let's define what will be a Note object

I suggest to create the following data model src/models/note.ts:

// src/models/note.ts
export interface Note {
  // unique identifier
  id: number;
  title: string;
  createdAt: number;
  updatedAt: number;
  content: string;
  // Card background color
  color: NoteColors;
}

export enum NoteColors {
  PRIMARY = 'primary',
  SECONDARY = 'secondary',
}

Both createdAt and updatedAt are timestamps. Timestamps are easier to manage/manipulate compare to Date objects. The fact remains that we want it to be understandable by the user, so we will use one of my favorite library date-fns (it is just like moment but... light 😅)

npm i date-fns && npm i --save-dev @types/date-fns

Go ahead and add the following new value to our StorageKeys enum at src/models/storage.ts :

export enum StorageKeys {
  USE_DARK_THEME = 'useDarkTheme',
+  USER_NOTES = 'userNotes',
}

Once it's done, let's add a new file src/contexts/NoteContexts.tsx

In this file, we are going to implement our business logic, in our case, it means: how are we handling user notes. There are a lot of possibilities to manage data (state component, context API, redux, recoil...), you must choose wisely depending on your needs (complexity, scalability, performance...). In our case, the application is quite small and each page will have a dependency on the notes data. Therefore, we'll keep it simple and use the built-in react context API.

The built-in React context API is a really powerful way to manage data through the component tree. However, you should use it carefully, contexts are only intended to be used to share global data. Over-using contexts can result in performance issues.

Once you choose how to manage your data, you need to define your features. In most cases (like us), it will be a CRUD (Create-Read-Update-Delete). Our users will be able to :

• create a new note
• delete an existing note
• update an existing note
• select an existing note to read its content

To easily manage those actions we will use the useReducer hook in our context. If you already used it, it works like redux: you define a state then dispatch actions to a reducer. This reducer, is basically a switch function, for each action it knows how to update the state and then return its next value. This state will then be spread to our components thanks to the context.

This is the "difficult" part of this tutorial, if you need further explanations do not hesitate to leave a comment I will be happy to help you 🙂

First, update the src/models/note.ts to add the following :

// ... Note interface

// interface of our context
// it expose both our values and functions to update it
export interface INoteContext {
  notes: Note[] | undefined;
  selectedNote: Note | undefined;
  selectNote: (id?: number) => void;
  deleteNote: (id: number) => void;
  createNote: (title: string, content: string) => void;
  updateNote: (id: number, title: string, content: string) => void;
  updateNoteColor: (id: number, color: NoteColors) => void;
}

// All our possible actions
// using enum prevent typo
export enum NoteActionTypes {
  LOAD_NOTES = 'load-notes',
  SELECT_NOTE = 'select-note',
  DELETE_NOTE = 'delete-note',
  CREATE_NOTE = 'create-note',
  UPDATE_NOTE = 'update-note',
  UPDATE_NOTE_COLOR = 'update-note-color',
}

// each action is composed of a type and payload
// each payload can be different
export type NoteAction =
  | { type: NoteActionTypes.LOAD_NOTES; payload: { notes: Note[] } }
  | { type: NoteActionTypes.SELECT_NOTE; payload: { id: number | undefined } }
  | { type: NoteActionTypes.DELETE_NOTE; payload: { notes: Note[] } }
  | { type: NoteActionTypes.CREATE_NOTE; payload: { note: Note } }
  | { type: NoteActionTypes.UPDATE_NOTE; payload: { notes: Note[] } }
  | { type: NoteActionTypes.UPDATE_NOTE_COLOR; payload: { notes: Note[] } };

// data in our state
export interface NoteState {
  notes: Note[] | undefined;
  selectedId: number | undefined;
}

And then, in our src/contexts/NoteContext.tsx

// src/contexts/NoteContext.tsx
// ...imports

const NoteContext = createContext<INoteContext>({
  notes: undefined,
  selectedNote: undefined,
  selectNote: () => {},
  deleteNote: () => {},
  createNote: () => {},
  updateNote: () => {},
  updateNoteColor: () => {},
});

export function useNote() {
  return useContext(NoteContext);
}

const loadNotes = (notes: Note[]): NoteAction => {
  return {
    type: NoteActionTypes.LOAD_NOTES,
    payload: {
      notes,
    },
  };
};

const selectNote = (id?: number): NoteAction => {
  return {
    type: NoteActionTypes.SELECT_NOTE,
    payload: {
      id,
    },
  };
};

const deleteNote = (notes: Note[]): NoteAction => {
  return {
    type: NoteActionTypes.DELETE_NOTE,
    payload: {
      notes,
    },
  };
};

const createNote = (note: Note): NoteAction => {
  return {
    type: NoteActionTypes.CREATE_NOTE,
    payload: {
      note,
    },
  };
};

const updateNote = (notes: Note[]): NoteAction => {
  return {
    type: NoteActionTypes.UPDATE_NOTE,
    payload: {
      notes,
    },
  };
};

const updateNoteColor = (notes: Note[]): NoteAction => {
  return {
    type: NoteActionTypes.UPDATE_NOTE_COLOR,
    payload: {
      notes,
    },
  };
};

function reducer(state: NoteState, action: NoteAction): NoteState {
  switch (action.type) {
    case NoteActionTypes.LOAD_NOTES:
      return {
        ...state,
        notes: action.payload.notes,
      };
    case NoteActionTypes.SELECT_NOTE:
      return {
        ...state,
        selectedId: action.payload.id,
      };
    case NoteActionTypes.DELETE_NOTE:
      return {
        ...state,
        notes: action.payload.notes,
      };
    case NoteActionTypes.CREATE_NOTE:
      if (state.notes) {
        return {
          ...state,
          notes: [...state.notes, action.payload.note],
          selectedId: action.payload.note.id,
        };
      }
      return state;
    case NoteActionTypes.UPDATE_NOTE:
      return {
        ...state,
        notes: action.payload.notes,
      };
    case NoteActionTypes.UPDATE_NOTE_COLOR:
      return {
        ...state,
        notes: action.payload.notes,
      };
    default:
      return state;
  }
}

const NoteProvider = ({ children }: { children: React.ReactNode }) => {
  const [state, dispatch] = useReducer(reducer, {
    notes: undefined,
    selectedId: undefined,
  });

  // get user notes on init
  useEffect(() => {
    const getNotes = async () => {
      // instead of calling async storage in a real case
      // you would here make a fetch request to your API
      try {
        let notes = [];
        const savedNotes = await AsyncStorage.getItem(StorageKeys.USER_NOTES);
        if (savedNotes !== null) {
          notes = JSON.parse(savedNotes);
        }
        dispatch(loadNotes(notes));
      } catch {
        Alert.alert('An error occurred while getting your notes');
      }
    };
    getNotes();
  }, []);

  const onSelectNote = (id?: number) => {
    dispatch(selectNote(id));
  };

  const onDeleteNote = async (id: number) => {
    // guard to prevent running if notes is not defined
    if (!state.notes) return;
    const nextNotes = state.notes.filter((note) => note.id !== id);
    // call to your api (async storage for demo purpose)
    try {
      await AsyncStorage.setItem(
        StorageKeys.USER_NOTES,
        JSON.stringify(nextNotes)
      );
      dispatch(deleteNote(nextNotes));
    } catch {
      Alert.alert('An error occurred while deleting your note');
    }
  };

  const onCreateNote = async (title: string, content: string) => {
    // guard to prevent running if notes is not defined
    if (!state.notes) return;
    // in real case you could use uuid generator
    const max = state.notes?.reduce(
      (prev, current) => (prev > current.id ? prev : current.id),
      0
    );
    const newNote: Note = {
      id: max + 1,
      createdAt: Date.now(),
      updatedAt: Date.now(),
      title,
      content,
      color: NoteColors.PRIMARY,
    };
    // call to your api (async storage for demo purpose)
    try {
      await AsyncStorage.setItem(
        StorageKeys.USER_NOTES,
        JSON.stringify([...state.notes, newNote])
      );
      dispatch(createNote(newNote));
    } catch {
      Alert.alert('An error occurred while deleting your note');
    }
  };

  const onUpdateNote = async (id: number, title: string, content: string) => {
    // guard to prevent running if notes is not defined
    if (!state.notes) return;
    const updatedNote: Note | undefined = state.notes.find(
      (note) => note.id === id
    );
    if (updatedNote) {
      updatedNote.title = title;
      updatedNote.content = content;
      updatedNote.updatedAt = Date.now();
      const nextNotes = [
        ...state.notes.filter((note) => note.id !== id),
        updatedNote,
      ];
     // call to your api (async storage for demo purpose)
      try {
        await AsyncStorage.setItem(
          StorageKeys.USER_NOTES,
          JSON.stringify(nextNotes)
        );
        dispatch(updateNote(nextNotes));
      } catch {
        Alert.alert('An error occurred while deleting your note');
      }
    }
  };

  const onUpdateNoteColor = async (id: number, color: NoteColors) => {
    // guard to prevent running if notes is not defined

    if (!state.notes) return;
    const updatedNote: Note | undefined = state.notes.find(
      (note) => note.id === id
    );
    if (updatedNote) {
      updatedNote.color = color;
      updatedNote.updatedAt = Date.now();
      const nextNotes = [
        ...state.notes.filter((note) => note.id !== id),
        updatedNote,
      ];
      // call to your api (async storage for demo purpose)
      try {
        await AsyncStorage.setItem(
          StorageKeys.USER_NOTES,
          JSON.stringify(nextNotes)
        );
        dispatch(updateNoteColor(nextNotes));
      } catch {
        Alert.alert('An error occurred while deleting your note');
      }
    }
  };

  // our context forward both our state and the functions to update it to its children
  return (
    <NoteContext.Provider
      value={{
        notes: state.notes,
        selectedNote: state.notes?.find((note) => note.id === state.selectedId),
        selectNote: onSelectNote,
        deleteNote: onDeleteNote,
        createNote: onCreateNote,
        updateNote: onUpdateNote,
        updateNoteColor: onUpdateNoteColor,
      }}
    >
      {children}
    </NoteContext.Provider>
  );
};

export default NoteProvider;

Once its done, use it in your App.tsx just as we did for the ThemeProvider

// App.tsx
// ...imports
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {
  return (
+    <SafeAreaProvider>
      <ThemeProvider>
+        <NoteProvider>
          <Navigation />
          <StatusBar style='auto' animated />
+        </NoteProvider>
      </ThemeProvider>
+    </SafeAreaProvider>
  );
}

From now on, every components can have access to our notes state and functions through the useNote hook !

Take the time your need to understand this context, this is really important as developer to master the concept of application state.

Let's make use of it in our note edit page!

Note Edit

In this page, users will be able to update note's content, title and color. Changes will be saved automatically using a debounce mechanism. User can also delete a note, either by clicking a button or by removing all its content / title and going back to the home page.

Start by creating a hook to handle debounce on state change :

// src/hooks/useDebounce.ts
import { useEffect, useState } from 'react';

// pass a value and a delay
// the debouncedValue change to the value passed when the delay is over
export default function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);
  return debouncedValue;
}

We must also take care of handling large content, it means we need to implement a scroll to allow the user to see the entire note. Scrolling while editing (keyboard open) can be tricky to manage (content hidden by keyboard etc), I will use a library called react-native-keyboard-aware-scroll-view to solve this.

npm i react-native-keyboard-aware-scroll-view

Finally, I created a small funny background component, it simply displays a low-opacity circle at a random position. The circle use the selected color for the note.

Let's add it src/components/NoteEditBackground.tsx

// src/components/NoteEditBackground.tsx
// ...imports
const screen = Dimensions.get('screen');

function getRandomInRange(min: number, max: number) {
  return Math.floor(Math.random() * (max - min) + min);
}

interface NoteEditBackgroundProps {
  color: string;
}

// this component is just a funny circle background with random positioning
export default function NoteEditBackground({ color }: NoteEditBackgroundProps) {
  const [leftOffset, setLeftOffset] = useState<number>();
  const [topOffset, setTopOffset] = useState<number>();
  const { width, height } = screen;
  const shapeSize = width;

  useEffect(() => {
    // you can experiment with those values to find a result that suits you
    setLeftOffset(getRandomInRange(-shapeSize / 2, shapeSize / 2));
    setTopOffset(getRandomInRange(0 - shapeSize / 2, height - shapeSize / 2));
  }, []);

  return (
    <StyledView
      position='absolute'
      width={shapeSize}
      height={shapeSize}
      left={leftOffset}
      top={topOffset}
      pointerEvents='none'
      borderRadius={shapeSize / 2}
      opacity={0.2}
      bg={color}
      zIndex={-1}
    />
  );
}

And then update our NoteEdit.tsx page to reflect what we stated above.

You may have noticed, in the following code we use the StyledPressable component. It doesn't exist from the precedent article. This is your opportunity to prove you understood styled-components and styled-system 😁 (If you want to check mine, it is available in my github repository 😉)

I annotated my code to help you understand each purpose.

// src/pages/NoteEdit.tsx
// ...imports

type StyledInputProps = ColorProps &
  SpaceProps &
  FlexboxProps &
  LayoutProps &
  TypographyProps;

const StyledInput = styled.TextInput<TextInputProps & StyledInputProps>(
  compose(color, space, flexbox, layout, typography)
);

type NoteEditProps = NativeStackScreenProps<HomeStackParamList, 'NoteEdit'>;

const availableColors = Object.values(NoteColors);

export default function NoteEdit({ navigation }: NoteEditProps) {
  const { selectedNote, updateNote, createNote, deleteNote, updateNoteColor } =
    useNote();
  const input = useRef<TextInput>(null);
  const { text, accent } = useTheme().colors;
  // debounce title change
  const [nextTitle, setNextTitle] = useState<string | null>(null);
  // trigger change 300ms after last nextTitle update
  const debouncedTitle = useDebounce<string | null>(nextTitle, 300);
  // debounce content change
  const [nextContent, setNextContent] = useState<string | null>(null);
  // trigger change 300ms after last nextContent update
  const debouncedContent = useDebounce<string | null>(nextContent, 300);

  useEffect(() => {
    // focus content input on init
    // autofocus doesn't work on android
    if (Platform.OS === 'android' && input.current) {
      input.current?.focus();
    }
  }, []);

  useEffect(() => {
    // sync our local state with selected note asap
    // avoid running if selectedNote not defined
    if (!selectedNote) return;
    setNextTitle(selectedNote.title);
    setNextContent(selectedNote.content);
  }, [selectedNote]);

  // effect triggered when debouncedTitle or debouncedContent change
  useEffect(() => {
    // check if nextTitle is initiated and has a value !== from previous
    // allow to continue even if we have empty strings
    const validTitle =
      nextTitle !== null &&
      nextTitle?.trim()?.length >= 0 &&
      nextTitle !== selectedNote?.title;
    // same thing for nextContent
    const validContent =
      nextContent !== null &&
      nextContent?.trim()?.length >= 0 &&
      nextContent !== selectedNote?.content;
    if (validTitle || validContent) {
      // if it's a new note one of them can be null => replace by empty string
      let title = nextTitle ?? '';
      let content = nextContent ?? '';
      // no selected note means it's a new one
      if (!selectedNote) {
        return createNote(title, content);
      }
      updateNote(selectedNote.id, title, content);
    }
  }, [debouncedTitle, debouncedContent]);

  const updateNoteOnTextChange = (text: string) => setNextContent(text);
  const updateNoteOnTitleChange = (text: string) => setNextTitle(text);
  const deleteCurrentNote = () => {
    deleteNote(selectedNote!.id);
    navigation.goBack();
  };

  const goBack = () => {
    // delete note if completely empty on go back
    if (
      selectedNote &&
      nextTitle?.trim()?.length === 0 &&
      nextContent?.trim()?.length === 0
    ) {
      deleteNote(selectedNote.id);
    }
    navigation.goBack();
  };

  const changeNoteColor = (color: NoteColors) => {
    updateNoteColor(selectedNote!.id, color);
  };

  return (
    <StyledView flex={1} pl={3} pr={3} backgroundColor='background'>
      <StyledView
        flexDirection='row'
        height={50}
        alignItems='center'
        marginTop={StatusBar.currentHeight || 40}
      >
        <Pressable
          onPress={goBack}
          hitSlop={16}
          android_ripple={{ borderless: true, color: 'primary' }}
          style={({ pressed }) => ({ opacity: pressed ? 0.3 : 1 })}
        >
          <Feather name='arrow-left' size={24} color={text} />
        </Pressable>
        <StyledInput
          defaultValue={selectedNote?.title}
          onChangeText={updateNoteOnTitleChange}
          placeholder='Enter a cool title here'
          placeholderTextColor='gray'
          color='text'
          width='100%'
          height='100%'
          flexShrink={1}
          fontSize={2}
          fontWeight='900'
          mr={3}
          ml={3}
        />
        {selectedNote && (
          <Pressable
            onPress={deleteCurrentNote}
            hitSlop={16}
            android_ripple={{ borderless: true, color: 'primary' }}
            style={({ pressed }) => ({ opacity: pressed ? 0.3 : 1 })}
          >
            <Feather name='trash-2' size={24} color='red' />
          </Pressable>
        )}
      </StyledView>
      {selectedNote && (
        <StyledView
          flexDirection='row'
          justifyContent='space-between'
          alignItems='center'
          height={50}
        >
          <StyledText color='grey'>
            {`Created ${formatDistanceToNow(selectedNote.createdAt, {
              addSuffix: true,
            })}`}
          </StyledText>
          <StyledView flexDirection='row' alignItems='center'>
            {availableColors.map((color) => (
              <StyledPressable
                key={color}
                onPress={() => changeNoteColor(color)}
                style={({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })}
                width={30}
                height={30}
                backgroundColor={color}
                borderRadius={15}
                borderWidth={color === selectedNote?.color ? 5 : 0}
                borderColor={color}
                borderStyle='dotted'
                marginLeft={1}
                marginRight={1}
              />
            ))}
          </StyledView>
        </StyledView>
      )}
      <KeyboardAwareScrollView
        bounces={false}
        contentContainerStyle={{ paddingVertical: 16 }}
      >
        <StyledInput
          ref={input}
          autoFocus
          multiline
          scrollEnabled={false}
          defaultValue={selectedNote?.content}
          onChangeText={updateNoteOnTextChange}
          placeholder='Enter your note here'
          placeholderTextColor='gray'
          color='text'
        />
      </KeyboardAwareScrollView>
      <NoteEditBackground
        color={selectedNote ? selectedNote.color : 'primary'}
      />
    </StyledView>
  );
}

Finally, update your HomeStack.tsx we don't need to pass params to our route anymore:

export type HomeStackParamList = {
  Home: undefined;
  NoteEdit: undefined;
};

const HomeStack = createNativeStackNavigator<HomeStackParamList>();

export default function HomeStackNavigator() {
  // wrap our navigator in a view to avoid flickering in dark mode
  // hide header on every screen
  // by default => go to Home
  return (
    <StyledView flex={1} backgroundColor='background'>
      <HomeStack.Navigator
        initialRouteName='Home'
        screenOptions={{ headerShown: false }}
      >
        <HomeStack.Screen name='Home' component={Home} />
        <HomeStack.Screen name='NoteEdit' component={NoteEdit} />
      </HomeStack.Navigator>
    </StyledView>
  );
}

🎉 Your page is now ready to create / update notes !

However, one important thing is missing, you cannot navigate to our NoteEdit page yet, let's take care of this !

Create button

This twitter-like button is a convenient way to allow our users to create a new note easily. To style it, we will use our StyledPressable generic component.

// src/components/CreateButton.tsx
// ...imports

export default function CreateButton() {
  const navigation = useNavigation<HomeProps>();
  const { selectNote } = useNote();

  const createNote = () => {
    // call this function without parameter will initiate a new note
    selectNote();
    navigation.navigate('NoteEdit');
  };

  return (
    <StyledPressable
      onPress={createNote}
      style={({ pressed }) => ({ opacity: pressed ? 0.8 : 1 })}
      position='absolute'
      bottom={3}
      right={3}
      width={60}
      height={60}
      backgroundColor='primary'
      borderRadius={30}
      justifyContent='center'
      alignItems='center'
      borderWidth={0.5}
      borderColor='accent'
    >
      <Feather name='plus' size={40} color='white' />
    </StyledPressable>
  );
}

Then add it to our Home page with a temporary count of your notes. This allow you to check everything is working as expected by creating new notes and verifying that the count is moving accordingly:

export default function Home() {
+  const { notes } = useNote();
  const { switchTheme } = useContext(ThemeContext);

  return (
    <StyledView
      flex={1}
      justifyContent='center'
      alignItems='center'
      backgroundColor='primary'
    >
      <StyledText color='white'>Hello from Home</StyledText>
      <StyledText color='secondary' mt={3} onPress={switchTheme}>
        Click to switch theme
      </StyledText>
+      <StyledText color='white' mt={3}>Number of notes: {notes?.length}</StyledText>
+      <CreateButton />
    </StyledView>
  );
}

You should now have something like this :

🥳 Congrats you just implemented our main logic, the most difficult part is over !

Now let's have fun and give our Home page a better style !

Home page

As a reminder, there is what our home page will looks like at the end :

For this page, we are going to create three more elements :

• header
• masonry layout
• card

Header

Start by creating a new src/components/Header.tsx

In this component, we will only use our generic components to render the desired design, add an icon to update the theme, and a function to open a twitter link on a click on my username. Feel free to play around the code to make it yours.

// src/components/Header.tsx
// ...imports

const TWITTER_NAME = '@dpnick_';
export const HEADER_FULL_HEIGHT = 300;

export default function Header() {
  const { isDarkTheme, switchTheme } = useContext(ThemeContext);

  const openTwitter = async () => {
    const url = 'https://twitter.com/dpnick_';
    try {
      const supported = await Linking.canOpenURL('https://twitter.com/dpnick_');
      if (supported) {
        await Linking.openURL(url);
      } else {
        Alert.alert(`Don't know how to open this URL: ${url}`);
      }
    } catch {
      Alert.alert('Error opening Twitter');
    }
  };

  return (
    <StyledView
      bg='primary'
      position='absolute'
      width='100%'
      height={HEADER_FULL_HEIGHT}
      justifyContent='center'
      borderBottomLeftRadius={48}
      borderBottomRightRadius={48}
    >
      <StyledView padding={4}>
        <StyledText fontSize={6} color='white'>
          Welcome
        </StyledText>
        <Pressable
          onPress={openTwitter}
          style={({ pressed }) => ({ opacity: pressed ? 0.3 : 1 })}
        >
          <StyledText fontSize={6} color='secondary' paddingLeft={36}>
            {TWITTER_NAME}
          </StyledText>
        </Pressable>
      </StyledView>
      <StyledView
        position='absolute'
        top={(StatusBar.currentHeight || 40) + 8}
        right={16}
      >
        <Pressable
          onPress={switchTheme}
          hitSlop={16}
          android_ripple={{ borderless: true, color: 'white' }}
          style={({ pressed }) => ({ opacity: pressed ? 0.3 : 1 })}
        >
          <Feather
            name={isDarkTheme ? 'sun' : 'moon'}
            size={24}
            color='white'
          />
        </Pressable>
      </StyledView>
    </StyledView>
  );
}

Now, use it in our Home page to see the result :

// src/pages/Home.tsx
// ...imports

// allow to extract from our type "HomeStackParamList" params for "Home" route
// will be useful later
+export type HomeProps = NativeStackNavigationProp<HomeStackParamList, 'Home'>;

export default function Home() {
  const { notes } = useNote();
-  const { switchTheme } = useContext(ThemeContext);

  return (
    <StyledView
      flex={1}
-     justifyContent='center'
      alignItems='center'
-     backgroundColor='primary'
+     backgroundColor='background'
    >
-      <StyledText color='white'>Hello from Home</StyledText>
-      <StyledText color='secondary' mt={3} onPress={switchTheme}>
-        Click to switch theme
-      </StyledText>
-        <StyledText color='white' mt={3}>
-          Number of notes: {notes?.length}
-        </StyledText>
        <CreateButton />
+      <Header />
    </StyledView>
  );
}

Run your app with expo start

Yay! Our header looks really nice! Play with the moon / sun icons and make sure your theme still change!

Note Card

Each NoteCard component will represent a Note object, so we can start by creating our component as follow:

// src/components/NoteCard.tsx
// ...imports

// each card will receive the following as props
// but can also be styled from parent thanks to the extend
interface NoteCardProps extends StyledViewProps {
  note: Note;
  showNoteEdit: (id: number, title: string) => void;
}

// "...props" represent all possible styling props
export default function NoteCard({
  note,
  showNoteEdit,
  ...props
}: NoteCardProps) {
  // call navigate function from parent (props)
  const showDetail = () => showNoteEdit(note.id, note.title);

  // wrap a card with a pressable element to allow navigation on click
  // use date-fns method 'formatDistanceToNow' to make our timestamp human-readable
  // using our generic component to create the desired style
  // 'numberOfLines' allow us to limit the content preview to 8 lines
  return (
    <Pressable
      onPress={showDetail}
      style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}
    >
      <StyledView {...props}>
        <StyledText
          color='white'
          numberOfLines={1}
          fontWeight='bold'
          fontSize={2}
        >
          {note.title}
        </StyledText>
        <StyledText color='accent' mb={8}>
          {formatDistanceToNow(note.updatedAt, {
            addSuffix: true,
          })}
        </StyledText>
        <StyledText color='whitesmoke' numberOfLines={8}>
          {note.content}
        </StyledText>
      </StyledView>
    </Pressable>
  );
}

Make sure to have at least one note. Then, you can try your component in the Home page like :

// src/pages/Home.tsx
// ... other imports
import Card from '@components/Card';

export type HomeProps = NativeStackNavigationProp<HomeStackParamList, 'Home'>;

export default function Home() {
+  const { notes, selectNote } = useNote();
+  const navigation = useNavigation<HomeProps>();
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [filteredNotes, setFilteredNotes] = useState<Note[]>([]);
+  const { primary } = useTheme().colors;

  // allow to set local state in sync
+  useEffect(() => {
    // avoid running it before notes initialized
+    if (!notes) return;
+    setFilteredNotes(notes);
+    setIsLoading(false);
+  }, [notes]);

+  const showNoteEdit = (id: number) => {
+    selectNote(id);
+    navigation.navigate('NoteEdit');
+  };

  // display only our note at last index
  return (
    <StyledView flex={1} alignItems='center' backgroundColor='background'>
+      <StyledView paddingTop={350} margin={4}>
+        {isLoading ? (
+          <ActivityIndicator size='large' color={primary} />
+        ) : (
+          <NoteCard
+            note={filteredNotes[filteredNotes?.length - 1]}
+            showNoteEdit={showNoteEdit}
+            bg='secondary'
+            p={3}
+            borderRadius={16}
+            mb={2}
+          />
+        )}
+      </StyledView>
      <CreateButton />
      <Header />
    </StyledView>
  );
}

As you can see, we are using isLoading to display a loader to the user while waiting for his data. It prevents the user to wait in front of a white screen. It will be useful when you will have a large list of notes.

You should now have something like :

Try to update / create / delete your note. You should see the last note element created / updated.

Of course we can have several notes, let's create a list to display them all !

Masonry layout

Masonry layout is a grid system where each item can have a different height. You have surely already seen some on app like Pinterest.

Although FlatList is often a best choice, we are not going to use this time because it prevents having items with different heights for performance purpose.

Let's create our own !

First, add a new component to handle empty list state src/Components/EmptyList.tsx. This component, is pretty simple, it receives an icon name and a message from props and then display it in a view. It will help to get our list component cleaner.

// src/Components/EmptyList.tsx
// ...imports

interface EmptyListProps {
  icon: 'ghost' | 'present';
  message: string;
}

export default function EmptyList({ message, icon }: EmptyListProps) {
  // allow to get values from current theme
  // to use it in non-styled component for example (icon in this case)
  const { text } = useTheme().colors;

  return (
    <StyledView flex={1} justifyContent='center' alignItems='center'>
      <SimpleLineIcons name={icon} size={48} color={text} />
      <StyledText color='text' mt={12} fontSize={2} textAlign='center'>
        {message}
      </StyledText>
    </StyledView>
  );
}

We are now ready to create our list, create a new component src/components/MasonryList.tsx

// src/components/MasonryList.tsx
// ...imports

// we pass the list of note as props to our component
interface MasonryListProps {
  notes: Note[];
  search: string;
  userHasNotes: boolean;
}

function compareDateDesc(first: Note, second: Note) {
  let result = 0;
  if (second.updatedAt < first.updatedAt) {
    result = -1;
  }
  if (second.updatedAt > first.updatedAt) {
    result = 1;
  }
  return result;
}

function MasonryList({ notes, search, userHasNotes }: MasonryListProps) {
  // navigation use HomeProps bc this component live in this route
  const navigation = useNavigation<HomeProps>();
  const { selectNote } = useNote();

  // function passed to each NoteCard as prop
  const showNoteEdit = (id: number) => {
    // select the clicked note in our state (see NoteContext)
    selectNote(id);
    navigation.navigate('NoteEdit');
  };

  if (!userHasNotes) {
    return <EmptyList message='Start by creating a note 👇' icon='present' />;
  }
  // explanation bellow
  return (
    <StyledView flexDirection='row'>
      {notes?.length > 0 ? (
        [...Array(2).keys()].map((column) => {
          return (
            <StyledView
              key={column.toString()}
              flex={1 / 2}
              flexDirection='column'
              margin={1}
            >
              {notes
                .sort(compareDateDesc)
                .map((note, index) => {
                  if (index % 2 === column) {
                    return (
                      <NoteCard
                        key={note.id.toString()}
                        note={note}
                        showNoteEdit={showNoteEdit}
                        bg={note.color}
                        p={3}
                        borderRadius={16}
                        mb={2}
                      />
                    );
                  }
                  return null;
                })
                .filter((element) => !!element)}
            </StyledView>
          );
        })
      ) : (
        <EmptyList
          message={`No corresponding result for ${search}`}
          icon='ghost'
        />
      )}
    </StyledView>
  );
}

export default memo(MasonryList);

In a row direction view, we just created two columns. Each one take half of the available space (flex={1 / 2}). Inside each column we iterate over all notes (from props), if the current note index % 2 (number of columns) is equal to the current column we add a Note component to this column otherwise we go directly to the next element.

We also have a two check :

• if we don't have any notes we display to the user a message to let him know what to do.
• if user has notes but none is passed to our component (via props) we display a message to warn the user. Typically, this will be useful for our search feature.

You might also have noticed, we sort our notes to display the last updated first, because... who cares about the old notes after all 🤷‍♂️😄

Once it's done, let's try it in our Home page !

// src/pages/Home.tsx
// ...imports

const StyledScrollView = styled.ScrollView<LayoutProps & SpaceProps>(
  compose(layout, space)
);

export type HomeProps = NativeStackNavigationProp<HomeStackParamList, 'Home'>;

const PADDING_TOP_CONTENT = 16;

export default function Home() {
  const { notes } = useNote();
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [filteredNotes, setFilteredNotes] = useState<Note[]>([]);
  const { primary } = useTheme().colors;

  // allow to set local state in sync
  useEffect(() => {
    // avoid running it before notes initialized
    if (!notes) return;
    setFilteredNotes(notes);
    setIsLoading(false);
  }, [notes]);

  return (
    <StyledView flex={1} alignItems='center' backgroundColor='background'>
      <StyledScrollView
        width='100%'
        p={16}
        pb={0}
        contentContainerStyle={{
          paddingTop: HEADER_FULL_HEIGHT + PADDING_TOP_CONTENT,
        }}
      >
        {isLoading ? (
          <ActivityIndicator size='large' color={primary} />
        ) : (
          <MasonryList
            notes={filteredNotes}
            search={''}
            userHasNotes={!!notes && notes?.length > 0}
          />
        )}
      </StyledScrollView>
      <CreateButton />
      <Header />
    </StyledView>
  );
}

We're getting closer to our final design ! You should now have something like :

As soon as we start having multiple notes, it can be annoying to look for a specific one. This means it's time to implement a search feature !

Search feature

This will be straightforward since everything is already in place.

Create a new component src/components/SearchBar.tsx

// src/components/SearchBar.tsx
// ...imports
interface SearchBarInterface {
  value: string;
  onChangeText: (next: string) => void;
  placeholder: string;
}

const PADDING_TOP_BAR = 16;

export default function SearchBar({
  value,
  onChangeText,
  placeholder,
}: SearchBarInterface) {
  return (
    <StyledView
      p={20}
      pt={0}
      width='100%'
      position='absolute'
      borderBottomLeftRadius={24}
      borderBottomRightRadius={24}
      top={HEADER_FULL_HEIGHT + PADDING_TOP_BAR}
    >
      <StyledView
        bg='accent'
        borderRadius={8}
        flexDirection='row'
        justifyContent='flex-start'
        alignItems='center'
        height={40}
      >
        <Feather
          name='search'
          size={20}
          color='black'
          style={styles.iconStart}
        />
        <TextInput
          style={styles.input}
          placeholder={placeholder}
          value={value}
          onChangeText={onChangeText}
        />
        {value?.length > 0 && (
          <Feather
            name='x'
            size={24}
            color='black'
            style={styles.iconEnd}
            onPress={() => onChangeText('')}
          />
        )}
      </StyledView>
    </StyledView>
  );
}

const styles = StyleSheet.create({
  iconStart: {
    marginLeft: 8,
  },
  iconEnd: {
    marginRight: 8,
  },
  input: {
    flex: 1,
    fontSize: 16,
    marginLeft: 8,
    paddingVertical: 4,
  },
});

Finally, add it to our Home page

// src/pages/Home.tsx
// ...imports

const StyledScrollView = styled.ScrollView<LayoutProps & SpaceProps>(
  compose(layout, space)
);

export type HomeProps = NativeStackNavigationProp<HomeStackParamList, 'Home'>;

+const SEARCH_INPUT_HEIGHT = 40;
const PADDING_TOP_CONTENT = 16;

export default function Home() {
  const { notes } = useNote();
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [filteredNotes, setFilteredNotes] = useState<Note[]>([]);
+ const [search, setSearch] = useState<string>('');
+ const debouncedSearch = useDebounce<string>(search, 500);
  const { primary } = useTheme().colors;

  // allow to set local state in sync
  useEffect(() => {
    // avoid running it before notes initialized
    if (!notes) return;
    setFilteredNotes(notes);
    setIsLoading(false);
+    setSearch('');
  }, [notes]);

  // run each time debouncedSearch change
+  useEffect(() => {
+    if (!notes) return;
+    const nextData = notes.filter((note) =>
+      note.title.toLocaleLowerCase().includes(search.toLocaleLowerCase())
+    );
+    setFilteredNotes(nextData);
+  }, [debouncedSearch]);

  return (
    <StyledView flex={1} alignItems='center' backgroundColor='background'>
      <StyledScrollView
        width='100%'
        p={16}
        pb={0}
        contentContainerStyle={{
          paddingTop:
+            HEADER_FULL_HEIGHT + SEARCH_INPUT_HEIGHT + PADDING_TOP_CONTENT,
        }}
      >
        {isLoading ? (
          <ActivityIndicator size='large' color={primary} />
        ) : (
          <MasonryList
            notes={filteredNotes}
-             search={''}
+            search={search}
            userHasNotes={!!notes && notes?.length > 0}
          />
        )}
      </StyledScrollView>
+      {notes && notes?.length > 0 && (
+        <SearchBar
+          value={search}
+          onChangeText={setSearch}
+          placeholder='Search a title...'
+        />
+      )}
      <CreateButton />
      <Header />
    </StyledView>
  );
}

Create a few more notes and try your search feature.

You made it!

Conclusion

In this article, we see how to manage your app logic and design to provide your users a nice-looking and using tool. We created a note-taking app but the most important thing is that the concept of global state your learned can be apply to any application.

Next time, in the last article of this series, I will show you how to bring life to this application using animations (reanimated 2).

Congratulations for following until the end! Do not hesitate to subscribe to my newsletters and to join me on twitter to follow my daily tips and tricks.

See you soon! 👋

- Yannick

Disclaimer: This series is composed of three articles. Each part will focus on a different aspect of app development.

This first article of the series is dedicated to the project configuration. Too many times, developers (I was like that too 🤫), do not take the time to make a good project configuration and start coding too quickly. Experience taught me that it is better to spend time at the beginning setting up a pertinent and scalable configuration. In many ways, this will prevent misconceptions, coding errors, rework and other troubles that can happen along the way.

At the end of this series, you will be able to create your own high-quality app with a solid project configuration, consistent design system, data manipulations, and animations.

If you get stuck, you can find a link to my github repo at the end of this article. You can also leave a comment, I will be happy to answer.

What are we going to build?

If like me, you like to learn by doing this tutorial is for you. Before starting, I suggest you to read it once to understand the main concern and then start coding at the same time.

Prerequisites

This tutorial is beginner-friendly, however, to follow it flawlessly you should already have some react native and expo basics. If not please read the getting started doc for react native and expo first. If you have any questions, leave a comment or send me a message on Twitter.

Create an expo project

Open your favorite terminal and let's get started!

If you haven't already, install expo-cli by running :

npm install --global expo-cli

Then, go ahead and create a new expo project :

expo init react-native-note && cd react-native-note

(you can choose another name if you prefer 😄)

At the question choose a template choose blank (TypeScript)

Typescript is helpful to prevent development errors and so is a huge step in the right direction to become more scalable and productive.

Congrats your project is created!

Try to run it with expo start to ensure everything is working properly.

Configuring typescript

Open your favorite IDE, in my case (like almost everyone) I will use VS Code.

Mac pro tip: CMD + P allow searching for a file in the current project

At the root level of the project, find a file called tsconfig.json and past the content bellow inside :

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true, // Allow default imports from modules without default export
    "jsx": "react-native", // Specify JSX code generation
    "skipLibCheck": true,
    "moduleResolution": "node", // Specify module resolution strategy
    "noEmit": true, // not emit outputs
    "target": "esnext", // Specify ECMAScript target version
    "baseUrl": ".",
    // create paths to our futur modules
    "paths": {
      "@components/*": ["./src/components/*"],
      "@navigation/*": ["./src/navigation/*"],
      "@contexts/*": ["./src/contexts/*"],
      "@models/*": ["./src/models/*"],
      "@pages/*": ["./src/pages/*"]
    }
  },
  "include": ["./src/**/*"]
}

Project architecture

By default, you will have this project architecture :

From here, react native doesn't impose any architecture for your code, technically you could create your components directly at the root. However, it is a good practice to organize your code by concern to improve readability, reusability and debugging.

Let's create some folders.

VS Code tips: you can create parent and child folders at once by specifying their relative path. For example from our root click new folder and input src/pages this will create both src and pages folders (works also with files).

At the root of our project, create an src folder where will live your app. Inside src, create multiple folders called pages (no need to specify what is inside I guess 😅), components (for child components), hooks, contexts, navigation, and models (for typescript interfaces).

Async storage

We will use async storage to persist user preferences like the selected theme. Install it with the following command :

expo install @react-native-async-storage/async-storage

Add a file src/models/storage.ts, where we will define our storage keys :

using an enum prevent typos

export enum StorageKeys {
  USE_DARK_THEME = 'useDarkTheme'
}

Design system

Dependencies

Defining your design system is one of the most important steps to give your app consistent and neat user visual effects. To handle it in the best way, we will use styled-components, this CSS-in-JS framework provides a simple and flexible way to create react components with the ability to define style based on component props. Link to documentation

npm i styled-system styled-components && npm i --save-dev @types/styled-system @types/styled-components @types/styled-components-react-native babel-plugin-styled-components babel-plugin-module-resolver

and update your babel.config.js file as follow :

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'babel-plugin-styled-components',
      [
        'module-resolver',
        {
          root: ['./src'],
          extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
          alias: {
            '@components': './src/components',
            '@navigation': './src/navigation',
            '@contexts': './src/contexts',
            '@models': './src/models',
            '@pages': './src/pages',
          },
        },
      ],
    ],
  };
};

You may have noticed the aliases, you need to configure them both in typescript (we did it above) and babel. Thanks to it, instead of using absolute imports you can use our aliases. For example import SomeComponent from './src/components/SomeComponent' will be import SomeComponent from '@components/SomeComponent'

Run your app with expo start -c to clear your cache and take our changes into consideration.

Styled components has its own syntax, creating a simple full size centered View with background color would be :

// simple example of styled-components
import styled from 'styled-components/native'

const StyledView = styled.View`
  background-color: ${(props) => props.color};
  justify-content: center;
  align-items: center;
  flex: 1;
`;

// then use it like any other component :
<StyledView color=”red”>{...}</StyledView>

In addition to styled-components, we will take advantage of styled-system. This library will extend styled-components improving our style structure by adding styling props directly to your react component. styled-system allow also to control styles based on a global theme object (scales, colors, layouts...). This will upgrade both our design consistency and our code reusability and then will allow us to iterate quickly. Link to documentation

For reference, the same component as above using styled-system will be :

// simple example of styled-components and styled-system
import styled from 'styled-components/native'
import { 
  compose,
  color,
  ColorProps,
  flex,
  flexbox,
  FlexboxProps,
  FlexProps 
} from 'styled-system'

// get our component typed and enjoy autocompletion
type StyledViewProps = ColorProps & FlexProps & FlexboxProps;

const StyledView = styled.View<StyledViewProps>(
  compose(
    color,
    flex,
    flexBox
  )
);
// then use it like :
<StyledView
  flex={1}
  justifyContent='center'
  alignItems='center'
  backgroundColor='red'
>{...}</StyledView>

Pretty easy to read right?

you can even shorten the syntax: backgroundColor become bg, margin become m... but I wanted to keep it simple to understand.

But wait, the real magic happens when you start using theming!

Theming

Inside src/models, create a file named styled.d.ts. This file will extend the empty DefaultTheme interface provided by styled-components to contain our custom theme :

// src/models/style.d.ts
import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    fontSizes: number[];
    space: number[];
    colors: {
      primary: string;
      secondary: string;
      background: string;
      text: string;
      accent: string;
    };
  }
}

Then continue by creating a Theme.ts into your src folder and paste the following content inside :

// src/Theme.tsx
import { DefaultTheme } from 'styled-components/native';

// you can play with the colors here
const lightTheme: DefaultTheme = {
  fontSizes: [12, 14, 16, 20, 24, 32, 36], // could also be defined as em
  space: [0, 4, 8, 16, 32, 64],
  colors: {
    primary: '#1A1B41',
    secondary: '#F4845F',
    background: '#FEFEFF',
    text: 'black',
    accent: '#d9dbda',
  },
};

const darkTheme: DefaultTheme = {
  fontSizes: [12, 14, 16, 20, 24, 32, 36],
  space: [0, 4, 8, 16, 32, 64],
  colors: {
    primary: '#7FC29B',
    secondary: '#334756',
    background: '#272838',
    text: 'white',
    accent: '#d9dbda',
  },
};

enum Theme {
  LIGHT = 'light',
  DARK = 'dark',
}

export { lightTheme, darkTheme, Theme };

As you can see, we use the DefaultTheme interface we defined just before to create two themes with different values (especially for colors). We also create an enum to identify each theme and we export everything to be able to use it elsewhere.

Now that we have our themes, we will make use of the React context API to make them available across all our components. styled-components provide a context to expose the selected theme, however, we would like to extend this to be able to switch between themes.

To do this, we will wrap the ThemeProvider from styled-components. Inside src/contexts add a file called ThemeContext.tsx :

// src/contexts/ThemeContext.tsx
import AsyncStorage from '@react-native-async-storage/async-storage';
import React, { createContext, useEffect, useState } from 'react';
import { Alert, useColorScheme } from 'react-native';
import { ThemeProvider as StyledThemeProvider } from 'styled-components/native';
import { StorageKeys } from '@models/storage';
import { darkTheme, lightTheme } from '../Theme';

interface IThemeContext {
  isDarkTheme: boolean | undefined;
  switchTheme: () => void;
}

// create context with default value
export const ThemeContext = createContext<IThemeContext>({
  isDarkTheme: undefined,
  switchTheme: () => {},
});

const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
  // get from OS user prefered theme
  const colorScheme = useColorScheme();
  const [isDark, setIsDark] = useState<boolean>(false);

  // on component first render => check if we have a theme value in async storage
  // otherwise => take user prefered theme
  useEffect(() => {
    const setUserTheme = async () => {
      try {
        const useDarkMode = await AsyncStorage.getItem(StorageKeys.USE_DARK_THEME);
        let result = colorScheme === 'dark';
        if (useDarkMode !== null) {
          result = JSON.parse(useDarkMode);
        }
        setIsDark(result);
      } catch {
        Alert.alert('An error occured getting your saved theme');
      }
    };
    setUserTheme();
  }, []);

  // update theme & set the new value to async storage
  const switchTheme = async () => {
    setIsDark((prev) => !prev);
    try {
      await AsyncStorage.setItem(
        StorageKeys.USE_DARK_THEME,
        JSON.stringify(!isDark)
      );
    } catch {
      Alert.alert('An error occured while updating theme');
    }
  };

  // wrap `styled-components` provider with our own one
  // according to `isDark` provide the corresponding theme from `Theme.ts`
  // every `children` will have access to `isDarkTheme`, `switchTheme` and `theme`
  return (
    <ThemeContext.Provider
      value={{
        isDarkTheme: isDark,
        switchTheme,
      }}
    >
      <StyledThemeProvider theme={isDark ? darkTheme : lightTheme}>
        {children}
      </StyledThemeProvider>
    </ThemeContext.Provider>
  );
};

export default ThemeProvider;

All you have to do now is to wrap all your app within this context. After that, every components can have access to the current theme through the useTheme hook. Even better, our styled components can directly use theme variables in their props. Update your App.tsx to use it :

color or backgroundColor props can now use any colors from our theme (you can still input color that doesn't exist in theme like #6DD8AF or "red" for example).

margin padding props use values from "space" array in our theme. For example when you set margin={2} the value "2" represents the index in this array. If you go further than the available indexes, the value will be used as pixels.

fontSize use values from "fontSizes" array in our theme. Just like margin and padding it will be interpreted as index in the array. Check the styled-system doc out for more.

// App.tsx
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaView, StyleSheet, Text } from 'react-native';
import styled from 'styled-components/native';
import {
  color,
  ColorProps,
  compose,
  flex,
  flexbox,
  FlexboxProps,
  FlexProps,
} from 'styled-system';
import ThemeProvider from '@contexts/ThemeContext';

type StyledViewProps = ColorProps & FlexProps & FlexboxProps;
const StyledView = styled.View<StyledViewProps>(compose(color, flex, flexbox));

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <ThemeProvider>
        <StyledView
          flex={1}
          justifyContent='center'
          alignItems='center'
          backgroundColor='primary'
        >
          <Text style={styles.title}>Hello from App</Text>
        </StyledView>
        <StatusBar style='auto' />
      </ThemeProvider>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  title: {
    color: 'white',
  },
});

Refresh your app to enjoy your first themed view!

Generic components

To avoid re-declaring the most used components (View and Text) in every page we are going to create generic components to reuse.

In src/components create two components StyledView.tsx and StyledText.tsx :

// src/components/StyledView.tsx
import styled from 'styled-components/native';
import {
  color,
  ColorProps,
  compose,
  flex,
  flexbox,
  FlexboxProps,
  FlexProps,
  layout,
  LayoutProps,
  position,
  PositionProps,
  space,
  SpaceProps,
  borderRadius,
  BorderRadiusProps
} from 'styled-system';

// space allow to use padding, margin...
// layout allow to use width, height...
type StyledViewProps = ColorProps &
  SpaceProps &
  PositionProps &
  FlexProps &
  FlexboxProps &
  LayoutProps &
  BorderRadiusProps;

const StyledView = styled.View<StyledViewProps>(
  compose(color, space, position, flex, flexbox, layout, borderRadius)
);

export default StyledView;

import styled from 'styled-components/native';
import {
  color,
  ColorProps,
  compose,
  space,
  SpaceProps,
  typography,
  TypographyProps,
} from 'styled-system';

// typography allow to change font size, style etc
type StyledTextProps = ColorProps & SpaceProps & TypographyProps;

const StyledText = styled.Text<StyledTextProps>(
  compose(color, space, typography)
);

export default StyledText;

As you can see, we pass common used style properties to our component via the compose helper function. Thanks to it we will now have access to those properties directly through the component props

Ok, so let's use it!

Prepare navigation

For this app, we are going to use a famous library called React Navigation. It allows to easily handle multiple navigation patterns such as tabs, drawers, stacks...

In our case, we are going to use a stack. If you want to learn more about other possibilities, leave a comment and I will consider creating a dedicated article.

Install the library and its dependencies with the following command :

npm install @react-navigation/native @react-navigation/native-stack && expo install react-native-screens react-native-safe-area-context

While installing, create two "placeholder" components respectively named Home.tsx and NoteEdit.tsx inside src/pages folder.

Pro tips: I'm using the ES7 React/Redux/GraphQL/React-Native snippets extension to speed up the creation process. With it, add a new file and write rnf inside to create a functional component.

// src/pages/Home.tsx
import React from 'react';
import StyledText from '@components/StyledText';
import StyledView from '@components/StyledView';

export default function Home() {
  const { switchTheme } = useContext(ThemeContext);

  return (
    <StyledView
      flex={1}
      justifyContent='center'
      alignItems='center'
      backgroundColor='primary'
    >
      <StyledText color='white'>Hello from Home</StyledText>
      <StyledText color='secondary' mt={3} onPress={switchTheme}>
        Click to switch theme
      </StyledText>
    </StyledView>
  );
}

// src/pages/NoteEdit.tsx
import React from 'react';
import StyledText from '@components/StyledText';
import StyledView from '@components/StyledView';

export default function NoteEdit() {
  return (
    <StyledView
      flex={1}
      justifyContent='center'
      alignItems='center'
      backgroundColor='background'
    >
      <StyledText color='text'>Hello from NoteEdit</StyledText>
    </StyledView>
  );
}

With these two components, you get a first glimpse of why a good project setup could improve your productivity. Our components are much more readable and concise.

Once it's done, create a file src/navigation/HomeStack.tsx. In this file, we are going to create our main stack navigator with our two screens.

// src/navigation/HomeStack.tsx
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react';
import { useTheme } from 'styled-components/native';
import { Note } from '@models/note';
import StyledView from '@components/StyledView';
import Home from '@pages/Home';
import NoteEdit from '@pages/NoteEdit';

// type navigation + each route params
export type HomeStackParamList = {
  Home: undefined;
  NoteEdit: { id: number; title: string };
};

// using type avoid typo in route name by providing autocomplete
const HomeStack = createNativeStackNavigator<HomeStackParamList>();

export default function HomeStackNavigator() {
  const { background, text } = useTheme().colors;
  // by default => go to Home
  // wrapping everything in a view with bg color avoid
  // white flickering in dark mode
  return (
   <StyledView flex={1} backgroundColor='background'>
    <HomeStack.Navigator initialRouteName="Home" >
      <HomeStack.Screen
        name='Home'
        component={Home}
        options={() => ({
          headerShown: false,
        })}
      />
      <HomeStack.Screen
        name='NoteEdit'
        component={NoteEdit}
        options={({ route }) => ({
          headerStyle: { backgroundColor: background },
          headerTintColor: text,
          headerTitle: route.params.title,
        })}
      />
    </HomeStack.Navigator>
   </StyledView>
  );
}

And then add an src/navigation/index.tsx where we will create our main navigation container :

// src/navigation/index.tsx
import { NavigationContainer } from '@react-navigation/native';
import React from 'react';
import HomeStackNavigator from '.@navigation/HomeStack';

export default function Navigation() {
  return (
    <NavigationContainer>
      <HomeStackNavigator />
    </NavigationContainer>
  );
}

Finally, we need to use this component in our App.tsx

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import ThemeProvider from '@contexts/ThemeContext';
import Navigation from '@navigation/index';
-import {
-  color,
-  ColorProps,
-  compose,
-  flex,
-  flexbox,
-  FlexboxProps,
-  FlexProps,
-} from 'styled-system';

-type StyledViewProps = ColorProps & FlexProps & FlexboxProps;
-const StyledView = styled.View<StyledViewProps>(compose(color, flex, flexbox));

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <ThemeProvider>
-        <StyledView
-          flex={1}
-          justifyContent='center'
-          alignItems='center'
-          backgroundColor='primary'
-        >
-          <Text style={styles.title}>Hello from App</Text>
-        </StyledView>
+       <Navigation />
        <StatusBar style='auto' />
      </ThemeProvider>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
-  title: {
-    color: 'white',
-  },
});

Run your app, you should see your Home page, try to click on the "click to switch theme". Congrats you successfully setup your project!

Your favorite theme is even persisted in your mobile storage 🤗

Conclusion

This part wasn't the funniest, but having all of this already configured will really be a game changer for the rest of the tutorial. This will allow us to iterate quickly while keeping our code clean.

In the next part, we will continue by building our pages, components and business logic. We will see among other things how to create a masonry layout and a search feature.

I hope you enjoy and learn something interesting with this tutorial. If you have any suggestion / question feel free to leave a comment, I will be happy to answer it.

Subscribe to my newsletter to get notified when the next article comes out!

Link to my repo

See you soon! 👋

- Yannick

Hey 👋 My name is Yannick, I’m living in Dijon, the city of wine and mustard, in eastern France. I have been a full-stack javascript developer for over 5 years now. I’m currently working as a front-end developer for a smart clothes start-up.

I like to create performant user-engaging apps. I am always working on side projects to improve my skills. Lately, I released a mobile app called agame which allows users to find new video games based on their preferences (if you want to check it out I will include links at the end of this article).

Enough about me, let’s talk about this blog!

What to expect from this blog ?

Although I have been coding for a while, I still enjoy learning and experimenting with new concepts/technologies. On this blog, you can follow me along my coding journey (especially but not only) around the javascript ecosystem.

You can also expect me to share my best tips and what makes my life as developer easier.

Main subjects

I planned to talk about multiple subjects including :

• Technologies (React native / react / Node.js / Next.js / Angular / Vanilla js)
• Best practices / performance optimization
• Tutorials for creating smooth app (animations etc)
• Experiments (like creating 3D app with three.js)
• What I learned from my experiences

And many more things…

If you have any idea / topic you would like me to talk about, feel free to leave a comment or to join me on Twitter.

Bonus: the first articles will be a short serie explaining how to create a powerful/maintainable and engaging mobile application.

Stay tuned!

- Yannick

Agame links: