This content originally appeared on DEV Community and was authored by Csilla Lukacs
The Idea
I don’t know about you, but I frequently use messaging apps for note-taking. I like typing in a thought, an idea, a measurement, and immediately having the timestamp appended.
I thought I should build a note-taking app based on this idea. The user interface should be that of a messaging app, but it’s all in service of taking quick notes. Servers become notebooks, and channels become pages.
I’ve already worked with React Native and Expo, so I decided to use these for the app. I have yet to decide how to persist data. The app should work offline, but I don’t want to exclude the possibility of syncing to the cloud in the future.
My goal is to eventually publish this on the app store.
Getting Started
I decided to start with getting the layout/navigation right.
My first experiment was inspired by the Discord app, tabs on the bottom of the screen, list of servers and channels on the left, clicking a channel opens that channel in a panel that slides in from the right. Swiping right takes you back to the channel list, swiping left opens the same channel again.
I first experimented with using an expo modal for the individual ‘channels’ (so a Stack.Screen with presentation: modal). I wanted it to be a modal because I want it to cover the navigation bar with the tabs.
<Stack.Screen
name="page/[pageId]"
options={{
title: "Page",
presentation: "modal",
}}
/>
The problem with this is that, on iOS at least, the modal only ever slides in from the bottom (so setting animation: “slide_from_right” doesn’t work). Also, once you close it, you can’t reopen the same page by swiping up, you would have to select it from the list again.
For these reasons, I decided to instead use the Drawer component. Now the navigation panel sits on top of the current note, and can be opened and closed by swiping right/left. I got rid of the tabs for now.
I also came across this article on how Discord does navigation on Android (or did, in 2020), so that disabused me of the idea that apps that work well do so because they only ever use out-of-the-box components, in the ways they are meant to be used, so never run into problems or bugs or anything of the sort 🙂
I also added a TextInput to the individual channel/note/page screen (what are names), and played around with KeyboardAvoidingView which hasn’t gotten less annoying since the first time I used it. Apparently react-native-keyboard-controller is better, so I will try that next. The current one works except for one small thing, namely that it’s not animated, the view jumps up before the keyboard animation even finishes.
There’s an issue for this on Github, although i’m not using iPadOS.
I kind of wish I could make something without importing a million libraries!
Conclusion
I think I tried to do a bit too much today, if I’d stopped sooner today I would have gotten less annoyed. Luckily I still managed to have a nice evening, I ate some oysters, drank thai iced tea and watched a movie.
Ok that’s all for today, see you next time!
This content originally appeared on DEV Community and was authored by Csilla Lukacs