SHARE
TWEET

Untitled

a guest Jun 18th, 2019 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from "react";
  2. import { StyleSheet, View, Text, FlatList } from "react-native";
  3. import firebase from 'firebase/app';
  4.  
  5.  
  6.  
  7.  
  8. export default class Card extends React.Component {
  9.   constructor(props) {
  10.     super(props);
  11.     this.state = {
  12.       highScoreList: null,
  13.       isDataLoaded: false
  14.     }
  15.   }
  16.  
  17.  
  18.   componentDidMount() {
  19.     const hList = [];
  20.     const ref = firebase.database().ref('users')
  21.     ref.orderByChild('hours').on('child_added', function(snapshot) {
  22.       hList.push({
  23.         id: snapshot.key,
  24.         hours: snapshot.val().hours,
  25.         name: snapshot.val().name
  26.       });
  27.     });
  28.  
  29.     this.setState({
  30.       highScoreList: hList,
  31.       isDataLoaded: true
  32.     })
  33.    
  34.  
  35.  
  36.   }
  37.  
  38.  
  39.  
  40.   render(){
  41.     if(this.state.isDataLoaded && this.state.highScoreList){
  42.       console.log("Innafor state")
  43.       console.log(this.state.highScoreList)
  44.      
  45.       return (
  46.         <View style={styles.card}>
  47.           {this.state.highScoreList.map( user => <Text key = {user.key} style = {{textAlign: 'center', marginBottom: 10}}>{user.name}        {user.hours}</Text>)}
  48.         </View>
  49.       )
  50.     }else{
  51.       console.log("State var tom")
  52.       return (<Text> Waiting for data</Text>)
  53.     }
  54.   }
  55.    
  56. }
  57.  
  58.  
  59.  
  60. const styles = StyleSheet.create({
  61.   card: {
  62.     flex: 1, flexDirection: 'row',
  63.     backgroundColor: "#fff",
  64.     paddingVertical: 20,
  65.     paddingHorizontal: 10,
  66.     borderRadius: 20,
  67.     minHeight: 333
  68.   },
  69.   text: {
  70.     fontSize: 30,
  71.     marginBottom: 20,
  72.     color: "black",
  73.   },
  74. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top