I created a small learning app and imported data from a local database using the following code:
import { StatusBar } from 'expo-status-bar';
import { Platform, FlatList, StyleSheet, Text, View, TextInput, Button, SafeAreaView, ScrollView } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { Icon } from 'react-native-elements'
import * as React from 'react';
import { ListItem, Avatar} from 'react-native-elements';
import { Header } from 'react-native-elements';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { List, Colors } from 'react-native-paper';
import Moment from 'moment';
const MyComponent = () => {
const [expanded, setExpanded] = React.useState(true);
}
const handlePress = () => setExpanded(!expanded);
export default class Db extends React.Component {
state = {
data: [],
}
componentWillMount() { //load data from a remote endpoint (where to instantiate the network request)
this.fetchData();
}
fetchData = async () => {
const response = await fetch('http://localhost:3000/Ph');
const json = await response.json();
this.setState({data: json}); //js object notation
}
keyExtractor = (x, i) => i //extract item
renderItem = ({ item }) => (
<List.Section>
<List.Accordion
theme = {{colors: { primary: '#00A1DE'}}}
style= {{ backgruondColor: '#00A1DE' }}
titleStyle = {styles.titleContainer}
title = {item.Name}
left= { props => <List.Icon {...props} icon = "account" /> }>
<List.Item
titleStyle={styles.textContainer}
title= {item.Geburtsdatum} left= { props => <List.Icon {...props} icon = "cake-variant" /> }></List.Item>
<List.Item
titleStyle={styles.textContainer}
title={item.hobbies} left= { props => <List.Icon {...props} icon = "table-tennis" /> }></List.Item>
</List.Accordion>
</List.Section>
)
render() {
return (
<FlatList
keyExtractor={this.keyExtractor}
data = {this.state.data}
renderItem = { this.renderItem }
/>
)
}
}
const styles = StyleSheet.create({
textContainer: {
flex: 1,
height: '90%',
width: '90%',
},
titleContainer: {
fontWeight: 'bold',
}
});
While this setup works perfectly in the Expo web view, I encountered an issue when trying to view it on my iPhone by scanning the QR Code. The data does not show up, only the footer and header with the bottom menu are displayed...
I also noticed a yellow warning due to my ComponentWillMount function. However, I'm unsure if this is causing the problem. Any insights on why it's not working on my iPhone even though it works fine on the Web View from Expo?