Forem: Santiago Ferreira

Responsive UX Design with React Native Reflect (Part 4)

Santiago Ferreira — Wed, 15 Jul 2020 12:16:00 +0000

Responsive UX Design with React Native Reflect (Part 4)

Description

The following tutorial explains step by step how to create a responsive photo album app with React Native and React Native Reflect that works on Web and Native devices.

Our photo album app will display images in a grid with variable number of columns, image aspect ratio, grid separation, etc. all in a responsive manner. We'll also create several responsive, theme-based UI components, including conditional rendering based on screen size.

This is a tutorial series, you need to complete Part 3 to be able to continue from here

Conditional Content

When there is no search selected, our UI looks quite empty on larger screens. Let's add a fixed full size image below the search buttons only on larger screens. On smaller screens we won't show the fixed image since the buttons are taking most of the screen space.

React Native Images require explicit width and height values. To take care of this, we'll create a new component (FullWidthImage) for rendering our full width image. FullWidthImage will determine it's width from it's parent component and it's height by dividing its width by an aspect ratio value.

`src/FullWidthImage.tsx`:

import React, { useState } from "react";
import { View, Image, LayoutChangeEvent } from "react-native";

type FullWidthImageProps = { uri: string; aspectRatio: number };

/**
 * Renders full width image by inferring its width from the Image's parent
 * component and its height using an aspect ratio value.
 */
export default function FullWidthImage({
  uri,
  aspectRatio = 1,
}: FullWidthImageProps) {
  const [width, setWidth] = useState(0);

  // set Image's width to the width of its parent component
  const onLayout = (obj: LayoutChangeEvent) =>
    setWidth(obj.nativeEvent.layout.width);

  return (
    <View onLayout={onLayout}>
      <Image style={{ width, height: width / aspectRatio }} source={{ uri }} />
    </View>
  );
}

Now, add the following lines to App.tsx, to use the new component we created and to add the logic to display our full width image only on larger screens.

import FullWidthImage from "./src/FullWidthImage";

const COVER_IMAGE_URI =
  "https://images-assets.nasa.gov/image/0700064/0700064~medium.jpg";

We can very easily create conditional rendered components using Reflect responsive attrs. Below, add attrs.displayHomeImg: [false, true] which will be false on smaller screens and true on larger screens.

  const { attrs, styles } = useStyled({
    ...
    attrs: {
      ...
      // only show cover image on small screens
      displayHomeImg: [false, true],
    },
  });

Then, let's use our newly created attrs.displayHomeImg value on our App's render() method.

return (
  <ThemeProvider value={theme}>
    <SafeAreaView>
      <Container>
        <SearchTerms onChange={createQuery} />
        {(() => {
          if (isLoading) return <MyActivityIndicator />;

          // display cover image only on larger screens when there is no
          // other data to display
          if (data.length === 0 && attrs.displayHomeImg)
            return (
              <FullWidthImage aspectRatio={16 / 9} uri={COVER_IMAGE_URI} />
            );

          return (
            <ImageGrid
              data={data}
              numColumns={attrs.numColumns}
              aspectRatio={attrs.imageAspectRatio}
              gridGap={styles.gridGap.margin as number}
            />
          );
        })()}
      </Container>
    </SafeAreaView>
  </ThemeProvider>
);

Your App should look like this:

Navigation Bar

Next, let's create a dummy navigation bar with a logo and some other elements. Add the following lines to App.tsx

import { Ionicons } from "@expo/vector-icons";

const NavBar = styled(View, {
  flexDirection: "row",
  alignItems: "center",
  justifyContent: "space-between",
  backgroundColor: "white",
  height: 7, // theme.sizes[7] = 64
  borderWidth: 0, // theme.borderWidths[0] = 1
  borderColor: "lightGray", // theme.colors["lightGray"] = "#EAEBEE"
  marginBottom: 4, // theme.space[4] = 16
  paddingLeft: 4, // etc.
  paddingRight: 5,
  shadowColor: "black",
  shadowOffset: { width: 0, height: 1 },
  shadowOpacity: 0.3,
  shadowRadius: 8,
  elevation: 1,
});

  return (
    <ThemeProvider value={theme}>
      <SafeAreaView>
        <NavBar>
          <Ionicons name="md-planet" size={32} color="black" />
          <Ionicons name="md-menu" size={32} color="black" />
        </NavBar>
        ...
    </ThemeProvider>

Notice that <NavBar> renders its shadows below and above itself which looks bad on some mobile devices because of the top spacing created by <SafeAreaView>. One way to fix this is by using react-native-safe-area-context instead of SafeAreaView.

To get native links working, install react-native-safe-area-context with expo:

expo install react-native-safe-area-context@latest

NOTE: react-native-safe-area-context was having some issues for me with Expo 37, after I upgraded my Expo app to 38.0.0, the installation worked just fine.

Then, replace the following lines in App.tsx

Remove SafeAreView, we'll use imports from react-native-safe-area-context insted:

import { View, ActivityIndicator } from "react-native";
...
import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from "react-native-safe-area-context";

Create a more complex NavBar component that applies shadows to a Wrap wrapper component and compensates for the top inset spacing with an empty View component. Read the comments in the code below for more info:

const NavBar = ({ children }) => {
  const insets = useSafeAreaInsets();

  const Bar = styled(View, {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "white",
    // theme.sizes[7] = 64
    height: 7,
    // theme.borderWidths[0] = 1
    borderWidth: 0,
    // since theme.borderWidths[0] is 1, we can use "px" suffix to ignore the
    // theme. "0px" gets gets converted to 0 (number)
    borderTopWidth: "0px",
    // theme.colors["lightGray"] = "#EAEBEE"
    borderColor: "lightGray",
    paddingLeft: 4,
    paddingRight: 5,
  });

  const Wrap = styled(View, {
    // smaller screens: theme.space[2] = 4
    // larger  screens: theme.space[4] = 16
    marginBottom: [1, 4],
    shadowColor: "black",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: [0.2, 0.3],
    shadowRadius: [3, 10],
    backgroundColor: "white",
    elevation: [0.2, 0.8],
  });

  return (
    <Wrap>
      <View style={{ height: insets.top }} />
      <Bar>{children}</Bar>
    </Wrap>
  );
};

Let's adjust some other style values to make our app look better:

const Container = styled(View, {
  // small  screens: 2 -> theme.space[2] = 4
  // medium screens: 7 -> theme.space[7] = 64
  // medium screens: 8 -> theme.space[9] = 128
  marginRight: [2, 7, 8],
  marginLeft: [2, 7, 8],
});

const SearchTermsWrap = styled(View, {
  paddingBottom: [0, 4],
});

Finally, let's update our main render() method:

return (
  <ThemeProvider value={theme}>
    <SafeAreaProvider>
      <NavBar>
        <Ionicons name="md-planet" size={32} color="black" />
        <Ionicons name="md-menu" size={32} color="black" />
      </NavBar>
      <Container>
        <SearchTermsWrap>
          <SearchTerms onChange={createQuery} />
        </SearchTermsWrap>
        ...
      </Container>
    </SafeAreaProvider>
  </ThemeProvider>
);

Your app should like like this:

The End

Hope you enjoyed working with Reflect. If you decide to use it in your projects, have questions or feedback, or just want to say hello, please write a comment below!

Responsive UX Design with React Native Reflect (Part 3)

Santiago Ferreira — Thu, 02 Jul 2020 09:05:05 +0000

Responsive UX Design with React Native Reflect (Part 3)

Description

The following tutorial explains step by step how to create a responsive photo album app with React Native and React Native Reflect that works on Web and Native devices.

This is a tutorial series, you need to complete Part 2 to be able to continue from here

Theming

On Part 2 of this tutorial series we finished building an image grid component with responsive number of columns, grid spacing and aspect ratio. On Part 3 we will add the option to query different images and create theme-based, responsive components using Reflect's styled() method.

Add the following lines to our App() component and look at the logged output.

import { useStyled, defaultTheme } from "react-native-reflect";
console.log(defaultTheme);

Notice the following properties of defaultTheme:

breakpoints: screen width dimensions at which responsive values change (an abbreviated way to define media queries).
sizes: theme values for width, height, etc.
space: theme values for padding, maring, etc.
You get an idea of what the other properties are for. A complete guide to Reflect's theme can be found here: Reflect / Theme

We'll create our own theme object by extending defaultTheme and use it with ThemeProvider to set a global theme for our application. Modify App.tsx as follows:

import { useStyled, defaultTheme, ThemeProvider } from "react-native-reflect";

const theme: Theme = {
  ...defaultTheme,
  colors: { lightGray: "#EAEBEE", highlight: "#E9F0FE" },
  space: [0, 2, 4, 8, 16, 20, 32, 64, 128, 256],
  sizes: [0, 2, 4, 8, 16, 20, 32, 64, 128, 256],
  radii: [0, 15, 30],
};

Finally, wrap the return value of App() with <ThemeProvider value={theme}:

return (
  <ThemeProvider value={theme}>
    ...
  </ThemeProvider>
);

Now, we'll be able to access our theme from Reflect's styled() or useStyled() methods. For example if we create a component using const Container = styled(View, { padding: 2}), the value 2 of padding will be interpreted as as an index of theme.space array, as follows:theme.space[2] which is equal to 4.

Extending App's Functionality and UX

So far our app is displaying images based on a fixed query. Let's extend it by providing various predefined search queries. The new search queries will be rendered as buttons, once we tap on a button, the search query will update, the images will be rendered, and the rest of the buttons will hide. After we tap the active button again, the search query will clear and all the other buttons will show again.

This is how our app will look after we add the search terms buttons:

On Web:

On Mobile:

As you can see from the screen recordings above, we'll also make our buttons layout responsive. They will display as single full width rows (flexDirection: "columns") on smaller screens and as wrapped boxes on larger screens (flexDirection: "row", flexWrap: "wrap")

To style these new components we'll use Reflect's styled() function. Let's get started!

Create a new file: src/SearchTerms.tsx, add the following lines to it, and follow the comments in the code for an explantion of the concepts and methods used.

Container is the simplest component we are creating using Reflect's styled().

Button is a more complex component, it takes an active prop which changes it's color, an onPress callback and a title. When creating more complex components with styled(), just wrap it with a functional component and add all the necessary logic, composition, etc. there.

`src/SearchTerms.tsx:`

import React, { useState, useEffect } from "react";
import _ from "lodash";
import { Text, View, TouchableOpacity } from "react-native";
import { styled } from "react-native-reflect";

const SEARCH_TERMS = [
  "Milky Way",
  "Andromeda",
  "Antennae Galaxies",
  "Black Eye Galaxy",
  "Butterfly Galaxies",
  "Cartwheel Galaxy",
  "Fireworks Galaxy",
  "Sombrero Galaxy",
  "Cigar Galaxy",
  "Sculptor Galaxy",
  "Sunflower Galaxy",
];

type OnPress = () => void;
type ButtonProps = { title: string; onPress: OnPress; active: boolean };
type SearchTermsProps = { onChange: (term: string) => void };

/**
 * Renders search terms buttons as follows:
 * - smaller screens: full width columns (one search term per column)
 * - larger  screens: wrapped rows (search termns next to each other in a row)
 */
const Container = styled(View, {
  // flex: 1,
  // themed value -> 3 -> theme.space[3] = 8
  marginTop: 3,
  // "column" on smaller screens, "row" on larger screens
  flexDirection: ["column", "row"],
  // "nowrap" on smaller screens, "wrap" on larger screens
  flexWrap: ["nowrap", "wrap"],
});

/**
 * Renders single search term item as a styled TouchableOpacity component.
 *
 * Button style values are responsive and theme-based, look at
 * comments below for more info
 */
const Button = ({ title, onPress, active }: ButtonProps) => {
  const Styled = styled(TouchableOpacity, {
    // themed value -> 5 -> theme.space[5] = 20
    padding: 5,
    // smaller screens: 0 -> no marginRight, since button will be full width
    // larger  screens: themed value -> 3 -> theme.space[3] = 8
    marginRight: [0, 3],
    marginBottom: 3,
    borderRadius: 1,
    borderWidth: 0,
    borderColor: "lightGray",
    backgroundColor: active ? "highlight" : undefined,
  });

  return (
    <Styled onPress={onPress}>
      <Text>{title}</Text>
    </Styled>
  );
};

/**
 * Renders search terms as a list of buttons.
 * - Tapping on a button, selects it and hides all other buttons
 * - Tapping on a selected button, de-selects it and shows all other buttons
 * - onChange(term) gets called on term selection updates with the updated term
 */
export default function SearchTerms({ onChange }: SearchTermsProps) {
  const [selected, setSelected] = useState(-1); // index of selected search term

  const onPress = (index: number) => {
    if (selected > -1) return setSelected(-1); // reset selection
    setSelected(index); // set selection
  };

  useEffect(() => {
    // onChange is called with the selected term or "" if no term is selected
    onChange(selected < 0 ? "" : SEARCH_TERMS[selected]);
  }, [selected]);

  // <  0 will render all search terms
  // >= 0 will render only selected term
  const renderData = selected < 0 ? SEARCH_TERMS : [SEARCH_TERMS[selected]];

  return (
    <Container>
      {_.map(renderData, (title, index) => (
        <Button
          title={title}
          onPress={() => onPress(index)}
          active={selected > -1}
          key={index}
        />
      ))}
    </Container>
  );
}

Now, replace the contents of App.tsx with the following. Again, following the comments in the code for the necessary explanations.

`App.tsx`:

import React, { useEffect, useState } from "react";
import { View, SafeAreaView, ActivityIndicator } from "react-native";
import Axios from "axios";
import {
  styled,
  useStyled,
  defaultTheme,
  ThemeProvider,
  Theme,
} from "react-native-reflect";

import ImageGrid from "./src/ImageGrid";
import SearchTerms from "./src/SearchTerms";

const theme: Theme = {
  ...defaultTheme,
  colors: { lightGray: "#EAEBEE", highlight: "#E9F0FE" },
  space: [0, 2, 4, 8, 16, 20, 32, 64, 128, 256],
  sizes: [0, 2, 4, 8, 16, 20, 32, 64, 128, 256],
  radii: [0, 15, 30],
};

// Items used by ImageGrid, contains list of images.
type Items = { links: [{ href: string }] }[];

// Data returned by HTTP request
type AxiosData = {
  collection: {
    items: Items;
  };
};

const Container = styled(View, {
  // small  screens: 2 -> theme.space[2] = 4
  // medium screens: 7 -> theme.space[7] = 64
  // medium screens: 9 -> theme.space[9] = 256
  marginRight: [2, 7, 9],
  marginLeft: [2, 7, 9],
});

// marginTop: 7 = theme.space[7] = 64
const MyActivityIndicator = styled(ActivityIndicator, { marginTop: 7 });

export default function App() {
  const [isLoading, setLoading] = useState(false);
  const [data, setData] = useState<Items>([]);
  const [query, setQuery] = useState("");

  // Create and set search query using terms argument
  const createQuery = (terms: string) => {
    if (!terms) return setQuery("");

    const encodeTerms = terms.replace(/\s/g, "%20");
    setQuery(
      `https://images-api.nasa.gov/search?q=${encodeTerms}&media_type=image`
    );
  };

  // Get our data
  useEffect(() => {
    if (!query) {
      setData([]);
      setLoading(false);
      return;
    }

    setLoading(true);
    Axios.get<AxiosData>(query)
      .then(({ data }) => {
        setData(data.collection.items);
      })
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, [query]);

  // Responsive values
  const { attrs, styles } = useStyled({
    styles: {
      // small  screens: 2 -> theme.space[2] = 4
      // medium screens: 3 -> theme.space[7] = 8
      // medium screens: 4 -> theme.space[9] = 16
      gridGap: { margin: [2, 3, 4] },
    },
    attrs: {
      // 1 on small screens, 3 on medium screens, 4 on large screens
      numColumns: [1, 3, 4],
      // 4/3 on small screens, 1 on medium and large screens
      imageAspectRatio: [4 / 3, 1],
    },
  });

  // After loading is done "isLoading", we render our images using <ImageGrid/>
  return (
    <ThemeProvider value={theme}>
      <SafeAreaView>
        <Container>
          <SearchTerms onChange={createQuery} />
          {isLoading ? (
            <MyActivityIndicator />
          ) : (
            <ImageGrid
              data={data}
              numColumns={attrs.numColumns}
              aspectRatio={attrs.imageAspectRatio}
              gridGap={styles.gridGap.margin as number}
            />
          )}
        </Container>
      </SafeAreaView>
    </ThemeProvider>
  );
}

Launch your application on a native device (or simulator) and on a web browser. The app you should look like the screen recordings above.

That's all for Part 3! in this section we defined a global theme object for our application and created several components with styled() that derive their styling values from the theme. We also creatd different layouts for smaller and larger screens, including conditional content that only gets rendered on larger screens.

Next Steps

On Part 4, we will finish creating our UI, we'll add a navigation bar, a better layout and improve the overall design of our app.

Responsive UX Design with React Native Reflect (Part 2)

Santiago Ferreira — Sat, 27 Jun 2020 11:03:16 +0000

Description

The following tutorial explains step by step how to create a responsive photo album app with React Native and React Native Reflect that works on Web and Native devices.

This is a tutorial series, you need to start from Part 1 to be able to continue from here

Time for Math!

Below is a sketch of all the math we need to make this work:

Our strategy for creating grid spacings is as follows:

Calculate exact image dimensions
Add marginBottom style to all images
Add marginRight style to all images, except the last images on rows

ImageGrid Component

Create a new file: src/ImageGrid.tsx with the following content:

import React, { useState } from "react";
import { FlatList, Image, LayoutChangeEvent } from "react-native";

type ImageGridProps = {
  data: any;
  numColumns: number;
  aspectRatio: number;
  gridGap: number;
};

type RenderItemProps = {
  item: { links: [{ href: string }] };
  index: number;
};

export default function ImageGrid({
  data,
  numColumns = 3,
  aspectRatio = 1,
  gridGap = 0,
}: ImageGridProps) {
  const [flatListWidth, setFlatListWidth] = useState(0);

  // width of all vertical gridGaps in a row
  const gridGaps = gridGap * (numColumns - 1);
  const imageWidth = (flatListWidth - gridGaps) / numColumns;
  const imageHeight = imageWidth / aspectRatio;

  const onLayout = (obj: LayoutChangeEvent) => {
    const width = obj.nativeEvent.layout.width;
    if (width === flatListWidth) return;

    setFlatListWidth(width);
  };

  const renderItem = ({ item, index }: RenderItemProps) => {
    const isLastImageInRow = (index + 1) % numColumns === 0;
    const marginRight = isLastImageInRow ? 0 : gridGap;
    const marginBottom = gridGap;

    return (
      <Image
        style={{
          width: imageWidth,
          height: imageHeight,
          marginRight,
          marginBottom,
        }}
        source={{ uri: item.links[0].href }}
      />
    );
  };

  return (
    <FlatList
      data={data}
      numColumns={numColumns}
      // NOTE: we need to change FlatList's key to be able to change
      // numColumns on the fly. This is a React Native specification.
      key={numColumns}
      onLayout={onLayout}
      keyExtractor={(_item, index) => index.toString()}
      renderItem={renderItem}
    />
  );
}

Note that the code here is mostly what we had in App.tsx with the addition of the calculations for grid spacing.

Updated App.tsx

We'll also need to update App.tsx as follows:

import React, { useEffect, useState } from "react";
import { SafeAreaView, ActivityIndicator } from "react-native";
import Axios from "axios";
import { useStyled } from "react-native-reflect";

import ImageGrid from "./src/ImageGrid";

// Items used by ImageGrid, contains list of images.
type Items = { links: [{ href: string }] }[];

// Data returned by HTTP request
type AxiosData = {
  collection: {
    items: Items;
  };
};

const GET_GALAXY_IMAGES =
  "https://images-api.nasa.gov/search?q=spiral%20galaxies&media_type=image";

export default function App() {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState<Items>([]);

  // Get our data
  useEffect(() => {
    Axios.get<AxiosData>(GET_GALAXY_IMAGES)
      .then(({ data }) => {
        setData(data.collection.items);
      })
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

  // Responsive values
  const { attrs } = useStyled({
    attrs: {
      // 1 on small screens, 3 on medium screens, 4 on large screens
      numColumns: [1, 3, 4],
      // 4/3 on small screens, 1 on medium and large screens
      imageAspectRatio: [4 / 3, 1],
    },
  });

  // After loading is done "isLoading", we render our images using <ImageGrid/>
  return (
    <SafeAreaView>
      {isLoading ? (
        <ActivityIndicator />
      ) : (
        <ImageGrid
          data={data}
          numColumns={attrs.numColumns}
          aspectRatio={attrs.imageAspectRatio}
          gridGap={20}
        />
      )}
    </SafeAreaView>
  );
}

Your App should like like this:

Responsive Grid Spacing

Finally, let's make the grid spacing of our ImageGrid responsive. To do so, just define a new responsive array, gridGap, with useStyled():

const { attrs } = useStyled({
  attrs: {
    // 1 on small screens, 3 on medium screens, 4 on large screens
    numColumns: [1, 3, 4],
    // 4/3 on small screens, 1 on medium and large screens
    imageAspectRatio: [4 / 3, 1],
    // 5 on small screens, 10 on medium screens, 20 on large screens
    gridGap: [5, 10, 20],
  },
});

And pass the value to ImageGrid component:

<ImageGrid
  data={data}
  numColumns={attrs.numColumns}
  aspectRatio={attrs.imageAspectRatio}
  gridGap={attrs.gridGap}
/>

Your App should look like this:

That's all for Part 2! So far we have a created a responsive Image gallery in React Native that adapts to different screen sizes by providing three responsive attribute values: numColumns, imageAspectRatio and gridGap. Combining different values for these three attributes gives us a lot of flexibility!

Next Steps

On Part 3, we will create a fully responsive UI, including page layouts, branding elements, etc. Stay tuned!

Responsive UX Design with React Native Reflect (Part 1)

Santiago Ferreira — Fri, 26 Jun 2020 10:39:14 +0000

Description

The following tutorial explains step by step how to create a responsive photo album app with React Native and React Native Reflect that works on Web and Native devices.

Create a new Expo app

Create a new Expo app, choosing "blank (TypeScript)" option when asked.

expo init photo-album-tutorial
# ? Choose a template: expo-template-blank-typescript

cd photo-album-tutorial
yarn start
# Run Expo app on web and iOS (or Android). I'll be using iOS for this
# tutorial, but if you prefer, you can follow along using Android instead.
#
# Press 'w' to open web app
# Press 'i' to open iOS app (or 'a' for Android)

Get some galactic photos!

We'll use axios for making HTTP requests and getting images from NASA's public API

yarn add axios

Replace the contents of App.tsx with the following and follow the comments in the code for an explanation of what we're doing.

import React, { useEffect, useState } from "react";
import { ActivityIndicator, FlatList, SafeAreaView, Image } from "react-native";
import Axios from "axios";

// Items used by FlatList, contains list of images.
type Items = { links: [{ href: string }] }[];

// Data returned by HTTP request
type AxiosData = {
  collection: {
    items: Items;
  };
};

const GET_GALAXY_IMAGES =
  "https://images-api.nasa.gov/search?q=spiral%20galaxies&media_type=image";

export default function App() {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState<Items>([]);

  // Get our data
  useEffect(() => {
    Axios.get<AxiosData>(GET_GALAXY_IMAGES)
      .then(({ data }) => {
        setData(data.collection.items);
      })
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

  // After loading is done "isLoading", we render a FlatList with the data that
  // was set on the success axios callback above "setData(...)"
  //
  // Then we render each of our images inside FlatList's renderImage prop
  return (
    <SafeAreaView>
      {isLoading ? (
        <ActivityIndicator />
      ) : (
        <FlatList
          data={data}
          keyExtractor={(_item, index) => index.toString()}
          renderItem={({ item }) => (
            <Image
              style={{ height: 100, width: 100 }}
              source={{ uri: item.links[0].href }}
            />
          )}
        />
      )}
    </SafeAreaView>
  );
}

Your App should like like this:

Responsive Number of Columns

Let's make our gallery responsive as follows:

Display single column list of images on small screens
Display three columns image grid on medium size screens
Display four columns image grid on large screens

To accomplish this we'll use react-native-reflect library.

yarn add react-native-reflect

React Native Reflect defines a useStyled() hook that let's us easily define responsive props. Add the following to App.tsx:

import { useStyled } from "react-native-reflect";

Inside App() function:

const { attrs } = useStyled({
  attrs: {
    numColumns: [1, 3, 4],
  },
});

Then, use attrs.numColumns responsive prop with FlatList

<FlatList
  data={data}
  numColumns={attrs.numColumns}
  // NOTE: we need to change FlatList's key to be able to change
  // numColumns on the fly. This is a React Native specification.
  key={attrs.numColumns}
  keyExtractor={(_item, index) => index.toString()}
  renderItem={({ item }) => (
    <Image
      style={{ height: 100, width: 100 }}
      source={{ uri: item.links[0].href }}
    />
  )}
/>

Voilà! Resize your browser window and/or test with different native devices to see how the number of columns update with different screen widths.

Fit Images to Screen's Width

So far, we have renderd our images with a fixed 100x100 width and height dimensions. Let's change this such as our gallery takes 100% of the screen's width and the images inside stretch to fit. Keep in mind that for this tutorial, we'll display all images with the same aspect ratio, so all our calculations are based on this assumption.

Moreover, as of the date of writing this tutorial, React Native Image component requires width and height explicit values. Because of this, we will calculate the actual dimensions of the images based on the number of columns and a customly assigned aspect ratio.

Our first step is to get FlatList's width using FlatList's onLayout prop.

Add the following to App() function:

// keep track of FlatList's width as screen resizes
const [flatListWidth, setFlatListWidth] = useState(0);

// Update FlatList's width
const onLayout = (obj: LayoutChangeEvent) => {
  const width = obj.nativeEvent.layout.width;

  // avoid unnecessary updates
  if (width === flatListWidth) return;

  setFlatListWidth(width);
};

Calculate image dimensions using an aspect ratio, the width of the FlatList and the number of columns. Try changing imageAspectRatio with values such as 16/9, 4/3, 3/4 etc.

const imageAspectRatio = 1;
const imageWidth = flatListWidth / attrs.numColumns;
const imageHeight = imageWidth / imageAspectRatio;

Add onLayout prop and update Image's style with calculated dimensions

<FlatList
  ...
  onLayout={onLayout}
  renderItem={({ item }) => (
    <Image
      style={{ width: imageWidth, height: imageHeight }}
      source={{ uri: item.links[0].href }}
    />
  )}
  ...
/>
)}

Your App should look like this:

Responsive Aspect Ratio

What about displaying images with different aspect ratios on different screen sizes? No problem, that's very easy with react-native-reflect! we just need to provide one more value to useStyled().

const { attrs } = useStyled({
  attrs: {
    numColumns: [1, 3, 4],
    // Aspect ration of 4 / 3 on smaller screens and 1 on larger screens
    imageAspectRatio: [4 / 3, 1],
  },
});

// DELETE LINE const imageAspectRatio = 1;
const imageWidth = flatListWidth / attrs.numColumns;
const imageHeight = imageWidth / attrs.imageAspectRatio;

And that's all for Part 1! So far we have created an image gallery that works on web and native devices. Our image gallery has responsive number of columns and image's aspect ratio. Cool!

Next Steps

On Part 2, we will add more options to our image gallery, such as spacing between images. We will also convert our image gallery into it's own component!

Forem: Santiago Ferreira

Responsive UX Design with React Native Reflect (Part 4)

Responsive UX Design with React Native Reflect (Part 4)

Description

Conditional Content

`src/FullWidthImage.tsx`:

Navigation Bar

The End

Links

Responsive UX Design with React Native Reflect (Part 3)

Responsive UX Design with React Native Reflect (Part 3)

Description

Theming

Extending App's Functionality and UX

`src/SearchTerms.tsx:`

`App.tsx`:

Next Steps

Links

Responsive UX Design with React Native Reflect (Part 2)

Description

Time for Math!

ImageGrid Component

Updated App.tsx

Responsive Grid Spacing

Next Steps

Links

Responsive UX Design with React Native Reflect (Part 1)

Description

Create a new Expo app

Get some galactic photos!

Responsive Number of Columns

Fit Images to Screen's Width

Responsive Aspect Ratio

Next Steps

Links

Forem: Santiago Ferreira

Responsive UX Design with React Native Reflect (Part 4)

Responsive UX Design with React Native Reflect (Part 4)

Description

Conditional Content

src/FullWidthImage.tsx:

Navigation Bar

The End

Links

Responsive UX Design with React Native Reflect (Part 3)

Responsive UX Design with React Native Reflect (Part 3)

Description

Theming

Extending App's Functionality and UX

src/SearchTerms.tsx:

App.tsx:

Next Steps

Links

Responsive UX Design with React Native Reflect (Part 2)

Description

Time for Math!

ImageGrid Component

Updated App.tsx

Responsive Grid Spacing

Next Steps

Links

Responsive UX Design with React Native Reflect (Part 1)

Description

Create a new Expo app

Get some galactic photos!

Responsive Number of Columns

Fit Images to Screen's Width

Responsive Aspect Ratio

Next Steps

Links

`src/FullWidthImage.tsx`:

`src/SearchTerms.tsx:`

`App.tsx`: