Im trying to develop an app using react native, but im facing some issues on web version. In this particular case is the scroll not work properly on web browser, but on iOS simulator works well.
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, FlatList, Image } from 'react-native';
import { ListItem } from 'react-native-elements';
import axios from 'axios';
const OcorrenciasScreen = ({ navigation }) => {
const [emergencies, setEmergencies] = useState([]);
useEffect(() => {
axios.get('http://localhost:3000/api/data')
.then(response => {
const responseData = response.data;
const mappedData = responseData.incident.map(item => ({
id: item.id,
ocorrencia: item.morada,
description: item.desc_classificacao,
time: item.hora_alerta,
data_hora_alerta: item.data_hora_alerta,
morada: item.morada,
localidade_morada: item.localidade_morada,
desc_classificacao: item.desc_classificacao
}));
setEmergencies(mappedData);
})
.catch(error => {
console.error('Error:', error);
});
}, []);
const renderItem = ({ item }) => (
<ListItem onPress={() => navigation.navigate('OcorrenciaDetail', { emergency: item })} containerStyle={styles.item}>
<Image source={require('./../assets/houseFireVector.png')} style={styles.image} />
<ListItem.Content>
<ListItem.Title style={styles.title}>{item.ocorrencia}</ListItem.Title>
<ListItem.Subtitle style={styles.description}>{item.description}</ListItem.Subtitle>
</ListItem.Content>
<View style={styles.rightContainer}>
<Text style={styles.timestamp}>{item.time}</Text>
<ListItem.Chevron color="" />
</View>
</ListItem>
);
return (
<View style={styles.container}>
<FlatList
data={emergencies}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
item: {
backgroundColor: '#E0E0E0',
padding: 20,
marginVertical: 10,
marginHorizontal: 20,
borderColor: '#C0C0C0',
borderWidth: 1,
borderRadius: 5,
},
title: {
fontSize: 24,
paddingBottom: 10,
},
description: {
fontSize: 18,
},
rightContainer: {
flexDirection: 'row',
alignItems: 'center',
},
timestamp: {
marginRight: 10,
color: '#888',
},
image: {
width: 75,
height: 75,
resizeMode: 'contain',
},
});
export default OcorrenciasScreen;
Can you help me solve this issue? How i can manage the scroll view correctly on web? I need to have the web totaly functional as the iOS version.
Best regards
Top comments (0)