DEV Community

NunoSaa
NunoSaa

Posted on

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

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;
Enter fullscreen mode Exit fullscreen mode

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)