i gave been trying to create a scrollable screen every thing looks fine however the screen is not scrolling for some reason i'm not sure what's the problem this is my first time working with react native and all the diffrent components are bugging me. This is my code i'll be removing some extra code like the imports, logic and the fetch request cause it's too long:
import React, { useEffect, useState } from 'react'
import {
View,
ScrollView,
Image,
Text,
StyleSheet,
TouchableOpacity,
FlatList,
Dimensions,
SafeAreaView} from 'react-native'
let {width} = Dimensions.get('window');
let {height} = Dimensions.get('window');
const PriceComparison = ( { route, navigation: { goBack } } ) => {
const {onAdd} = useStateContext();
const {itemId, itemName, itemStore, itemCategory} = route.params;
const [data, setData] = useState();
const [isLoading, setIsLoading] = useState(false);
const screenHeight = Dimensions.get('window').height
return (
<SafeAreaView style={
{
flex: 1,
}
}>
{isLoading ? (
<ScrollView contentContainerStyle={{ flexGrow: 1, width: width, height: height}} keyboardShouldPersistTaps='handled'>
<Text>Loading....</Text>
</ScrollView>
) : (
<View style={{height: screenHeight, backgroundColor: '#fff'}}>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View style={{height: '100%'}}>
<View style={styles.Header}>
<TouchableOpacity
style={styles.button}
onPress={() => goBack()}
>
<Icon icon ='arrow-back-outline' color='#000'/>
</TouchableOpacity>
<Text style={{fontWeight: '800', fontSize: 20}}>Price Comparison</Text>
</View >
{ (dataLength !== 0) ?
<View style={{height: '100%'}}>
{data?.sort((a,b) => {return a.price-b.price}).slice(0, 1).map((product) => (
<View style={{height: '50%'}}>
<View style={{height: '100%'}}>
{dummyData.storesData.filter((img) => img.store === product.store ).map((img) => (
<View style={styles.Cheapest}>
<View style={styles.CheapestLogo}>
<Image
style={styles.CheapestLogoImage}
source={{ uri: `${img.shopbyimg}` }}
/>
</View>
<View style={styles.CheapestDetails}>
<Image
style={styles.ProductImage}
source={{ uri: `${product.image}` }}
/>
<View style={styles.CheapestTitle}>
<View style={{width: '70%'}}>
<Text style={styles.CheapestName}> {product.name} <Text style={styles.CheapestMeasurement}> {product.measurement} </Text></Text>
</View>
<Text style={styles.CheapestPrice}> ${product.price}</Text>
</View>
<View style={styles.CheapestSavings}>
<Text style={styles.SavePrice}> Save: ${saving} </Text>
<Text style={styles.SavePercentage}> Save up to {percentageSaving}% </Text>
</View>
<TouchableOpacity
style={{backgroundColor: COLORS.primary, padding: 15, borderRadius: 4, width: '92%', marginTop: 10, marginLeft: 'auto', marginRight: 'auto'}}
onPress={() => {onAdd(product, qty)}}
>
<Text
style={{
color: '#fff',
fontWeight: '600',
textAlign: 'center'
}}>
ADD TO CART
</Text>
</TouchableOpacity>
</View>
</View>
))}
</View>
</View>
))}
{data?.sort((a,b) => {return a.price-b.price}).slice(1, data.length).map((product) => (
<View
style={{
height: '50%',
marginTop: 80,
backgroundColor: 'transparent',
marginTop: 100,
width: '92%',
marginLeft: 'auto',
marginRight: 'auto',
borderRadius: 8
}}>
{dummyData.storesData.filter((img) => img.store === product.store ).map((img) => (
<View style={styles.otherProducts}>
<View style={styles.otherProductsImage}>
<Image
style={styles.otherImages}
source={{ uri: `${product.image}` }}
/>
</View>
<View style={styles.otherProductsDetails}>
<Image
style={styles.otherImagesLogo}
source={{ uri: `${img.image}` }}
/>
<View>
<Text style={styles.CheapestName}> {product.name}</Text>
<Text style={styles.CheapestMeasurement}> {product.measurement} </Text>
</View>
<Text style={styles.CheapestPrice}> ${product.price}</Text>
<TouchableOpacity
style={{backgroundColor: COLORS.primary, padding: 10, borderRadius: 4, width: '92%', marginTop: 10,}}
onPress={() => {onAdd(product, qty)}}
>
<Text
style={{
color: '#fff',
fontWeight: '600',
textAlign: 'center'
}}>
ADD TO CART
</Text>
</TouchableOpacity>
</View>
</View>
))}
</View>
))}
</View>
: <><Text> No other product available for price comparison </Text>
<Text onPress={() => goBack()}> Return to the previous page </Text></> }
</View>
<BottomTabs/>
</ScrollView>
</View>
)}
</SafeAreaView>
)
}
export default PriceComparison
const Icon = (props) => (
<View>
<Ionicons
name={props.icon}
size={25}
style={{
marginBottom: 3,
alignSelf: 'center'
}}
color={props.color}
/>
</View>
)
const styles = StyleSheet.create({
scroller: {
flex: 1,
flexDirection: 'column'
},
Header: {
marginTop: 40,
flexDirection: 'row',
marginHorizontal: 5,
justifyContent: 'space-between',
marginLeft: 20,
marginRight: 20
},
Cheapest: {
height: '40%',
},
CheapestLogoImage: {
width: '50%',
height: '50%',
marginLeft: 'auto',
marginRight: 'auto',
marginTop: 10
},
CheapestDetails: {
marginTop: 5,
height: '100%'
},
ProductImage: {
width: '80%',
height: '80%',
marginLeft: 'auto',
marginRight: 'auto',
resizeMode: "contain"
},
CheapestDetails: {
width: '100%',
},
CheapestTitle: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 20,
marginLeft: 10,
marginRight: 10
},
CheapestName: {
fontSize: 14,
fontWeight: '600',
lineHeight: 19
},
CheapestMeasurement: {
fontSize: 14,
fontWeight: '500',
lineHeight: 19,
color: COLORS.darkGray2
},
CheapestPrice: {
fontSize: 14,
fontWeight: '600',
lineHeight: 19
},
CheapestSavings: {
flexDirection: 'row',
justifyContent: 'flex-start',
marginLeft: 10,
marginTop: 5,
marginBottom: 5,
marginRight: 10
},
SavePrice: {
fontSize: 14,
fontWeight: '600',
lineHeight: 19,
color: COLORS.primary
},
SavePercentage: {
fontSize: 14,
fontWeight: '600',
lineHeight: 19,
color: COLORS.Tomato
},
otherProducts: {
flexDirection: 'row',
},
otherImages: {
width: 120,
height: 120,
resizeMode: "contain",
},
otherProductsDetails: {
marginTop: 20,
width: '65%',
},
otherImagesLogo: {
height: '20%',
width: 120,
marginBottom: 10,
borderRadius: 6
}
});
CodePudding user response：
Delete the outer view. Add style={{ flex: 1 }} to the ScrollView.
Explanation: think of ScrollViews as having two levels - an outer and inner View. The inner View is styled with contentContainerStyle. The outer view is styled with style. The outer View needs flex: 1 to allocate space.