@rashnk Thanks for the reply. Here is my app component and app module and package.json. I upgrade the native-core just now. I attached a screen shot of my issue. I still cannot see the input box when the keyboard comes up so I have no idea what is being typed. But the elements at the top are not pushed out of view anymore with the disablescroll(true) fix. I tried messing with the HTML CSS to see if that was the issue but doesnât seem to be from what I can tell. Have you seen a working plunkr?
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { HomePage } from '../pages/home/home';
import { SplashScreen } from '@ionic-native/splash-screen';
import { BankPage } from '../pages/bank/bank';
import { ProfilePage } from '../pages/profile/profile';
import { SocketTest } from '../pages/socket-test/socket-test';
import { ListPage } from '../pages/list/list';
import { NotificationPage } from '../pages/notification/notification';
import { AppPreferences } from '@ionic-native/app-preferences';
import { AppState } from '../models/appState.model';
import { Observable } from 'rxjs/Rx';
import { Store } from '@ngrx/store';
import { DemoDataService } from '../services/demodata.service'
import { DataEvent } from '../models/dataEvent'
import { State } from '../reducers';
import { AppActions } from '../actions';
import { ChatExampleData } from '../data/chat-example-data';
import { UsersService } from '../services/users.service';
import { ThreadsService } from '../services/threads.service';
import { MessagesService } from '../services/messages.service';
import { ChatTestPage } from '../pages/chattest/chattest';
import { Keyboard } from '@ionic-native/keyboard';
@Component({
templateUrl: 'app.html',
providers: [Keyboard]
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = HomePage;
pages: Array<{ title: string, component: any }>;
private _settings: AppPreferences;
public _appState: Observable<AppState>;
private bankQuestions: Observable<any>;
public dataEventsStream: Observable<any>;
private dataEventsStreamSubscription: any;
constructor(public platform: Platform,
public statusBar: StatusBar,
public splashScreen: SplashScreen,
private appPreferences: AppPreferences,
private dataService: DemoDataService,
private store: Store<State>,
private appActions: AppActions,
public messagesService: MessagesService,
public threadsService: ThreadsService,
public usersService: UsersService,
private keyboard: Keyboard) {
//chat samples
ChatExampleData.init(messagesService, threadsService, usersService);
this.initializeApp();
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Home', component: HomePage },
{ title: 'Profile', component: ProfilePage },
{ title: 'Bank', component: BankPage },
{ title: 'Socket Test', component: SocketTest },
{ title: 'Notification Test', component: NotificationPage },
{ title: 'Chat Mock', component: ChatTestPage }
];
}
initializeApp() {
//Let's break things down when pause happens
this.platform.pause.subscribe((x) => {
console.log("platform pause");
this.dataService.shutdown();
this.store.dispatch(this.appActions.removeAllDataEvents());
this.dataEventsStreamSubscription.unsubscribe();
},
error => {
console.log("platform pause error");
});
//after app comes from background, this resume fires!
this.platform.resume.subscribe((x) => {
console.log("platform resume");
this.initDataEventStream();
},
error => {
console.log("platform resume error");
});
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
//set up data events stream
this.initDataEventStream();
/*
* Disable the Ionic Keyboard Plugin scroll for iOS only
* https://github.com/driftyco/ionic/issues/5571
*/
//if (this.platform.is('ios')) {
this.keyboard.disableScroll(true);
//}
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
//Data Events
initDataEventStream() {
console.log("enter initDataEventStream")
//websocket connection
this.dataService.connect();
this.dataEventsStream = this.dataService.events.scan((acc, e) => {
console.log('Data event received: ' + e.id + ' command: ' + e.command);
if (e.command && e.command === 'REMOVE') {
//var index = acc.findIndex((item) => item.id === e.id);
//acc.splice(index, 1);
this.store.dispatch(this.appActions.removeDataEvent(e.id));
return acc;
} else {
this.store.dispatch(this.appActions.loadDataEvent(e));
return acc.concat(e);
}
}, []);
this.dataEventsStreamSubscription = this.dataEventsStream.subscribe(
x => {
console.log("dataEventsStreamSubscription emitted.");
},
error => {
console.log("dataEventsStreamSubscription failed");
console.error(error);
});
}
ngOnDestroy() {
this.dataEventsStreamSubscription.unsubscribe();
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HttpModule } from '@angular/http';
import { Push } from '@ionic-native/push';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { ProfilePage } from '../pages/profile/profile';
import { BankPage } from '../pages/bank/bank';
import { RespondPage } from '../pages/respond/respond';
import { NotificationPage } from '../pages/notification/notification';
import { SocketTest } from '../pages/socket-test/socket-test'
//import {SocketTestModule} from '../pages/socket-test/socket-test.module';
import { ProfileService } from '../services/profile.service';
import { DemoDataService } from '../services/demodata.service'
import { WebSocketConnection } from '../services/websocket.connection'
import { NotificationService } from '../services/notification.service';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { ChatThreadComponent } from '../components/chat-thread/chat-thread.component';
import { ChatWindowComponent } from '../components/chat-window/chat-window.component';
import { ChatMessageComponent } from '../components/chat-message/chat-message.component';
import { IonicStorageModule } from '@ionic/storage';
import { AppPreferences } from '@ionic-native/app-preferences';
//import {reducer} from '../reducers';
import { AppActions } from '../actions/index';
import { StoreModule, combineReducers } from "@ngrx/store";
import { compose } from "@ngrx/core/compose";
import { storeLogger } from "ngrx-store-logger";
import { reducer } from '../reducers'
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { TickerComponent } from '../components/ticker/ticker.component';
import { FromNowPipe } from '../pipes/from-now.pipe';
import { UsersService } from '../services/users.service';
import { ThreadsService } from '../services/threads.service';
import { MessagesService } from '../services/messages.service';
import { ChatTestPage } from '../pages/chattest/chattest';
@NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
ProfilePage,
BankPage,
RespondPage,
NotificationPage,
SocketTest,
ChatThreadComponent,
ChatWindowComponent,
ChatMessageComponent,
TickerComponent,
FromNowPipe,
ChatTestPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false } ),
// http://ionicframework.com/docs/v2/api/config/Config/)
HttpModule,
IonicStorageModule.forRoot(),
//SocketTestModule,
StoreModule.provideStore(reducer)
// StoreDevtoolsModule.instrumentStore()
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
ProfilePage,
BankPage,
RespondPage,
NotificationPage,
ChatTestPage
//SocketTest
],
providers: [
StatusBar,
SplashScreen,
ProfileService,
DemoDataService,
WebSocketConnection,
NotificationService,
Push,
{ provide: ErrorHandler, useClass: IonicErrorHandler },
AppPreferences,
AppActions,
MessagesService, ThreadsService, UsersService
]
})
export class AppModule { }
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "4.0.0",
"@angular/compiler": "4.0.0",
"@angular/compiler-cli": "4.0.0",
"@angular/core": "4.0.0",
"@angular/forms": "4.0.0",
"@angular/http": "4.0.0",
"@angular/platform-browser": "4.0.0",
"@angular/platform-browser-dynamic": "4.0.0",
"@ionic-native/app-preferences": "^3.6.1",
"@ionic-native/core": "^3.8.1",
"@ionic-native/keyboard": "^3.8.0",
"@ionic-native/push": "^3.6.1",
"@ionic-native/splash-screen": "3.4.2",
"@ionic-native/status-bar": "3.4.2",
"@ionic/storage": "2.0.1",
"@ngrx/core": "^1.2.0",
"@ngrx/store": "^2.2.2",
"@ngrx/store-devtools": "^3.2.4",
"ionic-angular": "3.0.1",
"ionicons": "3.0.0",
"moment": "^2.18.1",
"ngrx-store-logger": "^0.1.7",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"underscore": "^1.8.3",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.0",
"remotedev": "^0.2.7",
"typescript": "~2.2.1"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-statusbar",
"cordova-plugin-console",
"cordova-plugin-device",
"ionic-plugin-keyboard",
"cordova-plugin-splashscreen"
],
"cordovaPlatforms": [],
"description": "Microsoft.Responder: An Ionic project"
}
