WEB Gifted Chat

[xcarpentier]

Using react-native-web for Gifted Chat.
Next version: next
@EvanBacon

[codecov]

Codecov Report

❗ No coverage uploaded for pull request base (master@4ea32a9). Click here to learn what that means.
The diff coverage is 22.38%.

@@            Coverage Diff            @@
##             master    #1284   +/-   ##
=========================================
  Coverage          ?   30.49%           
=========================================
  Files             ?       21           
  Lines             ?      623           
  Branches          ?      211           
=========================================
  Hits              ?      190           
  Misses            ?      424           
  Partials          ?        9

Impacted Files	Coverage Δ
src/Composer.tsx	20% <ø> (ø)
src/MessageText.tsx	33.33% <ø> (ø)
src/MessageVideo.tsx	0% <ø> (ø)
src/MessageImage.tsx	80% <ø> (ø)
src/LoadEarlier.tsx	57.14% <ø> (ø)
src/MessageContainer.tsx	14.11% <0%> (ø)
src/QuickReplies.tsx	6.25% <0%> (ø)
src/GiftedAvatar.tsx	14.7% <0%> (ø)
src/Message.tsx	40.47% <0%> (ø)
src/Constant.ts	100% <100%> (ø)
... and 5 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4ea32a9...274bd3f. Read the comment docs.

[xcarpentier]

There are issues with <ParseText/> to fix it I'm using @EvanBacon PR and for <Video/> I used platform web and require (not yet tested).

[EvanBacon]

It would be great to remove the video as it's a native dependancy. If you create an Expo app (which would have universal support) then you are installing react-native-video and not using.

[xcarpentier]

@EvanBacon expo-av could do the job, no?
Will you webify it already?
Can we use it as a dependency or is the issue?

[xcarpentier]

I removed video dependency.

[zacksabbath]

Very excited for this feature to merge!

[n-sviridenko]

Any updates on this PR?

[EvanBacon]

Re: Video support.

We are investigating adding a .expo file extension which would then enable you to use react-native-video or expo-av. This would preserve the tree-shaking functionality provided by the Expo module and fallback when using other modules.

[xcarpentier]

Hi @n-sviridenko,
Thank you for asking.

I have my own project using this web implementation (here with next version)
And another project using the actual version and I will switch to next and check if nothing is broken.

I changed/fixed a lot of code for web, because inverted={false} prop is better UX and wasn't fully supported.

If you have a project using GiftedChat, please try this version! And let me know if something is broken:

"react-native-gifted-chat": "next",

or

"react-native-gifted-chat": "0.10.0-beta.web.18",

(depending on a new version will be out again)
Thanks :)

[xcarpentier]

Hi @EvanBacon,
About <video/>, I removed it as you suggested.
I will keep it removed and create another PR later with .expo.{js,ts,jsx,tsx} when it will be supported for the web.
Thanks :)

[adelowo]

Trying this out tomorrow.. Thanks for the hardwork @xcarpentier !!!

Neat.. Works perfectly fine.

[xcarpentier]

See demo: https://reverent-bardeen-47c862.netlify.com/

[kaxterzz]

@xcarpentier first of all thank you for the awesome work..

I'm trying to gifted chat for web and I have followed the sample project that you have created. The thing is I noticed that you have set the dimensions of the current window to the view so GiftedChat take the whole window size.

I tried to using it inside a grid (using material-ui component framework for react) without setting the width and height and GiftedChat isn't visible on the window but if I set width and height manually it's visible.

This is what I have tried in Content component

`function Content() {
  return (
      <Container>
        <Grid item xs={12} sm={6}>
          <SocketContext.Consumer>
            {socket => <MainChatArea socket={socket} />}
          </SocketContext.Consumer>
        </Grid>
        <Grid item xs={12} sm={6}>
        </Grid>
      </Container>
  );
}` 

And MainChatArea Component

`<View>
    <GiftedChat
      messages={this.state.messages}
      onSend={messages => this.onSend(messages)}
      scrollToBottom={true}
      renderUsernameOnMessage={true}
      user={{
        _id: 1,
        name: "You"
      }}
    />
  </View>`

As I said if i set the width and height manually GiftedChat is gets visible. Is there a way to inherit the parent width and height ? Like I want GiftedChat to take the Grid size.