Farid Safi: Build a React Native chat app in 30 minutes

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ก.พ. 2025

ความคิดเห็น • 57

  • @anthonylaiferrario
    @anthonylaiferrario 8 ปีที่แล้ว +6

    This video is fantastic and has helped me get my first react native app up and running. Thank you so much for putting the effort into this :)

  • @dominicgichuhi5822
    @dominicgichuhi5822 8 ปีที่แล้ว

    Routing has now become easier for me in my first React Native app. Thanks

  • @barnamam
    @barnamam 6 ปีที่แล้ว +2

    Hi, thank you for the video,
    But please help me how to update renderBubble when updating state???
    Example: When I send an audio to DAVID then he will play that audio. when that specific audio is playing, the progressbar should be updated.
    but renderbubble method does not re-render on state update.

  • @ayanehsan
    @ayanehsan 4 ปีที่แล้ว

    Please can you make a video which has image sharing in chats

  • @MarianoMarzullo
    @MarianoMarzullo 6 ปีที่แล้ว

    Hi Farid, amazing package. Can u make a tutorial on how to customize the overall chat? with action buttons, the input chat, etc? Or is there any tutorial about it?

  • @timgoocha
    @timgoocha 8 ปีที่แล้ว +3

    how do you connect your project with github? I don't understand it when you do "git add . && git commit -a -m "ams4" . can you walk me through step by step. i can't add the backend file . thanks

    • @gustavlindstrom2000
      @gustavlindstrom2000 7 ปีที่แล้ว

      github.com/FaridSafi/ChatApp/blob/master/src/Backend.js

    • @MdMostofabilla
      @MdMostofabilla 7 ปีที่แล้ว

      I was add download and add this files and chang the code from Chat.js also but i git error.

    • @svanigiorgi
      @svanigiorgi 7 ปีที่แล้ว +1

      help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/

    • @walterlol
      @walterlol 7 ปีที่แล้ว

      you start with git init

  • @shobhitchittora2267
    @shobhitchittora2267 7 ปีที่แล้ว

    Thanx man.. Helped a lot.

  • @bariscan9267
    @bariscan9267 7 ปีที่แล้ว

    It is a great tutorial imho, I do not understand why there is dislikes, what am i missing?

  • @gauravsharma2325
    @gauravsharma2325 7 ปีที่แล้ว

    I'm getting the red screen error on emulator "Error : undefined is not a function (evaluating '_reactNative2.default.registerComponent('ChatApp', function(){return _App2.default})" Can anybody tell me why?

  • @Xyrer
    @Xyrer 8 ปีที่แล้ว +21

    Nice tutorial, but the mic noise is REALLY annoying

  • @tomasvohradnik2302
    @tomasvohradnik2302 7 ปีที่แล้ว

    Hi, thank you for a great video! Is there any chance that you can customize Gifted Chat to make a private chat rooms like on WhatsApp?

  • @mrslake7096
    @mrslake7096 7 ปีที่แล้ว

    anyone knows how the onSend works ?
    1- he is setting the state to a method ?
    2- who is providing the previous state to the method ?
    onSend(messages = []) {
    this.setState((previousState) => {
    return {
    messages: GiftedChat.append(previousState.messages, messages),
    };
    });
    }
    Thanks.

    • @faridsafi5670
      @faridsafi5670 7 ปีที่แล้ว +1

      setState can be used in 3 different ways
      Please check facebook.github.io/react/docs/react-component.html#setstate
      this.setState((prevState, props) => {
      return {counter: prevState.counter + props.step};
      });

    • @mrslake7096
      @mrslake7096 7 ปีที่แล้ว

      Thanks for the help

  • @karthikarjun1035
    @karthikarjun1035 7 ปีที่แล้ว

    Hi, I'm getting below error. Can you please provide your input?
    npm install react-native-gifted-chat --save
    npm ERR! code ENOGIT
    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.

  • @rajibulislam6132
    @rajibulislam6132 8 ปีที่แล้ว +1

    Brother FaridSafi, The code is not in your github. Can you please upload?

    • @faridsafi5670
      @faridsafi5670 8 ปีที่แล้ว +2

      Hello Rajibul, code is available at github.com/FaridSafi/ChatApp

    • @horlacsd
      @horlacsd 8 ปีที่แล้ว

      bump

    • @sribagy
      @sribagy 7 ปีที่แล้ว

      This is the Chat component, not the app.The app is here:
      github.com/FaridSafi/ChatApp

  • @nviga1787
    @nviga1787 6 ปีที่แล้ว

    why did not you clean the video from the noise?

  • @sofianmahmoudi6020
    @sofianmahmoudi6020 8 ปีที่แล้ว

    Hy,
    Can you run two emulators as you do under windows?
    I use Genymotion too, but I do not have mac so how do I run the second emulator for the chat?
    Greattings

    • @n3tc4t
      @n3tc4t 8 ปีที่แล้ว

      Sofian Mahmoudi
      you can run OSX on virtual box and install xcode for running iOS emulator

    • @sofianmahmoudi6020
      @sofianmahmoudi6020 8 ปีที่แล้ว

      yes of course it's OK for me
      thanks

  • @faridsafi5670
    @faridsafi5670 8 ปีที่แล้ว +6

    You can contact me directly via twitter.com/faridsafi

    • @scroll-7643
      @scroll-7643 8 ปีที่แล้ว

      Hi sir, can you please help me with my mobile application do you have facebook?

  • @nguyenle-kl4ek
    @nguyenle-kl4ek 7 ปีที่แล้ว

    hi, i am using android studio for code react-native, but it no suggests code when i type it. so do you have any solution for my problem?

    • @sc0110
      @sc0110 7 ปีที่แล้ว

      use Atom or Visual Studio Code instead. you can install plugin for code auto completion

    • @nguyenle-kl4ek
      @nguyenle-kl4ek 7 ปีที่แล้ว

      ok. i will try. thanks!

  • @horatiuradutiu9679
    @horatiuradutiu9679 4 ปีที่แล้ว

    Dude really wrote some frontend stuff, imported a library and copy-pasted some backend. How is this useful in building a chat app?

  • @hotmanpasaribu665
    @hotmanpasaribu665 6 ปีที่แล้ว +1

    You anglais is parfait

  • @iJuce
    @iJuce 4 ปีที่แล้ว

    bro why is your screen like that

  • @saikiranreddykudumula2082
    @saikiranreddykudumula2082 6 ปีที่แล้ว

    anyone help me out with how to send inline chat images ...

  • @arcechava
    @arcechava 8 ปีที่แล้ว

    Hola sale un error:
    FIREBASE WARNING: set al /messages/ksdfbskjdfnbsdjk
    failed: permission_denied
    Cual es la estructura en FIREBASE ??

    • @faridsafi5670
      @faridsafi5670 7 ปีที่แล้ว

      You need to set up a Firebase project

    • @fitnessforcommonman4844
      @fitnessforcommonman4844 6 ปีที่แล้ว

      Select Database from left nav
      From top select Real time database
      Select Rules
      {
      /* Visit firebase.google.com/docs/database/security to learn more about security rules. */
      "rules": {
      ".read": true,
      ".write": true
      }
      }

  • @saalimkhan4133
    @saalimkhan4133 7 ปีที่แล้ว

    Thanks man

  • @tifoaudi9241
    @tifoaudi9241 6 ปีที่แล้ว

    anybody here have a link to the source code on github ?

  • @MdMostofabilla
    @MdMostofabilla 7 ปีที่แล้ว +1

    Thanks for this great pretension, I hop you will be help ..
    I get a error ...can you give me some solution ?
    error: bundling: UnableToResolveError: Unable to resolve module `firebase` from `C:\Users\ashik\Desktop
    eact_apps\F
    riends\src\Backend.js`: Module does not exist in the module map or in these directories:
    C:\Users\ashik\Desktop
    eact_apps\Friends
    ode_modules
    , C:\Users\ashik\Desktop
    ode_modules
    This might be related to github.com/facebook/react-native/issues/4968
    To resolve try the following:
    1. Clear watchman watches: `watchman watch-del-all`.
    2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
    3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start --reset-cache`.
    at UnableToResolveError (C:/Users/ashik/Desktop/react_apps/Friends/node_modules/react-native/packager/src/node-h
    aste/DependencyGraph/ResolutionRequest.js:488:5)
    at p.catch.error (C:/Users/ashik/Desktop/react_apps/Friends/node_modules/react-native/packager/src/node-haste/De
    pendencyGraph/ResolutionRequest.js:366:19)
    Bundling `index.android.js` 96.8% (490/498), failed.

    • @MdMostofabilla
      @MdMostofabilla 7 ปีที่แล้ว

      it's ok I got the solution after install firebase but chat not sent any message :(

    • @Meverynoob
      @Meverynoob 7 ปีที่แล้ว

      did u check ur firebase database permissions? I got trolled pretty hard by that (change the auth thing)

  • @AaqibHussain
    @AaqibHussain 8 ปีที่แล้ว

    Is react-native-router-flux deprecated?

    • @muneerpp3491
      @muneerpp3491 8 ปีที่แล้ว

      no

    • @sieve5
      @sieve5 7 ปีที่แล้ว

      I want to learn what is popular, but I would say that if you know how to use react-native-router-flux then you should use it!

  • @Younesswak11
    @Younesswak11 8 ปีที่แล้ว

    That smile though,but nice work!

  • @mdk124
    @mdk124 7 ปีที่แล้ว

    It's like there is a bee inside my earphone.

  • @Hatazhix
    @Hatazhix 7 ปีที่แล้ว

    include flux in your description plz

  • @primetimetran
    @primetimetran 8 ปีที่แล้ว

    Hey Farid,
    I've been following your tutorial but I've run into a problem I can't seem to resolve, would you mind helping?
    I've attached my stack question so you can get the syntax highlighting and my explanation that's more thorough.
    stackoverflow.com/questions/41042040/this-setstate-react-native
    Thanks in advance!

    • @faridsafi5670
      @faridsafi5670 7 ปีที่แล้ว

      question answered in stackoverflow :)

  • @deandre1988
    @deandre1988 7 ปีที่แล้ว

    1875€ for your course, that's beyond excessive.

  • @huslerbling
    @huslerbling 8 ปีที่แล้ว

    Farid ton accent francais il dechire lol

  • @PiMpMyCoMpUtEr
    @PiMpMyCoMpUtEr 7 ปีที่แล้ว +6

    Tu aurait pu la faire en français.....vu l'accent ^^

  • @cornertechnews
    @cornertechnews 7 ปีที่แล้ว

    hi I try to do what you guide but it is not work - actually, I type the react-native init ChatApp in Hyper but it say it is not found - so could you help with that.