Building Movie Search Listing in React Native

Building a movie search listing app in React Native using Expo SDK 52 and NativeWind 4 is a great way to create a modern, performant, and visually appealing mobile application. This guide will walk you through the process of setting it up, let’s dive in!

Setting Up Your Project

To get started, ensure you have Node.js installed on your machine. Then, init a new Expo app.

npx create-expo-app@latest MovieSearchApp

cd MovieSearchApp

Now, install NativeWind 4 and its dependencies:

npx expo install nativewind tailwindcss react-native-reanimated react-native-safe-area-context

npx tailwindcss init

Update the tailwind.config.js file to include the necessary paths:

module.exports = {
  content: [
    './App.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
    './screens/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Finally, update your babel.config.js to include NativeWind:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};

Integrating an External Movie API

For this guide, we’ll use the OMDb API, a free movie database API. Sign up on their website to get an API key.

Create a .env file in the root of your project to store your API key:

OMDB_API_KEY=your_api_key_here

Install the dotenv package to load environment variables:

npm install dotenv

Update your App.js to load the environment variables:

import 'dotenv/config';

Building the Movie Search Component

Let’s create a simple movie search component. Start by creating a new file components/MovieSearch.js:

import React, { useState } from 'react';
import { View, TextInput, Button, FlatList, Text, Image } from 'react-native';

const MovieSearch = () => {
  const [query, setQuery] = useState('');
  const [movies, setMovies] = useState([]);

  const searchMovies = async () => {
    try {
      const response = await fetch(
        `http://www.omdbapi.com/?s=${query}&apikey=${process.env.OMDB_API_KEY}`
      );
      const data = await response.json();
      if (data.Search) {
        setMovies(data.Search);
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View className="p-4">
      <TextInput
        className="border p-2 mb-4"
        placeholder="Search for a movie..."
        value={query}
        onChangeText={setQuery}
      />
      <Button title="Search" onPress={searchMovies} />
      <FlatList
        data={movies}
        keyExtractor={(item) => item.imdbID}
        renderItem={({ item }) => (
          <View className="my-2">
            <Image
              source={{ uri: item.Poster }}
              className="w-24 h-24"
            />
            <Text className="text-lg font-bold">{item.Title}</Text>
            <Text>{item.Year}</Text>
          </View>
        )}
      />
    </View>
  );
};

export default MovieSearch;

Final Touches

Update your App.js to include the MovieSearch component:

import React from 'react';
import { SafeAreaView } from 'react-native';
import MovieSearch from './components/MovieSearch';

export default function App() {
  return (
    <SafeAreaView className="flex-1">
      <MovieSearch />
    </SafeAreaView>
  );
}

Run your app using:

npm run ios
npm run android

Conclusion

By following this guide, you’ve built a movie search listing app using React Native, Expo SDK 52, and NativeWind 4. You’ve also integrated an external API. This app is a great starting point, and you can expand it by adding features like movie details, user reviews, or even a watchlist. Happy coding! 💪🏻 🎬