There are a lot of different ways in which you can style your React applications, and I would even go as far as to say that you actually have more options for styling React applications than traditional web applications. So without further lets list some of these options out:

  • Standard CSS
  • Inline Styles
  • CSS Modules
  • CSS-in-JS

Now let’s take a closer look at each one of these.

Standard CSS

This is the traditional and the most common way of writing CSS. …

An image component for gracefully dealing with image errors, by providing optional lazy loading, an optional placeholder and retries on failure. Particularly useful in situations where your application might be used in poor signal areas such as when travelling on a train, a bus or a car.

Visual Example

Image for post
Image for post
Browser loading images in various states
  1. Default browser behaviour when image fails due to bad signal
  2. With react-graceful-image placeholder
  3. With react-graceful-image disabled placeholder
  4. With react-graceful-image retries — if the image fails to load, the package will gracefully re-attempt loading the image again

(note: these are not mutually exclusive, for example the default behaviour makes use of both a placeholder and retries together.)

React-Native-Navigation has a really annoying problem, where whenever you switch tabs after first opening your application some part of UI in those tabs, for a split second, jumps into to the top left corner of the screen:

Image for post
Image for post

There’s an active issue opened regarding this on GitHub, however, no solution has yet been implemented to fix this.

In the mean time, I found a workaround that worked really well for me:

Add overflow: 'hidden' to parent <View> ‘s of all tab components which have this issue, and also to their child components which contain the particular UI that is jumping up.

Image for post
Image for post

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