Bonjour bonjour !

Tout d'abord, merci pour ce cours très bien construit !

Je rencontre un petit problème au niveau de la mise en place de la navigation (https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native/5046301-concevez-une-navigation-entre-vos-vues).

J'ai suivi l'ensemble des étapes du cours et ai exactement le même code. Au moment où j'utilise la navigation depuis le fichier Navigation.js, j'ai l'erreur suivante :

Est-ce que quelqu'un a rencontré le même problème et a su le résoudre ? 

Merci d'avance !

Bonjour,

Tu as certainement deux dépendances de react-native-gesture-handler : une via react-navigation, et une autre via expo. Je ne travaille jamais avec expo donc je ne suis sûr de rien. Utilises la commande suivante pour vérifier :

npm ls react-native-gesture-handler

La suppression du dossier node_modules puis un npm i peuvent peut-être résoudre ton problème:

rm -rf node_modules
npm install

Merci pour ta réponse, j'ai bien les deux dépendances, mais le fait de supprimer le dossier node_modules et de le réinstaller n'a pas réglé le problème, j'essaie de retirer la dépendance d'expo d'une autre façon et si je n'y arrive pas j'enlèverais expo tout simplement !

Merci encore !

Bonjour à vous!

Fier d'apprendre React-Native à travers ce cours.

j'ai un problème à propos de React-Navigation

Quand j'essaye de l'installer npm me donne le resultat ci-dessous.

Merci d'avance pour votre aide.

Bonjour,

Quelle est ta version de npm ?

Essaye après avoir clean ton cache.

npm cache clean --force

Ma version npm est 6.5.0-next.0

Ça marche après avoir clean le cache. Je continues sur la suite du cours.

Infiniment merci beaucoup Thomas D pour ton aide. Je ne sais comment te remercier. Bien de chose à toi. 

Bonjour,

Maintenant que le cours est ouvert et actif, 

Mauvais forum

Le sujet est déplacé de la section Rédaction de cours vers la section Javascript

Bonjour,

 Et oui une fois de plus pour trouver le forum correspondant au cours c'est pas simple…

juste un petit lien, c'est pas compliqué !  ( le cours -> le forum du cours )

Bon, j'ai aussi un prb dans le chapitre navigation avec deux vues.

Une étape gitHub par chapitre serait une bonne idée.

Bon cours et je vous conseille ausi celui ci sur Coursera. C'est une suite complete avec la construction d'un site de cuisine avec React, React-Native et la création d'un RestFull Api pour les deux avec liaison à MongoDB

https://www.coursera.org/specializations/full-stack-react

Cordialement et bonne suite

-
Edité par lvdesign 9 février 2019 à 18:24:34

React étant un framework JavaScript, il semblait logique que le sujet relatif au cours se trouve dans le forum Javascript ... Apparemment pas pour tous les monde ... désolé ...

Concernant les remarques sur le cours, il serait plus efficace de contacter directement l'auteur du cours dont vous trouverez les coordonnées dans le cours en question.

Benzouye a écrit:

React étant un framework JavaScript, il semblait logique que le sujet relatif au cours se trouve dans le forum Javascript ... Apparemment pas pour tous les monde ... désolé ...

Concernant les remarques sur le cours, il serait plus efficace de contacter directement l'auteur du cours dont vous trouverez les coordonnées dans le cours en question.

Très grande réflexion et bravo. Il serait même assez pertinent que le cours soit lié à son espace de forum. Ce n'est pas le cas pour ce cours. Je pense qu'un peu de CX (customer experience : Branding and Customer Experience)  serait un vrai plus pour votre Mooc. Je suis Beta testeur et Mentor pour Coursera, j'ai l'impression que le service client est plus à l'écoute… 

Je ne suis qu'un modeste modérateur bénévole sur les forums ... je ne saurais plus t'en dire sur l'efficacité du service client de OC ...

Bonjour,

Alors déjà merci beaucoup pour ce tuto car vraiment j'adore React Native !

Sinon plutôt que de le faire autour des films, je l'ai fait autour des livres et j'utilise pour cela l'API de Google Books, le problème c'est qu'avec cette API c'est que si par exemple une image n'est pas disponible pour un livre et bien la clé n'existe pas ! Contrairement à IMDB où la clé existe mais la valeur est vide, ce qui fait que ça me renvoie "TypeError: undefined is not an object (evaluating 'book.volumeInfo.imageLinks.thumbnail')", du coup je cherche à conditionner par rapport à si la clé existe ou pas et je ne trouve pas comment ...

Edit : j'ai réussi en incluant un ternaire dans source ^_^

-
Edité par Othy54 27 février 2019 à 20:07:42

Bonjour,

J'ai commencé le cours depuis peu et je rencontre un problème d'update avec une FlatList.

En effet, le premier affichage se passe sans problème, mais quand je clique sur mon bouton 'Rechercher' pour mettre à jour le contenu de la FlatList, rien ne se passe.

Je vous transmets mon code que j'ai légèrement modifié par rapport à celui du cours afin d'isoler l'erreur :

class Search extends React.Component {

    constructor(props) {
        super(props);
        this._films = [
            {
               id:181808,
               vote_average:7.2,
               title:"Star Wars VIII - Les derniers Jedi",
               poster_path:"",
               original_title:"Star Wars: The Last Jedi",
               overview:"Overview1",
               release_date:"2017-12-13"
            }
        ];
    }

    _load_films () {
            this._films.push(
                {
                   id:181809,
                   vote_average:8.1,
                   title:"La Guerre des étoiles",
                   poster_path:"",
                   original_title:"Star Wars",
                   overview:"Overview2",
                   release_date:"1977-05-25"
                }
            );
            this.forceUpdate();
    }

    _test1 () {
        console.log("Jalon 1");
        return (this._films);
    }

    _test2 (a) {
        console.log("Jalon 2");
        return (a.id.toString());
    }

    _test3 (b) {
        console.log("Jalon 3");
        return (<Text>{b.id.toString()}</Text>);
    }

    render() {
        return (
            <View style={styles.main_container}>
                <TextInput style={styles.textinput} placeholder='Titre du film'/>
                <Button title='Rechercher' onPress={() => {this._load_films(); console.log("Jalon 4")}}/>
                <FlatList
                    data={this._test1()}
                    keyExtractor={(item) => this._test2(item)}
                    renderItem={({item}) => this._test3(item)}
                    extraData={this.state}
                />
            </View>
        );
    }
}

Voilà ensuite ce que j'obtiens à la console :

• Avant le clic sur bouton 'Rechercher' :

  Jalon 1
  Jalon 2
  Jalon 3
  Jalon 2
  Jalon 2

• Après le clic :

  Jalon 4
  Jalon 1

On voit donc que keyExtractor et renderItem ne sont pas ré-exécutés malgré le forceUpdate ET l'extraData...

Si vous avez une idée du problème, je prends.

Merci d'avance,

Zintor

EDIT : J'ai finalement réussi à m'en sortir avec un 

this.setState({refresh: true});

dans la callback (_load_films) de mon bouton.

-
Edité par zintor 2 mars 2019 à 17:08:52

Bonjour a tous.

Je rencontre un soucis au moment de créer l'infinite scroll, dans le chapitre "Appréhendez le setState".

Tout se passe bien, sauf qu'au bout d'un moment de scroll, je rencontre cette erreur : "Warning: Encountered two children with the same key, `%s`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.%s, 300131, "

Je me creuse sans trouver la solution, si vous pouviez m'aider ?

import React from 'react'
import {ActivityIndicator,StyleSheet, View, Button, TextInput,FlatList,Text} from 'react-native'
import FilmItem from './FilmItem'
import {getFilmFromAPI} from './API/tmdb'

class Search extends React.Component {
    constructor(props){
        super(props)
        this.state = { films: [],
            isLoading: false
        }
        this.searchedText = ""
        this.page = 0
        this.totalPages = 0
    }

    _loadFilms(){
        if(this.searchedText.length > 0) {
            this.setState({isLoading:true})
            getFilmFromAPI(this.searchedText, this.page+1).then(data => {
                this.page = data.page
                this.totalPages = data.total_pages
                
                this.setState({
                    films: [ ...this.state.films, ...data.results], 
                    isLoading:false})
            })
        }
    }

    _searchTextInputChanged(text){
        this.searchedText = text
    }

    _displayLoading(){
        if(this.state.isLoading){
            return(
                <View style={styles.loading}>
                    <ActivityIndicator size="large" color="#0000ff" />
                </View>
            )
        }
    }

    
    _searchFilms() {
        this.page = 0
        this.totalPages = 0
        this.setState({
          films: [],
        }, () => {
            this._loadFilms()
        })
      }


    render(){
        console.log(this.page)
        console.log(this.totalPages)
       return(
        <View style={styles.maincontainer} >
            <TextInput onSubmitEditing={() => this._searchFilms()} onChangeText={(text => this._searchTextInputChanged(text))} style={styles.textinput} placeholder='Recherche'/>
            <Button title="Rechercher" onPress={() => this._loadFilms()}/>
            <FlatList
                data={this.state.films}
                keyExtractor={(item)=>item.id.toString()}
                renderItem={({item}) =><FilmItem film={item}/>}
                onEndReachedThreshold={0.5}
                onEndReached={() => {
                    if(this.page < this.totalPages){
                        this._loadFilms()
                    }
                }}
            />
            {this._displayLoading()}
        </View>
       )
    }
}

const styles = StyleSheet.create({
    maincontainer:{
        marginTop: 50,
        flex:1

    },

    loading:{
        position: 'absolute',
        left: 0,
        right: 0,
        top: 100,
        bottom: 0,
        alignItems: 'center',
        justifyContent: 'center'
    },

    textinput: {
        marginLeft: 5,
        marginRight: 5,
        height: 50,
        borderColor: '#000000',
        borderWidth: 1,
        paddingLeft: 5,
    } 
})
export default Search;

-
Edité par Yamero! 10 mars 2019 à 17:57:38

Salut ! As-tu fais attention à l'importation de L'API TMDB ? Peut-être c'est là le problème . Bonne Chance

Salut.

Oui je pense que la fonction d'importation est correcte, d'ailleur l'importation se passe niquel, c'est seulement aprés le chargements de quelques pages au scroll que le probleme apparait.

export function getFilmFromAPI(text, page){
    const url = 'https://api.themoviedb.org/3/search/movie?api_key=' + API_TOKEN + '&langage=fr&query=' + text + '&page=' + page;
    return fetch(url)
    .then((response)=> response.json())
    .catch((error)=>console.error(error))
}

export function getImageFromAPI(name){
    return 'https://image.tmdb.org/t/p/w300' + name
}

tu cherche quoi pour avoir l'erreur? Je crois l'avoir déjà eu, c'est une erreur qui fait planter ton appli?

Et bien en fait, la recherche de film fonctionne (j'ai essayé avec "star", "test"....) La j'ai testé le scroll  et l'erreur apparaît au bout du chargement de quelque page de résultat . Et à ce moment là ça fait planter l'appli oui

-
Edité par Yamero! 11 mars 2019 à 23:11:31

Ok, étrange, je viens de l'avoir cette erreur justement, il m'a suffit de reload l'application pour la faire disparaitre, j'ai comme l'impression que chez moi avec une mise à jour du code le cache de l'application était la cause du problème.

Ce qui me rassure (ou pas après reflexion), c'est que je viens de faire un copier coller exacte du code du cours, et que l'on obtient le même résultat.

Peut être qu'une MAJ de React Native ou de L'API est a la base du problème...

et aussi : 

FarisAjeddig a écrit:

Bonjour bonjour !

Tout d'abord, merci pour ce cours très bien construit !

Je rencontre un petit problème au niveau de la mise en place de la navigation (https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native/5046301-concevez-une-navigation-entre-vos-vues).

J'ai suivi l'ensemble des étapes du cours et ai exactement le même code. Au moment où j'utilise la navigation depuis le fichier Navigation.js, j'ai l'erreur suivante :

Est-ce que quelqu'un a rencontré le même problème et a su le résoudre ? 

Merci d'avance ! 

 La solution est de supprimer, dans node_modules/expo/node_modules le dossier react-native-gesture-handler. Depuis une MAJ, React Native ne supporte pas le double appel a des modules.

-
Edité par Yamero! 13 mars 2019 à 9:40:06

Bonjour à vous ! J'essaye de démarrer un projet React Native avec expo mais je rencontre ce problème . Merci de votre aide .

Tente un 

rm -rf node_modules

supprime package-lock.json et refait un npm install, ça peut te débloquer

Salut Maxime franchement grâce a vous j'ai aimé le développement mobile je suivi ce cours de react pour application mobile jusqu'à l’éjection d'expo mais la tout a basculé j'ai réussi l’éjection mais le problème est lié quand j fais react-native run-android beaucoup des erreurs dans la console et a la fin ça marchera pas. Merci bcp quand. j'ai voulu finir cette application vraiment et la publié même dans le store bien sur avec parrainage de votre nom.

bonjour,

une question pour un projet video-call. du cout j'ai installé NodeJs, npm et MongodB et j'arrive a lancer mon serveur de base de données. mon problème pour l'instant c'est que j'arrive pas a accéder au serveur pour récuperer la base de données pour modifier qlq parametres du protocole SDP afin d'améliorer la Qos du video-call

-
Edité par FethiBoulila 19 mars 2019 à 16:37:35

Osiris8 a écrit:

Bonjour à vous ! J'essaye de démarrer un projet React Native avec expo mais je rencontre ce problème . Merci de votre aide .

Pour ce problème j'ai du faire recours à yarn et j'ai enfin trouvé satisfaction . J'utilise plus donc npm pour démarrer un nouveau Project avec React Native mais plutôt yarn . Il faudra installé yarn auparavant .

Étant développeur web j'ai l'habitude de travailler avec JavaScript quotidiennement (Applications Web pour créer des sites Internet et web service interne pour les sociétés. Je découvre le React Native avec ce forum et ce post et je suis étonné de la puissance du langage ! Il fut un temps je développé beaucoup d'applications à succès Android en JAVA (avant d'avoir des ennuis avec le Play Store...), ce qui m'a fait abandonner la programmation mobile. Mais j'avoue que je vais sûrement me remettre au développement mobile grâce à ce langage et ce cours, les possibilités et le gain de temps ont l'air énorme. Merci Maxime 

N'avez-vous pas remarqué ? J'ai essayé d'avoir l'apk de la page d’accueil de React Native et à lui seul ça fait 15Mo . Avez-vous d'autres solutions pour avoir des applications légères construites avec expo ? Merci de votre réponse .

Bonjour,

Je suis en parallèle les deux cours React et React Native.

Ayant commencé par le premier n'ayant pas trouvé d'information spécifique sur l'installation, j'ai installé Node JS "current version". Jusque là, pour le cours React, pas de problème (je n'en suis qu'au début).

Mais en découvrant le cours Reat Native il semble impératif d'installer la version LTS.

Du coup j'ai quelques questions :

- faut-il que je désinstalle la version current et que j'installe la version LTS ?

- Comment fait-on pur désinstaller cela ? (l'installation se faisant via un terminal, j'imagine que c'est de même pour la désinstallation...) 

- La version LTS posera t-elle problème pour continuer à suivre le cours de React ?

Merci pour votre aide et contribution

Bonjour ! je te conseillerais de télécharger node (l’extension terminant par .msi) depuis son site web et de l'installer par défaut . En voulant ouvrir node tu dois l’exécuter en tant qu'administrateur. ça doit marcher avec React Native.

Bonjour et merci pour ta réponse,

J'ai déjà installé Node depuis le PowerShell de Windows.

Du coup, si j'installe avec le fichier d'installation MSI, je ne vais pas rencontrer de conflits ?

Ne faudrait-il pas désinstaller la version précédente de node avant ?

2 versions de node peuvent-elles coexister ?