CODEWITHSUNDEEP
javascriptfirebasefirebase-realtime-databasereact-native-ios
Gregory Thompson
Gregory Thompson

Reputation: 1

How to display data retrieved from firebase in react naive for ios

My team is working on a tutoring app where students send in requests from the student side to the tutor side. We are able to reference firebase for out data and see it in the console. But we are not able to display on the page. This is the tutor side code here:

import React from 'react';
import { FlatList, Text, StyleSheet, View } from 'react-native';
import firebaseRef from './Firebase';


export default class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = ({
            sessions: []
        });
    }
    componentDidMount(){
        const { uid } = firebaseAuth.currentUser
        firebaseRef.database().ref('Sessions/' + uid).on('value', function (snapshot) {
            sessions = snapshot.val()
            this.setState({
                sessions: sessions,
                sessions,
              });
      })
    }

    getSessionsRef = () => {
        return firebaseRef.database().ref('sessions')
      }

    render(){
        const {sessions} = this.state
        return(
        <View style={styles.container}>
            <FlatList>
                <Text>{sessions}</Text>
            </FlatList>
        </View>
         )
        }
    }

const styles = StyleSheet.create({
    container:{
        flex: 1,
        justifyContent:'center',
        padding:-1.5
    }
});

Upvotes: 0

Views: 53

Answers (1)

Ziyo
Ziyo

Reputation: 604

Something like this: 

<FlatList
  data={sessions}
  keyExtractor={(item, index) => item.id}
  renderItem={({item}) => (
    <Text>{item}</Text>
  )}
/>

Upvotes: 1

Related Questions