How can go to the next page when I pressed a button without using the NavigatorIOS. is there a way in react native to do that?
I understand how the NavigatorIOS works but my problem is i do not want to have NavigationBar on my Login Page.
Thanks!
NavigatorIOS has a property navigationBarHidden that you could set when you are in the login screen, e.g. something like:
<NavigatorIOS
navigationBarHidden={!this.state.isLoggedIn}
//...
/>
Alternatively you could render your login screen outside the navigator hierarchy:
render: function() {
if (!this.state.isLoggedIn) {
return <LoginScreen />;
}
return (
<NavigatorIOS
//...
/>
);
},
Both of these examples presume that your button sets a state variable isLoggedIn to true.
Related
I have an issue with showing a Modal on Ionic 5 Angular 8 on iOS.
So I have a page with two buttons, one is declared in the same page component, the other one is from a child component.
When the button in the same page is clicked, the modal opens fine.
When the button from the child component is clicked, the event is emitted to the parent Page, which then creates the modal, but the modal slides up, outside the view port.
I have tried all possible trouble shooting I can think of:
Removing all custom CSS, removing all html, changing the route of the event, adding a timeout etc..
I don't have any autofocus or bootstrap: [] in my entire app.
Here is what the page looks like
export class MyPage implements OnInit, OnDestroy {
//...
private openModal (params) {
const obj = {
component: ModalComponent,
componentProps: params
};
this.modalProvider.create (obj).then (
modal => {
modal.onDidDismiss().then(
() => {}
);
modal.presente ();
}
)
}
public onOpenModal () {
const params = {
//custom properties
}
this.openModal(params);
}
public localAction () {
const params = {
// custom params
}
this.openModal (params)
}
}
Now on the template side :
<ion-content force-overscroll="false" [scrollY]="false">
<!-- Some html --->
<ion-grid (click)="localAction()">
<!-- Some html --->
</ion-grid>
<!-- Some html --->
<child-component (modalOpenEmitter)="onOpenModal($event)">
</ion-content>
Ok I have found the problem after several hours digging.
It turns out it was because of the child component which host a list of button scrolling horizontally.
When a button from the the child component was clicked, an event was emitted as per normal, but I was using a DOM function called scrollintoview like so:
Child component.ts :
public btnClicked (value) {
//...
this.clickEmitter.emit(value); // Normal stuff
const element = document.getElementById(value.id);
if (element) {
element.scrollIntoView(); // This caused the the modal to disappear
}
}
This scrollIntoView was there to make the clicked button slide further in the view port.
Unfortunately, this beaks the modal on iOS, but it works fine on android by the way.
How can I make edit button work in a data table in angular 7. I would also like to know how to load a component on button click,
Ok here is my idea to acheive it
First for a button to work we use (click)
<button (click)="toggledata()">Show</button>
<demo-component *ngIf="value"></demo-component>
.ts
value = false;
toggledata() {
this.value = !this.value;
}
Question - How to properly use React Navigation's TabNavigator container component inside another React component that acts just as wrapper component?
What I want to achieve - Basically I want the appbar and tabbar both to be displayed - appbar on the top, tabbar (TabBarTop) just beneath it, a very common design pattern.
I have tried a couple of ways.
Method #1 (Nesting inside StackNavigator)
Tab.js
export const Tab = TabNavigator({
Tab1: { screen: Tab1Container },
Tab2: { screen: Tab2Container }
}, {
tabBarComponent: TapBarTop,
tabBarPosition: 'top'
});
AppBar.js
class AppBarComponent extends Component {
static navigationOptions = { header: null }
render() {
return (
<View>
*some more views, buttons blah blah here
</View>
)
}
}
export default AppBarComponent;
and I use them inside StackNavigator, like
export default StackNavigator({
stack1: { screen: AppBarComponent },
stack2: { screen: Tab }
});
This results in only 1 stack to be displayed at a given time which is exactly how it works. And I don't have anything to do with initialRouteName.
Method #2 (wrapping inside another component)
<View style={{ flex: 1 }}>
<AppBarComponent />
<Tab />
</View>
This on the contrary displays both components but this.props.navigation.navigate('somepath') or push() or pop() or
replace() doesn't work from inside and . But this.props.navigation and its methods all are available inside those components.
PS - I'm using React Navigation v1 and running on iOS
Solution for Method 1
Have a StackNavigator with only one screen and show your TabNavigator in that screen. Then customize header with your custom AppBarComponent.
header
React Element or a function that given HeaderProps returns a React
Element, to display as a header. Setting to null hides header.
Sample
export default StackNavigator({
stack: {
screen: Tab,
navigationOptions: {
header: (HeaderProps) => (<AppBarComponent headerProps={HeaderProps} />)
}
}
});
Solution for Method 2
You can wrap your component which is not a part of the stack with withNavigation HOC.
withNavigation is a higher order component which passes the
navigation prop into a wrapped Component. It's useful when you cannot
pass the navigation prop into the component directly, or don't want to
pass it in case of a deeply nested child.
Sample
class AppBarComponent extends Component {
static navigationOptions = { header: null }
render() {
return (
<View>
*some more views, buttons blah blah here
</View>
)
}
}
export default withNavigation(AppBarComponent);
#bennygenel your answer is definitely useful in addressing the problem. I kind of fed wrong information when I talk about having components inside TabNavigator. Well, instead of dumb components, there were multiple redux containers inside the TabNavigator as screens and the entire TabNavigator wrapped in a Dumb component. I have edited my question sincerely.
Though this.props.navigation exists both inside the redux containers and the wrapper component, the navigation stack reference was different for them which is why methods such as navigate or goBack() were not working.
The solution was simple. Passing the navigation stack reference as screenProps to the wrapper component solves this issue.
<View style={{ flex: 1 }}>
<AppBarComponent />
<Tab screenProps={{ rootNav: this.props.navigation }} />
</View>
I'm trying to stop jQuery Mobile hiding the loading spinner when changePage is called.
The program flow goes like this, starting with clicking a link, which has its click event defined like this:
$('body').delegate('.library-link', 'click', function() {
$.mobile.loading( 'show' );
$.mobile.changePage($('#page-library'));
return false;
});
Upon clicking the link, the pagebeforeshow event is fired, which triggers a function to populate the page from the local storage, or else make an ajax call to get the data.
$(document).on('pagebeforeshow', '#page-library', function(event){
ui.populate_data();
});
In ui.populate_data() we get the data from local storage or make an ajax call.
ui.populate_data = function() {
if (localdata) {
// populate some ui on the page
$.mobile.loading( 'hide' );
} else {
// make an ajax call
}
};
If the data is there, we load the data into the container and hide the loading spinner. If not it makes the ajax call, which on complete saves the data in local storage, and calls ui.populate_data()
The problem is, after the pagebeforeshow event is finished, changePage is calling $.mobile.loading( 'hide' ), even though the data might not be there yet. I can't find any way to prevent changePage from hiding the spinner, other than by temporarily redefining $.mobile.loading, which feels pretty wrong:
$('body').delegate('.library-link', 'click', function() {
$.mobile.loading( 'show' );
loading_fn = $.mobile.loading;
$.mobile.loading = function() { return; };
$.mobile.changePage($('#page-library'), {showLoadMsg: false});
return false;
});
and before hiding the spinner in my ui function:
ui.populate_data = function() {
if (localdata) {
// populate some ui on the page
if (typeof loading_fn === 'function') {
$.mobile.loading = loading_fn;
}
$.mobile.loading( 'hide' );
} else {
// make an ajax call
}
};
Surely there must be a way to get complete control over the showing and hiding of the loading widget, but I can't find it. I tried passing {showLoadMsg: false} to changePage, but as suggested by the docs it only does things when loading pages over ajax, which I'm not doing.
Maybe it's too much for many, but I found a solution other than the written in the comments (which didn't work for me).
I use the jquery mobile router and in the 'show' event of a page, I do $.mobile.loading("show");, so when the page appears it does with the loading spinner showing.
Though to hide the spinner, I had to use $('.ui-loader').hide();, which is weird, I know...
I use Jquery Mobile Router for a lot more, but it solved this issue.
(Maybe just listening to the proper event and triggering the spinner would also work, as this is what JQMR does...)
I'm using JQM 1.4.2...
I have a jquery mobile form with several radio inputs whit the options "DS", "NO" and "YES". I want when I click a button it simulates a click on the "YES" option of all radio buttons.
I use this code:
$("#btn-all-yes").click(function(){
$(".replay-yes").each(function(index, element){
$(element).trigger("click");
//$(element).click();
});
});
But I need to do click two times in the button to achieve the desired result. If I put the line '$(element).trigger("click")' two times it works, but I think it should work with a single call to the click event.
You can see all the code at http://jsfiddle.net/qwLPH/7/
You need to change its' status using .prop and then refresh it .checkboxradio('refresh').
Working demo
Update - Uncheck other buttons
$("#btn-all-yes").click(function () {
$('[data-role="controlgroup"]').find("[type=radio]").each(function () {
if ($(this).hasClass('replay-yes')) {
$(this).prop('checked', true).checkboxradio("refresh");
} else {
$(this).prop('checked', false).checkboxradio("refresh");
}
});
});
Old answer
$("#btn-all-yes").click(function(){
$(".replay-yes").each(function(index, element){
$(element).prop('checked', true).checkboxradio("refresh");
});
});
Reference
Similar issue
Try to initialize the click on page load:
$(".replay-yes").each(function (index, element) {
$(element).trigger("click");
//$(element).click();
}).click();
//-^^^^^^^----------this way
Tryout in fiddle here