moviedb expo demo

App.tsx

import React from 'react';
import { StyleSheet, Text, View, TextInput, KeyboardAvoidingView } from 'react-native';
import Button from './src/view/Button'
import Movies from './src/view/Movies'

const API_KEY = '870c92db52a5e74ad6c1b6b06b19cfb9'
const API_MOVIE_ENDPOINT = 'https://api.themoviedb.org/3/search/movie'

const getSearchUrl = (query:string, page:number = 1) => {

  return `${API_MOVIE_ENDPOINT}?api_key=${API_KEY}&page=${page}&query=${query}`

}

const fetchMovies = async (query:string) => {

  const url = getSearchUrl(query)
  
  console.log(`fetching movies from ${url}`)
  console.log('copy this url above to check data/json structure')

  const response = await fetch(url)
  const json = await response.json()

  return json

}

export default class App extends React.Component {

  state = {
    query: null,
    movies: null,
  }

  onSearchPress = async () => {
    const { query } = this.state
    const movies = await fetchMovies(query);
    this.setState({ movies })
  }

  render() {

    const { query, movies } = this.state

    return (
      <KeyboardAvoidingView style={styles.container} behavior="height" enabled>
        {movies &&
          <Movies query={query} movies={movies}/>
        }
        <View style={{ alignSelf:'stretch' }}>
          <Text>Search movies</Text>
          <TextInput
            placeholder="search"
            onChangeText={query => this.setState({ query })}
            style={styles.input}/>
          <Button title={`Search "${query}"`} onPress={this.onSearchPress}/>
        </View>
      </KeyboardAvoidingView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 32,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    alignSelf: 'stretch',
    borderRadius: 5,
    padding: 8,
  }
});

Movies.tsx

import React from 'react'
import { View, Text, Image, ScrollView } from 'react-native'

// https://developers.themoviedb.org/3/configuration/get-api-configuration
const API_IMAGE_BASE_URL = 'https://image.tmdb.org/t/p/w780'

const Movie = (props:any) => {

  /*
    exemple of movie data 
    {
      popularity: 57.115,
      vote_count: 12634,
      video: false,
      poster_path: "/btTdmkgIvOi0FFip1sPuZI2oQG6.jpg",
      id: 11,
      adult: false,
      backdrop_path: "/4iJfYYoQzZcONB9hNzg0J0wWyPH.jpg",
      original_language: "en",
      original_title: "Star Wars"
    }
  */

  const { original_title, poster_path } = props
  const uri = API_IMAGE_BASE_URL + poster_path

  return (
    <View style={{ padding:16, alignItems:'center' }}>
      <Image source={{ uri }} style={{ height:100, width:100 }}/>
      <Text>{original_title}</Text>
    </View>
  )

}

export interface MoviesProps {
  movies: any
  query: string
}

export default class Movies extends React.Component<MoviesProps> {

  render() {
    const { movies, query } = this.props

    return (
      <View style={{ alignSelf:'stretch', flex:1 }}>
        <Text>Movies for "{query}" ({movies.total_results})</Text>
        <ScrollView>
        {movies.results.map((movie:any, index:number) => (
          <Movie key={index} {...movie}/>
        ))}
        </ScrollView>
      </View>
    )
  }
}