View scrolling beyond content
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 35/100
- Issue type
- Bug
- Clarity
- Needs clarification
- Activity status
- Stale
- Tech stack
- react-native
- Domain
- mobile
Research direction
Start with the ImageHeaderScrollView usage and its nested TriggeringView and ScrollView in the supplied example, paying attention to the fixed-height View and the separate Book Now content below it. Reproduce the scrolling behavior and determine which rendered content height is being treated as scrollable; done means the view stops at the actual content without leaving a blank area.
Written by the indexing model from the issue text.
Description
The view is being allowed to scroll up further than the actual height of the content which in turn leaves quite a large blank space below. I already have a view wrapping the Triggering View, but the same problem still occurs. See image and code below
<ImageHeaderScrollView
maxHeight={250}
minHeight={Platform.OS === 'ios' ? 90 : 55}
headerImage={{ uri: cityImage }}
maxOverlayOpacity={1}
overlayColor="#fff"
style={{marginBottom: 20}}
showsVerticalScrollIndicator={true}
>
<View style={{height: 550}}>
<TriggeringView>
<Animatable.View animation={'fadeIn'} duration={1650} style={{marginTop: 30, marginHorizontal: 20}}>
<Text style={styles.title}>{cityName}</Text>
{countryLocation && (
<Animatable.View animation={'fadeIn'} duration={1000} style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10, marginRight: 20 }}>
<EvilIcons name="location" size={20} color="#5d5d5d" style={{ marginLeft: -5 }} />
<Text style={{ color: '#999', fontFamily: 'Gilroy-Medium' }}>
{countryLocation.location}, {countryLocation.country}
</Text>
</Animatable.View>
)}
{ tags && (
<>
<Divider style={{marginTop: 15}}/>
<View style={{flexDirection: 'row', alignItems: 'center', marginTop: 15, justifyContent: 'space-between'}}>
{Object.entries(tags).map(([key, value], index) => (
<Animatable.View animation={'fadeIn'} duration={1000 + index * 200} key={index} style={{marginRight: 8, alignItems: 'center'}}>
<Text style={{ fontFamily: 'Gilroy-Semibold', fontSize: 15, marginBottom: 5 }}>
{key.charAt(0).toUpperCase() + key.slice(1)} {/* Capitalizes the first letter of the key */}
</Text>
<Text style={{ fontFamily: 'Gilroy-Regular', fontSize: 13 }}>{value}</Text>
</Animatable.View>
))}
</View>
</>
)}
<Divider style={{marginTop: 15}}/>
</Animatable.View>
</TriggeringView>
<ScrollView style={{marginHorizontal: 20, marginTop: 10}} showsVerticalScrollIndicator={false}>
{countryDesc && (
<View style={{ marginTop: 10 }}>
<Animatable.Text
animation="fadeIn"
duration={1000}
style={styles.subHeading}
>
Description
</Animatable.Text>
<Animatable.Text
animation="fadeIn"
duration={1100}
style={styles.countryDesc}
numberOfLines={showFullDesc ? undefined : 3} // undefined removes the limit
>
{countryDesc}
</Animatable.Text>
{countryDesc.length > 100 && (
<TouchableOpacity onPress={toggleDescription}>
<Text style={styles.readMoreText}>
{showFullDesc ? 'Read Less' : 'Read More'}
</Text>
</TouchableOpacity>
)}
</View>
)}
{/* Itinerary */}
{itinerary.length > 0 && (
<>
<Divider style={{ marginVertical: 25 }} />
<Animatable.Text animation={'fadeIn'} duration={1300} style={styles.suggestedItinerary}>
Itinerary For You
</Animatable.Text>
<View style={{ marginTop: 20 }}>
{itinerary.map((rowData, index) => (
<Animatable.View animation={'fadeIn'} duration={1100 + index * 200} key={index}>
<ItineraryAccordion
day={rowData.title} // Pass day as "Day 1", "Day 2" etc.
activity={rowData.activity}
restaurant={rowData.restaurant}
/>
</Animatable.View>
))}
</View>
</>
)}
</ScrollView>
</View>
</ImageHeaderScrollView>
<View style={{marginBottom: 35, alignItems: 'center'}}>
<View style={{}}>
<TouchableOpacity style={{backgroundColor: '#2970ff', padding: 15, alignItems: 'center',borderRadius: 10, width: 350, paddingVertical: 15}}>
<Text style={{fontFamily: 'Gilroy-Bold', fontSize: 18, color: '#fff', letterSpacing: -0.5, }}>Book Now</Text>
</TouchableOpacity>
</View>
</View>
- Dominant language
- TypeScript
- Stars
- 1k
- Forks
- 101
- PR merge metrics
- No merged PRs in 30d
Getting set up
This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from bamlab/react-native-image-header-scroll-view
-
Difficulty 5/5 Over a week Newbie friendliness 25/100
bamlab/react-native-image-header-scroll-view#134 · 1 comment ·
-
Difficulty 3/5 1-2 days Newbie friendliness 20/100
-
Difficulty 3/5 1-2 days Newbie friendliness 30/100
-
Difficulty 4/5 3-5 days Newbie friendliness 25/100
bamlab/react-native-image-header-scroll-view#131 · 1 comment ·
-
Difficulty 5/5 Over a week Newbie friendliness 10/100
bamlab/react-native-image-header-scroll-view#130 · 1 comment ·
All issues in bamlab/react-native-image-header-scroll-view
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
simkimsia/netlify-axi#19 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
subhranshudash13-dotcom/Contribo#74 ·
Maintainers usually reply within 1 day
-
enhancement frontend good first issue Stellar Wave trivial
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
Godgift-care/sci-healthcare-frontend#166 · 1 comment ·
Maintainers usually reply within 1 day
-
backend good first issue security Stellar Wave trivial
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Godgift-care/sci-healthcare-backend#171 · 1 comment ·
Maintainers usually reply within 1 day