Exploring React Native

Max Phillips — Sat, 12 Aug 2023 00:00:00 +0000

How does React Native, React Native??

React Native is a pretty cool tool, although when learning it I encountered a rather strange difficulty curve:

Yeah, a bit strange :(

While this curve is just my own experience with React Native, I like to think I am not alone in this. Upgrades in particular were listed as the number one pain point for React Native developers in the State of React Native survey, with debugging coming in second. More recent tools in the React Native ecosystem (such as Expo) even seem designed to directly address these sorts of issues.

The truth is that React Native feels kind of magical to use, and that is both a blessing and curse. Writing app logic in React and being able to run it on a mobile device it awesome, but if you stray too far off the beaten path you might start to encounter weird bugs and need to use dark spells like BatchedBridge.spy(), UIManager.dispatchViewManagerCommand(), or even React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; to patch them up. (ok maybe not that last one)

As someone who came from the web dev side of things I was pretty reluctant to touch native code at first, but after working with it for a bit I gotta say it has helped make those earlier pain points a lot less annoying to deal with. Logbox errors seem less esoteric, upgrades seem (just a bit) less scary, and when something breaks it has made it a lot easier to know where to start looking.

Anyway, that's enough preamble :) The main reason I made this post is because I wanna start sharing some of this weird React Native stuff on this blog, and I reckon a neat infographic would be a good place to start.

Please let me know in the comments below what you think (or if I goofed anything up lol), and if you enjoyed it then check back soon for a follow up where I wanna cover some stuff about the React Native Bridge system :)

Medium Style Image Blur-Up Loading with Gatsby-Image

Max Phillips — Fri, 02 Apr 2021 02:07:13 +0000

Although the subscription wall can be annoying, I think it fair to say Medium is a pretty great blogging platform. It's simple to use, feature loaded, but most importantly its really fast.

A lot of different things go into making a website fast (Check Web.Dev for more tips) but one thing that Medium does especially well is Progressive Image Loading.

Progressive Image Loading, also known as the Low Quality Image Placeholder(LQIP) pattern, is simply the technique of loading a low quality version of your image first, and then lazy loading a full size version once the main page content has loaded.

The effect this has is a bit similar to using skeleton content, and it can do wonders for the perceived performance of your website and help cut on the first contentful paint (FCP) time. With GatsbyJS LQIP comes out-of-the-box with the Gatsby-Image plugin though if you want to use it ouside of Gatsby feel free to check-out lazysizes.

In Gatsby though, blur up isn't actually enabled by default, and ends up being all too often overlooked. Because of this a lot of sites will show a not so pretty pixelated or compressed version of the image instead of a nice blurred version. Thanks to the placeholderStyle attribute though, fixing this is actually as easy as a single extra line of JSX.

import Img from "gatsby-image";

<Img
    fluid={someFluidSrcImage}
    title={imageTitle}
    placeholderStyle={{ filter: `blur(1.5rem)` }}
  />

By adding the placeholderStyle attribute we can apply styles to the image that gets loaded in as a placeholder, and Gatsby handles the rest! Add a blur, pixilation or any other kind of CSS filter you like. Here's what the end result looks like for me.

Let me know if you have any questions, and hope you found this useful!

Originally published on my blog at maxphillips.dev

DEV Community: Max Phillips

Exploring React Native

Medium Style Image Blur-Up Loading with Gatsby-Image