I have created an autocomplete textbox component which basically renders a list of suggestions as the user types. When it is the only component on the screen it works fine but when I try putting it inside a view with another component its view seems to render over the component it is placed alongside. When I put them in separate views the list seems to render under the view below it. I was just wondering if there was a way to render the list above the other views on the screen? Thanks for your help
I suggest you to render a modal on pressing the search view and the modal should contain your textbox for typing and the flatlist below it. The modal will render above all views on your screen. for more help read the documentation.
https://facebook.github.io/react-native/docs/modal
Related
I am important below Modal in each view that I am using to communicate unique view/page related errors or success messages to users:
<DynamicModal :title="titleModal" :description="descriptionModal" #functionDoSommething="myFunction" #open="open = !open">
</DynamicModal>
However, when I import the Modal in the Header/Navigation component I get a CallStack error as I already imported the Modal in the Parent view.
There is a lot of repetition as you can imagine as I am importing the Modal in each view. plus I am not able to use the Modal in the header/navigation component.
I am binding unique view/page related title and description to the Modal in each view. That’s why I am not able to place the Modal in App.vue
Anyone have a better way to use a dynamic Modal where I can bind title and description based on which view the Modal opens in?
Should I use Vuex?
I want to do this layout:
Currently I do the layout by this way:
menu is belong to the below part and i marginTop: -30 for it to above the image
FlatList is absolute view and have zIndex bigger than Menu. FlatList have dynamic data and each item of FlatList have textInput to search data ( look at this pic )
I have tried 2 ways:
First way:
I used for the list filtered data, it is limited by the Flatlist area so that my filtered list cannot display fully, just 2 rows visible, the rest of filtered data is invisible. I have tried increase the height of the Flatlist and now I can see the filtered list fully but I cannot click the menu button because menu is overived by the Flatlist,
Second way
I use Modal and tried with this library: react-native-modal-dropdown, I can reach my expertation UI but because it use Modal so when Modal is appearing, my textInput in Item is loss focus, so that I cannot continually input to TextInput until I close the Modal.
Do you guys have any solution for it? Thanks in advance
The modal component use the native Modal, you won't be able to interact with elements outside it while it is still visible.
I am not sure to understand why you cannot use View to display the results, but maybe you could try with FlatList ?
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
I want all my views to be in a TabBarIOS except one - the login view. Currently in my app.js I render the TabBarIOS with items each containing a NavigatorIOS that loads my different components. But how do I organize my project to have a separate component that doesn't show the tab bar at all?
Can't you use a modal instead?
https://github.com/brentvatne/react-native-modal
I'm using YUI 3 tabview, and my page appears without tabs very briefly, and then the tabs appear. I found this page:
http://yuilibrary.com/yui/docs/widget/
Hiding Progressively Enhanced Markup
which seems relevant, but I'm not sure how it applies to tabview.
Is there a way to prevent the display of the untabbed list until the tabs are ready?
Thanks very much!
The default style of the tab container could be set to display:none; and on your tab view creation you could then remove the display:none property
You could bind to your tabview render event and set the display on that.