Custom Scroll-Picker Functionality in React-Native - reactjs

I want to create a custom Picker component, with the same functionality as the iOS Picker. The problem is that I want a completely different UI, basically a horizontal scrollview with two methods of input:
First one is easy, clicking one item results in that item being selected. The second way of inputting should be by scrolling, where the center one gets selected (like the iOS Picker). That's where I'm stuck.
While planing, I thought about using react-native-snap-carousel, my problem with that is that it needs a fixed itemWidth, which isn't suitable for text as the elements.
I also thought about somehow enabling snapping for my List, but that seems only to be possible with pagingEnabled = true, which isn't suitable for my use case.
What else could I try?
Thank's to anyone who is willing to help!

Related

Don't show the Next or Done buttons in the Android VKB

How can I prevent the showing of the Next or Done buttons of the Android VKB in a Codename One app?
Currently, for my app, they are a mess: the next button of the VKB doesn't focus the next field, but the previous. After tons of trials, I didn't find a way to make them working correctly (but there are fine on iOS and on the Simulator). I also tried to override the Layout.overridesTabIndices(com.codename1.ui.Container) and Layout.getChildrenInTraversalOrder(com.codename1.ui.Container) methods in the Form, but nothing changed on Android.
I supposed two possible causes: the use of a Form inside a Form or, more probably, the fact that I replace all the TextFields and Pickers in the same Form (and other components). Maybe the fact that the inner Form is deeply changed results in a confusion for the Android mapping of the "next" button.
That's why my request: because I didn't find a way to make the "next" button useful, I'm asking how I can avoid that it's been shown.
Thank you
Nesting forms would probably mess with the focus traversal/tab order.
Normally you should be able to override public TabIterator getTabIterator(Component start) to return a blank iterator. I'd suggest doing the same for both the parent and child form to disable the "next" feature.

How to use a select dropdown in a virtualized list?

Im currently developing a react app which has a virtualized list (https://github.com/bvaughn/react-virtualized) in it. The items in the list may contain a select dropdown.
The problem now:
The virtualized list is hiding overflow. So the last items dropdown is not displayed and you cannot scroll down to view the content of the dropdown:
================= Here is where the image ends ================
I have no idea, how I could fix this issue, without changing the virtualized list code. Anybody out there?
react-virtualized can't use overflow: visible without breaking scroll behavior (which is pretty key to how react-virtualized works). So things like drop-downs will get clipped as you've observed.
What I typically recommend for people wanting to put things like drop-down menus inside of react-virtualized rows is to use a portal. This allows the menu content to expand outside of a single row (or even the entire List) without being clipped.
I've used tajo/react-portal in the past for this.

how can i achieve autoscrolling list (like autoscrolling text in ads) in codenameone

How can I achieve a horizontally list (contains multiple containers) automatically scroll up and down like something like this link?
I already made the list the problem is how to achieve the auto scroll horizontally.
Every label in Codename One supports this, it's called "tickering" and you can just call startTicker() to start the tickering for a label. You might also need setTickerEnabled(true).

iAd Producer checkbox radio buttons?

I'm new to iAd Producer - what I'm really looking for is a replacement for Dashcode, since Apple seems to have abandoned it. But while it looks as though iAd Producer CAN produce iBooks Author widgets, it seems to be missing a few fundamental objects - namely checkboxes and radio buttons.
I'm sure there's a way to hack HTML and perhaps use jQuery to get the job done, but this was a relatively simple, straightforward thing in Dashcode. Am I missing something? With tools like buttons, sliders, and such, I'd think checkboxes and radio buttons would be included.
Anybody know an EASY way to replicate Dashcode functionality in iAdProducer?
Thanks!
I've had the exact same problem for the last week and finally came across a solution. You can "escape" the checkboxes in a way by including an empty onclick property to the checkbox or label that you want to affect. This should override native code that relates to cut-and-paste gestures and make checkboxes unusable. I've had success with this in iBooks Widget Tester.
Funny... we seem to be working on the same issue at the same time. Closest I've got to a solution is to build in iAd Producer using the HTML template. There you can add in the objects that are missing using HTML code while also adding drag and drop objects available in the software.
However, while I can populate my view with checkboxes and get them to be checked in iAd Producer's preview, when I preview on my iPad, I can't check the boxes. Radio buttons remain unresponsive too.

Google like SearchBox in Silverlight

I've created a Google like SearchBox control in Silverlight. That means, as I type in the box, a DropDownListBox appears just below the SearchBox, showing all the items that match with the text I've typed in searchbox so far (i.e AutoComplete feature), exactly like this:
Now, I want to add a functionality to it : I want to make the DropDownListBox to disappear, as soon as user clicks outside it, or anywhere on the screen. I cannot handle MouseLeftButtonDown (or any such event) in other controls, to accomplish this, because users can click anywhere, including non-silverlight region. Can anybody suggest me what should I do to achieve this?
So my question basically is:
How to know if user has just clicked and the click event occurred outside a particular control?
Please note that AutoCompleteBox doesn't serve my purpose. So I cannot use it.
I have a feeling that working with LostFocus event can solve your problem.
I guess this question is a bit old, but i just stumble upon trying to do the same and finding a solution. This is what i did
Created a Border with All Margins -500, this will cover the full screen essentially.
On Click Behaviour of this Border, the dropdown section of SearchBox
is collapsed.
Adjust z-Index of Border just below the SearchBox and DropDown
section, so clicking on SearchBox or DropDown wouldn't close it.
Set Border Visibility Collapsed, and make it visible when DropDown is Visible.
I hope it helps someone who is looking for the similar problem.

Resources