June 2019
🔨 Tutorial 'Développez une application mobile React Native' from Openclassrooms. The goal of this tutorial is to develop a video library mobile application.
The application is available on Google Play (beta version): My Video Library
See also my watch about redux
[x] Create-React-Native-App (Expo CLI Quickstart with Node.js) / React Native Init (React Native CLI Quickstart)
[x] Components React Native
[x] Properties (props) & States
[x] API & Token / Fetch
[x] Asynchrone and Callback functions
[x] Component Lifecycle
[x] Redux architecture (Actions / Reducers / Store / Views) and states management
[x] Context of a component (Data Binding / _this / arrow functions)
[x] Specific development (IOS vs Android): API Share
[x] Animations with Animated library / Easing API / PanResponder API
[x] React Native application with native code (ejection) / Permissions
[x] Debug Tools
[x] Persist and rehydrate a redux store
Video Library mobile application displaying movies and their descriptions using API TMDB.
The navigation bar will let you choose between 3 views:
Search view: You can display a page with a selected movie and its datas and add it to your favourites. You can also share your favourite movie with your friend using a specific share button according the OS.
Favourite movies view: You can see your favourite movie list.
Latest movies view: You can see the latest movies available on theatre.
Extra features:
-
You can add an avatar in the application using your camera or your photo-gallery
-
Works on Android and IOS
-
Data is persistent
(Android only, read the doc for IOS/Mac )
First you will need Expo on your Android device
With Expo / Node.js server (application-crna branch):
-
npm install -g expo-cli(should not be nessessary if you clone this repo) -
npm start -
Open the url provided by the server then scan the QR code with the Expo app on your Android device
With React Native (application-ejection):
Follow these instructions: Install Android development environment
react-native run-android(if you meet problems during building try this:npm install react-native-gesture-handler@1.0.5)
If there are too many problem during building restart from scratch:
react-native init MyVideoLibrary- Copy these files/folders from this repo: App.js / Animations / API / Components / Helpers / Images / Navigation / Store
- Run:
npm install --save react-navigation
npm install --save react-native-gesture-handler
npm install --save moment
npm install --save numeral
npm install --save redux
npm install --save react-redux
npm install
react-native link
react-native run-android
Moment
npm install --save moment
Numeral
npm install --save numeral
Navigation
npm install --save react-navigation
Gesture Handler
npm install --save react-native-gesture-handler
Image Picker
npm install --save react-native-image-picker
react-native link
Redux
npm install --save redux
npm install --save react-redux
npm install --save redux-persist
Redux is used to manage general states (here for favourites)
-
The user clicks the "Favourites" button in the FilmDetail component.
-
We create an action with the type "TOGGLE_FAVORITE" the film displayed as value.
-
We move the action to the Redux store.
-
The Redux store dispatches the action to a reducer able to manage the action with type "TOGGLE_FAVORITE".
-
The reducer toggleFavorite will receive the action and will change the state of your application.
-
Redux will detect a change in its store in the list of favorite movies, and will send the new list to the components that suscribe to its changes.
-
The FilmDetail component receives the list of new movies, maps it to its props, and launches the update lifecycle to re-render itself.
Connect and suscribe to API TMDB (The Movie DataBase) and ask for a token/api key (v3 auth).
Rename API/TMDBApi.exemple.js in API/TMDBApi.js and replace <YOUR_TOKEN_HERE> by the token provided by API TMDB.
Installing Java 8 and Android Studio on Ubuntu 18.04
Android Studio: Run apps on a hardware device
Android Studio: /dev/kvm device permission denied
How to unlock and enable Developer options on any Android phone
How to Enable USB Debugging Mode on Android
Expo: The fastest way to build an app
Openclassrooms: Développez une application mobile React Native