Posts

Showing posts with the label UI Patterns

A New Collection of Thoughtful Learning Apps — Now Available on iOS & Android

Image
I’m excited to share a set of mobile apps I’ve recently completed and published on both the Google Play Store and the Apple App Store. These apps are designed with a simple goal in mind: to make meaningful, structured content more accessible, whether you’re studying theology or improving your English vocabulary. 📱 Now Available on Both Platforms All apps are live and available for download: Google Play Developer Page: https://play.google.com/store/apps/dev?id=5835943159853189043 Apple App Store Developer Page: https://apps.apple.com/ca/developer/q-z-l-corp/id1888794100 📖 Theology & Confession Study Apps For those interested in Reformed theology and classical Christian teachings, I’ve developed a series of apps that present foundational texts in a clean, focused reading format: The Belgic Confession Canons of Dort Heidelberg Catechism Westminster Shorter Catechism Each app is designed to provide a distraction-free experience, making it easier to read, reflect, and revisit these im...

Fix React Native Modal ScrollView Not Scrolling (Best Modal Pattern)

Image
Fix React Native Modal ScrollView Not Scrolling (Best Modal Pattern) A common issue when building modals in React Native is that a ScrollView inside a Modal appears scrollable but does not actually scroll smoothly. The scrollbar may appear, but gestures don't move the content properly. This usually happens because the modal overlay is intercepting touch events. If the overlay is implemented using TouchableOpacity or Pressable wrapped around the modal content, it can capture scroll gestures before they reach the ScrollView . In this post, we'll look at the problem and the correct modal pattern used in production React Native apps. The Problem Many developers structure their modal like this: <TouchableOpacity style={styles.overlay} onPress={onClose}> <TouchableOpacity style={styles.modal}> <ScrollView> ... </ScrollView> </TouchableOpacity> </TouchableOpacity> The outer TouchableOpacity captures ...