0

New to react native and stackoverflow. I am restyling a project that lets you take notes as you read the bible. I am trying to use react-native-gesture-handler so I can get rid of these ugly delete and edit buttons that I have smashed together on each note.

My problem is that since my note components are transparent, using the swiping gesture to render a delete button causes the delete button to jarringly pop into existence, instead of giving the effect of peeking out from behind the note component as you swipe. If I made my note component background opaque this wouldn't be an issue, but I do like the thematic direction I'm taking and I don't tear it up and rethink the theme if I don't have to.

I'm not allowed to add screenshots yet for some reason, so check the link below to see what I mean.

Any recommendations on how I can get this delete button to slide in from the right as you swipe? Or maybe a clever way to restyle the note component or delete button to make this look nice without sacrificing the cool theme? Thank you!

See Screenshot

Osully1
  • 33
  • 3
  • Can't you show us some code? – Fotios Tsakiris Jun 02 '21 at 20:03
  • Could you specify what you'd like to see? You could be looking for styling on each note, or the note screen component, or the individual note component that's being rendered by a FlatList within the note screen. Because I don't know if I should tackle this problem from an angle of style, animation, or formatting my components differently, I don't know what code would be useful to see. Also, I'm new to stack overflow, like I said in the first sentence of my question. – Osully1 Jun 03 '21 at 15:15
  • You're right, there is no need to show any code. Anyway, the first thing that comes to my mind is to use animations. Just make a deleteButton component that looks like the red rectangle with the icons, and have it initially outside of the screen. You can check [this post](https://stackoverflow.com/questions/45854450/detect-swipe-left-in-react-native) to get the swipe. And in parallel animate the the letters away to the left. – Fotios Tsakiris Jun 04 '21 at 09:03

0 Answers0