I’m building an Expo (SDK 50) app for FullStack Open part10 and testing on the web target. Each row in my list is a horizontal layout: an avatar on the left and a right-hand column with the repo name, description, and a small language “pill”.
On web, long descriptions overflow horizontally and do not wrap. If I open DevTools and manually set flex-shrink: 1 on the wrapper <div> that FlatList creates for each row (the element with the dynamically generated class css-view-175oi2r), the text immediately wraps correctly. See the attached screenshot where I toggle flex-shrink: 1 on that wrapper.
I want to apply that change from code, not via DevTools—what’s the correct way to make the FlatList cell wrapper shrink (and/or have min-width: 0) so text wraps on React Native Web?
What I expect:
The right column should wrap text within the available width.
What actually happens:
Text overflows unless I edit the cell wrapper in DevTools and set flex-shrink: 1 there. Changing styles on my own item views doesn’t help.
Environment:
- Expo SDK 50
- react-native 0.73.6
- react-native-web 0.19.6
- react / react-dom 18.2.0
- Platform: web (Firefox)
Code:
Repository List Component:
// src/components/RepositoryList.jsximport { FlatList, View, StyleSheet } from 'react-native';// Componentsimport RepositoryItem from './RepositoryItem';import theme from '../theme';const styles = StyleSheet.create({ list: { flexShrink: 1, minWidth: 0, borderColor: 'blue', borderWidth: 2 }, content: { minWidth: 0, flexShrink: 1, borderColor: 'pink', borderWidth: 2 }, separator: { height: 10, backgroundColor: theme.colors.separator },});const repositories = [ { id: 'jaredpalmer.formik', fullName: 'jaredpalmer/formik', description: 'Build forms in React, without the tears', language: 'TypeScript', forksCount: 1589, stargazersCount: 21553, ratingAverage: 88, reviewCount: 4, ownerAvatarUrl: 'https://avatars2.githubusercontent.com/u/4060187?v=4', }, // More data is present, but removed for brevity];const ItemSeparator = () => <View style={styles.separator} />;const renderItem = ({ item }) => <RepositoryItem item={item} />;const Cell = ({ children, style, ...rest }) => (<View {...rest} style={StyleSheet.compose(style, { minWidth: 0, flexShrink: 1 })}> {children}</View>);const RepositoryList = () => { return (<FlatList data={repositories} ItemSeparatorComponent={ItemSeparator} renderItem={renderItem} contentContainerStyle={styles.content} CellRendererComponent={Cell} style={styles.list} /> );};export default RepositoryList;Repository Item Component Code:
I have added add a string of "kkkkkk..." to simulate a long text
// src/components/RepositoryItem.jsximport { View, StyleSheet, Image } from 'react-native';import Text from './Text'; // Custom Text Component (Created for styling native Text more easily)import theme from '../theme';const divMod = (dividend, divisor) => [Math.floor(dividend / divisor), dividend % divisor];const preciseNumericalText = (num) => { const [quotient, remainder] = divMod(num, 1000); const preciseRemainder = Math.round(remainder / 100); const preciseRemainderStr = preciseRemainder === 0 ? '' : `.${preciseRemainder}` return `${quotient}${preciseRemainderStr}k`};const styles = StyleSheet.create({ container: { backgroundColor: 'white', paddingHorizontal: 12 }, languageTextContainer: { backgroundColor: theme.colors.primary, alignSelf: 'flex-start', borderRadius: 4, padding: 8 }, languageText: { color: theme.colors.appBarText, }, avatar: { height: 50, width: 50, marginLeft: 5, borderRadius: 4, flexShrink: 0 }, repoHeroContainer: { flexDirection: 'row', marginVertical: 12, paddingVertical: 8, }, repoHeroContainerText: { marginBottom: 8, flexShrink: 1, }, repoInfoContainer: { flexDirection: 'column', marginLeft: 10, paddingVertical: 5, padding: 5, flex: 1, minWidth: 0 }, repoCountContainer: { flexDirection: 'row', justifyContent: 'space-evenly', marginTop: 0, margin: 12, text: { textAlign: 'center' } }})const CountItem = ({ text, value }) => { return (<View><Text style={styles.repoCountContainer.text} fontWeight='bold'> {value}</Text><Text color='textSecondary'>{text}</Text></View> );};const RepositoryItem = ({ item }) => { return (<View style={styles.container}><View style={styles.repoHeroContainer}><Image style={styles.avatar} source={{ uri: item.ownerAvatarUrl }} /><View style={styles.repoInfoContainer}><Text fontWeight='bold' fontSize='subheading' style={styles.repoHeroContainerText}> {item.fullName}</Text><Text color='textSecondary' style={styles.repoHeroContainerText}> {item.description} kkkkkkkkkkkkkkkkkk</Text><View style={styles.languageTextContainer}><Text style={[styles.languageText]}> {item.language}</Text></View></View></View><View style={styles.repoCountContainer}><CountItem text='Stars' value={preciseNumericalText(item.stargazersCount)} /><CountItem text='Forks' value={preciseNumericalText(item.forksCount)} /><CountItem text='Reviews' value={item.reviewCount} /><CountItem text='Rating' value={item.ratingAverage} /></View></View> );};export default RepositoryItem;