- Should work on both Android and iOS.
- Should give the end user feedback concerning errors or very slow internet connection
- Should have at least two screens, one for the detailed information about the series and one for the search and result
- Must contain documentation about how to run the application in a simple manner
- Should be written using Typescript
- Create a favorite shows list
- Persistence, store the API response data and read it for repeated requests. Even when offline.
- API responses are chached locally for repeated requested
- API repsonses are persisted accross restarts
- Favourites are persisted accross restarts
- Endless scroll or pagination
- Make sure you have setup the React Native enviroment: Setting up the development environment · React Native
npm install
the dependencies (add the--legacy-peer-deps
flags if encountering conflicting peer dependencies)npx pod-install ios
to install cocoapods (ios only)npx react-native run-ios
to run iOS appnpx react-native run-android
to run andoird app
- I intentionally chose inline styling over React Native's Stylesheet API because I personally find colocating styles with React elements easier to work with in small components. I know that this is a polarizing topic :)
- If have setup an event listener for connection state in
App.tsx
by using@react-native-community/netinfo
. It is supposed to show areact-native-flash-message
upon connection loss (and hide that message again when the connection has been re-established). Unfortunatly the events did not fire as expected when testing in the simulator. I have not spent any time debugging this. Might be related to this open issues: addEventListener not updated when connection change · Issue #573 · react-native-netinfo/react-native-netinfo
- Debugging the
@react-native-community/netinfo
issue. - Show loading indicator first after an timeout to prevent flickering of the loading indicator when typing into the search bar
- Integrate
useSWR
with@react-native-community/netinfo
as described here - Uncompleted nice-to-haves
Android screenshots can be found here