Problème de défilement vertical avec ScrollView dans React Native web

[Skymx82]

Description

"Je développe une application React Native et j'ai des problèmes pour faire défiler la page. Lorsque je place mon contenu dans un ScrollView, la page ne défile pas correctement. J'ai essayé plusieurs solutions sans succès.

Steps to reproduce

import React from 'react';
import { View, Text, FlatList, ScrollView, StyleSheet } from 'react-native';

const data1 = [
{ id: '1', title: 'Item 1' },
{ id: '2', title: 'Item 2' },
{ id: '3', title: 'Item 3' },
{ id: '4', title: 'Item 4' },
];

const data2 = [
{ id: '1', title: 'Item A' },
{ id: '2', title: 'Item B' },
{ id: '3', title: 'Item C' },
{ id: '4', title: 'Item D' },
];

const App = () => {
const renderItem = ({ item }) => (

{item.title}

);

return (

Section 1
<FlatList
data={data1}
renderItem={renderItem}
keyExtractor={(item) => item.id}
horizontal
style={styles.flatList}
/>

  <Text style={styles.header}>Section 2</Text>
  <FlatList
    data={data2}
    renderItem={renderItem}
    keyExtractor={(item) => item.id}
    style={styles.flatList}
  />
  
  <Text style={styles.header}>More Content Below</Text>
  <Text style={styles.text}>This section will contain additional content. Scroll down to see more.</Text>
  <Text style={styles.text}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id risus felis.</Text>
</ScrollView>

);
};

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f9f9f9',
},
header: {
fontSize: 24,
fontWeight: 'bold',
marginVertical: 10,
textAlign: 'center',
},
flatList: {
marginBottom: 20,
},
item: {
backgroundColor: '#007AFF',
padding: 10,
borderRadius: 5,
marginHorizontal: 10,
},
itemText: {
color: '#fff',
fontSize: 18,
},
text: {
padding: 20,
fontSize: 16,
textAlign: 'center',
},
});

export default App;

React Native Version

0.76.3

Affected Platforms

Runtime - Web

Output of npx react-native info

⚠️ react-native depends on @react-native-community/cli for cli commands. To fix update your package.json to include:


  "devDependencies": {
    "@react-native-community/cli": "latest",
  }

Stacktrace or Logs

il y en a pas ces seulement visuelle

Reproducer

https://snack.expo.dev/17nr6kODJCWa0F77zYi5b

Screenshots and Videos

No response

[react-native-bot]

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - 0.76.5. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[react-native-bot]

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[princektripathi]

@Skymx82, there seems to be some issue with the repro that you have shared. Can you please re-share a valid repro?

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Please provide either:

• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template
• Otherwise send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.