This is a film listing guide app built with React Native and Expo. It is intended to showcase the essential parts of a React Native app, integrated with Redux.
- Ensure you have one of the following:
- Ensure you have the following installed on your computer:
- Clone this repository and
cd film-guide-app - Run
yarnto install dependencies.
- In your terminal, type
yarn start. - If you are using a device:
- Ensure your device is on the same network as your computer.
- Scan the resulting QR code with the Expo app. You should see the app appear in our device.
- If you have the iOS simulator installed, type
iin the interactive prompt to open the app in the simulator. - If you have an Android emulator installed, type
ain the interactive prompt to open the app in the simulator.
- Ensure your computer and device are on the same network.
- If you are on Windows, and have VirtualBox or VMWare installed,
yarn startmight not work properly. Follow these instructions to solve.
The app connects to a remote API to fetch the film guide. Sometimes this API can take a few seconds to respond, so please be patient!
src/: folder containing all JavaScript source files. Includes:components/: standalone 'presentation' components. These components are assembled by parent screens, accepting props and communicating to the parent via callbacks.data/: contains logic used to access the API.screens/: top level screens, rendered by the navigator. These screens are Redux aware - their primary job is to take data from the Redux store and render a set of presentation components.store/: contains all actions, reducer and selectors relating to the Redux store for the app.navigator.js: configures the different screens in the app and how they should appear in the stack.theme.js: contains all common styles for the app, to be used by the components.
.babelrc: a config file used by the Babel transpiler..eslintrc: a config file used by the ESLint linter..flowconfig: a config file used by the Flow static type checker..gitignore: a file used by git to determine which files and folders should not be version controlled.App.js: the main application file. Here we import the Navigator and hook it up to the Redux store to maintain the app state.app.json: a config file used by the Expo app.package.json: a config file to store the project's dependencies and define scripts to be run withyarn.yarn.lock: a complete list of all dependencies used by the app, accessed byyarnwhen the development environment is initially set up.
The Expo client app enables Live Reload by default. This means that any changes that are saved in your text editor will cause the app on the device to be refreshed.
Shaking the device will reveal the Developer Menu, where you can manually reload, enable remote debugging and inspect the component tree. Enabling remote JS debugging will open Google Chrome where you can step through your code and set breakpoints.
This branch showcases the initial version of the app. More advanced concepts can be found in the extras branch, where the app has been developed further.
MIT