liplylie / reactnativechatimageaudio Goto Github PK
View Code? Open in Web Editor NEWReact native gifted chat with image and audio
Home Page: https://medium.com/@decentpianist/react-native-chat-with-image-and-audio-c09054ca2204
React native gifted chat with image and audio
Home Page: https://medium.com/@decentpianist/react-native-chat-with-image-and-audio-c09054ca2204
Could not resolve all dependencies for configuration ':app:_debugApk'.
A problem occurred configuring project ':react-native-sound'.
> The SDK Build Tools revision (23.0.1) is too low for project ':react-native-sound'. Minimum required is 25.0.0
buil.gradel
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
repositories {
jcenter()
maven {
url 'https://maven.google.com/'
name 'Google'
}
}
dependencies {
classpath 'com.android.tools.build:gradle:2.3.3'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
mavenLocal()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
maven {
url 'https://maven.google.com/'
name 'Google'
}
}
}
ext {
buildToolsVersion = "26.0.3"
minSdkVersion = 16
compileSdkVersion = 26
targetSdkVersion = 26
supportLibVersion = "26.1.0"
}
"please help me"
I am going to update bubble messages but i dont know how to update specific message by Id.
Example: in html there is and Id for every tag within a list and if we have to update then we select it by id and then update it.
So how to make a concept like that for react-native-gifted-chat bubble messages?
I tried to use refs with setNativeProps function but did not work.
render(){
return (
<GiftedChat
extraData={this.state}
messages={this.state.messages}
onSend={messages => this.onSend(messages)}
user={{
_id: this.state.userId,
}}
renderBubble={this.renderBubble}
renderInputToolbar={this.renderInputToolbar.bind(this)}
/>
);
}
renderBubble = props => {
if (props.currentMessage.audio) {
return (
<View style={[{ width: 150, height: 70, backgroundColor: 'lightgray' }, props.position === 'left' ? { left: -41 } : {}]}>
<EIcon
name="google-play"
size={30}
color={this.state.playAudio ? "red" : "blue"}
style={{
left: 90,
position: "relative",
shadowColor: "#000",
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.5,
backgroundColor: "transparent"
}}
onPress={() => {
this.setState({
playAudio: true
});
const sound = new Sound(props.currentMessage.audio, "", error => {
if (error) {
console.log("failed to load the sound", error);
}
const duration = sound.getDuration();
const progressPhase = 1 / duration;
if (duration !== 0) {
this._interval = setInterval(() => {
this.setState({
progress: this.state.progress += progressPhase
});
if (this.state.progress >= 1) {
clearInterval(this._interval);
this.setState({
progress: 0.0,
playAudio: false
});
}
}, 1000);
}
sound.play(success => {
console.log(success, "success play");
if (!success) {
Alert.alert("There was an error playing this audio");
}
});
});
}}
/>
<Progress.Circle progress={this.state.progress} showsText size={35} />
</View>
);
} else {
return (
<Bubble
{...props}
textStyle={{
right: {
color: '#fff',
},
left: {
color: '#fff',
},
}}
wrapperStyle={{
left: {
backgroundColor: "orange",
left: -41
},
right: {
backgroundColor: 'green'
}
}}
/>
);
}
}
_Here I have a chatbox when I send multiple audio message for example 3 aduio message: audio message .1, audio message .2, audio message .3 aduio message .1 has came first time. aduio message .3 has came last time.
every audio message has a play icon and a progressbar. When I click on play Icon, then I update the progressbar. here I used interval for one click on play icon, the progressbar gets update multiple time until gets complete._
My Problem is: when i click the play icon of audio message .1 just the last audio message .3 gets updated. I want: if I click on audio message .1 the progressbar of audio message .1 should be update. same for audio message .2 and audio message .3.
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.