DEV Community: Mateo Hrastnik

How to add a splash screen to a React Native app - The easy way

Mateo Hrastnik — Thu, 27 Jan 2022 12:24:20 +0000

A splash screen is the first screen the users see after tapping the app icon. It's typically a simple screen with your app logo in the center and goes away once the app is ready to launch.

There are two popular packages for adding a splash screen to your app. Namely react-native-splash-screen and expo-splash-screen. While both of them work, the problem is that they're complicated to install and control. There's a much simpler way to add a splash screen and I'm going to show you how.

The idea is to move the splash screen from native code to Javascript. This will give us more control over the rendering, plus we can have matching splash screens on both platforms. We're going to do a couple of things:

Manually set a blank, single-color splash screen background on the native side
On iOS, set the background color of the React Native root view to that same color
As soon as React Native loads, add a View with the same color in React Native and fade in the app logo on it
Once the app loads, fade out the splash screen

The idea is to show the same color screen while the app boots up and React Native initializes. This is typically really short. Then we fade in the splash screen from our React Native code, and while the splash screen is visible, we can initialize the app, fetch assets, load configuration files, and everything else.

Here's what the final product looks like:

App with splash screen

And here's a GitHub repo with a blank app with the added splash screen functionality.

https://github.com/hrastnik/react-native-splash-screen-example

Prerequisites

Pick a background color and get the hex value and RGB values in range 0-1. In my example I picked #E0B9BB. The RGB values are 0.87843, 0.72549 and 0.73333. You can use this converter to grab the RGB values easily.

Now pick an image you'll show in the center of the splash screen. This can be the logo or the app icon or anything else. In my case, it's a PNG of my cat.

Setting a blank background on iOS

Open AppDelegate.mm and change add the following line:



return [super application:application didFinishLaunchingWithOptions:launchOptions];

to this:



BOOL result = [super application:application didFinishLaunchingWithOptions:launchOptions];
self.window.rootViewController.view.backgroundColor = [UIColor colorWithRed:0.87843 green:0.72549 blue:0.73333 alpha:1.00];
return result;

If you're using older versions of React Navigation that don't use AppDelegate.mm file you can open AppDelegate.m and change the lines:



  if (@available(iOS 13.0, *)) {
      rootView.backgroundColor = [UIColor systemBackgroundColor];
  } else {
      rootView.backgroundColor = [UIColor whiteColor];
  }

to simply say



rootView.backgroundColor = [UIColor colorWithRed:0.87843 green:0.72549 blue:0.73333 alpha:1.0];

Make sure to change the RGB values to match your color.

This changed the background color of the React Native root view, but we still need to change the background of the whole app. You could do this step through XCode but I find it faster to use a text editor. Simply paste this code in your ios/<AppName>/LaunchScreen.storyboard file:



<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="19529" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
    <device id="retina4_7" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="19519"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="EHf-IW-A2E">
            <objects>
                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
                    <view key="view" autoresizesSubviews="NO" opaque="NO" clearsContextBeforeDrawing="NO" userInteractionEnabled="NO" contentMode="scaleToFill" id="1L6-XZ-uwR">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                        <viewLayoutGuide key="safeArea" id="VQL-mw-5y0"/>
                        <color key="backgroundColor" red="0.87843" green="0.72549" blue="0.73333" alpha="1" colorSpace="deviceRGB"/>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="22" y="100"/>
        </scene>
    </scenes>
</document>

Note that you'll have to change the line that starts with <color key="backgroundColor" and replace the RGB values with your own.

If you run the app at this point, you should see the background color you picked.

App with blank background

Setting a blank background on Android

On Android, all you have to do is add the following line to android/app/src/main/res/values/styles.xml file inside the <style> tag of your app theme:



<item name="android:windowBackground">#E0B9BB</item>

The file should look like this:



<resources>
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:windowBackground">#E0B9BB</item>
    </style>
</resources>

The JS part

Now let's add the Splash component. It works like this:

At first, it shows only a blank View with the background color we picked. This is visible until the splash screen image is loaded into memory
The image fades in
We wait in this state until the app is initialized and ready to run
The whole splash screen fades out, revealing the app's first screen
Finally, the splash screen assets are cleaned up



import React, { useEffect, useRef, useState } from "react";
import { Animated, StyleSheet } from "react-native";

export function WithSplashScreen({
  children,
  isAppReady,
}: {
  isAppReady: boolean;
  children: React.ReactNode;
}) {
  return (
    <>
      {isAppReady && children}

      <Splash isAppReady={isAppReady} />
    </>
  );
}

const LOADING_IMAGE = "Loading image";
const FADE_IN_IMAGE = "Fade in image";
const WAIT_FOR_APP_TO_BE_READY = "Wait for app to be ready";
const FADE_OUT = "Fade out";
const HIDDEN = "Hidden";

export const Splash = ({ isAppReady }: { isAppReady: boolean }) => {
  const containerOpacity = useRef(new Animated.Value(1)).current;
  const imageOpacity = useRef(new Animated.Value(0)).current;

  const [state, setState] = useState<
    | typeof LOADING_IMAGE
    | typeof FADE_IN_IMAGE
    | typeof WAIT_FOR_APP_TO_BE_READY
    | typeof FADE_OUT
    | typeof HIDDEN
  >(LOADING_IMAGE);

  useEffect(() => {
    if (state === FADE_IN_IMAGE) {
      Animated.timing(imageOpacity, {
        toValue: 1,
        duration: 1000, // Fade in duration
        useNativeDriver: true,
      }).start(() => {
        setState(WAIT_FOR_APP_TO_BE_READY);
      });
    }
  }, [imageOpacity, state]);

  useEffect(() => {
    if (state === WAIT_FOR_APP_TO_BE_READY) {
      if (isAppReady) {
        setState(FADE_OUT);
      }
    }
  }, [isAppReady, state]);

  useEffect(() => {
    if (state === FADE_OUT) {
      Animated.timing(containerOpacity, {
        toValue: 0,
        duration: 1000, // Fade out duration
        delay: 1000, // Minimum time the logo will stay visible
        useNativeDriver: true,
      }).start(() => {
        setState(HIDDEN);
      });
    }
  }, [containerOpacity, state]);

  if (state === HIDDEN) return null;

  return (
    <Animated.View
      collapsable={false}
      style={[style.container, { opacity: containerOpacity }]}
    >
      <Animated.Image
        source={require("~/assets/splash.png")}
        fadeDuration={0}
        onLoad={() => {
          setState(FADE_IN_IMAGE);
        }}
        style={[style.image, { opacity: imageOpacity }]}
        resizeMode="contain"
      />
    </Animated.View>
  );
};

const style = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: '#E0B9BB',
    alignItems: "center",
    justifyContent: "center",
  },
  image: {
    width: 250,
    height: 250,
  },
});

Note that you must change the colors and the path to your image asset to match your project.

You could add more content to your splash screen if you feel it's necessary.

Lastly, we need to actually use this component in our app. My app entry point looks like this, and you'll probably have something similar. The idea is to wrap your app entry point in the WithSplashScreen component and once the app is initialized, set the isAppReady prop to true.



export function AppEntry() {
  const store = useRef(undefined);
  const queryClient = useRef(undefined);

  const [isAppReady, setIsAppReady] = useState(false);

  useEffect(() => {
    initialize().then((context) => {
      store.current = context.store;
      queryClient.current = context.queryClient;

      setIsAppReady(true);
    });
  }, []);

  return (
    <WithSplashScreen isAppReady={isAppReady}>
      <StoreProvider store={store.current}>
        <QueryClientProvider client={queryClient.current}>
          <SafeAreaProvider>
            <KeyboardAvoidingView>
              <ModalProvider>
                <Router />
              </ModalProvider>
            </KeyboardAvoidingView>
          </SafeAreaProvider>
        </QueryClientProvider>
      </StoreProvider>
    </WithSplashScreen>
  );
}

If you did everything right, the end result should look something like this:

App with splash screen

Conclusion

Instead of adding complex native dependencies that are hard to control, it's easy to add a splash screen to your app with just a couple of changes on the native side. As a benefit, you get extra control over how the splash screen looks and behaves.

Thanks for giving this article a read! If you've found it useful, consider liking and sharing.

Lloyds digital is available for partnerships and open for new projects. If you want to know more about us, check us out.

Normalize your React Query data with MobX State Tree

Mateo Hrastnik — Mon, 16 Nov 2020 14:31:03 +0000

Fetching data in React is deceptively hard. You start off with a simple useEffect + useState combo and you think you're done.

"This is great!" you think to yourself...
But then you realize you didn't handle errors. So you add a bunch of code to handle that.
Then you realize you have to add a refresh button. So you add a bunch of code to handle that.
Then your backend developer tells you the data is paginated. So you add a bunch of code to handle that.
Then you want to trigger a refresh automatically every N seconds. So you add a bunch of code to handle that.
By this time, your data fetching code is an absolute nightmare and managing it becomes a headache, and we haven't even touched the subject of caching.

What I'm trying to say is that React Query is awesome. It handles all of the complexity listed above, and much more. So if you haven't yet, you should definitely give it a shot.

However, at Lloyds, we haven't always been using React Query. Not so long ago, we had a custom useQuery hook that tried real hard to serve all our data fetching needs. It was good, but not nearly as good as React Query. However, as our useQuery was tightly coupled with MobX State Tree, we had a couple of benefits that we really liked:

Typed models
Data normalization at response time
Data denormalization at access time
Actions on models

Note - you can check out my article on how we used MST here: Why you should use MST

Typed models

With MobX State Tree, you're required to define the shape of your data. MST uses this scheme to validate your data at runtime. Additionally, as MST uses TypeScript, you get the benefit of having IntelliSense autocomplete all of the properties on your data models while you're writing code.

Data normalization and denormalization

What do I mean by this? Well, to put it simply - this ensures that there's only one copy of any given data resource in our app. For example, if we update our profile data this ensures that the update will be visible across the app - no stale data.

Actions on models

This is a great MST feature. It enables us to attach actions on the data models in our app. For example, we can write something like

  onPress={() => {
      article.createComment("I love this!");
  }}

instead of the much less readable alternative

  onPress={() => {
      createCommentForArticle(article.id, "This doesn't feel good");
  }}

or the even more complicated version

  onPress={() => {
      dispatch(createCommentForArticle(getArticleIdSelector(article), "I'm sorry Mark, I had to"));
  }}

Moving to React Query meant getting the new and improved useQuery hook, but losing the great MST features we just couldn't do without. There was only one option...

Combining React Query and MST

Turns out it's possible to get the best of both worlds, and the code isn't even that complicated.
The key is to normalize the query response as soon as it gets back from the server and instead of the raw resource data, return the MST instance from the query function.

We'll use the MST stores to define the data fetching methods and the methods for converting raw network response data to MobX instances.

Here's an example... First, let's define two models. These will define the shape of the resources we will fetch.

const Author = model("Author", {
  id: identifier,
  name: string,
});

const Book = model("Book", {
  id: identifier,
  title: string,
  author: safeReference(Author),
}).actions((self) => ({
  makeFavorite() {
    // ... other code
  },
}));

Next we'll define the stores to hold collections of these resources.

const BookStore = model("BookStore", {
  map: map(Book),
});

const AuthorStore = model("AuthorStore", {
  map: map(Author),
});

Let's add a process action that will normalize the data and return the MST instances. I added some logic to the action so that it can handle both arrays and single resources and additionally merge the new data with the old - this way we avoid potential bugs when different API endpoints return different resource shapes (eg. partial data when fetching a list of resources vs full data returned when fetching a single resource).

We'll also add an action that will perform the HTTP request and return the processed data. We will later pass this function to useInfiniteQuery or useQuery to execute the API call.

const BookStore = model("BookStore", {
  map: map(Book),
})
  .actions((self) => ({
    process(data) {
      const root: StoreInstance = getRoot(self);
      const dataList = _.castArray(data);
      const mapped = dataList.map((book) => {
        if (isPrimitive(book)) return book;

        book.author = getInstanceId(root.authorStore.process(book.author));

        const existing = self.map.get(getInstanceId(book));
        return existing
          ? _.mergeWith(existing, book, (_, next) => {
              if (Array.isArray(next)) return next; // Treat arrays like atoms
            })
          : self.map.put(book);
      });

      return Array.isArray(data) ? mapped : mapped[0];
    },
  }))
  .actions((self) => ({
    readBookList: flow(function* (params) {
      const env = getEnv(self);
      const bookListRaw = yield env.http.get(`/books`, {
        params,
      });
      return self.process(bookListRaw);
    }),
  }));

const AuthorStore = model("AuthorStore", {
  map: map(Author),
}).actions((self) => ({
  process(data) {
    const dataList = _.castArray(data);
    const mapped = dataList.map((author) => {
      if (isPrimitive(author)) return author;

      const existing = self.map.get(getInstanceId(author));
      return existing
        ? _.mergeWith(existing, author, (_, next) => {
            if (Array.isArray(next)) return next; // Treat arrays like atoms
          })
        : self.map.put(author);
    });
    return Array.isArray(data) ? mapped : mapped[0];
  },
}));

const Store = model("Store", {
  bookStore: BookStore,
  authorStore: AuthorStore,
});

That's basically it, we can now use the readBookList method in our components with useQuery or useInfiniteQuery... Almost.
If you try it at this point, you'll get an error. That's because React Query internally uses something called structural sharing to detect if the data has changed. However, this is not compatible with MobX State Tree so we need to disable it. We can configure this using a top-level query client provider.

import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      structuralSharing: false,
      // ... other options
    },
  },
});

function App() {
  // ... other code

  return (
    <QueryClientProvider client={queryCache}>
      {/* ... other providers ... */}
      <Router />
    </QueryClientProvider>
  );
}

All that's left to do is to actually try running the query.

function BookListView() {
  const store = useStore();
  const query = useQuery("bookList", (_key, page = 1) =>
    store.bookStore.readBookList({ page })
  );

  // Convert array of responses to a single array of books.
  const bookList = _.flatMap(query.data, (response) => response.data);

  return (
    <div>
      {bookList.map((book) => {
        return (
          <BookView
            book={book}
            onPress={book.makeFavorite} // We have access to methods on the Book model
          />
        );
      })}
    </div>
  );
}

We get the flexibility of React Query without sacrificing the benefits of MobX State Tree.

You can check out the complete example on Code Sandbox here:

LINK TO CODE SANDBOX

In the example, the API calls are mocked. In production, this would be replaced with the real fetch calls. You can notice how, when you enable the "Show author list" checkbox, it updates the author on the "Book list" section. There is only one instance of author-2 in the app, and everything stays in sync. We don't have to refetch the whole list.

Summary

React Query and MobX State Tree are great tools. But together, they are unstoppable. React Query gives us the flexibility to fetch data from the server just the way we want it. MST + TypeScript provide the type safety + intuitive way of adding methods and computed properties on the data models. Together they provide a great developer experience and help you build awesome apps.

Thank you for reading this! If you've found this interesting, consider leaving a ❤️, 🦄 , and of course, share and comment on your thoughts!

Lloyds is available for partnerships and open for new projects. If you want to know more about us, check us out.

Also, don’t forget to follow us on Instagram and Facebook!

Let's create a carousel in React Native

Mateo Hrastnik — Mon, 24 Aug 2020 10:08:30 +0000

Sooner or later you're going to need a carousel in one of your projects. Perhaps you want to display a list of images, maybe an introductory tour of your app, or maybe you want your app to have a couple of swipeable screens. Whatever your use case may be, this article can probably help you.

Let's get started. The base of our carousel will be a simple FlatList component. The reason for this is simple - it's based on the ScrollView component that will enable us to swipe the slides, plus, it implements VirtualizedList which we can use for optimization when there are lots of images or performance heavy UI elements in our slides.

First, let's create some dummy data. We'll use Lorem Picsum to get random images, and we'll create random data for 30 slides for our carousel.



const { width: windowWidth, height: windowHeight } = Dimensions.get("window");

const slideList = Array.from({ length: 30 }).map((_, i) => {
  return {
    id: i,
    image: `https://picsum.photos/1440/2842?random=${i}`,
    title: `This is the title! ${i + 1}`,
    subtitle: `This is the subtitle ${i + 1}!`,
  };
});

Note that we have to add the query parameter random=${i} to get a random image for each slide. Otherwise, React Native would cache the first image and use it in place of every image in our carousel.

Next, we'll create a FlatList and pass our slideList to the data prop. We'll also pass it the style prop with flex: 1 so it covers the whole screen. Lastly, we have to define the way our slides are going to look. This is done using the renderItem prop.
We'll create a Slide component and use it in the renderItem function.



function Slide({ data }) {
  return (
    <View
      style={{
        height: windowHeight,
        width: windowWidth,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Image
        source={{ uri: data.image }}
        style={{ width: windowWidth * 0.9, height: windowHeight * 0.9 }}
      ></Image>
      <Text style={{ fontSize: 24 }}>{data.title}</Text>
      <Text style={{ fontSize: 18 }}>{data.subtitle}</Text>
    </View>
  );
}

function Carousel() {
  return (
    <FlatList
      data={slideList}
      style={{ flex: 1 }}
      renderItem={({ item }) => {
        return <Slide data={item} />;
      }}
    />
  );
};

If we save now, we'll see our slides, but the scroll behavior is not as we want it. We have to make the ScrollView snap to the beginning of every slide. The easiest way to achieve this is to add the pagingEnabled={true} prop to the FlatList.

Another thing - our carousel is currently vertical - it scrolls up and down. Most carousels are horizontal, so let's change the orientation, however, keep in mind that if you need to build a vertical carousel it's possible and only requires a couple of changes.

So let's add the horizontal={true} prop to our FlatList to make it scroll left and right, and while we're at it, let's add the showsHorizontalScrollIndicator={false} prop to hide the scroll indicator.



function Carousel() {
  return (
    <FlatList
      data={slideList}
      style={{ flex: 1 }}
      renderItem={({ item }) => {
        return <Slide data={item} />;
      }}
      pagingEnabled
      horizontal
      showsHorizontalScrollIndicator={false}
    />
  );
}

This looks great, but there's one important thing we're missing. We're probably going to need the index of the active slide. For example, if we're building a carousel for the application introductory tour, we maybe want to have a "Continue" button that gets enabled only when the user reaches the last slide, or if we're building an image gallery, we might want to display a pagination component to let the user know how much images it contains.

I've spent some time optimizing this next part so it might seem a bit complicated. But don't worry, I'll explain everything.



function Carousel() {
  const [index, setIndex] = useState(0);
  const indexRef = useRef(index);
  indexRef.current = index;
  const onScroll = useCallback((event) => {
    const slideSize = event.nativeEvent.layoutMeasurement.width;
    const index = event.nativeEvent.contentOffset.x / slideSize;
    const roundIndex = Math.round(index);

    const distance = Math.abs(roundIndex - index);

    // Prevent one pixel triggering setIndex in the middle
    // of the transition. With this we have to scroll a bit
    // more to trigger the index change.
    const isNoMansLand = 0.4 < distance;

    if (roundIndex !== indexRef.current && !isNoMansLand) {
      setIndex(roundIndex);
    }
  }, []);

  // Use the index
  useEffect(() => {
    console.warn(index);
  }, [index]);

  return (
    <FlatList
      data={slideList}
      style={{ flex: 1 }}
      renderItem={({ item }) => {
        return <Slide data={item} />;
      }}
      pagingEnabled
      horizontal
      showsHorizontalScrollIndicator={false}
      onScroll={onScroll}
    />
  );
}

First we define index with useState - this is going to represent the index of the active slide in the carousel. Then we define indexRef - a ref value that is kept in sync with the index variable - when the index changes, so does the value of indexRef.current.

So why are we doing this? The answer is in the next line. The onScroll callback does some calculations with the layoutMeasurement and contentOffset values in order to calculate the current index according to the distance we scrolled. We want to update our index whenever the calculated index changes.

The problem is - if we use the index variable inside onScroll to check whether the calculated index is different from the current index, then we have to put index in the dependency array of useCallback. This in turn means that every time the index changes, the onScroll function changes too, and as it gets passed as a prop to FlatList, it means the list will re-render.

Note that we used layoutMeasurement.width and contentOffset.x to calculate the current index since the carousel is horizontal. If it were vertical, we would have to use height and y offset.

Then there's the logic behind the isNoMansLand variable. This logic prevents the slider to trigger a bunch of setIndex calls when we drag the carousel right in the middle of two slides. Here's what happens when we don't implement this logic - when we're in the middle of two slides, the slightest movement triggers the index change. This can lead to lots of re-renders so it's better to avoid it.

The solution has something to do with this: Schmitt trigger

Now, what we've built so far is already kinda cool, and it might even be enough for your use case, but there's some hidden performance problems with our implementation that could slow down or even crash your app. This is because it's rendering a whole bunch of slides in advance and it also keeps previous slides in memory. FlatList does this by default to improve perceived performance when we're scrolling through the list fast, but in our case it has negative effects on performance.

I've coded up a simple visualization to show which Slides are mounted and which are not, additionally it highlights our current index. The green dots on the bottom represent the mounted slides, the black ones are unmounted, and the red one is the current active slide.

You can notice that the slides are being mounted 10 slides in advance. Additionally, the first 10 slides never get unmounted. This is all a part of FlatList default optimizations that work great for longer lists, but not for our use case.

So let's implement some optimizations. We'll group the optimization props in an object and pass them to FlatList .



  const flatListOptimizationProps = {
    initialNumToRender: 0,
    maxToRenderPerBatch: 1,
    removeClippedSubviews: true,
    scrollEventThrottle: 16,
    windowSize: 2,
    keyExtractor: useCallback(e => e.id, []);
    getItemLayout: useCallback(
      (_, index) => ({
        index,
        length: windowWidth,
        offset: index * windowWidth,
      }),
      []
    ),
  };

  <FlatList
    data={slideList}
    style={{ flex: 1 }}
    renderItem={({ item }) => {
      return <Slide data={item} />;
    }}
    pagingEnabled
    horizontal
    showsHorizontalScrollIndicator={false}
    onScroll={onScroll}
    {...flatListOptimizationProps}
  />

Here's the explanation for what all of this means.

initialNumToRender - This controls how many slides, starting from the first one, will stay rendered at all times. This is useful in lists where we can scroll to top programmatically - in that case we don't want to wait for the first couple of slides to render so FlatList keeps the rendered at all times. We don't need this functionality so it's safe to put 0 here.

maxToRenderPerBatch - This controls how many slides will be rendered per batch. Again this is useful when we have a FlatList with many elements and the user can scroll fast to an are of the FlatList where the data hasn't been loaded yet.

removeClippedSubviews - This removes views that are out of the FlatLists viewport. Android has this set to true by default, and I recommend setting on iOS as well. It can remove Image components from memory and save some resources.

scrollEventThrottle - Controls how many scroll events get triggered while the user drags the carousel. Setting it to 16 means the event will trigger every 16ms. We could probably get away with setting this to a higher number, but 16 seems to work fine.

windowSize - This controls how many slides are mounted up front, and how many slides stay mounted behind the current index.
It actually controls the width of the window which VirtualizedList uses to render items - everything inside the window is rendered, and outside of it is blank. If we set this prop to, for example 2, the window will be twice the width of the FlatList. The pink line in the following vizualization is signifies the window.

For this carousel example, the value 2 works great, but you can experiment with it if you feel like it.

keyExtractor - React uses this for internal optimizations. Adding and removing slides might break without this. Also, it removes a warning so that's good.

getItemLayout - an optional optimization that allows skipping the measurement of dynamic content if we know the size (height or width) of items ahead of time. In our case the width of the items is always windowWidth. Note that if you want your carousel to be vertical, you have to use windowHeight instead.

In the end we can move the style outside of the component definition and wrap the renderItem function in useCallback to avoid our FlatList re-rendering unnecessarily.

One more thing we can do to further optimize our carousel is wrap our Slide element in React.memo.

That's it! I've added a pagination component and tweaked the styles a bit and here's how the end product looks like.

You can try it out yourself: https://snack.expo.io/@hrastnik/carousel

Comparing reactivity models - React vs Vue vs Svelte vs MobX vs Solid vs Redux

Mateo Hrastnik — Tue, 04 Aug 2020 07:53:33 +0000

If you're reading this article you're probably already familiar with the concept of reactive programming, but just in case, let me explain what is it and why it's great.

When you're writing code, the commands get executed in a particular order - from top to bottom. So if you write...

let x = 10;
let y = x + 5;

Then y will equal 15, and that's just what we expect, but what happens to y if we then change the value of x to 20? The answer is simple - nothing happens to y, its value will still be 15.

The problem is that the second line of code doesn't say let y be the value of x plus 5. What it instead says is let y be the value of x at the moment of declaration, plus 5. That's because the values of x and y are not reactive. If we are to change the value of x, the value of y doesn't change with it.

let x = 10;
let y = x + 5;
let x = 20;

console.log(y); // 15

So how do we declare the variable y to be the value of x plus 5? That's where reactive programming comes in. Reactive programming is a way of programming that makes it possible solve this problem, but it's just a concept - the actual implementation can vary from library to library.

This article will compare some of the more popular reactivity models in the JS ecosystem - especially the ones found in the UI frameworks and libraries. After all, UI is just a function of state, meaning that UI has to react to changes in state.

In order to compare the different approaches to solving this problem, I'll demonstrate how to create a simple To-do app using different frameworks and libraries. We'll keep the UI as minimal as possible. After all, we are comparing reactivity models, and not UI libraries.

Here's how the end product is gonna look like.

1. React

It's 2020 in the world of web development, so you've probably heard of React. It's a fantastic UI library, and, as its name would suggest, React can react to stuff. Namely, it can react to changes in state.

Here's how a basic todo app looks like in React.

import React, { useEffect, useState } from "react";

export default function App() {
  const [todoList, setTodoList] = useState([
    { id: 1, task: "Configure ESLint", completed: false },
    { id: 2, task: "Learn React", completed: true },
    { id: 3, task: "Take ring to Mordor", completed: true },
  ]);

  const completedTodoList = todoList.filter((t) => t.completed === true);
  const notCompletedTodoList = todoList.filter((t) => t.completed === false);

  function createTodo(task) {
    setTodoList([...todoList, { id: Math.random(), task, completed: false }]);
  }

  function removeTodo(todo) {
    setTodoList(todoList.filter((t) => t !== todo));
  }

  function setTodoCompleted(todo, value) {
    const newTodoList = todoList.map((t) => {
      if (t === todo) return { ...t, completed: value };
      return t;
    });
    setTodoList(newTodoList);
  }

  function addTodo() {
    const input = document.querySelector("#new-todo");
    createTodo(input.value);
    input.value = "";
  }

  useEffect(() => {
    console.log(todoList.length);
  }, [todoList]);

  return (
    <div>
      <input id="new-todo" />
      <button onClick={addTodo}>ADD</button>

      <div>
        <b>Todo:</b>
        {notCompletedTodoList.map((todo) => {
          return (
            <div key={todo.id}>
              {todo.task}
              <button onClick={() => setTodoCompleted(todo, true)}>
                Complete
              </button>
            </div>
          );
        })}
      </div>

      <div>
        <b>Done:</b>
        {completedTodoList.map((todo) => {
          return (
            <div key={todo.id}>
              {todo.task}
              <button onClick={() => removeTodo(todo)}>Delete</button>
              <button onClick={() => setTodoCompleted(todo, false)}>
                Restore
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

In React, reactive state is created using the useState hook - it returns the state itself, and a setter function to update the state.
When the setter is called the whole component re-renders - this makes it really simple to declare derived data - we simply declare a variable that uses the reactive state.

In the example above, todoList is a list of todo objects, each having a completed attribute. In order to get all the completed todos we can simply declare a variable and filter the data we need.

const completedTodoList = todoList.filter((t) => t.completed === true);

The state updater function can take the new state directly, or we can use an updater function that receives the state as the argument and returns the new state. We have to be careful not to mutate state so when we have some complex state like an object or an array we have to use some ugly tricks like in the setTodoCompleted function above.

It's possible to run a function whenever some reactive state changes using the useEffect hook. In the example we log the length of the todoList whenever it changes. The first argument to useEffect is the function we want to run, and the second is a list of reactive values to track - whenever one of these values changes the effect will run again.

There's one downside to Reacts reactivity model - the hooks (useState and useEffect) have to always be called in the same order and you can't put them inside an if block. This can be confusing for beginners, but there are lint rules that can help warn you if you accidentally make that mistake.

2. Vue

<template>
  <div>
    <input id="new-todo" />
    <button @click="addTodo">ADD</button>

    <div>
      <b>Todo:</b>
      <div v-for="todo in notCompletedTodoList" :key="todo.id">
        {{ todo.task }}
        <button @click="setTodoCompleted(todo, true)">Complete</button>
      </div>
    </div>

    <div>
      <b>Done:</b>
      <div v-for="todo in completedTodoList" :key="todo.id">
        {{ todo.task }}
        <button @click="removeTodo(todo)">Delete</button>
        <button @click="setTodoCompleted(todo, false)">Restore</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, watchEffect } from "vue";

export default {
  setup() {
    const todoList = ref([
      { id: 1, task: "Configure ESLint", completed: false },
      { id: 2, task: "Learn React", completed: true },
      { id: 3, task: "Take ring to Mordor", completed: true },
    ]);

    const completedTodoList = computed(() =>
      todoList.value.filter((t) => t.completed === true)
    );
    const notCompletedTodoList = computed(() =>
      todoList.value.filter((t) => t.completed === false)
    );

    function createTodo(task) {
      todoList.value.push({ id: Math.random(), task, completed: false });
    }

    function removeTodo(todo) {
      todoList.value = todoList.filter((t) => t !== todo);
    }

    function setTodoCompleted(todo, value) {
      todo.completed = value;
    }

    function addTodo() {
      const input = document.querySelector("#new-todo");
      createTodo(input.value);
      input.value = "";
    }

    watchEffect(() => {
      console.log(todoList.value.length);
    });

    return {
      completedTodoList,
      notCompletedTodoList,
      addTodo,
      setTodoCompleted,
      removeTodo,
    };
  },
};
</script>

Note: I'm using the new Composition API available in Vue 3.0+ that's still in beta but should be available soon.

In Vue we can declare reactive values using the ref function from the Composition API. It returns a reactive value with a value property that tracks everytime you access it. This is so it can actually react to changes - rerun effects and recompute derived values.

We can declare derived values using the computed function. It takes a function and return the derived value - any reactive value accessed in this function is considered a dependency and if it changes, the derived value is also recomputed.

Updating state is as simple as writing to the .value prop of reactive data. Arrays can be changed directly using push, pop, splice and other array methods.

We can run effects when some data changes using watchEffect - it takes a function that runs whenever a reactive value used inside changes.

3. Svelte

Svelte uses a "radical new approach" to building UI - it's a compiler that generates code and leaves no traces of the framework at runtime.

<script>
    let todoList = [
    { id: 1, task: 'Configure ESLint', completed: false },
    { id: 2, task: 'Learn React', completed: true },
    { id: 3, task: 'Take ring to Mordor', completed: true },
  ];

    $: completedTodoList = todoList.filter(t => t.completed === true);
  $: notCompletedTodoList = todoList.filter(t => t.completed === false);

  function createTodo(task) {
    todoList = [...todoList, { id: Math.random(), task, completed: false }];
  }

  function removeTodo(todo) {
    todoList = todoList.filter(t => t !== todo);
  }

    function setTodoCompleted(todo, value) {
        todo.completed = value;
        todoList = todoList
    }

    function addTodo() {
        const input = document.querySelector('#new-todo');
        createTodo(input.value);
        input.value = '';
    }

    $: console.log(todoList.length);
</script>

<div>
    <input id="new-todo" />
    <button on:click={addTodo}>ADD</button>

    <div>
        <b>Todo:</b>
        {#each notCompletedTodoList as todo (todo.id)}
            <div>
                {todo.task}
                <button on:click={() => setTodoCompleted(todo, true)}>Complete</button>
            </div>
        {/each}
    </div>

    <div>
        <b>Done:</b>
        {#each completedTodoList as todo (todo.id)}
            <div>
                {todo.task}
                <button on:click={() => removeTodo(todo)}>Delete</button>
                <button on:click={() => setTodoCompleted(todo, false)}>Restore</button>
            </div>
        {/each}
    </div>
</div>

With Svelte, any variable declared with let can be reactive. Derived data is declared with the $: label, which is valid, albeit uncommon, Javascript sytax. Any variable referenced on the lines marked with $: is marked as a dependency of the derived variable.

The $: can also be used to trigger effects. Logging the number of todos in the list is as simple as

$: console.log(todoList.length);

Updating state can be tricky - state updates only when we write to a variable, this is why you can sometimes see code like this

todoList = todoList;

Svelte also takes pride in being fast. It's one of the fastest frameworks out there since it's a compiler that optimises itself away and leaves only pure, speedy JS in its place.

4. MobX

MobX is a state management solution and can be used with React, Vue or any UI library. I'll show its usage with React, but keep in mind it can be used with anything, even vanilla JS.

import "mobx-react-lite/batchingForReactDom";

import React from "react";
import { observable, autorun } from "mobx";
import { observer } from "mobx-react";

const state = observable({
  todoList: [
    { id: 1, task: "Configure ESLint", completed: false },
    { id: 2, task: "Learn React", completed: true },
    { id: 3, task: "Take ring to Mordor", completed: true },
  ],
  get completedTodoList() {
    return this.todoList.filter((t) => t.completed === true);
  },
  get notCompletedTodoList() {
    return this.todoList.filter((t) => t.completed === false);
  },
});

function createTodo(task) {
  state.todoList.push({ id: Math.random(), task, completed: false });
}

function removeTodo(todo) {
  state.todoList = state.todoList.filter((t) => t !== todo);
}

function setTodoCompleted(todo, value) {
  todo.completed = value;
}

function addTodo() {
  const input = document.querySelector("#new-todo");
  createTodo(input.value);
  input.value = "";
}

autorun(() => {
  console.log(state.todoList.length);
});

const App = observer(function App() {
  const { notCompletedTodoList, completedTodoList } = state;

  return (
    <div>
      <input id="new-todo" />
      <button onClick={addTodo}>ADD</button>

      <div>
        <b>Todo:</b>
        {notCompletedTodoList.map((todo) => {
          return (
            <div key={todo.id}>
              {todo.task}
              <button onClick={() => setTodoCompleted(todo, true)}>
                Complete
              </button>
            </div>
          );
        })}
      </div>

      <div>
        <b>Done:</b>
        {completedTodoList.map((todo) => {
          return (
            <div key={todo.id}>
              {todo.task}
              <button onClick={() => removeTodo(todo)}>Delete</button>
              <button onClick={() => setTodoCompleted(todo, false)}>
                Restore
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
});

export default App;

With MobX we first pass some data to observable to make it observable. Then we can use the state just as we would use plain old JS data.

We can declare derived data by setting a getter function on the object passed to observable - this makes MobX optimise the value by caching the return value and only recomputing it when some observable value used by the getter changes.

Updating values is very simple - we can use all the common array methods like push, pop, slice etc. on observable arrays.

When we mark a React component with the observer HOC MobX will track all observable and computed values used in the component and re-render the component every time those values change. The only caveat is that MobX doesn't actually track usage, but rather it tracks data access, so you have to make sure you access the data through a property inside the observer component.

const state = observable({ count: 10 });

const count = state.count;

// This will not re-render since count no observable
// state was _accessed_ in the component
const ComponentBad = observable(() => {
  return <h1>{count}</h1>;
});

// This will re-render since count is accessed inside
const ComponentGood = observable(() => {
  return <h1>{state.count}</h1>;
});

Running effects is as simple as passing the effect to autorun. Any observable or computed values accessed in the function become the effect dependency - when they change, the effects re-runs.

5. Solid

Solid is a declarative JavaScript library for creating user interfaces. It's kinda like if React and Svelte had a baby. Here's how it looks:

import { createEffect, createMemo, createSignal } from "solid-js";
import { For } from "solid-js/dom";

export default function App() {
  const [todoList, setTodoList] = createSignal([
    { id: 1, task: "Configure ESLint", completed: false },
    { id: 2, task: "Learn React", completed: true },
    { id: 3, task: "Take ring to Mordor", completed: true },
  ]);

  const completedTodoList = createMemo(() =>
    todoList().filter((t) => t.completed === true)
  );

  const notCompletedTodoList = createMemo(() =>
    todoList().filter((t) => t.completed === false)
  );

  function createTodo(task) {
    setTodoList([...todoList(), { id: Math.random(), task, completed: false }]);
  }

  function removeTodo(todo) {
    setTodoList(todoList().filter((t) => t !== todo));
  }

  function setTodoCompleted(todo, value) {
    setTodoList(
      todoList().map((t) => {
        if (t === todo) return { ...t, completed: value };
        return t;
      })
    );
  }

  function addTodo() {
    const input = document.querySelector("#new-todo");
    createTodo(input.value);
    input.value = "";
  }

  createEffect(() => {
    console.log(todoList().length);
  });

  return (
    <div>
      <input id="new-todo" />
      <button onClick={addTodo}>ADD</button>

      <div>
        <b>Todo:</b>
        <For each={notCompletedTodoList()}>
          {(todo) => {
            return (
              <div key={todo.id}>
                {todo.task}
                <button onClick={() => setTodoCompleted(todo, true)}>
                  Complete
                </button>
              </div>
            );
          }}
        </For>
      </div>

      <div>
        <b>Done:</b>
        <For each={completedTodoList()}>
          {(todo) => {
            return (
              <div key={todo.id}>
                {todo.task}
                <button onClick={() => removeTodo(todo)}>Delete</button>
                <button onClick={() => setTodoCompleted(todo, false)}>
                  Restore
                </button>
              </div>
            );
          }}
        </For>
      </div>
    </div>
  );
}

We can create observable state using createSignal. It returns a tuple with a getter and a setter function.

To create derived data we can use createMemo. It takes a function returning the derived value, and any getter function called in the function is marked as a dependency. You know the drill, dependency changes - derived value recomputes.

Effects are created using a similar - createEffect function that also tracks dependencies, but instead of returning values it just runs some arbitrary effect.

State can be updated using the setter function returned from createSignal and calling it with the new state.

State can also be created and updated with createState which returns a more React-like tuple with the state object and a setter function.

Solid looks and reminds of React with hooks, but there are no Hook rules, or concern about stale closures.

6. Redux

Redux is a predictable state container for JavaScript apps. It's often used with React so I too went down that road.

import React from "react";
import { createSlice, configureStore } from "@reduxjs/toolkit";
import { Provider, useSelector, useDispatch } from "react-redux";

const todoSlice = createSlice({
  name: "todo",
  initialState: {
    todoList: [
      { id: 1, task: "Configure ESLint", completed: false },
      { id: 2, task: "Learn React", completed: true },
      { id: 3, task: "Take ring to Mordor", completed: true }
    ]
  },
  reducers: {
    createTodo(state, { payload: task }) {
      state.todoList.push({ id: Math.random(), task, completed: false });
    },
    removeTodo(state, { payload: id }) {
      state.todoList = state.todoList.filter((t) => t.id !== id);
    },
    setTodoCompleted(state, { payload: { id, value } }) {
      state.todoList.find((t) => t.id === id).completed = value;
    }
  }
});

const selectors = {
  completedTodoList(state) {
    return state.todoList.filter((t) => t.completed === true);
  },
  notCompletedTodoList(state) {
    return state.todoList.filter((t) => t.completed === false);
  }
};

const store = configureStore({
  reducer: todoSlice.reducer
});

// Create a cache to keep old values in.
// We use this to compare previous and next values and react only
// to parts of state we want.
const prevState = { todoList: undefined };
store.subscribe(() => {
  const state = store.getState();
  const prevTodoList = prevState.todoList;
  const todoList = state.todoList;

  if (prevTodoList !== todoList) {
    console.log(todoList.length);
  }
});

function App() {
  const dispatch = useDispatch();

  const completedTodoList = useSelector(selectors.completedTodoList);
  const notCompletedTodoList = useSelector(selectors.notCompletedTodoList);

  function addTodo() {
    const input = document.querySelector("#new-todo");
    dispatch(todoSlice.actions.createTodo(input.value));
    input.value = "";
  }

  return (
    <div>
      <input id="new-todo" />
      <button onClick={addTodo}>ADD</button>

      <div>
        <b>Todo:</b>
        {notCompletedTodoList.map((todo) => {
          return (
            <div key={todo.id}>
              {todo.task}
              <button
                onClick={() =>
                  dispatch(
                    todoSlice.actions.setTodoCompleted({
                      id: todo.id,
                      value: true
                    })
                  )
                }
              >
                Complete
              </button>
            </div>
          );
        })}
      </div>

      <div>
        <b>Done:</b>
        {completedTodoList.map((todo) => {
          return (
            <div key={todo.id}>
              {todo.task}
              <button
                onClick={() => dispatch(todoSlice.actions.removeTodo(todo.id))}
              >
                Delete
              </button>
              <button
                onClick={() =>
                  dispatch(
                    todoSlice.actions.setTodoCompleted({
                      id: todo.id,
                      value: false
                    })
                  )
                }
              >
                Restore
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default () => (
  <Provider store={store}>
    <App />
  </Provider>
);

Note that we use Redux through Redux Toolkit - the recommended approach to writting Redux with good defaults and some shortcuts to avoid writing lots of boilerplate code.

One thing you'll notice is the <Provider> component wrapping the whole app. This makes it possible for our app to access the store anywhere in the component tree. Internally it uses Reacts context API.

To define the initial state we use the createSlice function and pass it the initialState along with some reducers and the function returns the Redux store.

Reducers are usually described as pure functions that receive two arguments - the current state and an action - and return completely new state without touching the old one. However, with Redux Toolkit, when you define a reducer, the toolkit internally uses Immer so you can directly mutate the state object. The toolkit also creates an action creator that can trigger this reducer.

Derived data can be defined by creating selectors - simple functions that receive state and return the derived data.

For complex derived data Redux Toolkit exports a createSelector function that can memoize data and can be used to improve performance.

Running effects when state changes can be achieved by simply subscribing to the store using store.subscribe and passing it a function that runs whenever the state changes. If we want to subscribe only to parts of the state, we have to implement additional logic to check if that part of the state has changed. However, Redux is mostly used with React so in practice this kind of logic would most likely be implemented using Reacts own reactivity model.

State updates are simple as Redux Toolkit uses Immer behind the scenes, so we can just .push values into arrays and everything works. Only thing to remember is that in Redux you have to dispatch the actions. It's common for new devs to call an action creator without dispatch and wonder why nothing's working.

Conclusion

Different frameworks and libraries have different approaches solving the same problem.
Picking the best solution is subjective, and I can only offer my point of view, so take this with a grain of salt.

React is great. useEffect offers lots of control, derived values are simple to declare and there's lots of content online to help you out if you get stuck.
On the other hand, rules of Hooks can be confusing and it's easy to get performance issues or just getting the wrong idea and getting stuck with lots of unnecessary performance optimisations.

Vue is in my opinion the best solution in the list. It's simple, composable, fast, easy to get started with and just makes sense. The only con is that observable state has to be accessed through value which could be forgotten easily. However it's a small price to pay for all the benefits the framework offers.

Svelte is another slick solution. The $: and thing = thing syntax is a bit weird to get used to, but the performance and simplicity of Svelte is pretty great and the framework itself has a bunch of other useful features when it comes to developing UI so it's worth taking a look at.

MobX - for me personally MobX is a far better way to manage state than React Hooks. It doesn't care about the UI layer so it can be used outside the React ecosystem, and it's simple to mutate data. The only downside is that it tracks data access and not the data itself, which can be a source of bugs if you don't keep it in mind.

Solid is a relatively new project, and as such it's not used that much, but it's easy to get started if you're familiar with React. createState and createSignal are improvements over React's useState as it doesn't depend on the order of calls. But the framework is still young so the documentation can be a bit lacking. It looks promising, so we'll see what the future has in store.

Redux has been around for some time now, and it's widely used. This means that there's a lot of content online readily available for developers to pick up. It's not uncommon to hear Redux is hard to learn, and while I somewhat agree with this statement, I think Redux Toolkit makes Redux much more simple and accessible for new devs. It gives you predictable It still needs some boilerplate, but that's no problem for larger projects where it's more important to know where the updates are happening (in the reducers) than having a few lines of code less.

In the end, all approaches have its pros and cons. You have to pick the one that suits your needs the best, and don't be afraid to try new stuff.

Why you should use MobX State Tree in your next React project

Mateo Hrastnik — Tue, 12 May 2020 08:48:40 +0000

At Lloyds we write a lot of React and React Native apps. All apps require some state management, so we naturally had to choose a state management library to use in our projects. After some consideration and testing, some back and forth with Redux, MobX and some other solutions, we decided to try MobX State Tree. We loved the features, simplicity and developer experience so much! We just had to share it, so we decided to write this article.

MobX

MobX is awesome! It’s simple, performant and easy to learn.

We define our observable state and simply access that state in components. Whenever our state changes, our component re-renders automatically.

We can define the simplest counter app like this:

    const state = observable({
      count: 0
    });

    const CountView = observer(() => {
      return (
        <View>
          <Text>{state.count}</Text>
          <Button onPress={() => state.count++} title="CLICK ME" />
        </View>
      );
    });

We use the state just like a regular JavaScript object. MobX tracks the properties we access on the state and re-renders our component whenever those properties change. Notice that we marked the state to be observable and wrapped our component in the observer HOC that enables MobX to track properties and re-render our component.

Let’s consider an example that’s a bit more complex. We can create a simple to-do app.

    const state = observable({
      todoList: ["Buy milk"]
    });
    const actions = {
      addTodo(todo) {
        state.todoList.push(todo);
      },
      removeTodo(todo) {
        state.todoList.remove(todo);
      }
    };
    const TodoApp = observer(() => {
      const [todo, setTodo] = useState("");
      return (
        <View style={S.container}>
          <TextInput value={todo} onChangeText={setTodo} placeholder="I have to..." />
          <Button
            title="ADD"
            onPress={() => {
              actions.addTodo(todo);
              setTodo("");
            }}
          />

          <Text>Todos:</Text>
          {state.todoList.map(todo => (
            <View style={S.row}>
              <Text>{todo}</Text>
              <Button title="X" onPress={() => actions.removeTodo(todo)} />
            </View>
          ))}
        </View>
      );
    });

Yes, MobX really is great, but as the application grows, so does the application state so naturally you start breaking stuff up into multiple stores and communication between different parts of the app starts getting complicated.

MobX State Tree

MobX gives us a lot out of the box, but we can get a whole lot more by using MobX State Tree. MST is a state management library built on top of MobX. It’s stricter than MobX, but we get some additional features when we use it. We keep our state in a tree of models and we can freely navigate up and down the tree structure.

Additionally, we get some nice features that make for a delightful developer experience.

Data Validation

Notice that, in the pure MobX implementation, we have the action addTodo that accepts one parameter and pushes that in the todoList.

      addTodo(todo) {
        state.todoList.push(todo);
      },

We always pass a string as the parameter to addTodo, but we could easily pass some invalid data to addTodo by accident. In a large app, it’s not uncommon to deal with the same state from multiple parts of the app, and it’s easy to mistake addTodo(todo) with, for example, addTodo({ todo }).

If we push an object in the todoList array, the app won't throw an error in our data layer. If we’re lucky, we’ll get an error from the view layer when React tries to render an object as a child of a text component, but we’ll see that error only when we actually render the todos.

If we’re not lucky, the buggy todo will stay in the array, waiting to crash some app for some unsuspecting user.

It would be nice if we could get an error as soon as we try pushing invalid data in the todoList array. That’s where MST data validation comes in.

Let’s rewrite the above todo app example with MST and see how it works.

    const Store = types
      .model("Store", {
        todoList: types.array(types.string)
      })
      .actions(self => {
        return {
          addTodo(todo) {
            self.todoList.push(todo);
          },
          removeTodo(todo) {
            self.todoList.remove(todo);
          }
        };
      });

    const store = Store.create({
      todoList: ["Buy milk"]
    });

    const TodoApp = observer(() => {
      const [todo, setTodo] = useState("");
      return (
        <View>
          <TextInput
            value={todo}
            onChangeText={setTodo}
            placeholder="I have to..."
          />
          <Button
            title="ADD"
            onPress={() => {
              store.addTodo(todo);
              setTodo("");
            }}
          />
          <Text>Todos:</Text>
          {store.todoList.map(todo => (
            <View style={S.row}>
              <Text>{todo}</Text>
              <Button title="X" onPress={() => store.removeTodo(todo)} />
            </View>
          ))}
        </View>
      );
    });

First thing we do is define the data model. You can think of models as schemes that define the shape and types of your data. Additionally, we can add actions that modify the data. That way we keep the data and the actions that modify that data in a single location. This concept is known as encapsulation.

In our example we create a Store model where we keep the array of todos and actions for adding and removing todos from the array. We expect the todos themselves to be strings so we define them as such using types.array(types.string).

    const Store = types
      .model("Store", {
        todoList: types.array(types.string)
      })
      .actions(self => {
        return {
          addTodo(todo) {
            self.todoList.push(todo);
          },
          removeTodo(todo) {
            self.todoList.remove(todo);
          }
        };
      });

Then we create an instance of the model using Store.create() and pass the initial state as the first argument.

When instantiating models, MST will validate the data and throw developer friendly errors if the data doesn’t match the defined schema. For example, if we tried passing { todoList: [ {"todo":"Buy Milk"} ] } as the initial state, we would get the following error.

    [mobx-state-tree] Error while converting `{"todoList":[{"todo":"Buy Milk"}]}` to `Store`:

    at path "/todoList/0" snapshot `{"todo":"Buy Milk"}` is not assignable to type: `string` (Value is not a string).

This helps us catch and fix bugs early and follows the principles of defensive programming.

CodeSandbox:

https://codesandbox.io/s/mst-todo-app-dhj3r

Data validation is not the only great feature MST has to offer. Another cool feature are references.

References

References offer a way to - you guessed it - reference model instances in a safe and simple way. In order to use references we first have to define identifiers on our models. So let’s extend our todo app to see how this works.

First we’ll create a Todo model and add an autogenerated identifier prop.

    const Todo = types
      .model("Todo", {
        id: types.optional(types.identifier, () => Math.random().toString()),
        text: types.string
      })

We generate a random id every time a new todo is created.

Next we’ll modify the Store model by changing the todoList prop to be an array of our newly defined Todo models.

We’ll also add the selectedTodo prop and set its type to be a safeReference to a Todo, and add an action to set the selected todo.

    const Store = types
      .model("Store", {
        todoList: types.array(Todo),
        selectedTodo: types.safeReference(Todo)
      })
      .actions(self => {
        return {
          /* ... */
          selectTodo(todo) {
            self.selectedTodo = todo.id;
          }
        };
      });

So, the way references work is like this - when setting a reference, we provide an identifier of an existing model instance. On the other side, when we access the reference, MST will automatically resolve the model instance and return it. If we delete the selected todo it will get removed from the tree and the reference will be set to undefined.

We change the component to highlight the selected todo with green background.

          /* ... */
          <Text>Todos:</Text>
          {state.todoList.map(todo => {
            const selected = todo === state.selectedTodo;
            const backgroundColor = selected ? "#8f8" : "#fff";
            return (
              <TouchableOpacity
                style={[S.todoWrap, { backgroundColor }]}
                onPress={() => state.selectTodo(todo)}
              >
                <Text style={S.todoText}>{todo.text}</Text>
                <Button title="X" onPress={() => state.removeTodo(todo)} />
              </TouchableOpacity>
            );
          })}
          /* ... */

Note that state.selectedTodo is the actual todo instance (with id and text properties and all actions defined on the Todo model).

CodeSandbox:

https://codesandbox.io/s/mst-todo-app-with-references-1xel4

Async Actions

When using MST it’s recommended to write async actions using the flow helper and generator functions. Generators can be a bit overwhelming for new users, but using generators in MST is really simpler than it seems. Here’s how you can do a simple API call.

    .actions(self => {
      return {
        getTodos: flow(function*() {
          self.loading = true;
          const response = yield getEnv(self).http.get("/todos");
          self.loading = false;
          self.todoList = response.data;
        })
      }
    })

Flows with generators are similar to async/await. You just replace await with yield and async function with function *. This enables MST to batch UI updates. For example, if we were to use async/await to fetch the todos, the UI would be updated twice - once for self.loading = false and a second time for self.todoList = response.data. When using generators, MST can wait until the async action is over or yields and only then re-render the UI which improves app performance.

If you’re interested in learning more, there’s a lot more features in MST described on the official site.

Architecture

So far we’ve introduced some core MST features that we love. Even though all the features we talked about are great, it still took time until we came up with a way to structure the stores and define a directory structure that we use today.

We strive to reduce data redundancy (avoid same data defined in multiple places). We want to have a single source of truth at all times. The next section of this article explains how we used MST to achieve this goal.

Data Normalization

Data normalization is the process of structuring data in such a way to reduce data redundancy and improve data integrity.

Let’s say that we have an API endpoint /books that returns a list of book entities with a nested author entity.

    > GET /books

    < [
    <   {
    <     "id": "f3e6c707",
    <     "title": "title 0",
    <     "author": {
    <       "id": "c232ecf0",
    <       "name": "Jane Austen"
    <     }
    <   },
    <   {
    <     "id": "71f78b33",
    <     "title": "title 1",
    <     "author": {
    <       "id": "4dba331c",
    <       "name": "William Blake"
    <     }
    <   },
    <   /* ... */
    < ]

We could store that data in the format we receive it from the API - with the author entity nested inside, but what if we fetch the list of authors on a different place in the app? We would have two copies of a single author in memory - one nested in a book on the book list, and another on the author list.

What we instead want is to normalize the data. We can make the author property on the book entity a reference to the author entity, and keep the actual author data in a separate collection.

First we create two models for each entity - one for the entity itself, and one for store that keeps a collection of the entities and actions for CRUD operations on the entity itself. Additionally, the entity store has an action for processing entities that normalizes the data and recursively calls other actions to process nested entities.

    export const AuthorStore = types
      .model("AuthorStore", {
        map: types.map(Author)
      })
      .actions(self => {
        return {
          // we use this to add authors to the collection
          processAuthorList(authorList) {
            for (const author of _.castArray(authorList)) {
              self.map.put(author);
            }
          }
        };
      })
      .actions(self => {
        return {
          createAuthor: flow(function*(params) {
            const env = getEnv(self);
            const response = yield env.http.post(`/authors`, params);
            self.processAuthorList(response.data);
            return response;
          }),

          readAuthorList: /* GET /authors */,
          readAuthor: /* GET /authors/:id */,
          updateAuthor: /* POST /authors/:id */,
          deleteAuthor: /* DELETE /authors/:id */
        };
      });

The BookStore model is similar except we normalize the nested Author entity

    export const BookStore = types
      .model("BookStore", {
        map: types.map(Book)
      })
      .actions(self => {
        return {
          // here we add books to the collection 
          // and normalize the nested author entity
          processBookList(bookList) {
            const { processAuthorList } = getRoot(self).authorStore; 
            for (const book of _.castArray(bookList)) {
              if (book.author) {
                processAuthorList(book.author);
                entity.author = book.author.id;
              }
              self.map.put(entity);
            }
          }
        };
      })
      .actions(self => {
        return {
          /* API CRUD operations */
        };
      });

This approach makes our component code simple and clear. Keeping the data normalized reduces bugs when creating, updating and deleting entities. You can see it all together in the sandbox:

https://codesandbox.io/s/mst-example-vwmr9

Conclusion

MobX State Tree enables us to write simple, maintainable and highly performant code. Features like data validation and references provide a great developer experience and enable us to easily implement a data normalization layer in our applications. This architecture helps us to write higher quality code with less bugs that’s easier to maintain and reason about.

We can’t recommend MobX State Tree highly enough.

You can read more about it here: https://mobx-state-tree.js.org/intro/philosophy

Implementing Gravity And Collision Detection In React Native

Mateo Hrastnik — Mon, 27 Jan 2020 17:10:18 +0000

Implementing Gravity And Collision Detection In React Native

Hey you! Wanna hear about how I coded this thing:

You do?! Well strap in cause it's about to start.

So, what is this thing you ask? Well it's an animation of some bubbles running in a React Native app. All the bubbles start somewhere off screen and gravitate towards the center of the screen. The "cool" thing is they collide and iteract with each other. The other "cool" thing is that this animation is ran completely on the native UI thread so our JS code can react to our inputs.

All this is running inside a React Native app, even better - it's running on Expo so you can run this code on Android, iOS and the web and it will look the same.

So how do we start coding this thing? Well I don't know about you, but here's how I went about it.

The prototype

Well first of all, that "cool" thing about the bubbles colliding and reacting to each other is not so simple to code. So instead of trying to code the animation directly in React Native, let's first build a prototype of the animation.

The tool I chose for the prototype is p5.js. p5 is a simple tool to create animations and visual arts, and it even has an online editor that you can use to test your animations. It provides a setup function and a draw function. The setup function is ran only once an can be used to initialize some data and the draw function runs every frame and should draw the scene and update it for the next frame.

So, the idea is to use p5 to create a working prototype of the animation. Then when we are sure it's working we'll code up the solution in React Native.

Positioning circles

Let's first create some circles and draw them in the center of the screen. We'll use the setup funciton to initialize some circles and the draw function to display them on screen.

const canvasWidth = 600;
const canvasHeight = 600;

const numCircles = 10;
const circleDiameter = 30;
let circles;

function setup() {
  createCanvas(canvasWidth, canvasHeight);
  circles = [];
  for (let i = 0; i < numCircles; i++) {
    circles.push({ x: 0, y: 0 });
  }

  stroke("transparent");
  fill("#ff0000");
}

function draw() {
  background(220);

  for (const c of circles) {
    circle(c.x + canvasWidth / 2, c.y + canvasHeight / 2, circleDiameter);
  }
}

Note that we use the coords 0,0 to put the circles in the middle of the screen, but since p5 internaly draws 0,0 at the top left of the canvas, we must offset all the circles by canvasWidth / 2 and canvasHeight / 2 when we're drawing them. This is the output.

Now, that's great and all, but we initially want to position the circles outside of the visible canvas. This means that we have to offset each circle by half of the diagonal of the canvas + half circle radius to be sure that the circle will not be visible.

In what direction will we move the circles though? My implementation was to move each circle in it's own direction by dividing 360 degrees evenly by the number of circles and moving each circle in the direction defined by that angle * circle index. We'll add some randomization to the distance and angle to make it a bit more sporadic and voila

function setup() {
  createCanvas(canvasWidth, canvasHeight);

  const diagonal = Math.hypot(canvasWidth, canvasHeight);
  const diagonalHalf = diagonal / 2;

  circles = [];
  const angle = (2 * Math.PI) / numCircles;
  for (let i = 0; i < numCircles; i++) {
    const randomOffsetAngle = random(-angle * 0.4, angle * 0.4);
    const randomOffsetDistance = random(0, circleDiameter);

    const distance = diagonalHalf + circleDiameter + randomOffsetDistance;
    const currentAngle = angle * i + randomOffsetAngle;
    const x = Math.sin(currentAngle) * distance;
    const y = Math.cos(currentAngle) * distance;

    circles.push({ x, y });
  }

  stroke("transparent");
  fill("#ff0000");
}

function draw() {
  background(220);

  for (const c of circles) {
    circle(c.x + canvasWidth / 2, c.y + canvasHeight / 2, circleDiameter);
  }
}

Here's how it looks for now. Note that the image here is a bit zoomed out so that we actually see the circles. The code above should actually render the circles outside of the viewport so they are not visible.

Gravity

Now to add the gravity, we'll first add an update() function to the draw loop, and there we have to move each ball a just a bit in the direction of the center (0, 0). Lucky for us the center is in (0, 0) so we can just use the negative x and y position of the ball to get there.

function draw() {
  /* ... stays the same ... */
  update();
}

function update() {
  for (let i = 0; i < circles.length; i++) {
    const circle = circles[i];

    circle.x += -circle.x * 0.001;
    circle.y += -circle.y * 0.001;
  }
}

Boom! That was easy!

Colision detection

So here comes the hard part. We actually have to implement collision detection.

This means that in every frame we have to detect if two circles are overlapping. If two circles overlap we have to resolve the collision somehow. We're gonna use a primitive method - if two circles are overlapping just move the circles away from each other so they're not overlapping anymore. Sounds simple right?

First we have to know if they're overlapping. We can detect that by checking if the distance between two circle centers is less than the the sum of their radii. Since all the circles have the same radius we can simply check if the distance between two circles is less than the diameter of a single circle. Click on the image below to open a small Codepen demonstrating this.

Now that we know when two circles are overlapping, we have to move them away from each other. We do that by first calculating the overlap distance. This is the length shown with the black line on the image below.

Once we have the overlap distance we use some simple math to move each circle away from the other by half of that distance. Note that this can still result in circles overlapping when there's a lot of circles, but for our purposes it's will look just fine.

So let's transform all this to code.

function update() {
  // ... gravity stuff goes here ...

  // Colision detection
  for (let i = 0; i < circles.length; i++) {
    for (let j = i; j < circles.length; j++) {
      const circleA = circles[i];
      const circleB = circles[j];

      const dx = circleB.x - circleA.x;
      const dy = circleB.y - circleA.y;
      const distanceBetweenCenters = Math.hypot(dx, dy);
      const areOverlapping = distanceBetweenCenters < circleDiameter;

      if (areOverlapping) {
        const overlapDistance = circleDiameter - distanceBetweenCenters;
        const percentOverlap = overlapDistance / circleDiameter;

        const halfPercent = percentOverlap * 0.5;

        circleA.x -= dx * halfPercent;
        circleA.y -= dy * halfPercent;

        circleB.x += dx * halfPercent;
        circleB.y += dy * halfPercent;
      }
    }
  }
}

This produces the following output. Note that I added the borders and increased the size of the circles.

Alright! We did it! All that's left is to recreate the effect in React Native

React Native implementation

Now that we know that our code works we have to somehow move it into React Native. And if we want smooth 60fps animations, we have to use Reanimated.

I'll assume you already know how to set up a basic React Native project so we're gonna skip that part. Let's create a directory with all the files we'll need. In the root directory we create the following structure:

─── AnimatedCircles
    ├── AnimatedCircles.component.js
    ├── Circle.component.js
    └── useGravityAnimation.hook.js

The AnimatedCircles component will serve as an entry point to our animation.

The App.js component will simply render our animated component like so

// App.js

import React from "react";
import { AnimatedCircles } from "./AnimatedCircles/AnimatedCircles.component";

export default function App() {
  return <AnimatedCircles />;
}

We'll create a Circle component that will render the circle and recieve two animated values for translating it's x and y values.

import React from "react";
import Animated from "react-native-reanimated";

export const circleDiameter = 128;
const circleRadius = circleDiameter / 2;

export const Circle = ({ translateX, translateY }) => {
  return (
    <Animated.View
      style={{
        transform: [{ translateX }, { translateY }],
        position: "absolute",
        width: circleDiameter,
        height: circleDiameter,
        borderRadius: circleRadius,
        backgroundColor: "#ff0000"
      }}
    ></Animated.View>
  );
};

Notice how we exported the circleDiameter so we can later reference it in other files. We also set the position attribute to absolute so the circles can overlap.

Next we'll define the AnimatedCircles component. This will render the canvas on which we'll animate the circles (a blank View) and measure the canvas' width and height so that we can calculate the diagonal. We first render a blank View and grab it's layout event to measure the size and in the next frame we'll actually render the circles

// AnimatedCircles/AnimatedCircles.component.js

import React, { useCallback, useState } from "react";
import { StyleSheet, View } from "react-native";

import { useGravityAnimation } from "./useGravityAnimation.hook";
import { Circle } from "./Circle.component";

const S = StyleSheet.create({
  flex: { flex: 1 },
  wrap: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden"
  }
});

export function AnimatedCircles() {
  const [viewDimensions, setViewDimensions] = useState(undefined);
  const handleLayout = useCallback(event => {
    const { width, height } = event.nativeEvent.layout;
    setViewDimensions({ width, height });
  }, []);

  const isCanvasReady = viewDimensions !== undefined;

  return (
    <View style={S.flex} onLayout={handleLayout}>
      {isCanvasReady && (
        <AnimatedCirclesInner dimensions={viewDimensions} />
      )}
    </View>
  );
}

export function AnimatedCirclesInner({ dimensions }) {
  const circles = useGravityAnimation(dimensions);

  return (
    <View style={S.wrap}>
      {circles.map((p, index) => {
        return <Circle key={index} translateX={p.x} translateY={p.y} />;
      })}
    </View>
  );
}

All the circles are initially centered using justifyContent: 'center' and alignItems: 'center'.

The inner component passes the dimensions to the useGravityAnimation hook where the magic happens and gets back an array of animated x and y offsets for each circle.

The code for the gravity animation hook is the p5 code from the prototype translated into Reanimated. It has a setup function and a draw function where the magic happens.

// AnimatedCircles/useGravityAnimation.hook.js

export const useGravityAnimation = dimensions => {
  const circles = useSetup(dimensions);
  useDraw(circles);

  return circles;
};

The setup function more or less works exactly the same as the p5 implementation - it calculates some angles and distances and initializes the positions of the circles. The difference is that we use Animated.Values for x and y values so that we can actually animate them. Another difference is that here we return the circles from the function in contrast to defining a global circles variable in p5.

// AnimatedCircles/useGravityAnimation.hook.js

const useSetup = dimensions => {
  const circles = useMemo(() => {
    const { width, height } = dimensions;
    const diagonal = Math.hypot(width, height);
    const diagonalHalf = diagonal / 2;
    const circles = [];

    const angle = (2 * Math.PI) / numCircles;
    for (let i = 0; i < numCircles; i++) {
      const randomOffsetAngle = random(-angle * 0.4, angle * 0.4);
      const randomOffsetDistance = random(0, circleDiameter);

      const distance = diagonalHalf + circleDiameter + randomOffsetDistance;
      const currentAngle = angle * i + randomOffsetAngle;
      const x = Math.sin(currentAngle) * distance;
      const y = Math.cos(currentAngle) * distance;

      circles.push({ x: new Value(x), y: new Value(y) });
    }
    return circles;
  }, [dimensions]);

  return circles;
};

We wrap the calculation in a useMemo call for optimization purposes.

Looks great! Now all that's left to do is implement the useDraw loop and update the circle positions.

If you used Reanimated before, you'll notice that it doesn't have any looping primitives. for loops and while loops don't exist in Reanimated. The only thing we have is Clocks, and we can use those to keep the animation running forever (or until some condition is met).

So let's start by defining an infinite loop.

// AnimatedCircles/useGravityAnimation.hook.js

const useDraw = circles => {
  const nativeCode = useMemo(() => {
    const clock = new Clock();

    const nativeCode = [
      cond(clockRunning(clock), 0, startClock(clock)),
      clock
    ];
  }, []);

  useCode(() => nativeCode, [nativeCode]);
}

This loop actually does nothing, but it's being evaluated on the native thread. You can think about the nativeCode array as a list of commands to be ran by the native thread that we send across the bridge using the useCode hook.

Currently we have two commands - the first one starts the clock if it's stopped and the other one just evaluates the clock. We don't actually use the clock to drive an animation value. We just evaluate it so that Reanimated keeps running the loop. You see, the way Reanimated works is by evaluating all commands on every frame, and if it evaluates a clock in any command, it schedules another evaluation of for the next frame. This is what drives our infinite loop.

Now that we have the loop we can implement the actual animation. Let's first add the gravity part

// AnimatedCircles/useGravityAnimation.hook.js

const useDraw = circles => {
  const nativeCode = useMemo(() => {
    const clock = new Clock();

    const nativeCode = [cond(clockRunning(clock), 0, startClock(clock)), clock];

    // gravity. We push cirlces to 0, 0
    for (let i = 0; i < circles.length; i++) {
      const circle = circles[i];

      nativeCode.push(set(circle.x, add(circle.x, multiply(circle.x, -0.01))));
      nativeCode.push(set(circle.y, add(circle.y, multiply(circle.y, -0.01))));
    }

    return block(nativeCode);
  }, [circles]);

  useCode(() => nativeCode, [nativeCode]);
};

We loop over the circles and push two set commands to the native code list.

Compare the code of the for loop to our original p5 implementation and you can see how similar they look.

  for (let i = 0; i < circles.length; i++) {
    const circle = circles[i];

    circle.x += -circle.x * 0.001;
    circle.y += -circle.y * 0.001;
  }

Similarly we implement the collision detection

// AnimatedCircles/useGravityAnimation.hook.js

const useDraw = circles => {
  const nativeCode = useMemo(() => {

    // ... gravity stuff goes here 

    for (let i = 0; i < circles.length; i++) {
      for (let j = i; j < circles.length; j++) {
        const circleA = circles[i];
        const circleB = circles[j];

        const dx = sub(circleB.x, circleA.x);
        const dy = sub(circleB.y, circleA.y);
        const distanceBetweenCenters = sqrt(
          add(multiply(dx, dx), multiply(dy, dy))
        );

        const areOverlapping = lessThan(distanceBetweenCenters, circleDiameter);

        const overlapDistance = sub(circleDiameter, distanceBetweenCenters);
        const percentOverlap = divide(overlapDistance, circleDiameter);
        const halfPercent = multiply(percentOverlap, 0.5);

        nativeCode.push(
          cond(areOverlapping, [
            set(circleA.x, sub(circleA.x, multiply(dx, halfPercent))),
            set(circleA.y, sub(circleA.y, multiply(dy, halfPercent))),
            set(circleB.x, add(circleB.x, multiply(dx, halfPercent))),
            set(circleB.y, add(circleB.y, multiply(dy, halfPercent)))
          ])
        );
      }
    }

    return block(nativeCode);
  }, [circles]);

  useCode(() => nativeCode, [nativeCode]);
};

We already went over how this works in the p5 implementation, the difference here is that we have to push the code to the native thread.

Notice how we only have to push the cond command and since it depends on the other commands everything gets sent over the bridge.

So, once we put all this together we can start the project and see what we made.

Conclusion

I hope you learned something from all of this. Maybe a bit about Reanimated, maybe about physics simulations, maybe about p5.

I personally got a ton of new knowledge while creating this. At first this seemed like a really complex problem and I wasn't sure if it's even possible, but breaking it down into smaller problems was the key to solving this.

So what's next? Well, I implemented this animation as a part of a project where it was used as a menu similar to Apple watch, but you could use it as a cool background, screen transition or even in a game. Be creative!

Adding interactivity, transitions and advanced animations with Reanimated has never been simpler. I have to give a shoutout to William Candilon's excelent Redash library that makes it even easier. If you like React Native and animations you should subscribe to his YouTube channel

Thank you for reading. That's all I got!

Link to Github Repo https://github.com/hrastnik/react-native-gravity-circles

React Native - The aspectRatio Style Property

Mateo Hrastnik — Thu, 25 Jul 2019 19:57:08 +0000

A lot of React Native developers come from a web background. They're used to working with CSS and since React Native styling is basically a stripped down version of CSS, it means they quickly get used to it. There is however one feature in React Native that I find extremely useful which cannot be found on the web - so a lot of devs don't even realize it exists. I'm talking about the aspectRatio style prop.

So what is it? Why should you use it? Well, imagine this scenario. You want to create a scrollable screen filled with some images. All the images are perfectly square and take up the width of the screen.

So how do you get the height of the image? That's easy - you just import { Dimensions } from "react-native" and you use the window width for both the width and height, right? Like this:

function Card({ item: uri }) {
  const { width } = Dimensions.get("window");
  return (
    <Image
      source={{ uri }}
      style={{
        width: width,
        height: width
      }}
    />
  );
}

You use a FlatList to render the cards like this and even add a fancy separator.

<FlatList
  style={{ flex: 1 }}
  ItemSeparatorComponent={() => <View style={{ height: 16 }} />}
  data={images}
  renderItem={Card}
  keyExtractor={image => image}
/>

So, this works fine, but let's say that sometime later, you have to do some tweaks and add some horizontal padding to the FlatList - here's what you'll get.

<FlatList
  style={{ flex: 1 }}
  contentContainerStyle={{ padding: 64 }} /* ADDED THIS */ 
  ItemSeparatorComponent={() => <View style={{ height: 16 }} />}
  data={images}
  renderItem={Card}
  keyExtractor={image => image}
/>

Our UI breaks. That's because the images are as wide as our screen, and with the padding they extend beyond the screen. The issue is we're using Dimensions to set the width - which we obviously don't want as it makes our components fragile.

So what we need to do is make the image take all available width and still keep the aspect ratio 1:1. The aspectRatio style prop does just that.

Simply use it like this:

function Card({ item: uri }) {
  return (
    <Image
      source={{ uri }}
      style={{
        width: "100%",
        aspectRatio: 1
      }}
    />
  );
}

If the parents View has it's alignItems style prop set to stretch (this is the default) you don't even have to specify width: "100%" as all the children will stretch to fill all the available width.

function Card({ item: uri }) {
  return (
    <Image
      source={{ uri }}
      style={{ aspectRatio: 1 }}
    />
  );
}

Here's the result.

Use aspectRatio wherever you can and avoid grabbing the window width using the Dimensions API. aspectRatio can make your components better adapt to change and in turn make your UI more stable.

There is one caveat - this doesn't (yet) work with react-native-web, so if you're using that, it's best to avoid it.

Keybind Your Way To React Native Dev Menu

Mateo Hrastnik — Fri, 29 Mar 2019 20:30:12 +0000

This tutorial works only on Android phones

If you're a React Native developer, you already know that opening the dev menu by shaking the phone can be really frustrating. The problem has been tackled by some folks, and solutions exist in the form of components that wrap your whole app to enable 3 finger long press to access the dev menu. This works, but personally I don't like the idea of having dev-only components in my app so it never stuck on me.

That's why I created this little workaround to open the dev menu from inside VSCode, using a keyboard shortcut. The only caveat is that your phone has to be connected via USB cable, but since this has the advantage of faster loading times, I was already used to being connected so the shortcut was a clear improvement. Here's how to do it.

First we'll create a task in VSCode that will run two ADB commands. The first command will redirect the phones traffic to our computer and enable faster loading times. When you run react-native run-android this command, among others, is ran behind the scenes.
The second command sends a key event that will pop the menu open.
We don't technically need the first command, but if you disconnect your phone from the PC and reconnect it, you'll have to run it to be able to fetch the JS code changes anyway, so it's nice to have.

So let's set up the VSCode task. Open up VSCode and hit CTRL+P, then type in "Tasks: Configure Tasks". Press enter and select "Create tasks.json file from template", choose "Others" from the available options.
Now you should see a simple template for running a shell command through a task. Change it so it looks like this:

  {
    "version": "2.0.0",
    "tasks": [
      {
        "label": "reactNativeDevMenu",
        "type": "shell",
        "presentation": {
          "echo": false,
          "reveal": "never",
          "focus": false,
          "panel": "new",
          "showReuseMessage": false,
          "clear": false
        },
        "command": "adb reverse tcp:8081 tcp:8081 && adb shell input keyevent 82"
      }
    ]
  }

The label key serves as an ID that we can later use to run the task.
The type key tells VSCode that the task should run in the shell.
The presentation key is required in order to prevent the terminal popping up after we run the task. This way it runs silently in the background.
The command key is the actuall command that will run once we run the task.

Now let's bind a keyboard shortcut to run the task. I used CTRL+ALT+D but you can use whatever you want. Add this snippet to your keybinding.json file. You can access the file by pressing CTRL+SHIFT+P typing "Preferences: Open Keyboard Shortucs" then pressing the curly brackets in top right.

  {
    "key": "ctrl+alt+d",
    "command": "workbench.action.tasks.runTask",
    "args": "reactNativeDevMenu"
  }

The value under args should match the label we set up in tasks.json.

Now connect your Android phone with an USB cable, open your app and try out the keybinding you set up. Congratulations! You can now open the dev menu without flailing your phone around like a mad man. Happy hacking!

Styling Your React Native App

Mateo Hrastnik — Tue, 12 Mar 2019 19:14:40 +0000

Before I start, note that this article is not a tutorial on styling. It's my take on the code and directory structure that supports the styling of the apps I create.

Every React Native developer has their own way of handling styling in their app. There is no right or wrong way, but some approaches have obvious benefits over others. I've built a couple of apps already, and every project is a chance to learn something new and improve on the past mistakes. One thing I feel I've done really good and improved since I started - styling. So I decided to share my journey from the beginning to my current setup - feel free to copy it, or criticize it in the comments below.

When I just started with React Native I came from a web background, but I didn't have much experience in building big web sites. Most of the stuff I built was really simple - single page websites without a lot of complexity. This meant I always kept all my CSS in a single file. That approach, as rudimental as it was, worked for those websites. So naturally when I got into React Native I started by putting all my styles in a single style.js file which exported styles for all the screens. This worked for a while, but as the app grew the file also grew and navigating through the file was starting to get harder and harder. By the time the project was over, style.js was enormous and handling changes in the project felt like a chore. This approach clearly had to be changed.

For the next project I thought about a different approach. Instead of putting all styles in a single style.js file, I created separate style.js files for every component, and imported the common stuff, like colors, from a global constants.js file. This worked much better, as now I had the style right next to the components and I knew where to find the style without having to navigate through a giant stylesheet.

This approach solved some of the problems, but after a while I started seeing how I could further improve it. I felt like I was writing a lot of redundant code, especially for spacing components out. I'd have a lot of marginTops and marginBottoms all over the place, and there were no rules to this. Sometimes the component above would have a marginBottom, and sometimes the component below would have a marginTop. This meant that when I had to change some spacing I'd have to open the style.js file, search for the style applied to the 2 components, check which one has the margin set and change it. Sometimes I'd remove some component and forget to remove the margin from the neighboring component and then the spacing was too big. I knew I could improve this somehow. And then it hit me! I created the single most used component in all my projects.

That's right! Nothing! Well... Not exactly nothing. It's actually a <Spacer /> component and all it does is render some empty space, so it's kind of nothing. It can take one of these size props - small, medium, large, extraLarge, and internally it renders a square <View /> with a fixed spacing read from the global constants.js file. Here's how it looks like in code:



  <View style={S.container}>
    <Logo />

    <Spacer extraLarge />

    <TextInput {...usernameProps} />

    <Spacer medium />

    <TextInput {...passwordProps} />

    <Spacer large />

    <Button style={S.submitButton} />
  </View>

So now most of my screens and components used <Spacer /> which meant all my style.js lost the need for most marginTops and marginBottoms. I got a great productivity boost - when creating UI, I didn't have to jump back and forth between the stylesheet and component file all the time just to add some spacing between some elements. I could just add a <Spacer /> here and there and space out the components as needed. Another benefit I got is when I looked at my render() methods I could actually see where the spacing was between components without having to inspect the stylesheet.

I loved the Spacer component, so naturally I started thinking about what could I improve on next. I noticed my <Text /> components had a lot of repeating code, so that was the next thing to fix. After some trial and error, I landed on a component that I was happy with. This is what it looks like:



  <Text weightBold sizeSmall>This text is small and bold</Text>
  <Text sizeLarge colorLight>This text is large and has a light color</Text>
  <Text colorTheme>This text is medium size and has the theme color</Text>

The idea behind it is to have a flexible text component that covers most use cases. When there's extra styling needed, I can always add a style prop and customize the text further. Currently my Text component can take one of 5 size props, one of 7 color props, one of 3 weight props, but it's easy to add these kind of boolean props for other style attributes like line height and spacing.

The same scheme is used for the <TextInput /> component as it shares a lot of props with the native <Text /> component. There are some reasonable defaults set on the TextInput height, border radius, selection color etc., but this is usually adjusted per project needs.

So now I had the 3 components I use on all my projects. Spacer, Text and TextInput. With just these three components the amount of styling code I have to write is dramatically reduced and mostly boils down to screen specific layout.

In addition to the custom components, I've added a lot of useful constants to my constants.js file. It's mostly colors, spacings, and font sizes, but as the project grows I sometimes add border radius values and shadows.
To help me define the color scheme I use the color npm package. It enables manipulation of colors so once I pick a theme color the different shades are automatically calculated using the lighten, darken and other methods from the color package.

Here's how it all looks in code:



// constants.js

import { Dimensions } from "react-native";
import Color from "color";

const window = Dimensions.get("window");
export const windowWidth = window.width;
export const windowHeight = window.height;

export const colorBackgroundTheme = "rgb(255, 17, 100)";
export const colorBackgroundLight = "rgba(244, 244, 244, 1)";
export const colorBackgroundDark = "rgba(10, 10, 10, 1)";

export const colorBackgroundThemeSoft = Color(colorBackgroundTheme)
  .lighten(0.25)
  .rgb()
  .string(2);
export const colorBackgroundThemeSofter = Color(colorBackgroundTheme)
  .lighten(0.5)
  .rgb()
  .string(2);
export const colorBackgroundThemeHard = Color(colorBackgroundTheme)
  .darken(0.25)
  .rgb()
  .string(2);
export const colorBackgroundThemeHarder = Color(colorBackgroundTheme)
  .darken(0.5)
  .rgb()
  .string(2);

export const colorBackgroundLightDark = Color(colorBackgroundLight)
  .darken(0.25)
  .rgb()
  .string(2);
export const colorBackgroundLightDarker = Color(colorBackgroundLight)
  .darken(0.5)
  .rgb()
  .string(2);

export const colorBackgroundDarkLight = Color(colorBackgroundDark)
  .lighten(0.25)
  .rgb()
  .string(2);
export const colorBackgroundDarkLighter = Color(colorBackgroundDark)
  .lighten(0.5)
  .rgb()
  .string(2);

export const colorTextTheme = "rgba(216, 0, 75, 1)";
export const colorTextLight = "rgba(255, 255, 255, 0.9)";
export const colorTextDark = "rgba(0, 0, 0, 0.9)";

export const colorTextLightSoft = Color(colorTextLight)
  .fade(0.3)
  .rgb()
  .string(2);
export const colorTextLightSofter = Color(colorTextLight)
  .fade(0.5)
  .rgb()
  .string(2);

export const colorTextDarkSoft = Color(colorTextDark)
  .fade(0.3)
  .rgb()
  .string(2);
export const colorTextDarkSofter = Color(colorTextDark)
  .fade(0.5)
  .rgb()
  .string(2);

export const spacingSmall = 4;
export const spacingMedium = 8;
export const spacingLarge = 16;
export const spacingExtraLarge = 32;

export const fontSizeExtraSmall = 8;
export const fontSizeSmall = 12;
export const fontSizeMedium = 16;
export const fontSizeLarge = 20;
export const fontSizeExtraLarge = 24;

export const fontWeightLight = "100";
export const fontWeightNormal = "500";
export const fontWeightBold = "900";

// Can also export borderRadius values, shadows, etc...



// Spacer.js
import React from "react";
import { View, StyleSheet } from "react-native";

import { constants as C } from "../../style";

const S = StyleSheet.create({
  spacingSmall: { width: C.spacingSmall, height: C.spacingSmall },
  spacingMedium: { width: C.spacingMedium, height: C.spacingMedium },
  spacingLarge: { width: C.spacingLarge, height: C.spacingLarge },
  spacingExtraLarge: { width: C.spacingExtraLarge, height: C.spacingExtraLarge }
});

const Spacer = ({ small, medium, large, extraLarge }) => {
  let style = S.spacingMedium;
  if (small) style = S.spacingSmall;
  else if (medium) style = S.spacingMedium;
  else if (large) style = S.spacingLarge;
  else if (extraLarge) style = S.spacingExtraLarge;

  return <View style={style} />;
};

export default Spacer;



// Text.js

import React from "react";
import { Text as RNText } from "react-native";

import { constants as C } from "../../style";

const Text = ({
  sizeExtraSmall,
  sizeSmall,
  sizeMedium,
  sizeLarge,
  sizeExtraLarge,

  colorTheme,
  colorDark,
  colorDarkSoft,
  colorDarkSofter,
  colorLight,
  colorLightSoft,
  colorLightSofter,

  weightLight,
  weightNormal,
  weightBold,

  style,
  ...props
}) => {
  let fontSize = C.fontSizeMedium;
  if (sizeExtraSmall) fontSize = C.fontSizeExtraSmall;
  else if (sizeSmall) fontSize = C.fontSizeSmall;
  else if (sizeMedium) fontSize = C.fontSizeMedium;
  else if (sizeLarge) fontSize = C.fontSizeLarge;
  else if (sizeExtraLarge) fontSize = C.fontSizeExtraLarge;

  let color = C.colorTextDark;
  if (colorTheme) color = C.colorTextTheme;
  else if (colorDark) color = C.colorTextDark;
  else if (colorDarkSoft) color = C.colorTextDarkSoft;
  else if (colorDarkSofter) color = C.colorTextDarkSofter;
  else if (colorLight) color = C.colorTextLight;
  else if (colorLightSoft) color = C.colorTextLightSoft;
  else if (colorLightSofter) color = C.colorTextLightSofter;

  let fontWeight = C.fontWeightNormal;
  if (weightLight) fontWeight = C.fontWeightLight;
  else if (weightNormal) fontWeight = C.fontWeightNormal;
  else if (weightBold) fontWeight = C.fontWeightBold;

  return <RNText style={[{ fontSize, color, fontWeight }, style]} {...props} />;
};

export default Text;



// TextInput.js

import React from "react";
import { TextInput as RNTextInput } from "react-native";

import { constants as C } from "../../style";

const TextInput = ({
  sizeExtraSmall,
  sizeSmall,
  sizeMedium,
  sizeLarge,
  sizeExtraLarge,

  colorTheme,
  colorDark,
  colorDarkSoft,
  colorDarkSofter,
  colorLight,
  colorLightSoft,
  colorLightSofter,

  weightLight,
  weightNormal,
  weightBold,

  style,
  ...props
}) => {
  let fontSize = C.fontSizeMedium;
  if (sizeExtraSmall) fontSize = C.fontSizeExtraSmall;
  else if (sizeSmall) fontSize = C.fontSizeSmall;
  else if (sizeMedium) fontSize = C.fontSizeMedium;
  else if (sizeLarge) fontSize = C.fontSizeLarge;
  else if (sizeExtraLarge) fontSize = C.fontSizeExtraLarge;

  let color = C.colorTextDark;
  if (colorTheme) color = C.colorTextTheme;
  else if (colorDark) color = C.colorTextDark;
  else if (colorDarkSoft) color = C.colorTextDarkSoft;
  else if (colorDarkSofter) color = C.colorTextDarkSofter;
  else if (colorLight) color = C.colorTextLight;
  else if (colorLightSoft) color = C.colorTextLightSoft;
  else if (colorLightSofter) color = C.colorTextLightSofter;

  let fontWeight = C.fontWeightNormal;
  if (weightLight) fontWeight = C.fontWeightLight;
  else if (weightNormal) fontWeight = C.fontWeightNormal;
  else if (weightBold) fontWeight = C.fontWeightBold;

  return (
    <RNTextInput
      selectionColor={C.colorBackgroundThemeSofter}
      style={[
        {
          fontSize,
          color,
          fontWeight,
          padding: C.spacingMedium,
          margin: 0,
          height: 52,
          backgroundColor: C.colorBackgroundLightDark,
          borderRadius: 26
        },
        style
      ]}
      {...props}
    />
  );
};

export default TextInput;

Let's Create A Custom Animated Tab Bar With React Native

Mateo Hrastnik — Sun, 06 Jan 2019 15:48:58 +0000

If you've ever felt like the default tab bar component you get from React Navigation looks too bland, or just wanted to create something a bit more modern looking, well, then you're like me. In this guide I'll show you how you can create a custom tab bar to use with React Navigation.

EDIT: I've extended this example and published the code on github. Link to repo

Here's what the end products will look like

Here's how to get there. First let's initialize a new project and install a couple of dependencies. We'll run some commands in the terminal.

$ react-native init CustomTabBar
$ cd CustomTabBar
$ npm install react-navigation react-native-gesture-handler react-native-pose

React Navigation requires react-native-gesture-handler since v3 so we have to install that and react-native-pose is just a great library we're going to use to make animations really simple.

Now there's a linking step needed to make react-native-gesture-handler work on Android. It's all explained on the https://reactnavigation.org/docs/en/getting-started.html#installation, so I'm going to skip the setup part.

Now we can actually start the app and code up the tab bar.

First thing's first - We'll create a directory structure that will help keeping things organized.

/android
/ios
...
/src
  /AppEntry.js
  /router
    /router.js
    /index.js
  /components
  /screens
/index.js

First we'll create a src directory to separate our code from the other files in the root of the project (package.json, app.json, .gitignore etc.). The screens, components and router directories are self explanatory.

We delete the default App.js file from the root of the project and change index.js to import /src/AppEntry.js

/* /index.js */


/** @format */

import { AppRegistry } from "react-native";
import App from "./src/AppEntry";
import { name as appName } from "./app.json";

AppRegistry.registerComponent(appName, () => App);

Now we want to create the router using react-navigation, but first we need to create some dummy screens. We'll create a generic Screen component that takes a name and displays it to emulate multiple screens.

We add some exports to the /src/screens/index.js file like so

/* /src/screens/index.js */

import React from "react";

import Screen from "./Screen";

export const HomeScreen = () => <Screen name="Home" />;
export const SearchScreen = () => <Screen name="Search" />;
export const FavoritesScreen = () => <Screen name="Favorites" />;
export const ProfileScreen = () => <Screen name="Profile" />;

Now we create the Screen component.

/* /src/screens/Screen.js */

import React from "react";
import { Text, View, StyleSheet } from "react-native";

const S = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#bbbbbb",
    justifyContent: "center",
    alignItems: "center"
  },
  text: { fontSize: 28, color: "#222222", textAlign: "center" }
});

const Screen = ({ name }) => (
  <View style={S.container}>
    <Text style={S.text}>This is the "{name}" screen</Text>
  </View>
);

export default Screen;

Time to create the router.

First let's add the export to /src/router/index.js

/* /src/router/index.js */

export { default as Router } from "./router";

Now let's create the basic BottomTabNavigator in router.js. We'll import our screens and use the createBottomTabNavigator to create a default tab navigator.

/* /src/router/index.js */

import { createAppContainer, createBottomTabNavigator } from "react-navigation";

import {
  HomeScreen,
  SearchScreen,
  FavoritesScreen,
  ProfileScreen
} from "../screens";

const TabNavigator = createBottomTabNavigator({
  HomeScreen,
  SearchScreen,
  FavoritesScreen,
  ProfileScreen
});

export default createAppContainer(TabNavigator);

Now we render our Router in AppEntry.js

/* /src/AppEntry.js */

import React from "react";

import { Router } from "./router";

export default () => <Router />;

When we reload our app we should see this screen:

The default tab bar supports icons, so let's add some icons. We'll use ascii characters for this tutorial, but you can use react-native-vector-icons or a custom icon font in a real app.

Let's create an Icon component that accepts props name and color and returns the icon.

/* /src/components/index.js */

export { default as Icon } from "./Icon";

/* /src/components/Icon.js */

import React from "react";
import { Text } from "react-native";

const iconMap = {
  home: "♡",
  search: "♢",
  favorites: "♧",
  profile: "♤"
};

const Icon = ({ name, color, style, ...props }) => {
  const icon = iconMap[name];

  return <Text style={[{ fontSize: 26, color }, style]}>{icon}</Text>;
};

export default Icon;

Now we can use this component in our router. We change our screens in router.js to accept an object with the navigationOptions prop. The default tab bar passes the tintColor to our icon component so we use that to set our icon color.

/* /src/router/router.js */

const TabNavigator = createBottomTabNavigator({
  HomeScreen: {
    screen: HomeScreen,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => <Icon name="home" color={tintColor} />
    }
  },
  SearchScreen: {
    screen: SearchScreen,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => <Icon name="search" color={tintColor} />
    }
  },
  FavoritesScreen: {
    screen: FavoritesScreen,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => <Icon name="favorites" color={tintColor} />
    }
  },
  ProfileScreen: {
    screen: ProfileScreen,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => <Icon name="profile" color={tintColor} />
    }
  }
});

Here's what it looks like

Now our tab bar looks a bit better, but it's still the default tab bar from react-navigation. Next we'll add the actual custom tab bar component.

Let's start by creating a custom TabBar component that only renders some text and logs the props so we actually see what props we get from the navigator.

/* /src/components/index.js */

export { default as Icon } from "./Icon";
export { default as TabBar } from "./TabBar";

/* /src/components/TabBar.js */

import React from "react";
import { Text } from "react-native";

const TabBar = props => {
  console.log("Props", props);

  return <Text>Custom Tab Bar</Text>;
};

export default TabBar;

We have to setup our router so it uses the custom tab bar. We can add the following config as the second parameter to createBottomTabNavigator.

/* /src/router/router.js */

...
import { Icon, TabBar } from "../components";

const TabNavigator = createBottomTabNavigator(
  {
    HomeScreen: { /* ... */ },
    SearchScreen: { /* ... */ }
  },

  {
    tabBarComponent: TabBar,
    tabBarOptions: {
      activeTintColor: "#4F4F4F",
      inactiveTintColor: "#ddd"
    }
  }
);
...

If we check what our tab bar logged we see we have the navigation state in navigation.state which also holds the routes. There's also the renderIcon function, onTabPress and lots of other stuff we might need. Also we notice how the tabBarOptions we set in the router config get injected as props to our component.

Now we can start coding our tab bar. To begin, let's try to recreate the default tab bar. We'll set some styling on the container to layout the tab buttons in a row and render a tab button for each route. We can use the renderIcon function to render the correct icons - digging around through the source showed it expects an object of shape { route, focused, tintColor }. We add the onPress handlers, and the accessibility labels and voila - we have the default tab bar.

/* /src/components/TabBar.js */

import React from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";

const S = StyleSheet.create({
  container: { flexDirection: "row", height: 52, elevation: 2 },
  tabButton: { flex: 1, justifyContent: "center", alignItems: "center" }
});

const TabBar = props => {
  const {
    renderIcon,
    getLabelText,
    activeTintColor,
    inactiveTintColor,
    onTabPress,
    onTabLongPress,
    getAccessibilityLabel,
    navigation
  } = props;

  const { routes, index: activeRouteIndex } = navigation.state;

  return (
    <View style={S.container}>
      {routes.map((route, routeIndex) => {
        const isRouteActive = routeIndex === activeRouteIndex;
        const tintColor = isRouteActive ? activeTintColor : inactiveTintColor;

        return (
          <TouchableOpacity
            key={routeIndex}
            style={S.tabButton}
            onPress={() => {
              onTabPress({ route });
            }}
            onLongPress={() => {
              onTabLongPress({ route });
            }}
            accessibilityLabel={getAccessibilityLabel({ route })}
          >
            {renderIcon({ route, focused: isRouteActive, tintColor })}

            <Text>{getLabelText({ route })}</Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

export default TabBar;

Here's how it looks:

Now we know we have the flexibility to create our own tab bar, so we can start actually extending it. We'll use react-native-pose to create an animated view that is going to highlight the active route - let's call this view the spotlight.

First we can remove the label. Then we add an absolute view behind the tab bar that will hold the spotlight. We calculate the offsets for the spotlight using the Dimensions API.

/* /src/components/TabBar.js */

import posed from "react-native-pose";

const windowWidth = Dimensions.get("window").width;
const tabWidth = windowWidth / 4;
const SpotLight = posed.View({
  route0: { x: 0 },
  route1: { x: tabWidth },
  route2: { x: tabWidth * 2 },
  route3: { x: tabWidth * 3 }
});

...
const S = StyleSheet.create({
  /* ... */
  spotLight: {
    width: tabWidth,
    height: "100%",
    backgroundColor: "rgba(128,128,255,0.2)",
    borderRadius: 8
  }
});

  /* ... */


    <View style={S.container}>
      <View style={StyleSheet.absoluteFillObject}>
        <SpotLight style={S.spotLight} pose={`route${activeRouteIndex}`} />
      </View>

      {routes.map((route, routeIndex) => {
        /* ... */
      }}
    </View>

Here's how it looks:

Note that we never specified the duration and the behavior of the animation. Pose takes care of this for use with reasonable defaults.

Now we'll add some scaling to the active icon. Let's create another posed View.

/* /src/components/TabBar.js */

...

const Scaler = posed.View({
  active: { scale: 1.25 },
  inactive: { scale: 1 }
});

...

Now we can wrap the icon in our Scaler component like this.

/* /src/components/TabBar.js */

<Scaler style={S.scaler} pose={isRouteActive ? "active" : "inactive"}>
  {renderIcon({ route, focused: isRouteActive, tintColor })}
</Scaler>

We get this effect.

Our tab bar is beginning to look pretty good. All that's left to do is polish it up a bit, change the color scheme, tweak our spotlight and our component is completed.

Now, there are things we could improve here. For example, the current implementation assumes there will always be 4 screens in the tab navigator, the spotlight color is hardcoded in the tab bar component, and the styling should be made extensible through the tabBarOptions config on the router, but I'll leave that out for now.

Full source code for the TabBar component

/* /src/components/TabBar.js */

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Dimensions
} from "react-native";
import posed from "react-native-pose";

const windowWidth = Dimensions.get("window").width;
const tabWidth = windowWidth / 4;
const SpotLight = posed.View({
  route0: { x: 0 },
  route1: { x: tabWidth },
  route2: { x: tabWidth * 2 },
  route3: { x: tabWidth * 3 }
});

const Scaler = posed.View({
  active: { scale: 1.25 },
  inactive: { scale: 1 }
});

const S = StyleSheet.create({
  container: {
    flexDirection: "row",
    height: 52,
    elevation: 2,
    alignItems: "center"
  },
  tabButton: { flex: 1 },
  spotLight: {
    width: tabWidth,
    height: "100%",
    justifyContent: "center",
    alignItems: "center"
  },
  spotLightInner: {
    width: 48,
    height: 48,
    backgroundColor: "#ee0000",
    borderRadius: 24
  },
  scaler: { flex: 1, alignItems: "center", justifyContent: "center" }
});

const TabBar = props => {
  const {
    renderIcon,
    activeTintColor,
    inactiveTintColor,
    onTabPress,
    onTabLongPress,
    getAccessibilityLabel,
    navigation
  } = props;

  const { routes, index: activeRouteIndex } = navigation.state;

  return (
    <View style={S.container}>
      <View style={StyleSheet.absoluteFillObject}>
        <SpotLight style={S.spotLight} pose={`route${activeRouteIndex}`}>
          <View style={S.spotLightInner} />
        </SpotLight>
      </View>

      {routes.map((route, routeIndex) => {
        const isRouteActive = routeIndex === activeRouteIndex;
        const tintColor = isRouteActive ? activeTintColor : inactiveTintColor;

        return (
          <TouchableOpacity
            key={routeIndex}
            style={S.tabButton}
            onPress={() => {
              onTabPress({ route });
            }}
            onLongPress={() => {
              onTabLongPress({ route });
            }}
            accessibilityLabel={getAccessibilityLabel({ route })}
          >
            <Scaler
              pose={isRouteActive ? "active" : "inactive"}
              style={S.scaler}
            >
              {renderIcon({ route, focused: isRouteActive, tintColor })}
            </Scaler>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

export default TabBar;

And the router config

/* /src/router/router.js */

...

const TabNavigator = createBottomTabNavigator(
  /* screen config ommited */,
  {
    tabBarComponent: TabBar,
    tabBarOptions: {
      activeTintColor: "#eeeeee",
      inactiveTintColor: "#222222"
    }
  }
);

...