How to display data retrieved from firebase in react naive for ios
0
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
}
});javascript firebase firebase-realtime-database react-native-ios
edited Nov 21 '18 at 2:58
Frank van Puffelen
240k29384411
asked Nov 21 '18 at 1:35
Gregory ThompsonGregory Thompson
1
add a comment |
0
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
}
});javascript firebase firebase-realtime-database react-native-ios
edited Nov 21 '18 at 2:58
Frank van Puffelen
240k29384411
asked Nov 21 '18 at 1:35
Gregory ThompsonGregory Thompson
1
Change the line right after your render to " const {sessions} = this.state.sessions"
– Caleb H.
Nov 21 '18 at 1:39
Your issues is in Flatlist. Thats not how you use Flatlist. Flatlist requires certain props. Here is official docs facebook.github.io/react-native/docs/flatlist
– Ziyo
Nov 21 '18 at 2:00
add a comment |
0
0
0
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
}
});javascript firebase firebase-realtime-database react-native-ios
edited Nov 21 '18 at 2:58
Frank van Puffelen
240k29384411
asked Nov 21 '18 at 1:35
Gregory ThompsonGregory Thompson
1
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
}
});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
}
});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
}
});javascript firebase firebase-realtime-database react-native-ios
javascript firebase firebase-realtime-database react-native-ios
edited Nov 21 '18 at 2:58
Frank van Puffelen
240k29384411
asked Nov 21 '18 at 1:35
Gregory ThompsonGregory Thompson
1
edited Nov 21 '18 at 2:58
Frank van Puffelen
240k29384411
asked Nov 21 '18 at 1:35
Gregory ThompsonGregory Thompson
1
edited Nov 21 '18 at 2:58
Frank van Puffelen
240k29384411
edited Nov 21 '18 at 2:58
Frank van Puffelen
240k29384411
edited Nov 21 '18 at 2:58
Frank van Puffelen
240k29384411
240k29384411
asked Nov 21 '18 at 1:35
Gregory ThompsonGregory Thompson
1
asked Nov 21 '18 at 1:35
Gregory ThompsonGregory Thompson
1
asked Nov 21 '18 at 1:35
Gregory ThompsonGregory Thompson
1
1
Change the line right after your render to " const {sessions} = this.state.sessions"
– Caleb H.
Nov 21 '18 at 1:39
Your issues is in Flatlist. Thats not how you use Flatlist. Flatlist requires certain props. Here is official docs facebook.github.io/react-native/docs/flatlist
– Ziyo
Nov 21 '18 at 2:00
add a comment |
Change the line right after your render to " const {sessions} = this.state.sessions"
– Caleb H.
Nov 21 '18 at 1:39
Your issues is in Flatlist. Thats not how you use Flatlist. Flatlist requires certain props. Here is official docs facebook.github.io/react-native/docs/flatlist
– Ziyo
Nov 21 '18 at 2:00
Change the line right after your render to " const {sessions} = this.state.sessions"
– Caleb H.
Nov 21 '18 at 1:39
Change the line right after your render to " const {sessions} = this.state.sessions"
– Caleb H.
Nov 21 '18 at 1:39
Your issues is in Flatlist. Thats not how you use Flatlist. Flatlist requires certain props. Here is official docs facebook.github.io/react-native/docs/flatlist
– Ziyo
Nov 21 '18 at 2:00
Your issues is in Flatlist. Thats not how you use Flatlist. Flatlist requires certain props. Here is official docs facebook.github.io/react-native/docs/flatlist
– Ziyo
Nov 21 '18 at 2:00
add a comment |
1 Answer
1
active
oldest
votes
1
Something like this:
<FlatList
data={sessions}
keyExtractor={(item, index) => item.id}
renderItem={({item}) => (
<Text>{item}</Text>
)}
/>answered Nov 21 '18 at 2:05
ZiyoZiyo
26439
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404112%2fhow-to-display-data-retrieved-from-firebase-in-react-naive-for-ios%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Something like this:
<FlatList
data={sessions}
keyExtractor={(item, index) => item.id}
renderItem={({item}) => (
<Text>{item}</Text>
)}
/>answered Nov 21 '18 at 2:05
ZiyoZiyo
26439
add a comment |
1
Something like this:
<FlatList
data={sessions}
keyExtractor={(item, index) => item.id}
renderItem={({item}) => (
<Text>{item}</Text>
)}
/>answered Nov 21 '18 at 2:05
ZiyoZiyo
26439
add a comment |
1
1
1
Something like this:
<FlatList
data={sessions}
keyExtractor={(item, index) => item.id}
renderItem={({item}) => (
<Text>{item}</Text>
)}
/>answered Nov 21 '18 at 2:05
ZiyoZiyo
26439
Something like this:
<FlatList
data={sessions}
keyExtractor={(item, index) => item.id}
renderItem={({item}) => (
<Text>{item}</Text>
)}
/><FlatList
data={sessions}
keyExtractor={(item, index) => item.id}
renderItem={({item}) => (
<Text>{item}</Text>
)}
/><FlatList
data={sessions}
keyExtractor={(item, index) => item.id}
renderItem={({item}) => (
<Text>{item}</Text>
)}
/>answered Nov 21 '18 at 2:05
ZiyoZiyo
26439
answered Nov 21 '18 at 2:05
ZiyoZiyo
26439
answered Nov 21 '18 at 2:05
ZiyoZiyo
26439
answered Nov 21 '18 at 2:05
ZiyoZiyo
26439
26439
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404112%2fhow-to-display-data-retrieved-from-firebase-in-react-naive-for-ios%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Change the line right after your render to " const {sessions} = this.state.sessions"
– Caleb H.
Nov 21 '18 at 1:39
Your issues is in Flatlist. Thats not how you use Flatlist. Flatlist requires certain props. Here is official docs facebook.github.io/react-native/docs/flatlist
– Ziyo
Nov 21 '18 at 2:00