Developing Geonotes — Animations and interactions — Ep. 3
Tags: javascript, react, typescript, coding
Published: 2021-08-04 09:13:48

With the notes being displayed around the user that we discussed in [Episode 2](https://dev.to/emilioschepis/developing-geonotes-maps-and-the-postgis-extension-ep-2-3i9j), 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](https://github.com/react-native-modal/react-native-modal) to achieve the modal effect, and [Reanimated 2](https://github.com/software-mansion/react-native-reanimated) 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](https://blog.swmansion.com/building-reigns-how-to-strengthen-reign-over-mobile-game-development-using-reanimated-2-66c127a210e9).

## 🕸 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](https://github.com/emilioschepis/geonotes-app/blob/86e8bd500536ce5f8a615912b4f346bb0cb0cf3d/src/graphql/queries.graphql#L18-L27)

```graphql
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 	|
|---	|---	|---	|
| ![Screen Shot 2021-08-03 at 07.48.15.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627969722714/afoMvZxNv.png) 	| ![Screen Shot 2021-08-03 at 07.51.05.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627969967427/kW3ZJ2hsg.png) 	| ![Screen Shot 2021-08-03 at 07.51.11.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627969971522/3v1UrnE1x.png) 	|

[And here's the animation in action!](https://twitter.com/emilioschepis/status/1422286864879325184)

## 🚧 Next steps

The next step to tackle will be a big one: creating a new note. I want to implement it using [Hasura Actions](https://hasura.io/docs/latest/graphql/core/actions/index.html) 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](https://twitter.com/emilioschepis)
- Checkout the public GitHub [app repository](https://github.com/emilioschepis/geonotes-app/tree/develop) and [backend repository](https://github.com/emilioschepis/geonotes-backend/tree/develop)