Bonjour,

Le code a l'air OK, quand est-ce que se produit l'anomalie ? Au lancement de l'application ou lors d'une action ?
Juste pour savoir si le problème vient du component ou du reducer, as-tu toujours l'anomalie quand tu remplaces : 

const mapStateToProps = (state) => {
  return {
    favoritesFilm: state.favoritesFilm
  }
}
export default connect(mapStateToProps)(FilmDetail)

par 

export default FilmDetail

Il y a pas de problème quand on remplace par "export default filmDetail". Je crois que le problème c'est au niveau du reducer

-
Edité par AdamaSeye3 1 novembre 2018 à 15:25:22

Ah je pense avoir trouvé, dans le reducer, dans le cas du default tu as oublié de retourner le state.

default:
   state

Il faut bien mettre : 

default:
    return state

Oui tu as raison le problème venait de là. J'avais complètement ommis le return state. Merci beaucoup de votre aide. Ce cours est vraiment génial

Merci pour ce cours.

-
Edité par Ritchy7 11 novembre 2018 à 22:07:09

Merci pout ton tuto

-
Edité par hasankaramemis 13 novembre 2018 à 11:35:28

Bonjour à tous,

Je commence ce cours étant curieux sur les nouveaux langages.

J'ai un problème au début de la partie 2 du cours et je ne comprends pas d'ou vient mon erreur. J'ai créé le fichier Search et mis à jour le fichier App.js pour afficher le TextInput et le boutton. 

Lors de la compilation j'ai un message d'erreur m'indiquant qu'il ne trouve pas la variable Search. Avez vous une idée d'ou cela peut provenir ?

Fichier Search :

J'ai l'erreur :

Je lance l'application via mon téléphone Android en scannant le QRCode généré par Expo.

Je ne comprends pas ce qui peut arriver.

Merci pour l'aide

Bonjour Nicolas,

As-tu essayé de relancer ton application entièrement, notamment de relancer ton serveur Node.js (CTRL + C pour l'arrêter et npm start pour le relancer) ? Tu as peut-être un problème de cache.

Bonne journée.

Salut,

Je viens te signaler qu'au niveau de la navigation avec react navigation il y a une mise à jour à faire dans ton tutorial.
Apparement, depuis la version 3 on ne peut plus exporter directement notre :

const SearchStackNavigator = createStackNavigator({})

Il faut créer un App container depuis lequel on pourra l'exporter :

const AppContainer = createAppContainer(SearchStackNavigator);


export default AppContainer

Ce qui me donne pour le fichier Navigation : 

import { createStackNavigator, createAppContainer } from "react-navigation";
import Search from '../Components/Search'
import FilmDetail from '../Components/FilmDetail'

const SearchStackNavigator = createStackNavigator({
  Search: { 
    screen: Search,
    navigationOptions: {
      title: 'Rechercher'
    }
  },
  FilmDetail: {
    screen: FilmDetail,
    navigationOptions: {
      title:'Description'
    }
  }
})
const AppContainer = createAppContainer(SearchStackNavigator);


export default AppContainer

Avec ce code je n'ai plus d'erreur qui me demande d'appeler un AppContainer et ça fonctionne parfaitement.

Ensuite, je viens de finir le chapitre sur redux avec l'exercie sur la conception d'un Reducer pour l'historique.

Voici le code : 

const initialState ={
  historicFilm: []
}

function manageHistoricFilms (state.initialState, action) {
  let nextState
  switch ( action.type){
      case 'TOGGLE_FILMDETAIL':
        const historicFilmIndex= state.historicFilm.findIndex(item => item.id === action.value.id)
        if (historicFilmIndex !== -1){
          nextState = {
            ...state,
            historicFilm: state.historicFilm
          }
        }
        else {
          nextState = {
            ...state,
            historicFilm : [ ...state.historicFilm, action.value]
          }
        }
        return nextState || state
      case 'REMOVE_HISTORIC_FILM':
        const historicFilmIndex= state.historicFilm.findIndex(item => item.id === action.value.id)
          if (historicFilmIndex !== -1){
            nextState ={
              ...state,
              historicFilm : state.historicFilm.filter(item, index) => index !== historicFilmIndex
            }
          }
        return nextState || state
      case 'RESET_HISTORIC':
        nextState = {
          ...state,
          historicFilm: []
        }
        return nextState || state
      default:
        return state
  }
}

export default manageHistoricFilms

Merci de me dire si c'est bon ou pas parceque j'ai un gros doute et je n'ai pas trouvé de correction.

Merci pour ton aide.

-
Edité par hasankaramemis 20 novembre 2018 à 21:43:00

Bonjour,

Merci pour l'info de la librairie React Navigation, ce sera dans la prochaine version

Concernant l'exercice, il y a plusieurs erreurs mais essentiellement des erreurs de syntaxe. Avec CodeVolve tu as la possibilité de tester ton code (avec le bouton "Run Checks") et surtout de voir tes erreurs en dépliant les différents résultats. 

Par exemple, on peut voir que tu as fait : 

function manageHistoricFilms (state.initialState

au lieu de 

function manageHistoricFilms (state = initialState

Il y a d'autres erreurs. 

Garde bien le historicFilms dans le state car les tests lancés par l'exercice sont basés sur cette variable. 

Bon courage

Merci pour ta réponse. Il semblerait que c’était un soucis d’application du client Expo sur mon téléphone. Je l’ai complètement desinstaller et réinstaller et l’erreur a disparut. 

Super cours en tout cas !

Merci pour ton aide. Apparement REMOVE_HISTORIC_FILM ne supporter le fait que TOGGLE_FILMDETAIL est la même const  historicFilmIndex.

Du coup je l'ai renommer et tout fonctionne. 

Par contre je n'ai pas réussi a faire seul la vue Favorites. J'éspère que ça ne veut pas dire que je n'ai pas compris le chapitre. 

Merci beaucoup pour ton cours sur react native, je l'ai trouvé formidable ! 0.0. Je ne l'ai pas encore terminé, mais j'ai appris énormément de choses, du contenue bien expliqué et étendu .

Salut, j'ai un probleme pour lancer le programme aprés 'run jeject'.

Voici ce que la commande 'sudo react-native run-android' me donne:

Could not find the "expo" package in your project when configuring the packager
Starting JS server...
Building and installing the app on the device (cd android && ./gradlew installDebug)...

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 13s
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html

Mais le plus bizarre c que j'ai bien mes lien du sdk dans le $PATH

user@user-Ubuntu:~/ReactNative/test$ $PATH
bash: /usr/local/opt/jdk1.8.0_77/bin:/usr/local/opt/jdk1.8.0_77/jre/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/home/user/Android/Sdk/emulator:/home/user/Android/Sdk/tools:/home/user/Android/Sdk/tools/bin:/home/user/Android/Sdk/platform-tools

Quelqu'un a une idée parceque moi je sais plus quoi faire là.

-
Edité par hasankaramemis 23 novembre 2018 à 23:50:18

Salut, 

Ca semble OK pour la variable $PATH mais est-ce que $ANDROID_HOME fonctionne également ?

J'arrive à la fin du cours mais j'ai un souci avec react-devtools.

Il ne lance pas la fenêtre chrome.

Du coup je l'ai installé directement dans le dossier MoviesAndMe avec package.json et là il me fait une erreur:

user@ubuntu:~/ReactNative/MoviesAndMe$ npm run react-devtools

> empty-project-template@ react-devtools /home/user/ReactNative/MoviesAndMe
> react-devtools

npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! empty-project-template@ react-devtools: `react-devtools`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the empty-project-template@ react-devtools script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2018-11-30T13_52_53_011Z-debug.log

Aprés avoir rechercher sur le net j'ai pas trouvé grand chose.

Merci de me le dire si vous n'avez aucune idée. Je continue les recherches de mon coté. 

-
Edité par hasankaramemis 30 novembre 2018 à 14:56:04

J'en suis à la dernière partie de ce cours et j'ai un problème (ô frustration )

Je viens d'ajouter la persistance de données à l'application et voici l'erreur que j'obtiens en lançant la commande 

react-native run-ios

J'ai déjà cherché cette erreur un peu partout, sans succès. Si quelqu'un a une solution ou une idée de piste 

-
Edité par BoréalesCréations 6 décembre 2018 à 11:06:18

hasankaramemis a écrit:

Salut, j'ai un probleme pour lancer le programme aprés 'run jeject'.

Voici ce que la commande 'sudo react-native run-android' me donne:

Could not find the "expo" package in your project when configuring the packager
Starting JS server...
Building and installing the app on the device (cd android && ./gradlew installDebug)...

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 13s
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html

Mais le plus bizarre c que j'ai bien mes lien du sdk dans le $PATH

user@user-Ubuntu:~/ReactNative/test$ $PATH
bash: /usr/local/opt/jdk1.8.0_77/bin:/usr/local/opt/jdk1.8.0_77/jre/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/home/user/Android/Sdk/emulator:/home/user/Android/Sdk/tools:/home/user/Android/Sdk/tools/bin:/home/user/Android/Sdk/platform-tools

Quelqu'un a une idée parceque moi je sais plus quoi faire là.

-
Edité par hasankaramemis 23 novembre 2018 à 23:50:18

Salut, je viens de terminer ce cours et j'ai moi aussi rencontré cette erreur de sdk, pour ma part c'était parce que j'avais installé le sdk ailleurs qu'à son emplacement d'origine (sur un disque D:) (je précise que je suis sur Windows).

Pour résoudre le problème j'ai suivi ce que dit le message d'erreur : créer un fichier local.properties dans le dossier android avec le chemin de mon sdk :

sdk.dir = D:\\ANDROID\\sdk

Voilà si ça peut aider

Cordialement.

Bonjour,

ca commence mal pour moi

ca peut venir d'où ?

merci

NicolasRocchi a écrit:

hasankaramemis a écrit:

Salut, j'ai un probleme pour lancer le programme aprés 'run jeject'.

Voici ce que la commande 'sudo react-native run-android' me donne:

Could not find the "expo" package in your project when configuring the packager
Starting JS server...
Building and installing the app on the device (cd android && ./gradlew installDebug)...

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 13s
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html

Mais le plus bizarre c que j'ai bien mes lien du sdk dans le $PATH

user@user-Ubuntu:~/ReactNative/test$ $PATH
bash: /usr/local/opt/jdk1.8.0_77/bin:/usr/local/opt/jdk1.8.0_77/jre/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/home/user/Android/Sdk/emulator:/home/user/Android/Sdk/tools:/home/user/Android/Sdk/tools/bin:/home/user/Android/Sdk/platform-tools

Quelqu'un a une idée parceque moi je sais plus quoi faire là.

-
Edité par hasankaramemis 23 novembre 2018 à 23:50:18

Salut, je viens de terminer ce cours et j'ai moi aussi rencontré cette erreur de sdk, pour ma part c'était parce que j'avais installé le sdk ailleurs qu'à son emplacement d'origine (sur un disque D:) (je précise que je suis sur Windows).

Pour résoudre le problème j'ai suivi ce que dit le message d'erreur : créer un fichier local.properties dans le dossier android avec le chemin de mon sdk :

sdk.dir = D:\\ANDROID\\sdk

Voilà si ça peut aider

Cordialement.

Merci pour ton aide j'avais finalement trouver la solution aussi .

Bonjour

J'ai un problème et je viens de trouver cette page, je me suis dit que j'allais directement poser ma question à la place de m’arracher les cheveux... J’espère que vous pourrez m'aider...

A vrai dire, en lisant le tuto "Développez une application mobile React Native", je m'attaque à un nouveau monde qui met complètement inconnue. Ce qui explique à quel point je suis perdu...

Mon problème est le suivant :

En suivant le tuto..

- J'ai téléchargé Node.js, la version NTS pour Windows.

- j'ai tapé "npm install -g create-react-native-app" dans la console.

- j'ai créé un dossier, ouvert une console et taper : "create-react-native-app MoviesAndMe"

Et la... Je n'ai pas vu le happy hacking... plutôt tout un tas d'erreur...

B:\Informatique\ReactNative\test>create-react-native-app MoviesAndMe
? Choose a template: expo-template-blank
[14:33:25] Extracting project files...
[14:33:26] Customizing project...
[14:33:26] Installing dependencies...
npm ERR! code ENOGIT
npm ERR! Error while executing:
npm ERR! undefined ls-remote -h -t ssh://git@github.com/expo/react-native-maps.git
npm ERR!
npm ERR! undefined
npm ERR! No git binary found in $PATH
npm ERR!
npm ERR! Failed using git.
npm ERR! Please check if you have git installed and in your PATH.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Thibault\AppData\Roaming\npm-cache\_logs\2019-01-02T13_34_38_086Z-debug.log
[14:34:38] Process exited with non-zero code: 1
[14:34:38] Set EXPO_DEBUG=true in your env to view the stack trace.

J'imagine que ce n'est pas aussi dure que je le pense... 

Mais je sais que pour savoir résoudre une erreur.. Faudrais au moins pouvoir comprendre ce que l'on fait... et je sais que ce n'est pas encore mon cas... Je fait juste des copier coller par si par la en espérant que cela fonctionne...

Quelqu'un veut bien m'éclairer..

Merci à vous.

Bonjour,

La nouvelle solution Expo nécessite que Git soit installé sur votre machine, il faut donc au préalable l'installer.

Pour installer git, il suffit de le télécharger et l'installer en cliquant sur ce lien : https://git-scm.com/download/win

Bon courage.

Bonjour, 

Tout d'abord je te remercie d'avance pour ton cours mais j'ai un soucie, je suis au chapitre "Manipulez le State" et mon problème est que quand j'appuies sur le bouton "Rechercher", les films ne s'affichent pas sur l'application Expo de mon téléphone (C'est un iPhone 7).

Je vous remercie d'avance pour votre aide.

Et voici mon code :

import React from 'react'
import { StyleSheet, View, TextInput, Button, FlatList, Text } from 'react-native'
import films from '../Helpers/filmsData'
import FilmItem from './FilmItem'
import { getFilmsFromApiWithSearchedText } from '../API/TMDBApi'

class Search extends React.Component {
	// La classe React.Component implémente une méthode render. C'est cette méthode qui va définir ce que notre component va rendre à l'écran.

  constructor(props) {
    super(props)
    this.state = {
      films: [],
    }
    this.searchedText = ""
  }

  _loadFilms() {
    if (this.searchedText.length > 0) {
      getFilmsFromApiWithSearchedText(this.searchedText).then(data => {
          this.setState({ films: data.results })
      })
    }
  }

  _searchTextInputChange(text) {
    this.searchedText = text
  }

  render() {
    console.log("RENDER")
  	// C'est ici qu'on retourne les élémnets graphiques
    return (
    	// Les propriétés title et onPress sont obligatoire sur un button
      <View style={styles.main_container}>
        <TextInput onChangeText={(text) => this._searchTextInputChange(text)} style={[styles.textinput, { marginBottom: 10 }]} placeholder='Titre du film'/>
        <Button title='Rechercher' onPress={() => this._loadFilms()}/>
        <FlatList
          data={this.state.films}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({item}) => <FilmItem film={item}/>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  main_container: {
    flex: 1,
    marginTop: 20
  },
  textinput: {
    marginLeft: 5,
    marginRight: 5,
    height: 50,
    borderColor: '#000000',
    borderWidth: 1,
    paddingLeft: 5
  }
})

export default Search; // On exporte le fichier par defaut

-
Edité par YayaDev 8 janvier 2019 à 16:30:58

Bonjour,

Je débute actuellement votre cours sur ReactNative, j'ai suivi scrupuleusement l'ensemble des étapes de la création du projet.

Sauf que lorsque je regarde les fichiers créés, je n'ai pas tous ceux présentés dans votre vidéo.

Il manque yarn.lcok, .babelrc, README.md, App.test.js. Est-ce normal?

Merci d'avance pour votre réponse.

Bonjour à vous.

En essayer d'initialiser le projet MoviesAndMe dans mon terminal, npm m'envoie des erreurs

npm ERR! Error while executing:

npm ERR! No git binary found in $PATH

npm ERR!  Failed using git.

npm ERR! Please check if you have git installed and in your PATH

Merci pour votre aide

Bonjour à tous,

@YayaDev peux-tu ajouter un log dans ton application pour vérifier que la fonction "getFilmsFromApiWithSearchedText" est bien appelée et avec les bons paramètres ?

@Kazkarro C'est normal, la hiérarchie d'une CRNA a changé, le contenu que tu as est correct. Le cours a été mis à jour avec la nouvelle hiérarchie.

@Osiris8 Il faut avoir git installé sur ta machine. Pour l'installer il suffit de cliquer sur ce lien : https://git-scm.com/download/win 

Bonne journée.

Bonjour à vous !

Décidément j'ai tous fais et ça n'a pas marché

Après avoir scanner le code QR dans expo sur mon smartphone j'ai l'erreur suivante :

SOMETHING WENT WRONG

32.0.0 is not a valid SDK Version. Options are 26.0.0, 25.0.0,  31.0.0,  28.0.0,  29.0.0,  30.0.0,  27.0.0,

UNVERSIONED 

Merci pour votre aide.

Bonjour à vous

Après avoir lu la documentation de expo sur les mise à niveau j'ai décidé de passer du sdk 32 à sdk 31 et ça marche parfaitement. J'ai réalisé mon premier "hello world"

Je vous laisse le lien ci-dessous si quelqu'un est dans le.même soucis comme moi

https://docs.expo.io/versions/v32.0.0/workflow/upgrading-expo-sdk-walkthrough

Bonjour à tous,

à la fin du chapitre "Construisez une action sur Redux" j'ai voulu coder le petit reducer en ligne.

Seulement, quoi que j'écrive, je me retrouve avec cette erreur et aucun test ne passe:

 FAIL ./codevolve-test-init.test.js ● Test suite failed to run TypeError: Cannot read property 'bindings' of null at Scope.moveBindingTo (../../usr/local/lib/node_modules/jest/node_modules/@babel/traverse/lib/scope/index.js:867:13) at BlockScoping.updateScopeInfo (node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17) at BlockScoping.run (node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12) at PluginPass.BlockStatementSwitchStatementProgram (node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24) Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 2.488s Ran all test suites matching /codevolve-test-init.test.js/i.

N'y aurait-il pas un petit problème de paramétrage de votre côté?

-
Edité par Damien Hervé 28 janvier 2019 à 19:17:23