DEV Community: Jason Merino

How to Make an App With React Native IV: The Search Results Page

Jason Merino — Thu, 14 May 2020 00:00:00 +0000

Hi, and welcome to part four of our series on how to make an app with React Native! If you haven't been following along with parts one through three, I suggest you go back and get started there. You can read the first article in the series here. If you're ready for what comes next, let's dive in!

Creating the explore components

If you've been following along you will remember that we are building a stock photo browsing app with UI inspired by the Unsplash app for iOS. For your reference here are the home and search results screens of that app.

The first part that we're going to be working on today is the horizontally scrollable UI under the Explore heading. If you pull the content from right to left you will see a list of curated collections with a nice background image and the text for that collection.

The Pixabay API doesn't have an endpoint to pull collections from their data, but on the API documentation page, they have a list of categories that you can filter your image searches by. That part of the documentation looks like this.

So, the first thing we'll be doing based on this information is to store these categories in an array in our code. Create a file called constants.ts in the project root and define the categories in an array of objects. We'll add a text and image property to make it easy to render out the categories in the explore section. You will also notice that the image property in each of these objects requires the background image for each particular category. If you are writing the app from scratch as you go along you can download all the images from the repo and move them into your project.

// constants.ts

import { ICategoryItem } from "./types/categories.types"

export const categories: ICategoryItem[] = [
  { text: "Backgrounds", image: require("./images/backgrounds-category.jpg") },
  { text: "Fashion", image: require("./images/fashion-category.jpg") },
  { text: "Nature", image: require("./images/nature-category.jpg") },
  { text: "Science", image: require("./images/science-category.jpg") },
  { text: "Education", image: require("./images/education-category.jpg") },
  { text: "Feelings", image: require("./images/feelings-category.jpg") },
  { text: "Health", image: require("./images/health-category.jpg") },
  { text: "People", image: require("./images/people-category.jpg") },
  { text: "Religion", image: require("./images/religion-category.jpg") },
  { text: "Places", image: require("./images/places-category.jpg") },
  { text: "Animals", image: require("./images/animals-category.jpg") },
  { text: "Industry", image: require("./images/industry-category.jpg") },
  { text: "Computer", image: require("./images/computer-category.jpg") },
  { text: "Food", image: require("./images/food-category.jpg") },
  { text: "Sports", image: require("./images/sports-category.jpg") },
  {
    text: "Transportation",
    image: require("./images/transportation-category.jpg"),
  },
  { text: "Travel", image: require("./images/travel-category.jpg") },
  { text: "Buildings", image: require("./images/buildings-category.jpg") },
  { text: "Business", image: require("./images/business-category.jpg") },
  { text: "Music", image: require("./images/music-category.jpg") },
]

Along with this file, we'll need to create a category item type for use here and later when we render categories in the explore section. Add this code to a file at types/categories.types.ts

// types/categories.types.ts

export interface ICategoryItem {
  text: string
  image: number
}

Now that we have the categories in a safe place and some type definitions to go along with it, let's get to work on the explore component. Create a new file at components/explore.component.tsx. In this component, we'll be rendering the categories in a horizontal scrolling list. In that component add the following code.

// components/explore.component.tsx

import React from "react"
import { Text } from "./text.component"
import {
  TouchableWithoutFeedback,
  FlatList,
  StyleSheet,
  View,
  ImageBackground,
} from "react-native"
import { deviceWidth, space1, space2 } from "../theme/space"
import { useNavigation } from "@react-navigation/native"
import { categories } from "../constants"
import { SectionHeading } from "./section-heading.component"
import { ICategoryItem } from "../types/categories.types"

const styles = StyleSheet.create({
  container: {
    paddingLeft: space2,
  },
  category: {
    height: 145,
    width: deviceWidth - 4 * space1,
    marginRight: space1,
  },
  image: {
    borderRadius: space1,
    overflow: "hidden",
    width: "100%",
    flex: 1,
  },
  imageOverlay: {
    width: "100%",
    flex: 1,
    backgroundColor: "rgba(0, 0, 0, .4)",
    alignItems: "center",
    justifyContent: "center",
  },
})

export const Explore = () => {
  const navigation = useNavigation()

  const renderCategory = ({ item }: { item: ICategoryItem }) => {
    return (
      <View style={styles.category}>
        <ImageBackground source={item.image} style={styles.image}>
          <TouchableWithoutFeedback
            onPress={() =>
              navigation.navigate("Results", { category: item.text })
            }
          >
            <View style={styles.imageOverlay}>
              <Text color="light1" weight="bold">
                {item.text}
              </Text>
            </View>
          </TouchableWithoutFeedback>
        </ImageBackground>
      </View>
    )
  }

  return (
    <View>
      <SectionHeading>Explore</SectionHeading>
      <FlatList
        horizontal
        snapToAlignment="start"
        snapToInterval={deviceWidth - 3 * space1}
        decelerationRate="fast"
        showsHorizontalScrollIndicator={false}
        data={categories}
        renderItem={renderCategory}
        keyExtractor={category => category.text}
        contentContainerStyle={styles.container}
      />
    </View>
  )
}

Now that's a lot of code! Let's go over what we've added in the file above. In the main render section of the code, we're returning a SectionHeading and FlatList component. In the FlatList we are telling it to take the category list we just created and use that as the data for the list. With each category item in the categories array, we're going to render something with what is returned from the renderCategory function.

In the renderCategory function we simply return an item which uses the ImageBackground, TouchableWithoutFeedback, and View components from React Native as well as our own custom Text component which sets some defaults on the React Native Text component so the text all throughout the app is displayed in a standard manner in line with our style guide.

The ImageBackground component does exactly what it sounds like, it creates a background image for its child components. The TouchableWithoutFeedback component makes it so we can easily handle taps on each particular category item we're rendering. With the function we pass to the onPress prop we can call the navigation.navigate() function which we get from the useNavigation hook. Once we create the results screen, tapping on a category will push the results screen onto the navigation stack and pass it a category param to search the API with.

Note: if you aren't familiar with hooks, you should check out this great article on learning the basics of React hooks.

Another thing we should pay attention to are the properties we pass to the FlatList regarding snapping. The side-scrolling list of categories in the iOS Unsplash app shows the previous and next categories peeking onto the screen on either side of the focused category. To get this effect in our React Native app we need to tell the FlatList we are using a custom interval, which is the width of the category item, and that we want to have each item in the list snapToAlignment at the start of the item. The code for this is these two properties in the FlatList.

snapToAlignment="start"
snapToInterval={deviceWidth - 3 * space1}

Along with the addition of the Explore component we need to add a SectionHeading component at components/section-heading.component.tsx, which we will use in the Explore component and on the home screen later on.

// components/section-heading.component.tsx

import React, { FC } from "react"
import { Text } from "./text.component"
import { StyleSheet } from "react-native"
import { space2, space1 } from "../theme/space"

const styles = StyleSheet.create({
  heading: {
    padding: space2,
    paddingTop: space2,
    paddingBottom: space1,
  },
})

export const SectionHeading: FC = ({ children }) => {
  return (
    <Text weight="bold" size="large" style={styles.heading}>
      {children}
    </Text>
  )
}

We'll also need to add another entry for the space2 variable in the theme/space.ts file.

// theme/space.ts

import { Dimensions } from 'react-native';

export const deviceWidth = Dimensions.get('screen').width;

export const space1 = 10;
+ export const space2 = 20;

And we'll need to add another color to our theme/colors.ts file for a dark color to use in our custom Text component. We'll export the color individually, but we'll also create a default export which will export all of the colors so that in our Text component we can use TypeScript's keyof typeof syntax to make sure our text color options are always in sync with the default export of our theme/colors.ts file.

Make these changes in your theme/colors.ts file.

// theme/colors.ts

export const light1 = '#fff';
+ export const dark3 = '#000';

+ export default {
+ light1,
+ dark3,
+ };

And finally, we'll add the custom Text component in a new file at components/text.component.tsx. This component only configures a couple of sizes and font weights at this point, but there will be more we'll add later.

// components/text.component.tsx

import React, { FC } from "react"
import { Text as RNText, TextProps, TextStyle } from "react-native"
import colors from "../theme/colors"

const sizes = {
  regular: 15,
  large: 17,
}

interface IProps extends TextProps {
  weight?:
    | "normal"
    | "bold"
    | "100"
    | "200"
    | "300"
    | "400"
    | "500"
    | "600"
    | "700"
    | "800"
    | "900"
  color?: keyof typeof colors
  size?: keyof typeof sizes
}

export const Text: FC<IProps> = props => {
  const { weight, color, size, ...textProps } = props
  const style: TextStyle[] = [
    {
      fontWeight: weight || "normal",
      color: colors[color || "dark3"],
      fontSize: sizes[size || "regular"],
    },
    props.style as TextStyle,
  ]

  return <RNText {...textProps} style={style} />
}

All we're doing in this file is setting up default styling for the text component so that we can get consistent text styles across the whole application. You'll notice that before we declare the style variable in the function component we pull out the weight, color, and size props. We want to make sure that we still provide a way to customize the React Native Text component with all the standard props, so after we pull out our custom props we spread the rest onto the RNText component. If you're confused about what's going on with separating out our props from the RNText component props, you can read about using the ES7 object rest operator to omit object properties.

Now that we have the explore section all put together, let's move on to hooking up the search results page.

Creating the search results page

The first thing we're going to do is to create a new file at screens/results.screen.tsx and inside it, we're going to write this code.

// screens/results.screen.tsx

import React, { FC, useEffect } from 'react';
import { Image } from '../components/image.component';
import { IPhoto } from '../types/photos.types';
import { FlatList } from 'react-native';
import { photos, searchPhotos } from '../stores/photo.store';
import { useRoute, RouteProp, useNavigation } from '@react-navigation/native';
import { RootStackParamList } from '../types/navigator.types';
import { Separator } from '../components/separator.component';
import { observer } from 'mobx-react';

export const Results: FC = observer(() => {
  const { params } = useRoute<RouteProp<RootStackParamList, 'Results'>>();
  const navigation = useNavigation();

  const renderPhoto = ({ item }: { item: IPhoto }) => {
    return <Image image={item} />;
  };

  useEffect(() => {
    if (params?.category) {
      navigation.setOptions({ title: params?.category });
      searchPhotos({
        category: params?.category,
        keyword: params?.category,
      });
    }
  }, []);

  return (
    <FlatList
      keyExtractor={(photo) => photo.id.toString()}
      data={photos[params?.category] || []}
      renderItem={renderPhoto}
      style={{ flex: 1 }}
      ItemSeparatorComponent={Separator}
    />
  );
});

Using React Navigation route params

The first new thing that we're going to run across in this screen is that we're making use of React Navigation's route params that get passed from one screen to the next. Remember when we called navigation.navigate('Results', { category: item.text }) in the explore component? Well, that second argument is the navigation param.

We need to be able to pass params between screens so that the screens are linked together in a way that's understandable to anyone using the app. So here, we've taken the category that has been tapped and we pass it through to the results screen.

Using the useRoute hook in the results screen we can pull out the params object and check to see if it has a category property in it.

Setting the screen header title

Another thing we need to do is to set the page title of the screen. Because this screen is going to be used for all category search results, the page title will need to be set dynamically. To do this, we'll call the navigation.setOptions() function and pass in the category as the title. We do this inside the callback function provided as the first argument to the useEffect hook and then pass an empty array as the second argument. Providing the second argument as an empty array makes it so that the code in the callback function is only run once each time the component mounts.

Searching the API based on keyword

Next, we also make a call the searchPhotos function and pass in the category as both the category and a keyword. We pass the category in as a keyword simply because, in my professional opinion, the search results from the Pixabay API seem to make a little more sense.

You may have noticed that the argument signature of this function looks different than the last time we saw it. We will have to do a little refactor to the code to handle the category as well as the keyword in an understandable way.

Update your searchPhotos() function in stores/photo.store.ts to look like this.

// stores/photo.store.ts

export const searchPhotos = async ({
  keyword,
  category,
}: {
  keyword?: string
  category?: string
}) => {
  let params = ""
  if (category) {
    params += `&category=${category.toLowerCase()}`
  }
  if (keyword) {
    params += `&q=${keyword}`
  }
  const url = `${BASE_URL}/?key=${Config.PIXABAY_API_KEY}&safesearch=true&per_page=4${params}`
  const response = await fetch(url)
  const data = await response.json()
  photos[keyword || "default"] = data.hits
}

And then also make sure your call to the searchPhotos() function in screens/home.screen.tsx reflects the argument signature changes we made. Basically all you have to do is pass in an empty object to appease TypeScript.

Refactoring the Image component

At this point, we also need to make some changes to the Image component we built in part three of this series. We're going to move the styles to make the image full width and the correct aspect ratio from the screens/home.screen.tsx file into the components/image.component.tsx file. We are also going to change the prop signature for the Image component so that it accepts an image prop in the form of the image payload that we get back from the Pixabay API.

Now our Image component should look like this.

// components/image.component.tsx

import React, { FC } from "react"
import { Image as Img, ImageStyle } from "react-native"
import { deviceWidth } from "../theme/space"
import { IPhoto } from "../types/photos.types"

interface IProps {
  image: IPhoto
}

export const Image: FC<IProps> = ({ image }) => {
  return (
    <Img
      source={{ uri: image.largeImageURL }}
      style={{
        width: "100%",
        height: (deviceWidth / image.imageWidth) * image.imageHeight,
      }}
    />
  )
}

After these changes to the Image component, we'll also need to adjust the code that renders the images in screens/home.screen.tsx. Make these changes to the renderPhoto function.

// screens/home.screen.tsx

   const renderPhoto = ({ item }: { item: IPhoto }) => (
- <Image
- key={item.id}
- uri={item.largeImageURL}
- style={{
- width: '100%',
- height: (deviceWidth / item.imageWidth) * item.imageHeight,
- }}
- />
+ <Image key={item.id} image={item} />
   );

Adding the Separator component

To make the list of images in the search results page match how all lists of images are separated in the Unsplash app, we'll create a Separator component to use on the search results screen as well as on the home screen later on. Create a file at components/separator.component.tsx and put place this code in it.

// components/separator.component.tsx

import React from "react"
import { View, StyleSheet } from "react-native"
import { light1 } from "../theme/colors"

const styles = StyleSheet.create({
  separator: {
    height: 1,
    backgroundColor: light1,
  },
})

export const Separator = () => {
  return <View style={styles.separator} />
}

Hooking the search results screen into the navigator

Now that we have the results screen all built out, we need to hook it into the navigator so that we can navigate to it. In our App.tsx file we'll need to make the following changes.

// App.tsx

  import 'mobx-react-lite/batchingForReactNative';
  import 'react-native-gesture-handler';
  import React from 'react';
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import { Home } from './screens/home.screen';
  import { Provider } from 'mobx-react';
+ import { Results } from './screens/results.screen';
+ import { RootStackParamList } from './types/navigator.types';

- const AppStack = createStackNavigator();
+ const AppStack = createStackNavigator<RootStackParamList>();

  export default function App() {
    return (
      <Provider>
        <NavigationContainer>
          <AppStack.Navigator>
            <AppStack.Screen
              options={{
                header: () => null,
              }}
              name="Home"
              component={Home}
            />
+ <AppStack.Screen name="Results" component={Results} />
          </AppStack.Navigator>
        </NavigationContainer>
      </Provider>
    );
  }

Here we import the results screen and render out an additional <AppStack.Screen /> entry. We also import a RootStackParamList interface which tells the router which screens take which params. This is needed for type safety when accessing the category param in the results screen.

The types/navigator.types.ts file which exports the RootStackParamList should look like this.

// types/navigator.types.ts

export type RootStackParamList = {
  Home: undefined
  Results: { category: string }
}

After these changes, we should be able to tap on a category in the horizontally scrolling list and then be pushed over to a new screen with the category name in the navigation bar and related images in the screen body.

At this point, we are mostly done!

Customizing the navigation header back button

To match the Unsplash iOS app we need to customize the navigation header's back button. Currently, we have the default iOS blue with a text label of "Home" for our back button. To get it to match the Unsplash app's back button we need to remove the text label and change the color to black. Here are the changes we need to make.

// App.tsx

+ import { dark3 } from './theme/colors';
...
- <AppStack.Navigator>
+ <AppStack.Navigator
+ screenOptions={{
+ headerBackTitleVisible: false,
+ headerTintColor: dark3,
+ }}
+ >
...

Final clean up

To match the style of the search results page a bit more we need to make a couple of other changes to the home screen. To get the explore section to scroll off the screen as we scroll down we'll need to move it into the ListHeaderComponent prop on the FlatList. In addition, we want our "New" section heading to match the "Explore" section heading above, so we'll add that in below the Explore component. Finally, we'll add a separator between each item in this FlatList as well.

  // screens.home.screen.tsx
  import React, { useEffect } from 'react';
  import { FlatList, StyleSheet, View, SafeAreaView } from 'react-native';
  import { photos, searchPhotos } from '../stores/photo.store';
  import { Image } from '../components/image.component';
  import { observer } from 'mobx-react';
  import { IPhoto } from '../types/photos.types';
  import { Explore } from '../components/explore.component';
+ import { SectionHeading } from '../components/section-heading.component';
+ import { Separator } from '../components/separator.component';

  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
  });

 export const Home = observer(() => {
   useEffect(() => {
     searchPhotos({});
   }, []);

   const renderPhoto = ({ item }: { item: IPhoto }) => (
     <Image key={item.id} image={item} />
   );

   return (
     <SafeAreaView style={styles.container}>
- <Explore />
       <FlatList
         keyExtractor={(photo) => photo.id.toString()}
         data={photos.default}
         style={styles.container}
         renderItem={renderPhoto}
+ ListHeaderComponent={
+ <>
+ <Explore />
+ <SectionHeading>New</SectionHeading>
+ </>
+ }
+ ItemSeparatorComponent={Separator}
       />
     </SafeAreaView>
   );
 });

And that's it! Now your app should look something like this. Congrats! You did it. 🎉

Conclusion

Thanks for following along as we added the explore section and search results page to our React Native app.

To see the changes between part three of this series and this part you can check out the diff on Github.

You can also see the entire codebase so far by viewing the branch on Github.

Make sure to stay tuned for part five where we build the image detail gallery!

Has there been something in this article that didn't make sense? Let's connect on Twitter, I'd love to help you along on your React Native journey!

How to Make an App With React Native: API Integration and Mobx

Jason Merino — Mon, 04 May 2020 00:00:00 +0000

This is part three of a series on learning how to build a stock photo browsing app in React Native. If you haven't read the previous 2 articles in this series I suggest you go through those first. Here's the post on getting started with React Native.

So far we've been able to create a new React Native project and add navigation to the app. This article is where we dive into some features that are a little more interesting: API integration and data management with Mobx. Hopefully, through this series of articles, you can see how simple it is to create an app with React Native and are inspired to create your own.

Let's dive into what's next!

Register as a Pixabay user

The first thing we're going to do is to register as a Pixabay user so that we can get an API key which will allow us to access the Pixabay API. If you aren't familiar with API security, there are many different ways to secure your API. An API key is probably the most simple measure an API creator can take to secure their API and is used for both rate-limiting (only allowing your API key to make a certain amount of requests in a set time) or revoking API access altogether. If you aren't familiar with APIs in general, you can get a basic overview by watching this video explaining what an API is.

To register as a Pixabay user visit the Pixabay API documentation page and click on the Join link in the header. After going through the registration flow go back to the API documentation page, scroll down to the "Search Images" heading and you should see your API key populated on the page with a green background. That section of the documentation page should look something like this.

Adding your API key to your app's config

Now that we have our API key we need to store it somewhere in our application. We could hard code it into our URL string when we make our request to the API but that's not a great practice. We shouldn't keep keys of any type in our application code because it makes handling different environments difficult and because once some code is stored in Git it's there for as long as the repo exists. For more information about this best practice check out this article about keeping your configuration outside of your app's codebase.

Installing the react-native-config module

To store your API key we'll be using the react-native-config module. The installation steps are simple for this module. To install the module to your project run this command in your terminal.

$ npm install react-native-config

That will take care of adding the module to your project and updating your package.json file to include react-native-config every time you install Node modules. Next, to get it added to the Xcode project we need to install the cocoapods for this dependency. Run these commands in your terminal to take care of that step.

$ cd ios
$ pod install
$ cd ..

Creating your configuration file

After you've successfully installed the react-native-config module you will need to rebuild the app for the simulator to pick up those changes. But first, let's create the file that holds your app's configuration.

In the root directory of your project create a file called .env. This hidden file (denoted by the . at the beginning of the file name) stores simple key-value pairs you will use in the app. In that .env file that you just created insert this text, making sure to replace YOUR_API_KEY_HERE with your actual API key.

PIXABAY_API_KEY=YOUR_API_KEY_HERE

The final step in adding this environment config file is to add it to your .gitignore file. Open up that file and add this entry on a new line at the end of the file.

.env

Doing this will ensure that your API key does not make it into source control and will not be available for anyone to deviously access if they gain access to your hosted git repo. That being said, this is not a perfect system. Your key will still ship with your release build of the app, but this is at least one less place attackers can steal your secrets. Here are some words of wisdom from this article on Hackernoon about securing mobile APIs.

"Regardless of your efforts, it is not a matter of if a secret will be stolen, but if the time and effort to steal it is worth the return. Make it as difficult as you can afford."

So basically...

Okay. Moving on!

Storing data in your app

Great! Now we're ready to call the API and get some data about these stock photos, but where are we going to keep this information? We could request the data and store it in the local state of the requesting component but that does not scale because you will end up re-requesting that stock photo data from the API every time that component mounts and that data will be lost whenever that component unmounts.

This is where Mobx comes in. Mobx is described as "Simple, scalable state management" and it does that very well. Essentially, the concept of Mobx is that you will create a store for the app's data. Inside that store will be data that is marked as observable, which means that it can be consumed by reactive components. To react to changes in the data in the store you will need to mark your component as an observer of the observable data. With these few, simple steps, when your data in the store change your components will re-render a new UI backed by the new data.

Installing Mobx in your project

To install Mobx in your project run this command in your terminal. We are going to need both the mobx module as well as the mobx-react module for React specific bindings. All you need to do to install these modules is to run this command in your terminal.

$ npm install mobx mobx-react

Setting up the application to handle Mobx data

After this, we will want to set up the application component hierarchy to support using Mobx in a reactive way. To do this we'll want to import the batching module and the Provider component into our App.tsx. You can read more about the importance of the batching module when using Mobx with React hooks here.

At the very top of your App.tsx file import the batching module like this.

import "mobx-react-lite/batchingForReactNative"

Then import the Provider component from the mobx-react module and wrap the NavigationContainer component inside the Provider component. After doing this your code should look something like this.

// App.tsx

import "mobx-react-lite/batchingForReactNative"
import "react-native-gesture-handler"
import React from "react"
import { NavigationContainer } from "@react-navigation/native"
import { createStackNavigator } from "@react-navigation/stack"
import { Home } from "./screens/home.screen"
import { Provider } from "mobx-react"

const AppStack = createStackNavigator()

export default function App() {
  return (
    <Provider>
      <NavigationContainer>
        <AppStack.Navigator>
          <AppStack.Screen
            options={{
              header: () => null,
            }}
            name="Home"
            component={Home}
          />
        </AppStack.Navigator>
      </NavigationContainer>
    </Provider>
  )
}

Creating a Mobx store

Now that we have the needed Mobx libraries installed and the React Native application set up to consume data from a Mobx store, the next step is to create the store itself so we can stash response data from the Pixabay API.

Creating a Mobx store is very simple. It is simply a TypeScript module with a couple of exported functions and observable data. Now, let's create the photo store by creating a new folder named stores in the project's root directory and creating a file called photo.store.ts inside it.

Requesting data from the Pixabay API

In this file, we'll be creating a photos variable which will contain an object of all the searches for photos that we'll be doing as well as a function called searchPhotos which will execute the search for the photos data and store it in the photos variable. This is also the place where we'll finally be pulling our API key from the config we set up in the .env file earlier. Here's what the photo.store.ts file should look like.

// stores/photo.store.ts

import { observable } from "mobx"
import Config from "react-native-config"
import { IPhoto } from "../types/photos.types"

const BASE_URL = "https://pixabay.com/api"

export const photos = observable<{ [keyword: string]: IPhoto[] }>({
  default: [],
})

export const searchPhotos = async (keyword?: string) => {
  const url = `${BASE_URL}/?key=${Config.PIXABAY_API_KEY}&safesearch=true${
    keyword ? `&q=${keyword}` : ""
  }`

  const response = await fetch(url)

  const data = await response.json()

  photos[keyword || "default"] = data.hits
}

You'll notice that at the top of the file we import observable and later on wrap the value for the photos variable with it. Using Mobx this way will allow components that are using the photos variable to update when the value of that variable changes.

Also, note that the searchPhotos function makes a request to the Pixabay API with an optional keyword. If that keyword is left out, which will be for our first call, the API will return a list of "all images" according to the documentation page. In this case, we will also store the photo data under a key of 'default' which will be used to render the default photos on the main screen.

Make sure that before running your app with this code you also create the types/photos.types.ts file in your project. It should look like this.

// types/photos.types.ts

export interface IPhoto {
  id: number
  pageURL: string
  type: string
  tags: string
  previewURL: string
  previewWidth: number
  previewHeight: number
  webformatURL: string
  webformatWidth: number
  webformatHeight: number
  largeImageURL: string
  imageWidth: number
  imageHeight: number
  imageSize: number
  views: number
  downloads: number
  favorites: number
  likes: number
  comments: number
  user_id: number
  user: string
  userImageURL: string
}

Rendering the photos to the app's home screen

Now we're at the exciting part! It's time to take that photo data that we're getting back from the API and render out some images to the home screen of your app.

All we need to do now is to make some changes to our screens/home.screen.tsx file and add a separate Image component, which we'll do some further customizations to later on. For now, our home.screen.tsx file should look like this.

// screens/home.screen.tsx

import React, { useEffect } from "react"
import { FlatList, StyleSheet } from "react-native"
import { photos, searchPhotos } from "../stores/photo.store"
import { Image } from "../components/image.component"
import { observer } from "mobx-react"
import { deviceWidth } from "../theme/space"
import { IPhoto } from "../types/photos.types"

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})

export const Home = observer(() => {
  useEffect(() => {
    searchPhotos()
  }, [])

  const renderPhoto = ({ item }: { item: IPhoto }) => (
    <Image
      key={item.id}
      uri={item.largeImageURL}
      style={{
        width: "100%",
        height: (deviceWidth / item.imageWidth) * item.imageHeight,
      }}
    />
  )

  return (
    <FlatList
      keyExtractor={photo => photo.id.toString()}
      data={photos.default}
      style={styles.container}
      renderItem={renderPhoto}
    />
  )
})

Here you can see that we've wrapped the Home component with an observer function. This tells the component, that when the Mobx data we're using in this component changes, make sure to re-render the component with that new data.

We've also changed the rendered output of this function component to a FlatList, which is a pretty efficient way to render a list of items with an unknown length. You can read more about the FlatList component here. We then pass the FlatList component the default search that is stored in the photo store and we also define a render function for each item in the list of data.

Possibly the most important part of these changes is the useEffect hook. What this hook does is take a callback function to be run at least once and whenever the data in the second argument changes. We only want the searchPhotos function to be called once, so we just pass in an empty array as the second argument.

After you've made those changes, don't forget to create a new Image component in the components/image.component.tsx file. It should look like this.

// components/image.component.tsx

import React, { FC } from "react"
import { Image as Img, ImageStyle } from "react-native"

interface IProps {
  uri: string
  style?: ImageStyle
}

export const Image: FC<IProps> = ({ uri, style }) => {
  return <Img source={{ uri }} style={style} />
}

This is an abstraction that we will use later on to set a default loading image for all images, among other things. For now, it's just a simple pass-through of image data to the React Native Image component.

Also, we'll need to add in the deviceWidth helper in the theme/space.ts file. This will make it easier to get the device width in a standard way across the app when we need it. That file uses the Dimensions API from React Native to get the device's width and should look like this.

// theme/space.ts

import { Dimensions } from "react-native"

export const deviceWidth = Dimensions.get("screen").width

With those changes in your app, you should see Pixabay images showing on the home screen! Congratulations! 🎉 You've just added an API call to get remote data and reactively render it in your app. Not too shabby.

Conclusion

In this article, we've covered how to sign up to get a Pixabay API token, how to request data from that API from your React Native app, and how to store that data in a scalable manner in the app with Mobx.

We covered a lot in this article, so make sure you have a good grasp of everything we did.

On Github, you can view the changes between this article and article two in this series, How to Make an App With React Native: Setting up Navigation.

Stay tuned for the next part in this series where we create a new screen for search results from the API and use the app's navigation to transition to it.

How to Make an App With React Native: Setting up Navigation

Jason Merino — Tue, 14 Apr 2020 00:00:00 +0000

In the last article in this series, Stock Photo Browser in React Native: Getting Started, we initialized a React Native app with TypeScript. If you haven't followed through that article, I recommend taking some time to go through it to make sure your project is set up in the same manner as the one we'll be working on below.

Adding navigation to your project

Now that we have a working app, let's add in a way to navigate around to different screens. If you've checked out the Unsplash app for iOS, which we are using for our UI inspiration for this app, you have most likely noticed that there are a few different screens that we are going to need to build. There's a great library called React Navigation that helps with navigating from screen to screen in React Native apps.

Installing the navigation library and dependencies

To install the React Navigation library run this command in your terminal. Make sure that you're in your project root directory before doing this.

npm install @react-navigation/native

This will get you the main React Navigation module for React Native which orchestrates interactions between a few other modules. After this initial install, you need to also add the following modules to your project. Since we are using a bare React Native workflow with TypeScript we can run this command to install the extra dependencies.

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Since we are using a version of React Native greater than 0.60 we don't need to link native modules with react-native link. All we need to do to finish the installation is to change into our ios directory and run the pod install command.

cd ios
pod install
cd ..

Adding the code to your project

After installing all project Pods afresh we need to make some changes to our application code. At this point, we need to import the react-native-gesture-handler module which helps with handling the default swipe-to-go-back-a-screen gesture that you will likely have had experience with on iOS. Also, we'll be adding a NavigationContainer component to the top level of our application which will give the app's screens the ability to use various navigators. We'll be making these changes in the App.tsx file located in the project's root directory.

import "react-native-gesture-handler"
import React from "react"
import { StyleSheet, Text, View } from "react-native"
import { NavigationContainer } from "@react-navigation/native"

export default function App() {
  return (
    <NavigationContainer>
      <View style={styles.container}>
        <Text>Open up App.tsx to start working on your app!</Text>
      </View>
    </NavigationContainer>
  )
}

...

Adding a stack navigator

For navigation in this project, all we'll need is the addition of a stack navigator. Different navigation features are packaged in different node modules when using React Navigation. The last module we'll need to install is the stack navigator module.

npm install @react-navigation/stack

To add a stack navigator to the app we'll need to move the home page UI out of the NavigationContainer component and place it in its own file, then import that home page UI into the App.tsx file and add it as the default screen in the stack navigator.

Let's dive in.

First, let's do a quick refactor and create a screens directory in the project root directory and inside that directory create a file called home.screen.tsx.

After creating that new screen file, remove the home screen components from the App.tsx file and place it in the home.screen.tsx file. When you're finished it should look something like this.

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
})

export const Home = () => {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
    </View>
  )
}

And then back in the App.tsx file we need to add in the new stack navigator. We'll need to import createStackNavigator from the @react-navigation/stack module and then create a stack navigator called AppStack and use that stack navigator inside the NavigationContainer component. After all that, your App.tsx file will look something like this.

import "react-native-gesture-handler"
import React from "react"
import { NavigationContainer } from "@react-navigation/native"
import { createStackNavigator } from "@react-navigation/stack"
import { Home } from "./screens/home.screen"

const AppStack = createStackNavigator()

export default function App() {
  return (
    <NavigationContainer>
      <AppStack.Navigator>
        <AppStack.Screen name="Home" component={Home} />
      </AppStack.Navigator>
    </NavigationContainer>
  )
}

Now run your app in the simulator to make sure that everything is installed correctly and running as expected. If everything went to plan you should see the same default text telling you to open the App.tsx file and make some edits but now with a navigation bar titled "Home" at the top of the screen like this.

Run this command to build and run your app on the simulator.

npm run ios

Now that we know that the stack navigator is installed correctly let's disable that navigation bar since for this screen we're going to add a custom navigation bar. For now, just disable the navigation bar by adding an options prop to the AppStack.Screen component for the home screen and setting header to a function that returns null. It should look something like this.

<AppStack.Screen
  options={{
    header: () => null,
  }}
  name="Home"
  component={Home}
/>

That's a wrap

At this point, we have a new React Native app with the basics of screen-to-screen navigation implemented. Your app now looks the same as it did when we started this section, but it's set up so that we can easily navigate to any new screens we create.

Stay tuned for the next section when we add API integration with Pixabay and data management with Mobx.

To see the full example so far you can check it out on Github, or if you want to see changes between the last article and this one you can view those differences here.

How to Make an App With React Native: Getting Started

Jason Merino — Thu, 09 Apr 2020 00:00:00 +0000

I've been working pretty heavily with React Native for the past few years and have come to love the framework for the ease of development that it provides and the wonderful and active community that has rallied around it. I think that it's definitely worth looking into as an option for your next mobile app project.

What we're going to build

I thought it would be a fun exercise to show how to build a stock photo browsing app with UI loosely based on the Unsplash app for iOS to highlight how one might go about building some non-trivial interactions with React Native. This series is going to focus on iOS-specific code since we drawing heavily on the Unsplash app UI.

Okay, let's dive in!

Setting up your environment

In order to build an iOS application, you need to have access to an Apple computer. I've found that my Macbook Pro (which is a few years old at this point) still works quite well for building out React Native apps.

There are a couple of different ways to set up React Native projects these days, so I'm going to go over the steps I'm taking to get the project setup so you can follow along and we can all be on the same page.

To start, you should have Node.js 12 or higher installed on your machine. If you don't have any version of Node I would suggest that you install NVM to your machine. NVM is a program that helps you manage multiple versions of Node.js on your machine. It makes it easy to install specific versions and to switch between those versions should one of your projects need a different version than others. To download NVM follow the instructions on their Github page. Once you've installed NVM run this command to make sure that it's all installed properly.

nvm --version

If you get a version number, you've got NVM all installed correctly! 🎉

Just installing NVM will not get you any versions of Node.js installed. To install Node.js v12 with NVM you can run this command in your terminal.

nvm install 12

This will install the latest stable version of Node.js 12.x.x (for me this was 12.6.1) and switch you to use that version of Node. Now when you run the following command you should get back something like 12.x.x.

node -v

Once you have Node.js properly installed you should install the expo-cli. This is the tool we will use to generate your React Native project. To install it run this command in your terminal.

npm install -g expo-cli

After the install is completed make sure that everything is good to go by running this in your terminal.

expo --version

If this reports back with a version number then you're all set! It's time to generate your project.

Generating your project

Now we're getting closer to the exciting part where we get to make progress on the code for your app. With the expo-cli we just installed we'll be able to create a new React Native project with just a few commands in the terminal. To generate your project run this command in the...you guessed it, terminal.

expo init StockPhotoBrowser

Now when you run this command you will be prompted to select a type of workflow. If you don't know about Expo workflows there are two different types: managed and bare.

Expo managed workflows make it incredibly easy to get up and running with a React Native project in no time, but with that convenience, they lack some of the functionality that you may want as time goes on and your application's needs and features grow. For this project, we could probably use an Expo managed workflow, but my preference is the bare workflow.

Initializing an app to use the bare workflow gives you a lot more control over the app in regards to what dependencies you can use as well as the ability to write native code (Objective-C or Java).

So, back to initializing your project. Select the option that says minimal (TypeScript). Oh yeah, did I mention we are doing this in TypeScript? Don't worry, it's not as scary as it sounds.

Now your project is being built out by the expo-cli, all the JavaScript dependencies are being installed, and before you know it the script has completed. At the end of the output for the last command, there are some directions for getting started. First, you will need to install the cocoapods for the iOS project. If you do not have cocoapods installed on your machine yet, you can follow the getting started guide on their site.

cd StockPhotoBrowser/ios
pod install

Okay, that should be it for setup. Let's run this thing!

Building and running your project

After the pods have installed, back up a directory so you're in the root directory of the project, and run the app with these commands.

cd ..
npm run ios

If all goes correctly, you should see the iOS simulator open and your app open inside of it. At the time of writing, it looked something like this.

You did it! Now, regardless of whether that was simple or complex for you, take some time to congratulate yourself. You deserve it. 😉

What's next?

We have a long way to go to pull off a decent looking stock photo browsing app in React Native, but we have a good start. Getting a new React Native project started can be difficult if it's your first time, but if you keep with it, you will become comfortable with working with the framework. I hope that as we go through this series of articles you come to enjoy working with React Native as much as I do.

We're only just getting started! Follow along with the next article on adding navigation to our new React Native application.

TIL: Sending cookies with the fetch API

Jason Merino — Mon, 22 Jan 2018 00:00:00 +0000

Today I was trying desperately to create a login form for a side project I'm working on and I could not get the session to persist from page load to page load in Express. I was doing the authentication via an ajax call, so naturally I was attempting to force the session to persist with req.session.save(), but that wasn't working either.

I was pulling my hair out going crazy, which in my situation isn't not a good idea as my hair falls out of its own accord, when I noticed that req.cookies was coming through as an empty object when making the auth request. After a little research I found that because I was using the new window.fetch API (and I was falling back using the isomorphic-fetch polyfill) and I was neglecting the credentials flag I was not having my cookies sent across with the request.

So, here's what I had before.

fetch("https://url/to/my/api/endpoint", {
  method: "post",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    email,
    password,
  }),
})

And then here's what I had after.

fetch("https://url/to/my/api/endpoint", {
  method: "post",
  credentials: "same-origin", // here's the magical line that fixed everything
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    email,
    password,
  }),
})

Turns out the credentials flag defaults to 'omit' which basically means don't worry about sending cookies with this request. There are three different options and if you want to know more about them I would read about it on MDN as this is the easiest to understand page that I've found that explains everything about the credentials flag.