239 questions
0
votes
0
answers
19
views
How can I use single finger scroll reliably in iOS in ScrollList while also allowing swipe left and swipe right?
I am using React Native 0.79.6 with Expo 53.0.0 managed development and added Swipe left and Swipe right using <GestureRecognizer> from react-native-swipe-gestures 1.0.5 to my main working ...
- 277
0
votes
0
answers
52
views
Why does React Native ScrollView work on mobile but not on web?
I've been on this problem for a day now and I cannot understand why my setup of scrollview is not working on web but does on mobile. (Note: I'm just been trying to learn React Native)
const styles = ...
- 1
1
vote
1
answer
69
views
GestureDetector Pan blocks vertical ScrollView scrolling in react native
I have actually created a slider with text details as user can swipe left and right and if the text or contents are large so I added ScrollView and use Gesturedetector for detecting Swipe movements as ...
- 51
0
votes
1
answer
83
views
TouchableOpacity not working properly in nested FlatList or ScrollView
I need to display product categories. Each category contains multiple products that should scroll horizontally.
When I click on a category item, the touch event doesn’t work consistently. Sometimes it ...
1
vote
0
answers
67
views
Cannot get text input to move up and sit on top of the keyboard when it shows in React Native using react-native-keyboard-controller library
I just cannot get my text input to sit on top of the keyboard when it shows. I can get it to move up as the keyboard appears but there is always this annoying gap and I do not know how to get rid of ...
- 11
0
votes
1
answer
125
views
How to use zoom in out, touches in WebView inside a ScrollView in React Native
Hi I am using WebView to render my candlestick chart in React Native but I am stuck in the zoom in/out touches of WebView if I put it inside a ScrollView
import { View } from 'react-native';
import { ...
- 31
1
vote
0
answers
47
views
Content inside KeyboardAwareScrollView becomes blurry or shows transparent backdrop on SDK 33 devices when closing the keyboard
I'm facing an issue with my React Native app where the content inside a KeyboardAwareScrollView becomes blurry or shows a transparent backdrop after the user edits an input field and closes the ...
- 51
1
vote
0
answers
167
views
React Native ScrollView Not Scrolling Due to contentContainerStyle Height
I am having issues with my code because when the content exceed the height content, I can't scroll
My actual code looks like this:
<SafeAreaView className="bg-primary h-full">
<...
- 5
1
vote
1
answer
513
views
React Native Auto Horizontal Scroll
Is there a way to implement auto infinite horizontal scrolling in react native where we have a list that shows partners/companies just like the image attached.Link
I had tried using basic CSS and ...
- 11
0
votes
1
answer
85
views
Scrollview scrolls too far down when focusing inputText
[solved] I'm building an app and i have an issue where the scrollview scrolls further up than the input. the goal is to have it below the menu when you have pressed the input field.
Here is my ...
- 101
1
vote
2
answers
2k
views
FlatList in ScrollView Error "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation"
I make a component EventCards in this I use Flatlist. I call that component in Home component, where the EventCards component is in ScrollView.
Const Home= () => {
return (
othercomponents.....
- 83
5
votes
2
answers
2k
views
How can I allow the user to scroll a very large Skia canvas?
I have a React Native app which will include a graph that the user can scroll through. For the sake of this example, I'm just using a horizontal row of circles.
To draw my graph, I am using Skia (...
- 4,917
0
votes
2
answers
1k
views
How do I add an onscroll event listener and get the current scroll position of a Scrollview using the ref of the scrollview
I am using react-native-gifted-charts to implement an area chart with mulptiple lines.
Objective: Allow a user to scroll horizontally accross the chart and but always show the minimum full range of ...
- 1
0
votes
1
answer
80
views
React native screen size changes and whole layout shrinks when keyboard pops up
this is normal layout
this is whats happening on keyboard pop up
this is the code for layout
import React, { useState, } from 'react'
import { useNavigation, } from '@react-navigation/native'
import ...
1
vote
1
answer
2k
views
BottomSheetScrollView doesnot scroll to bottom when gorhom BottomSheet is dragged up slowly
gorhom/react-native-bottom-sheet BottomSheetScrollView does not scroll to end occasionally. As far as the pattern I observed it does it when you drag it up slowly to the second snapPoint and then to ...
- 93
1
vote
0
answers
43
views
React Native: Set horizontal scrollView height according to its absolute positionned childs
I'm currently trying to create a React native screen that displays a week summary.
I have a scroolView with a header component and my week.
Each selected day is displayed as a tile with the day on it (...
- 11
1
vote
0
answers
153
views
How to move the ScrollView's scrollbar slightly to the left in React Native?
I'm working on a custom dropdown component in React Native and I've encountered an issue regarding the position of the ScrollView's scrollbar.
Here is the part of the code where the issue arises:
<...
- 11
2
votes
0
answers
773
views
how to bring smooth swipe experience for react native flat list
I have implemented a FlatList in my React Native app to render elements vertically. Each element takes up the height of the screen, and the user can see one element at a time. Upon scrolling, the user ...
- 83
0
votes
1
answer
2k
views
React Native Bar Chart within a scroll view is cut off
I have a problem where a react-native-chart-kit is within a horizontal scrollview but the rightmost part of the bar chart gets cut off at the end of the scrollbar
import React, { useEffect } from '...
8
votes
6
answers
15k
views
Scroll content inside @gorhom/bottom-sheet - React Native
I am trying to implement a Comments Section inside a Bottom Sheet (@gorhom/bottom-sheet).
The problem I am facing is that when I try to scroll the content (comments), it doesn't work, and instead the ...
- 174
3
votes
2
answers
1k
views
React Native how to make Scroll View work inside Gesture Detector?
I am trying to implement a list inside BottomSheet Feauture in React Native. Bottomsheet is done using Animated.View inside GestureDetector. Now I want to use a scroll view inside animated view so ...
0
votes
1
answer
486
views
ScrollView not working in android in react-native-popover-view
After upgrading react-native to version 0.71.3, the ScrollView passed as a children to react-native-popover-view is no longer scrollable in android but works in iOS. It used to work before the upgrade ...
- 1
1
vote
2
answers
1k
views
React Native Refresh Control of FlatList Does Not Work Inside a Horizontal Scroll View
I am trying to create a paginated horizontal scroll view with its own vertical lists on each page. Each page must be a FlatList since I will be needed onEndReached function + I want to use refresh ...
- 540
0
votes
1
answer
370
views
How to put multiple flatlists in one global scrollview in react native?
I want to add about 3 flatlist in my app's homepage. There's a global scrollview that wraps all the children. I have read other answers about using only one list and one flatlist. That can't be done ...
- 823
0
votes
0
answers
105
views
Column Wrapper Style Not Working on IOS but works on android
I am trying to make item tiles and want to have even gap between two items like this..
Android
As we can see, this is not happening in IOS
IOS
My Code:
<ScrollView
horizontal
scrollEnabled={...
2
votes
2
answers
5k
views
How to implement drag-down-to-close a React Native Modal?
I'm trying to achieve a feature similar to Tik-Tok's Comments Feature, press a button to open up a modal containing scrollview/flatlist, and we can drag the modal to close itself.
My Goal:
I did find ...
- 480
2
votes
1
answer
3k
views
stop ScrollView from scrolling
I want to stop a ScrollView from scrolling in React Native. I don't want to completely disable it, I just want it to stop scrolling at a specific point, so that I can scroll it again afterwards.
Since ...
1
vote
1
answer
3k
views
React Native Scrollview is not scrolling down
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 ...
- 367
0
votes
0
answers
52
views
Displaying Images from an array of URLs
I'm trying to get some images from firebase storage and display it in a gallery like view.
This is how I retrieved the URLs of uploaded images from firebase:
function listAll() :{ url: string; }[]{
...
- 41
13
votes
3
answers
5k
views
React Native scroll bar in the middle of the screen
Hermes enabled
OS: iOS
getting with FlatList and ScrollView
When developing ScrollView or FlatList, having no issues with the scroll bar. In production, sometimes it looks ugly and positions at the ...
- 1,489
3
votes
0
answers
718
views
Scrollview not working with React Navigation Top Tabs
I have this code below:
<ScrollView
style={{ flex: 1, backgroundColor: defaultStyles.colors.lighterGray }}
contentContainerStyle={{ flexGrow: 1 }}
>
<ImageBackground
style={styles....
- 103
5
votes
0
answers
470
views
How to make one of the nested components sticky in ScrollView?
I have a component like this
<ScrollView>
<View>
<View>
make this component sticky
</View>
</View>
</ScrollView>
Now, I want to make the second view ...
3
votes
1
answer
3k
views
Dropdown picker placed above ScrollView isn't responding to scroll but ScrollView is
I have placed a Dropdown picker above a ScrollView, when both Dropdown picker and ScrollView is poppulated with data and I'm trying to scroll through the data in Dropdown it instead scrolling the ...
- 61
1
vote
1
answer
2k
views
snapToAlignment center not working in first render
I'm working on something like instagram snap scrolling. The User Card should be centered (One card on each scroll).
<FlatList
data={items}
renderItem={({item}) => <UserCardComponent ...
- 81
2
votes
0
answers
397
views
React Native: prevent ScrollView from resetting on every re-render
I have a component in my React Native app that contains a <ScrollView>. This component also receives a prop this.props.a that gets updated every 60s. So every 60s the component gets re-rendered, ...
- 7,648
1
vote
2
answers
4k
views
When stickyHeaderIndices is used, style of component changes
I've searched common problems and how to use stickyHeaderIndices and so on. But stuck with one point, and I didn't even find why this occurs, so couldn't search on the internet.
Everything works fine ...
- 168
0
votes
1
answer
743
views
How to scroll to image[x] in ScrollView at the first time open screen?
How to scroll to image[x] in ScrollView at the first time component load?
I want when we open this screen, ScrollView will scroll to the 4th image.
This is my demo
export default function App() {
...
- 593
2
votes
0
answers
280
views
react-native ScrollView display an absolute item outside of the ScrollView
Hi I have tooltip buttons in my TextInput when user press open a tooltip and I'm taking TextInput values from an array because of that I'm using ScrollView or FlatList.
My problem is that the tooltip ...
- 123
0
votes
1
answer
741
views
Flatlist not scrolling react native
for some reason my flatlist is not scrolling and I'm not sure why. Would love any tips!
Here is the code for the flatlist:
return (
<Layout>
<View style={styles.header}>
...
1
vote
0
answers
560
views
Vertical scrolling where attribute name row is fixed and horizontal scrolling where left most column is fixed in React Native
So far I've achieved this:
//code on data listing screen with a vertical flatlist
const DataListing = props => {
const memoizedValue = useMemo(() => renderItem, [props.coinData]);
const ...
- 61
1
vote
0
answers
476
views
Is there a way to somehow control the scroll position of scrollable components (e.g. ScrollView) declaratively?
i.e. by using a variable: state, Animated value, Reanimated value, whatever...
We can use imperative scrolling (like scrollToOffset etc.), but what about a declarative one? I mean how can we control ...
2
votes
3
answers
3k
views
Vertical scrolling inside the vertical scrolling in steps - React Native
I need to create the following interface:
There is a parent SectionList in which there are various sections of elements
One of these sections contains a vertical FlatList.
I want SectionList to ...
- 73
0
votes
1
answer
541
views
scrollview and flatlist override loading view
I have got flatlist inside scrollview and its working fine, but both going over the loading view so I got blank view while first loading which contain both of them while first run loading.
I didn't ...
- 21
1
vote
1
answer
150
views
Touch/interact underneath ScollView
I have a image carousel underneath a vertical ScrollView. I want to be able to slide some content on top of my image carousel. You can see in the current way I am implementing it there is an issue. I ...
- 119
0
votes
1
answer
162
views
Body become Scrollable in React Native
i have small issue with scrollview.
i want to the title become sticky and the after the title means the messageBody become scrollable.
i have tried below one for this implementation.
...
0
votes
1
answer
315
views
How can I scroll through a ScrollView from anywhere on the screen in react native?
I built a carousel in react native. Now I want to be able to scroll through it even when my finger is not placed inside it. How can I achieve this?
user16351905
2
votes
1
answer
3k
views
Stopping multiline textInput component to scroll inside ScrollView
I am working on React Native in which I want to stop multiline textinput component's scroll inside ScrollView. How we can achieve it? Android Specially!
1
vote
0
answers
1k
views
Keyboard Aware Scrollview's extraScroll reduces when key is pressed in Android
When textInput is clicked, the keyboardAwareScrollView works fine and scrolls up with the extra scroll height provided. But scrolls down just below the textInput when a key is pressed in Android. ...
- 191
1
vote
0
answers
1k
views
react native scroll to selected index or item
I created top tabs with scroll view(image below). I want when user click to week 4 or next week which is hidden currently it will scroll to that week. I tried it but it's not working properly Can ...
- 172
0
votes
2
answers
2k
views
Scrollview cannot scroll to bottom with keyboard in react native
Scrollview scrolls to the bottom normally but when I touch the TextInput and the keyboard pops up, it scrolls only a very short distance and I am not able to look at the content below.
Just focus on ...
- 191