React Native - ScrollView not work on WebBrowser (Chrome) but on IOS Simulator work well

NunoSaa — Fri, 03 May 2024 10:32:56 +0000

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

DEV Community: NunoSaa

React Native - ScrollView not work on WebBrowser (Chrome) but on IOS Simulator work well