I am trying to use 'react-native-popup-dialog' to include pop ups in my react-native app.
I have a component 'HeaderView' which I am including in all other components for example 'Home' as
<HeaderView/>.
For 'HeaderView' component I have set flex to 0.5 and there is a button whose onpress event I want to capture in 'Home' component.
onPress={() => {
this.popupDialog.show();
}}
And PopupDialog exists in 'Home' Component.
If I include PopupDialog in HeaderView, I get popup only in 0.5 (flex) part of screen.
Is there any way to achieve this or will I have to discard my HeaderView component and add its logic in all components?
You can do that in so many ways.
As one of those you can use this:
Add some listener in the root of your app (e.g: App.js) and render popup dialog there, and finally show modal with emitting the listener. (react-native-event-listeners)
Another simple way is using ContextApi
But you should know that the best way is rendering your main modal in root and call the functionalities about that with some tools like the above examples or even something like redux.
Related
I'm using react-router-native to navigate between the "pages" of my app. The problem here is that I want to change the app-bar visibility depending on the user location.
So, I need a way to watch and detect the route, so I can manipulate-it
Solved!
To solve the problem I created a callback function inside my components, that returns whenever it loads. So with that I could just check a variable like
isAtLogin ? (<Appbar />) : (<View />) to show and hide the appbar.
I am using import bModal from 'bootstrap-vue/es/components/modal/modal'; bootstrap-modal
I have following User Interface in Modal, here I need to choose department from a dropdown(getting item list using AJAX). Here I want to make it easy to add new department by clicking button beside the dropdonw - for such popup modal with UI.
In vuejs i have code for main modal -
showModal () {
this.clearForm();
this.formInfo.formSubmitted = false;
this.$refs[this.modalInfo.id].show();
}
this is working fine. Now on click event on green button, another modal should be opened over currently opened window. Unfortunately, currently modal is get hidden and new model opened. I have following code for extra modal-
showExtraModal:function(){
this.$refs['extraModal'].show();
}
How can I solve this problem in vue js.
Seems to be a limitation of Bootstrap (see docs):
Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.
Since bootstrap-vue is just a wrapper around Bootstrap, the same limitation will likely apply.
I had a similar problem with pure Bootstrap; IIRC I solved it by altering the content of the modal instead of showing a new one (in Vue-speak: rendering a different component), kind of a mini-routing inside the modal.
In my Vue 2 app, I have a menu bar whose menu items use router-link. One of these menu items is 'Customers', which takes the user to a customer editor. Now, if the user clicks on this same 'Customers' menu item while they're in the customer editor, nothing happens. I presume this is because of this behaviour mentioned in the docs: "In HTML5 history mode, router-link will intercept the click event so that the browser doesn't try to reload the page."
Now, that's perfectly understandable and for the majority of the time it would be the behaviour I want. But actually here I want the component to be reloaded, to go back to a clean slate. Or perhaps more accurately, for some event to occur which I can handle within the customer editor to set things how I want them to be. I assumed this would be the case, in fact, but when I set up a watch, thus
watch: {
'$route' (to, from) {
console.log("Route changed");
}
},
I don't see anything logged to the console. It may be that some event is occurring which I'm not handling and that Vue is simply reusing the component. But how can I stop it from doing so?
According to this issue, you can add a #click.native binding to the current router-link and reinitialize your component data in there.
But a quick and dirty solution would be to append a unique parameter to your route, like a date. Check this fiddle
The intended method of accomplishing this seems to be to implement a beforeRouteUpdate function to reset the properties of the route component. See this issue on vue-router's GitHub: Routing the same component, the component is not reload, but be reused? #1490.
This is expected behaviour, Vue re-uses components where possible.
You can use the beforeRouteUpdate hook to react to a route switch that
uses the same component.
I have a simple app that has 4 pages:
Intro
Homescreen
StoreA
StoreB
StoreA contains a Header and Storelist. Storelist is comprised of all the stores located in a certain area. Using Redux, I've made it so when a user clicks on an individual store, details of the store are made visible(quite similar to Stephen Grider's techStack tutorial). I would like to pass the navigation prop all the way down to CardSection that contains the details when it's clicked on. How would I pass the navigate prop from StoreA->StoreList->IndividualStore->StoreDetails so that I can create a button for a user to navigate back to the HomeScreen?
you have a few options,
the first one is to pass down the prop: this.props.navigation to the child component from the screen which is the parent of this child and if it's nested inside another component you just keep propagating the navigation prop down.
another option is to keep in a mobx/redux store a ref to the navigation of the navigator like so:
<Navigator ref={ref=>saveRefInStore(ref._navigation)} screenProps={/* props if needed */}/>
another option is to use this library, rn-navigation-store, that manages the navigation for you including nested navigators and persistence if you want.
using this library you are able to navigate from every component you want.
here is a link to the github repo
of course there are more options, but I think these options will help you
I am just getting started with vuejs and after following a course on udemy I feel ready to dig in. To get started I need some pointers.
Take a look at this screenshot:
I have created a component call it example, when I click on the component I need on the left side of the component to show the settings for just that component. If I change those settings they should only be changed for selected component. If I select the second component settings with its own values should then be displayed to the left.
What is best way to do this? Sidebar on the left should only be visible if the component is clicked/selected. So I am guessing that the sidebar component which we can call settings should be a child of example component so that I can comunicate with this when it should be visible or not.
My question is how do I position the child component to the left like I have "mocked up" on the screenshot. Is it possible to copy settings component html into the left sidebar each time I click an example component?
How would you implement something like this?