SHARE
TWEET

Untitled

a guest Jun 18th, 2019 58 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.  
  43.       return (
  44.         <View style={styles.card}>
  45.           {this.state.highScoreList.map( user => <Text key = {user.key} style = {{textAlign: 'center', marginBottom: 10}}>{user.name}        {user.hours}</Text>)}
  46.         </View>
  47.       )
  48.     }else{
  49.       console.log("State var tom")
  50.       return (<Text> Waiting for data</Text>)
  51.     }
  52.   }
  53.  
  54. }
  55.  
  56.  
  57.  
  58.  
  59. const styles = StyleSheet.create({
  60.   card: {
  61.     flex: 1, flexDirection: 'row',
  62.     backgroundColor: "#fff",
  63.     paddingVertical: 20,
  64.     paddingHorizontal: 10,
  65.     borderRadius: 20,
  66.     minHeight: 333
  67.   },
  68.   text: {
  69.     fontSize: 30,
  70.     marginBottom: 20,
  71.     color: "black",
  72.   },
  73. });
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top