Good afternoon I have the following problem with an apk in react-native. I already try to find the error but I can not find any I hope you can help me I leave the code below.
ArtistDetailView.js
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
View,
TextInput,
TouchableOpacity
} from 'react-native';
import ArtistBox from './ArtistBox';
import getArtists from './api-client';
import firebaseDatabase from './firebase';
import CommentList from './CommentList';
import Icon from 'react-native-vector-icons/MaterialIcons';
export default class ArtistDetailView extends Component<Props> {
state = {
comments:[]
}
componentDidMount(){
this.getArtistCommentsRef().on('child_added', (data) =>{
const comment = data.val()
this.setState({
comments: this.state.comments.concat(comment)
})
});
}
handleSend=()=>{
const {text} = this.state
const artistCommentsRef = this.getArtistCommentsRef()
var newCommentRef = artistCommentsRef.push();
newCommentRef.set({text});
}
getArtistCommentsRef = () => {
const {id}= this.props.artist
return firebaseDatabase.ref("comments/" + id)
}
handleChangeText = (text) => this.setState({text})
render() {
const artist = this.props.artist
const {comments} = this.state
return (
<View style={styles.container}>
<ArtistBox artist={artist}/>
<CommentList comments={comments}/>
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
placeholder="Nuevo Comentario"
onChangeText={this.handleChangeText}
/>
<TouchableOpacity onPress={this.handleSend}>
<Icon name="send" size={25} color="lightblue"/>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
paddingTop:10,
},
inputContainer:{
position:'absolute',
bottom:0,
right:0,
left:0,
height:55,
paddingHorizontal:10,
backgroundColor:'#EBEBEC',
flexDirection:'row',
alignItems:'center',
},
input:{
flex:1,
height:55,
}
});
CommentList.js
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
ListView
} from 'react-native';
import Comment from './Comment';
export default class CommentList extends Component<Props> {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state ={
dataSource:ds
}
}
componentDidMount(){
this.updateDataSource(this.props.comments)
}
componentWillReceiveProps(newProps){
if (newProps.comments !== this.props.comments){
this.updateDataSource(newProps.comments)
}
}
updateDataSource = (data)=>{
this.setState({
dataSource: this.state.dataSource.cloneWithRows(data)
})
}
render() {
return (
<ListView
enableEmptySections ={true}
style={styles.container}
dataSource={this.state.dataSource}
renderRow={(comment) => {
return(
<Comment text={comment.text}/>
)
}}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
paddingTop:10,
},
});
Comment.js
import React from 'react';
import {
Text
} from 'react-native';
const Comment = (props) =>
<Text>{props.text}</Text>
API-CLIENT.JS
const URL='http://ws.audioscrobbler.com/2.0/?method=geo.gettopartists&country=mexico&api_key=af0a08ae2fa637dea7fa0a2ce0a977b4&format=json'
function getArtists() {
return fetch(URL)
.then(response => response.json())
.then(data => data.topartists.artist)
.then(artists => artists.map(artist => {
return{
id: artist.mbid,
name: artist.name,
image: artist.image[3]['#text'],
likes:200,
comments:140,
}
}))
}
export default getArtists