xcarpentier / gifted-chat-web-demo Goto Github PK
View Code? Open in Web Editor NEWGifted chat web demo
Home Page: https://reverent-bardeen-47c862.netlify.com/
Gifted chat web demo
Home Page: https://reverent-bardeen-47c862.netlify.com/
Updating react-native-gifted-chat
to latest version 0.16.3 breaks the build.
./node_modules/react-native-typing-animation/src/index.js
SyntaxError: /node_modules/react-native-typing-animation/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (37:7):
35 |
36 | return (
> 37 | <View style={[styles.container, style]}>
| ^
38 | <Dot x={dotX - dotRadius - dotMargin} y={this.state.y1} radius={dotRadius} style={dotStyles} dotColor={dotColor} />
39 | <Dot x={dotX} y={this.state.y2} radius={dotRadius} style={dotStyles} dotColor={dotColor} />
40 | <Dot x={dotX + dotRadius + dotMargin} y={this.state.y3} radius={dotRadius} style={dotStyles} dotColor={dotColor} />
Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
Additional Information
I opened demo page https://reverent-bardeen-47c862.netlify.com/ on my mobile browser, and I found that messages went up and off screen when keyboard popped up on mobile browser. This may not be good user experience, because users want to see messages when texting.
If you input a message too long, it shows one line. But the starting part is missing, only the ending part remains.
Thank you for this great chat.
After installing the web demo using npm install
and previously updated the package.json
as follows:
"react-native-gifted-chat": "0.11.3",
"react-scripts": "3.1.2",
Whe I run npm start
I have the following error (same for User):
TypeScript error in gifted-chat-web-demo/src/App.tsx(2,22):
Module '"../node_modules/react-native-gifted-chat/lib"' has no exported member 'IMessage'. Did you mean 'Message'? TS2724
1 | import React, { useState } from 'react'
> 2 | import { GiftedChat, IMessage, User } from 'react-native-gifted-chat'
| ^
3 | import { View, Dimensions } from 'react-native'
4 | import './App.css'
Is this plugin compatible for NextJS? Thanks!
Latest canary 0.0.0-fa1b7b915
. See OP for notes.
If there's no further feedback by next week this will be going into master.
@xcarpentier for react-native-gifted-chat
Originally posted by @necolas in necolas/react-native-web#1538 (comment)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.