React Native diary #2: state

I’ve been programming the Mac for over 25 years, but I’m stumbling through React Native and JavaScript like a newbie. I’ve always found the best way to learn is by doing. Hit some brick walls, dig under them, and then realize later that you built the wall yourself, fighting the frameworks.

One of the benefits of React Native or SwiftUI is a formal way to manage state, letting the frameworks update the UI for you when something changes. I’ve never thought of this as a big advantage, but maybe I’ll warm up to it.

As I work on rewriting Epilogue, I’ve improved the book details screen to include a list of your bookshelves. Tap a bookshelf to add the current book to that bookshelf. A progress spinner will show while Epilogue sends the book data to Micro.blog.

In the world of UIKit, I would probably have a reference to a UIActivityIndicatorView. When I’m ready to send the web request, I’d show and start the progress spinner by calling startAnimating() on it.

In React Native, I have a boolean state that keeps track of whether the progress spinner should be animating, defaulting to false:

const [ progressAnimating, setProgressAnimating ] = useState(false);

Then when the button is pressed, I set the state to true and carry on with the web request:

function addToBookshelf(bookshelf_id) {
  setProgressAnimating(true);

  // send book data to Micro.blog
  // ...
}

In the UI, the JSX references this boolean. The UI will automatically update whenever the value changes. I don’t need to hold a reference to the actual ActivityIndicator object anywhere in my JavaScript code:

<ActivityIndicator size="small" animating={progressAnimating} />

Here’s a 3-second video of how this looks in the app:

Next up: I need to add sign-in back to the app before I can do a beta. I’ll also be working on Dark Mode and the search box.