Expo + React Native Navigation? Yes!

https://rabbitapp.batyr.io

Why?

  1. I use Reddit quite often and mostly for reading r/reactnative thread. That’s why I have decided to create a lite handy app because the official app and other clients are too overwhelming for me, I love simplicity.
  2. A year ago I have been working on a side project, trying out Flutter, and getting some new knowledge in Golang. So the app was kind of a news app but all content was parsed from actual websites. I wanted to try something new in Golang and did a good job for my self-progress by learning how to crawl sites and publishing a server on DigitalOcean behind Traefik proxy. And as a framework for creating mobile apps, I have decided to pick Flutter. So here is the Github repo but I have never published it or continued working on other parts of that tutorial because Flutter performance in release mode on iOS was pretty bad, not native feel at all. Maybe things have changed since then, I have never tried it again. And yes, this is the reason I have built the Rabbit app and would like to share the process with the community.

Let’s start

Open the terminal and follow next steps:~ cd <to-your-desired-folder>
~ git clone https://github.com/kanzitelli/expo-rnn-starter.git rabbitapp && cd rabbitapp
~ rm -rf .git # to remove starter's git history
~ yarn && yarn ios:pods # it might take some time
~ react-native-rename-next "rabbitapp" -b io.batyr.rabbitapp
~ yarn ios:pods
~ yarn ios # or
~ yarn android # or yarn android:release - for release build

App functionality & structure

  1. A screen with a list of subreddits. Add/Delete functionality.
  2. A screen with a list of posts of a subreddit.
  3. A screen with a post, open in a webview, for example. Save/Remove functionality.
  4. A screen with saved posts. Remove functionality (same as 3rd).
  5. Settings. Just simple actions as app rate, mail composer to write to support, etc.
  6. So it seems like a tab-based app would be a perfect fit for this structure with the following tabs: Subreddits, Saved, Settings.
  7. Very minimalistic, fast, and easy to use.

Coding

Setting up navigation

https://github.com/kanzitelli/rabbit-app/blob/master/src/screens/SubredditsScreen.tsx
https://github.com/kanzitelli/rabbit-app/blob/master/src/utils/constants.ts
https://github.com/kanzitelli/rabbit-app/blob/master/src/App.ts
https://github.com/kanzitelli/rabbit-app/blob/master/src/services/navigation.ts

Subreddits Screen

https://github.com/kanzitelli/rabbit-app/blob/master/src/stores/subredditsStore.ts
https://github.com/kanzitelli/rabbit-app/blob/master/src/stores/index.tsx
https://github.com/kanzitelli/rabbit-app/blob/master/src/screens/SubredditsScreen.tsx
https://github.com/kanzitelli/rabbit-app/blob/master/src/utils/constants.ts
https://github.com/kanzitelli/rabbit-app/blob/master/src/utils/constants.ts
https://github.com/kanzitelli/rabbit-app/blob/master/src/services/navigation.ts
https://github.com/kanzitelli/rabbit-app/blob/master/src/App.ts
https://github.com/kanzitelli/rabbit-app/blob/master/src/screens/SubredditsScreen.tsx

Posts Screen

https://github.com/kanzitelli/rabbit-app/blob/master/src/utils/types.d.ts
https://github.com/kanzitelli/rabbit-app/blob/master/src/services/navigation.ts
https://github.com/kanzitelli/rabbit-app/blob/master/src/screens/SubredditsScreen.tsx
https://github.com/kanzitelli/rabbit-app/blob/master/src/screens/PostsScreen.tsx
https://github.com/kanzitelli/rabbit-app/blob/master/src/utils/helpMethods.ts
https://github.com/kanzitelli/rabbit-app/blob/master/src/services/api.ts
https://github.com/kanzitelli/rabbit-app/blob/master/src/stores/subredditsStore.ts
https://github.com/kanzitelli/rabbit-app/blob/master/src/screens/PostsScreen.tsx

Post Screen

https://github.com/kanzitelli/rabbit-app/blob/master/src/services/navigation.ts
https://github.com/kanzitelli/rabbit-app/blob/master/src/screens/PostsScreen.tsx
https://github.com/kanzitelli/rabbit-app/blob/master/src/screens/PostScreen.tsx
https://github.com/kanzitelli/rabbit-app/blob/master/src/screens/PostScreen.tsx
https://github.com/kanzitelli/rabbit-app/blob/master/src/screens/PostScreen.tsx
https://github.com/kanzitelli/rabbit-app/blob/master/src/utils/constants.ts
https://github.com/kanzitelli/rabbit-app/blob/master/src/stores/subredditsStore.ts
https://github.com/kanzitelli/rabbit-app/blob/master/src/screens/PostScreen.tsx

Saved Screen

https://github.com/kanzitelli/rabbit-app/blob/master/src/utils/constants.ts

Settings Screen

https://github.com/kanzitelli/rabbit-app/blob/master/src/utils/constants.ts
https://github.com/kanzitelli/rabbit-app/blob/master/src/screens/SettingsScreen.tsx
https://github.com/kanzitelli/rabbit-app/blob/master/src/screens/SettingsScreen.tsx

End

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Batyr

Batyr

Problems solver. Open Source Staff. MS in CS. https://batyr.io