Office hours recap - October

This month we covered updating tab state when signing in, tips for a RevenueCat integration, a checklist for getting started with Hotwire Native, and more.

I host Hotwire Native office hours on Zoom every month. Paid newsletter subscribers can join and ask questions about their Hotwire Native app, often screen sharing as we review and debug code together.

During October’s session last week, subscribers came with some great questions:

1. What are the low-hanging fruit steps to start preparing a Rails app for implementing Hotwire Native?

2. Clicking a tab across the top of the screen causes the page to slide in from the side. How can I make these behave more like tradition tabs?

3. I’m having an issue where signing in on one tab doesn’t update the session state on other tabs. Is there a solution for this?

4. When I navigate to a sign-in screen and then back, the previous screen shows a loading indicator and is frozen.

5. I’m implementing RevenueCat for in-app payments. Are there any particular difficulties or gotchas to watch out for?

---

Here’s a recap of my answers and how we debugged these questions together.

What are the low-hanging fruit steps to start preparing a Rails app for implementing Hotwire Native?

When preparing a Rails app for Hotwire Native, start with this checklist:

1. Make sure you aren’t disabling Turbo Drive. It’s already enabled by default. So just make sure to remove Turbo.session.drive = false if you have it.

2. Avoid using data-turbo=”false” on links as Hotwire Native will ignore these page requests entirely.

3. Ensure your mobile web experience is polished since you’ll reuse 90% or more of your mobile CSS for Hotwire Native.

4. Once you have the app scaffold ready, consider your navigation approach (tab bar vs. hamburger menu) based on iOS/Android best practices.

Clicking a tab across the top of the screen causes the page to slide in from the side. How can I make these behave more like tradition tabs?

Adding data-turbo-action=”replace” to these links will replace the current screen instead of pushing a new one onto the stack. The animation is currently a bit ugly (just a flicker), but Hotwire Native 1.3 beta has a config option to enable fade animations between screens, which will make it look better.

I’m having an issue where signing in on one tab doesn’t update the session state on other tabs. Is there a solution for this?