Developing Geonotes — Animations and interactions — Ep. 3

With the notes being displayed around the user that we discussed in Episode 2, it's now time to add a bit of interesting UI and effects.

This will be a bit of a shorter episode, since all the changes were made in a few hours after work.

 ✨ The note-opening effect

I decided to move as much information outside the marker callout as possible. It now only shows the first few words of the note and a "view" call to action.

When the user taps on the callout, the note itself appears like a modal with a dark transparent background. The modal presents a post-it-like note with the content in the center. Tapping on the note starts a flip animation just like you were watching the back of the note, where the username, time and date are displayed.

I used React Native Modal to achieve the modal effect, and Reanimated 2 for the flip effect.

I haven't played much with animations before, but the API seems very straightforward! I also took a lot of inspiration from this post.

🕸 Taking advantage of GraphQL

Using GraphQL with Hasura allowed me to make the notes-around-me query even lighter by removing information about the user and the creation date without having to modify any backend code.

I then added a new query that fetches all the data of a single note by passing the id. Source

query Note($id: uuid!) {
  note: note_by_pk(id: $id) {
    id
    content
    createdAt: created_at
    user {
      username
    }
  }
}

⭐️ The result

In the end I was able to achieve this nice-looking effect!

Front	Animating	Back

And here's the animation in action!

🚧 Next steps

The next step to tackle will be a big one: creating a new note. I want to implement it using Hasura Actions right away, to have more control over the business logic and to perform custom checks!

🎙 How to follow the project

I'll be posting updates throughout the development process and as I learn new thing regarding development, design, and marketing.

If you'd like to have even more real-time updates you can

• Follow me on Twitter @emilioschepis
• Checkout the public GitHub app repository and backend repository