We Keep Coding

Having issue to stretch text input fully?

I'm having a problem to stretch the text input fully till the whole "item.membername" comes into a row like created UI. Currently the "item.membername" goes to second line because of a long string membername. Please do help me out. Below I have attached the UI pictures along with code.
Created UI:
Current UI:
ApprovedScreen.js
import React, {useState} from 'react';
import {GrayCustomView} from './../components/styles';
import {View, Text, TouchableOpacity, Image, FlatList} from 'react-native';
import GlobalStyle from '../components/GlobalStyle';
import {ApprovedReceiptData} from '../constants/dummy'
import { useNavigation } from '#react-navigation/native';
const ApprovedReceiptScreen = () => {
const navigation = useNavigation();
const renderItem = ({item}) => (
<GrayCustomView>
{item.membername === 'No Receipt History' ? (
<TouchableOpacity style={[GlobalStyle.ApprovedButtonContainer]}>
<View style={[GlobalStyle.ReceiptUpperContainer]}>
<Text style={[GlobalStyle.ReceiptDetails5]}>{item.membername}</Text>
</View>
</TouchableOpacity>
) : (
<TouchableOpacity style={[GlobalStyle.ApprovedButtonContainer]} activeOpacity={0.8} onPress={() => {navigation.navigate('ReceiptDetailsScreen',{migrateData: item});}}>
<View style={[GlobalStyle.LeftContainer]}>
<View style={[GlobalStyle.UpperContainer]}>
<View style={[GlobalStyle.ReceiptHeader]}>
<Text style={[GlobalStyle.ReceiptListTitle]}>{item.receiptnum}</Text>
</View>
</View>
<View style={[GlobalStyle.LowerLeftContainer]}>
<View style={[GlobalStyle.ReceiptImageView]}>
<Image style={[GlobalStyle.ReceiptImageList]} source={{uri: item.memberImage}}/>
</View>
<View style={[GlobalStyle.LowerRightContainer]}>
<Text style={[GlobalStyle.ReceiptDetails1]}>{item.membername}</Text>
<Text style={[GlobalStyle.ReceiptDetails1]}>{item.date}</Text>
</View>
</View>
</View>
<View style={[GlobalStyle.RightContainer]}>
<View style={[GlobalStyle.RightUpperContainer]}>
<Text style={[GlobalStyle.ReceiptListTitle1]}>{item.points}</Text>
</View>
<View style={[GlobalStyle.RightLowerContainer]}>
<Text style={[GlobalStyle.ReceiptDetails4]}>{item.receiptamount}</Text>
</View>
</View>
</TouchableOpacity>
)}
</GrayCustomView>
)
Globalstyle.js
ApprovedButtonContainer:{
width: DEVICE_WIDTH * 0.86,
height: DEVICE_HEIGHT * 0.20,
backgroundColor: white,
elevation: 11,
marginLeft: 30,
borderRadius: 6,
marginBottom: 10,
marginTop: 20,
flexDirection: 'row'
},
LeftContainer:{
flex: 2
},
UpperContainer:{
flex: 1,
justifyContent: 'center',
paddingHorizontal: 5,
},
ReceiptImageList:{
width: DEVICE_WIDTH * 0.15,
height: DEVICE_HEIGHT * 0.09,
backgroundColor: empty,
borderRadius: 6,
marginTop: 10,
marginLeft: 5
},
LowerLeftContainer:{
flex: 2,
flexDirection: 'row',
},
ReceiptImageView:{
flex: 1,
padding: 5
},
LowerRightContainer:{
flex: 2,
justifyContent: 'center',
paddingHorizontal: 5,
},
ReceiptDetails1:{
color: black,
fontSize: 14,
fontWeight: 'normal',
backgroundColor: empty,
},
RightContainer:{
flex: 1,
},
RightUpperContainer:{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
ReceiptListTitle1:{
color: black,
fontWeight: 'bold',
fontSize: 17
},
RightLowerContainer:{
flex: 2,
alignItems: 'center',
justifyContent: 'center',
},
ReceiptDetails4:{
color: black,
fontSize: 22,
fontWeight: 'bold',
},
ReceiptListTitle:{
color: black,
fontSize: 17,
fontWeight: 'bold',
},
})

How do I listen for a click in a layer below (outside) a modal?

Tl;dr
How do I listen for a click in a layer below?
Youtube Video of problem in HD
Hello everyone,
I started yesterday with the dev.to app and now I'm facing an issue that is probably React Native specific.
If you click on your avatar in the top right corner of the dev.to app, a menu will open. Currently I have decided to use the modal brought by React Native.
import { Modal } from 'react-native';
I include it in the code as follows:
// TopBar.js
<Modal
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
setModalVisible(!modalVisible);
}}>
<UserModal toggleFunction={setModalVisible} />
</Modal>
and pass the current state via the toggleFuntion prop
const [modalVisible, setModalVisible] = useState(false);
The content of the modal is structured as follows
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.userNameText}>Sebastian Richter</Text>
<Text style={styles.userNicknameText}>#gismo1337</Text>
<View style={styles.divider} />
<Text style={styles.modalText}>Dashboard</Text>
<Text style={styles.modalText}>Create Post</Text>
<Text style={styles.modalText}>Reading list</Text>
<Text style={styles.modalText}>Settings</Text>
<View style={styles.divider} />
<Text style={styles.modalText}>Sign Out</Text>
{/* FIXME: For Development only */}
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={() => setModalVisible(false)}>
<Text style={styles.textStyle}>close - for develop only</Text>
</Pressable>
</View>
</View>
const styles = StyleSheet.create({
centeredView: {
alignItems: 'center',
marginTop: 55,
},
modalView: {
width: '95%',
backgroundColor: '#161616',
borderRadius: 5,
borderWidth: 1,
borderColor: '#363636',
padding: 5,
alignItems: 'flex-start',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
modalText: {
color: 'white',
marginBottom: 15,
textAlign: 'center',
paddingLeft: 15,
},
userNicknameText: {
color: '#9C9C9C',
marginBottom: 15,
textAlign: 'center',
paddingLeft: 15,
},
userNameText: {
color: 'lightgray',
textAlign: 'center',
paddingLeft: 15,
},
divider: {
borderBottomColor: '#363636',
borderBottomWidth: 1,
width: '100%',
marginBottom: 20,
}
});
Unfortunately, when the modal is open, I now have the problem that clicking on the avatar again is not noticed. This should cause the modal to close. However, my guess is that the "layer" of the ModalView is now over it and the click doesn't arrive.
Q: Does anyone have an idea how I can sort of notice a click in a layer below?
Q: What advantages does the React Native modal bring that a view I have created myself does not have?
Repo:
https://github.com/Gismo1337/dev-to-clone/blob/main/components/TopBar.js
https://github.com/Gismo1337/dev-to-clone/blob/main/components/UserModal.js

horizontal ScrollView is not scrolling

When adding horizontal={true} to my scrollview, I thought that would be enough to be able to scroll sideways. For some reason, even though there is enough content to scroll to, the images will not scroll continuously. If you copy and paste this code into snack.expo.io you will see what I mean.
I am not sure what is causing this issue, as I know the normal scrollview vertically works fine and scrolls like normal. I have also tried using nestedScrollenabled to true
Any insight at all is appreciated more than you know!
import React, { useState } from 'react';
import {Pressable, StyleSheet, Text, View, useWindowDimensions, Dimensions, Image, Animated, PanResponder,
TouchableOpacity, ScrollView, ImageBackground, Platform} from 'react-native';
import { SearchBar } from 'react-native-elements';
import {
scale,
verticalScale,
moderateScale,
ScaledSheet,
} from 'react-native-size-matters';
import { MaterialCommunityIcons } from '#expo/vector-icons';
const Images = [
{ id: '1', uri: require('./assets/snack-icon.png'), text: 'Test' },
{ id: '2', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
{ id: '3', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
{ id: '4', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
]
const pressableTest = () => {
let textlog = '';
const [state, setState] = useState(0);
};
export default class Home extends React.Component {
renderImagesHorizontal = () => {
return Images.map((item, i) => {
return (
<View
style={{
width : '150%',
paddingLeft: scale(10),
paddingRight: scale(10),
paddingBottom: scale(15),
}}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('VenueDetails')}>
<ImageBackground
source={item.uri}
style={{
width: '100%',
height: scale(225),
shadowColor: '#000',
shadowOffset: { width: 1, height: 4 },
shadowOpacity: 1,
}}
imageStyle={{ borderRadius: 10 }}>
<View
style={{
position: 'absolute',
bottom: 10,
left: 10,
justifyContent: 'flex-start',
alignItems: 'flex-start',
}}>
<Text style={styles.name}>Name</Text>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Text style={styles.category}>Category</Text>
<Text style={styles.dot}>⬤</Text>
<Text style={styles.money}>$$</Text>
<Text style={styles.dot}>⬤</Text>
<Text style={styles.starRating}>★★★</Text>
</View>
</View>
</ImageBackground>
</TouchableOpacity>
</View>
);
});
};
renderImagesVertical = () => {
return Images.map((item, i) => {
return (
<View style={{ paddingLeft: scale(10), paddingRight: scale(10), paddingBottom: scale(20) }}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('VenueDetails')}>
<ImageBackground
source={item.uri}
style={{ width:'100%', height: scale(125),
shadowColor: '#000',
shadowOffset: {width: 1, height: 7},
shadowOpacity: 1,}} imageStyle = {{ borderRadius: 20}}>
<View
style={{
position: 'absolute',
bottom: 10,
left: 10,
justifyContent: 'flex-start',
alignItems: 'flex-start',
}}>
<Text style={styles.name}>Name</Text>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Text style={styles.category}>Category</Text>
<Text style={styles.dot}>⬤</Text>
<Text style={styles.money}>$$</Text>
<Text style={styles.dot}>⬤</Text>
<Text style={styles.starRating}>★★★</Text>
</View>
</View>
</ImageBackground>
</TouchableOpacity>
</View>
);
});
};
state = {
search: '',
};
updateSearch = (search) => {
this.setState({ search });
};
render() {
const { search } = this.state;
return (
<ScrollView style={{ flex: 1, backgroundColor: '#272933', horizontal: 'true' }}>
<View style={{flexDirection:'row', marginTop: scale(20)}}>
{/*this will proabbly say somethign different and probably have a different look to it but you get the idea
I was also trying to add a shadow to this but couldnt figure it out. */}
<Text style={{marginTop: scale(30) ,fontSize: scale(40), fontWeight: 'bold', color: '#FFFFFF', paddingLeft: scale(20)}}>
Home
</Text>
<View style={{paddingTop: scale(40), paddingLeft: scale(155)}}>
</View>
</View>
<SearchBar
placeholder="Search..."
onChangeText={this.updateSearch}
value={search}
round='true'
containerStyle={{backgroundColor: '#272933', borderBottomColor: 'transparent', borderTopColor: 'transparent',
paddingLeft: scale(20) , paddingRight: scale(20)}}
inputContainerStyle={{height: scale(30), width: scale(310), backgroundColor: '#3A3B3C'}}
searchIcon={() => <MaterialCommunityIcons name="glass-mug-variant" size={25} color='#87909A'/>}
clearIcon= 'null'
/>
<ScrollView
horizontal={true}
>
<View style={{ flex: 1, flexDirection : 'row', marginTop: 15 }}>{this.renderImagesHorizontal()}</View>
</ScrollView>
<View style={{ flex: 1, marginTop: 15 }}>{this.renderImagesVertical()}</View>
</ScrollView>
);
}
}
const styles = ScaledSheet.create({
starRating: {
color: 'white',
fontSize: '20#s',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 2,
textShadowColor: '#000',
},
category: {
color: 'white',
fontSize: '20#s',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 2,
textShadowColor: '#000',
},
name: {
fontWeight: 'bold',
color: 'white',
fontSize: '25#s',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 2,
textShadowColor: '#000',
},
dot: {
color: 'white',
fontSize: '5#s',
paddingLeft: '5#s',
paddingRight: '5#s',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 2,
textShadowColor: '#000',
},
money: {
color: 'white',
fontSize: '20#s',
},
});

in android you must add nestedScrollEnabled={true} to Enables nested scrolling for Android API level 21+. see here
<ScrollView>
<ScrollView nestedScrollEnabled={true}>
</ScrollView>
</ScrollView>
try snack here (test in android & ios not web)

Getting list from firebase and rendering it doesn't work

Problem
I am creating an app with react native and firebase where users can post to firebase, and then my app will render all of the posts. When I added the code to render the posts from firebase (flatlist), nothing renders. I convert the list from firebase to an array, then use that array in a flatlist to render the posts, but nothing is showing up. I would love some help.
Code
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button, FlatList } from 'react-native';
import { Font } from 'expo';
import * as firebase from 'firebase';
const firebaseConfig = {
apiKey: "API_KEY",
authDomain: "candidtwo.firebaseapp.com",
databaseURL: "https://candidtwo.firebaseio.com",
storageBucket: "candidtwo.appspot.com",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
var fontLoaded = false;
var ref = firebase.database().ref('posts');
var newPostRef = ref.push();
var postWidth = 350;
export default class App extends React.Component {
state = {
fontLoaded: false,
};
componentDidMount() {
Expo.Font.loadAsync({
'JosefinSans-Regular.ttf': require('./JosefinSans-Regular.ttf'),
});
}
constructor(props) {
super(props);
this.state = { postInput: ""}
}
getItems() {
var items = [];
var query = ref.orderByKey();
query.once ('value', (snap) => {
snap.forEach ( (child) => {
items.push(childs.val());
});
});
return items;
}
renderItem({ items, index }) {
return <View>
<View style={{width: parseInt(this.state.postWidth), height: 250, backgroundColor: '#1daff1', alignItems: 'center', justifyContent: 'center', borderRadius: 10, paddingLeft: 10, paddingRight:10}}>
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', textAlign: 'center'}}>
{toString(reverse(items))}
</Text>
</View>
<View style={{width: parseInt(this.state.postWidth), height: 40, borderRadius: 10, backgroundColor: '#147aa8', flexDirection: 'row',paddingLeft:5}} >
<Image source={require('./CandidtwoImages/unlove.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
-
</Text>
<Image source={require('./CandidtwoImages/undislike.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
-
</Text>
<Image source={require('./CandidtwoImages/comments.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
-
</Text>
</View>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
</View>;
}
render() {
return (
<View style={styles.container}>
<View style={styles.button}>
<View style={{width: 1, height: 30, backgroundColor: '#e8e8e8'}} />
<Button
onPress={() => this.setState({ fontLoaded: true })}
title="Press Me To Load the App After 15 Seconds!"
color="#fe8200"
accessibilityLabel="Get started anonymously!"
/>
</View>
{this.state.fontLoaded ? (
<View style={styles.container}>
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 16 }}>
Whats on your mind? Create a post!
</Text>
<TextInput
style={{height:40, width: 320, borderColor: '#303030', borderWidth: 1}}
onChangeText={(postInput)=>this.setState({postInput})}
value={this.state.postInput}
/>
<Button
style={{justifyContent: 'center'}}
onPress={() => {
newPostRef.set({ content:this.state.postInput });
this.setState({ postInput: "Your post was succsesfully uploaded! :)" })
}}
title=" + "
color="#fe8200"
/>
<ScrollView>
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 16 }}>
Adjust the size of posts:
</Text>
<TextInput
style={{height:40, width: 100, borderColor: '#303030', borderWidth: 1}}
onChangeText={(postWidth)=>this.setState({postWidth})}
value={this.state.postWidth}
/>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: parseInt(this.state.postWidth), height: 250, backgroundColor: '#1daff1', alignItems: 'center', justifyContent: 'center', borderRadius: 10, paddingLeft: 10, paddingRight:10}} >
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', textAlign: 'center'}}>
Why do android phones have higher inital quality than apple phones, but apple phones have a more consistent amount of quality throughout their years?
</Text>
</View>
<View style={{width: parseInt(this.state.postWidth), height: 40, borderRadius: 10, backgroundColor: '#147aa8', flexDirection: 'row',paddingLeft:5}} >
<Image source={require('./CandidtwoImages/unlove.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
3
</Text>
<Image source={require('./CandidtwoImages/undislike.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
1
</Text>
<Image source={require('./CandidtwoImages/comments.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
8
</Text>
</View>
<FlatList
data={this.getItems}
renderItem={this.renderItem}
/>
</ScrollView>
</View>) : (null) }
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 8,
backgroundColor: '#e8e8e8',
alignItems: 'center'
},
button: {
flex: 1,
backgroundColor: '#e8e8e8',
alignItems: 'center'
},
});
Picture of firebase database

id have getItems() in your componentWillMount method, and have it set a state ( Such as "firebaseItems" ) or such. Then in your FlatList have your data equal {this.state.firebaseItems}. This will force a re-render once you receive your information. EG
componentWillMount(){
this.getItems();
}
getItems(){
var items = [];
var query = ref.orderByKey();
query.once ('value', (snap) => {
snap.forEach ( (child) => {
items.push(childs.val());
});
}).then(() => {
this.setState({firebaseItems: items});
});
}
then later
<FlatList data = {this.state.firebaseItems}.../>

Content of a variable is [object Undefined]

Problem
I am creating a simple app using React Native and firebase where users can post to the web and see what other people have posted. You can upload things to the servers but when you try and render the posts using a flatlist, the posts say [object Undefined] instead of what is on the server. I would love help fixing this.
Code
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button, FlatList } from 'react-native';
import { Font } from 'expo';
import * as firebase from 'firebase';
const firebaseConfig = {
apiKey: "API-key",
authDomain: "candidtwo.firebaseapp.com",
databaseURL: "https://candidtwo.firebaseio.com",
storageBucket: "candidtwo.appspot.com",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
var fontLoaded = false;
var ref = firebase.database().ref('posts');
var newPostRef = ref.push();
var postWidth = 350;
export default class App extends React.Component {
state = {
fontLoaded: false,
};
componentDidMount() {
Expo.Font.loadAsync({
'JosefinSans-Regular.ttf': require('./JosefinSans-Regular.ttf'),
});
}
constructor(props) {
super(props);
this.state = { postInput: ""}
}
componentWillMount(){
this.getItems();
}
getItems(){
var items = [];
var query = ref.orderByKey();
query.once ('value', (snap) => {
snap.forEach ( (child) => {
items.push(child.val());
});
}).then(() => {
this.setState({firebaseItems: items});
});
}
renderItem({ items, index }) {
return <View>
<View style={{width: 360, height: 250, backgroundColor: '#1daff1', alignItems: 'center', justifyContent: 'center', borderRadius: 10, paddingLeft: 10, paddingRight:10}}>
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', textAlign: 'center'}}>
{/*{toString(reverse(items))}*/} {toString(items)}
</Text>
</View>
<View style={{width:360, height: 40, borderRadius: 10, backgroundColor: '#147aa8', flexDirection: 'row',paddingLeft:5}} >
<Image source={require('./CandidtwoImages/unlove.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
-
</Text>
<Image source={require('./CandidtwoImages/undislike.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
-
</Text>
<Image source={require('./CandidtwoImages/comments.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
-
</Text>
</View>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
</View>;
}
render() {
return (
<View style={styles.container}>
<View style={styles.button}>
<View style={{width: 1, height: 30, backgroundColor: '#e8e8e8'}} />
<Button
onPress={() => this.setState({ fontLoaded: true })}
title="Get started anonymously!"
color="#fe8200"
accessibilityLabel="Run the app"
/>
</View>
{this.state.fontLoaded ? (
<View style={styles.container}>
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 16 }}>
Whats on your mind? Create a post!
</Text>
<TextInput
style={{height:40, width: 320, borderColor: '#303030', borderWidth: 1}}
onChangeText={(postInput)=>this.setState({postInput})}
value={this.state.postInput}
/>
<Button
style={{justifyContent: 'center'}}
onPress={() => {
newPostRef.set({ content:this.state.postInput });
this.setState({ postInput: "Your post was succsesfully uploaded! :)" })
}}
title=" + "
color="#fe8200"
/>
<ScrollView>
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 16 }}>
Adjust the size of posts:
</Text>
<TextInput
style={{height:40, width: 100, borderColor: '#303030', borderWidth: 1}}
onChangeText={(postWidth)=>this.setState({postWidth})}
value={this.state.postWidth}
/>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: parseInt(this.state.postWidth), height: 250, backgroundColor: '#1daff1', alignItems: 'center', justifyContent: 'center', borderRadius: 10, paddingLeft: 10, paddingRight:10}} >
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', textAlign: 'center'}}>
Why do android phones have higher inital quality than apple phones, but apple phones have a more consistent amount of quality throughout their years?
</Text>
</View>
<View style={{width: parseInt(this.state.postWidth), height: 40, borderRadius: 10, backgroundColor: '#147aa8', flexDirection: 'row',paddingLeft:5}} >
<Image source={require('./CandidtwoImages/unlove.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
3
</Text>
<Image source={require('./CandidtwoImages/undislike.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
1
</Text>
<Image source={require('./CandidtwoImages/comments.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
8
</Text>
</View>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<FlatList
data = {this.state.firebaseItems}
renderItem={this.renderItem}
/>
</ScrollView>
</View>) : (null) }
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 8,
backgroundColor: '#e8e8e8',
alignItems: 'center'
},
button: {
flex: 1,
backgroundColor: '#e8e8e8',
alignItems: 'center'
},
});
Firebase database layout
posts:
ipaurfiauerspfna(random example key):
content: "hello world"
apiergnfpiarngaenig:
content: "test"
helpful warning message[![warning][2]][2] VirtualizedList: missing keys for items, make sure to specify a random key property on every item or provide a custom keyExtractor.

You are trying to pull firebaseItems from state before you have set it (due to the delay in query response), so this will throw an error. To fix this, declare it is a state variable in your constructor. EG
export default class App extends React.Component {
...
constructor(props) {
super(props);
this.state = {
postInput: "",
firebaseItems: [],
}
}

Looks like you haven't set some variables yet, you are going to want to extend your current code of:
state = {
fontLoaded: false,
};
to
state = {
postInput: "", // Or some other default
fontLoaded: false,
};