This React Native application allows users to browse and explore information about Star Wars movies. The app fetches data from the Star Wars API (SWAPI) and presents it in an intuitive and user-friendly interface.
-
Movie List Screen
-
Movie Details Screen
-
Navigation
- Utilizes React Navigation for smooth transitions between screens
- Implements a stack navigator for easy navigation flow
- Sets up the main navigation structure using React Navigation
- Defines the stack navigator with MovieListScreen and MovieDetailsScreen
- Displays the list of Star Wars movies
- Implements search functionality
- Uses custom hooks for data fetching and navigation
- Shows detailed information about a selected movie
- Utilizes FlatList to render different entity grids
- Implements a custom header component for movie information
- Custom hook for fetching additional details about a movie
- Retrieves information about characters, planets, starships, vehicles, and species
- Custom hook for handling navigation to the movie details screen
- Custom hook for fetching and managing the list of movies
- Implements search functionality with debounce
- Reusable component for displaying grids of entities
- Handles image loading and fallback to placeholder when necessary
- Clone the repository
- Install dependencies:
npm install
oryarn install
- Run the app:
npm start
oryarn start
- React Native
- React Navigation
- Lodash (for debounce functionality)
This app uses the Star Wars API (SWAPI) to fetch movie and entity data. The API endpoints are handled in the services/api.ts
file.
The app uses a combination of StyleSheet and a custom theme (styles/theme.ts
) for consistent styling across components.
- Implement caching for API responses to reduce network requests
- Add unit and integration tests
- Enhance the UI with animations and transitions
- Implement offline support using local storage