Breathly is an open-source React-Native mobile app that allows you to focus on your breathing. You can use Breathly for daily relaxation and breath training: just choose a breathing technique and focus on the guided exercise.
In this repository you'll find the source code of the Breathly mobile app.
Breathly is a small React-Native app that I developed on my free time in 2018 for playing around with the React-Native Animated API.
With the incoming React-Native's hooks support I decided to get back on it, rewrite it with hooks, and also release it in the Play Store and in App Store.
I hope the source code will be useful to someone.
👉 Check the DEVLOG for more informations and details about the app architecture and a few development highlights.
- React-Native and TypeScript
- React hooks
- All the
Animatedanimations are using the native driver - Type-safe
Context+useReducerusage (pretty similar to Redux)
Most of the stuff you see in the app is just a derivation of other people's work.
I tried to keep track of them during the development process:
- The "play" button animation is based on a Switft custom modal transition called BubbleTransition
- For the Breathly logo I used Hatchful to get a few proposed logos and I used this one as the foundation for the current one (build with PhotoShop)
- The technique picker View Pager animations are inspired by the InVision Android app onboarding screen
- I used this mockup from Lstore design goodies to create the iPhone X preview that you can see at the top of the README.
- The breathing techniques are the same ones used in a bunch of other iOS apps and their description were obtained with a Google search. A few of the apps used as inspirations are:
- I personally requested and bought the audio voice lines from voicebunny.
Pull requests are welcome. File an issue for ideas, conversation or feedback.