Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WEB Gifted Chat #1284

Merged
merged 59 commits into from
Sep 19, 2019
Merged

WEB Gifted Chat #1284

merged 59 commits into from
Sep 19, 2019

Conversation

xcarpentier
Copy link
Collaborator

@xcarpentier xcarpentier commented Jun 26, 2019

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

@codecov
Copy link

codecov bot commented Jun 26, 2019

Codecov Report

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

Impacted file tree graph

@@            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
Copy link
Collaborator Author

xcarpentier commented Jun 26, 2019

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
Copy link
Contributor

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
Copy link
Collaborator Author

xcarpentier commented Jul 3, 2019

@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
Copy link
Collaborator Author

I removed video dependency.

@zacksabbath
Copy link

Very excited for this feature to merge!

@n-sviridenko
Copy link

Any updates on this PR?

@EvanBacon
Copy link
Contributor

EvanBacon commented Jul 23, 2019

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
Copy link
Collaborator Author

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
Copy link
Collaborator Author

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 :)

@xcarpentier xcarpentier merged commit 50dbd11 into master Sep 19, 2019
@adelowo
Copy link

adelowo commented Sep 20, 2019

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

Neat.. Works perfectly fine.

@xcarpentier
Copy link
Collaborator Author

@kaxterzz
Copy link

kaxterzz commented Jan 7, 2020

@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.

@xcarpentier xcarpentier deleted the feature/rnw branch May 7, 2020 07:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants