I have a Text component which I would like to make selectable. I provided the Text component the selectable prop, however it isn't working. I am pretty sure that it is because I have it nested in a ScrollView and my pressing it is only registering on the scrollview. Any way to get past this?
Can provide a code example if needed.
Related
I'm trying to find a react-native equivalent to Window.scroll() method.
I did my research and considered giving a ref to the ScrollView and using scrollTo() method, just like described here, but my parent ScrollView is composed of sibling components and passing refs among them seems like an overkill.
Is there a simpler method, without relying on refs and scrollTo() methods, in React Native so that when the button is pressed, the screen scrolls down by a certain amount, let's say 100 pixels, nothing more nothing less, just simple as that? Did my research but couldn't find any...any suggestions?
I try to render a dropdown-picker (react-native-dropdownpicker) in a sectionlist but it's impossable to scroll the content of the dropdown. It only shows the first results.
I tried many things with zIndex, view with flex: 1 as parent but im unable to find the solution.
Is it possible to render in a sectionlist or should i be looking for another solution?
sectionlist with dropdown-picker
I think this is what you want.
List Modes
You have 3 options when choosing the list mode.
DEFAULT
FLATLIST
SCROLLVIEW
MODAL
listMode="FLATLIST"
Notes
The FlatList component shouldn't be nested inside ScrollView or you'll come across the VirtualizedLists should never be nested inside plain ScrollViews warning.
If this happens to you and you only have a few items, consider using the SCROLLVIEW mode. Otherwise, you have to use the MODAL mode.
Take a look at this snack:
https://snack.expo.dev/#devsaeedhabibi/dropdown-picker
I am working on a react native android app that needs a search bar. I am using the SearchBar from react-native-paper, and I checked their documentation and couldn't find any sort of way to find if the user pressed the little search button on their keyboard.
Not sure if there is an official name for this input or the button itself as I am unfamiliar with mobile app development, but here is an screenshot from the app in case it is unclear. I am referring to the search button on the keyboard itself, which is in this case blue.
From some digging I found out that TextInputs in react native have an onSubmitEditing={} that triggers whatever return key action you want.
Essentially I was wondering if there was an equivalent prop for the SearchBar in react-native-paper.
If you take a look at the implementation of react-native-paper SearchBar https://github.com/callstack/react-native-paper/blob/master/src/components/Searchbar.tsx it looks like you can pass a onSubmitEditing prop to it and, as react-native-paper uses a TextInput, that input will receive that prop
Ok so it seems that as tintef pointed out, you can just pass onSubmitEditing to the SearchBar since it uses a TextInput. I just tested this and it works perfectly!
I'm using react-native-elements Searchbar and want the placeholder on the right, and the text entry on the left.
It appears that you can only use text align to determine where to type, so I attempted to use a state to make the text on the left, placholder on the right. But this solution doesn't work either.
Any ideas?
React Native Elements supports styles similar to the TextInput along with their own props.
Since there is no prop to style the placeholder in react-native's textinputas well assearchbar`, therefore it cannot be done just with the styles.
However I can suggest you to make a separate instance of react-native-element SearchBar and pass your CustomTextInput component that contains the placeholder styles as mentioned in this post
As shown above, I want to create this two-part screen where I can click onto both the A component and B component on the first view provided here. When a user scrolls B component, it may take up the entire screen and move over the A component. (A component does not move with the FlatList).
I'm new to react native and was wondering how I could create such behavior? I tried using absolute positioning and ListHeaderComponent inside the FlatList but didn't really get anywhere. Let me know if anyone has an idea.
Thanks!
I would try something like the following screen structure:
View
Image
ScrollView w/ trans background that goes to the top of screen
FlatList with top padding to push it below the image
Items in list
/FlatList
/ScrollView
/View
You could also see if react-native-parallax-scroll-view works for you as it looks somewhat similar to what you describe
https://github.com/jaysoo/react-native-parallax-scroll-view