I’ve come across a strange bug I cannot solve.
When I navigate to tab 2, the page acts as expected. Then if I navigate back to the tab 1, then go back to tab 2, my elements now disapear on scroll. This happens on ios only, and it happens no matter what component I set as tab 2.
(these components work fine on tab one which eliminates the problem being the component)
I’m using a very typical tab layout that I will post below. Any help would be greatly appreciated.
Component:
import { Component } from '#angular/core';
import { HomeComponent } from '../../home/home-component/home.component';
import { FirebaseHomeComponent } from '../../firebase/firebase-home/firebase-home.component';
#Component({
templateUrl: 'tabs.html'
})
export class TabsComponent {
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = HomeComponent;
tab2Root: any = FirebaseHomeComponent;
constructor() {
}
}
HTML:
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="{{'HOME' | translate}}" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="{{'PROFILE' | translate}}" tabIcon="contact"></ion-tab>
</ion-tabs>
Module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { SharedModule } from '../../app/shared/shared.module';
import { TabsComponent } from './tabs-component/tabs.component';
#NgModule({
declarations: [
TabsComponent
],
imports: [
CommonModule,
SharedModule
],
exports: [
TabsComponent
],
entryComponents:[
TabsComponent
]
})
export class TabsModule {}
Ionic Framework: 3.2.0
Ionic app script: 3.0.0
Angular core: 4.1.0
angular compiler cli: 4.1.0
node: 8.9.0
https://github.com/ionic-team/cordova-plugin-ionic-webview
The answer is to install this plugin. Fixed it like a charm. I was stuck on this for 15 days I could not find the solution anywhere so I hope it helps.
Related
I am working on an Ionic4 app which needs to be able to take a photo.
I added "cordova-plugin-camera". When i run a function of this plugin on real DEVICE to take photo, i get an error "cordova_not_avaliable".
(Note that OTHER native cordova plugins work just fine - even in same page / module).
I followed basic installation process on Ionic documentation for "cordova-plugin-camera". No other errors are thrown.
import { Component, OnInit } from '#angular/core';
import { Camera, CameraOptions } from '#ionic-native/camera/ngx';
#Component({
selector: 'app-picture',
templateUrl: './picture.page.html',
styleUrls: ['./picture.page.scss'],
})
export class PicturePage implements OnInit {
options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
constructor(private camera: Camera) { }
ngOnInit() {}
takePicture() {
this.camera.getPicture(this.options).then((imageData) => {
let base64Image = 'data:image/jpeg;base64,' + imageData;
// this.presentAlert('success');
}, (err) => {
// this.presentAlert(err); // Displays "cordova_not_avaliable"
// (For show on DEVICE. I know rest logic of alert is missing)
});
}
}
I would expect that cordova IS avaliable since it is running on an android Device. No other error is present (Also note that I get an exact same result on ionic serve).
Edit: "Also note i am not very experienced yet in this environments so i might be missing something obvious."
Edit: "title (removed preview)"
Found solution, In my camera options I was missing a
sourceType: this.camera.PictureSourceType.CAMERA
That solved the problem.
I am programming an app in Ionic and using hammer.js for the pan gesture (for the moment, only this one). In the browser (chrome and safari) this is working fine, also on Android device, but I just discovered that pan gesture is not working on iOS (neither real device nor emulator). After a long while research, I don't find the way to make it work. Neither pan nor panend work (click does).
Note: The events are (should be) launched from a custom component, not a page itself.
I have seen other with similar problems, but no solution that works for me. Here is finally stated that hammerjs it not so compatible with iOS, but here says it it. This guy seems to have a similar problem, but found no solution.
I have also try adding to my app.module.ts the following code and the provider {provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig}. No success.
import * as Hammer from 'hammerjs';
import {HammerGestureConfig, HAMMER_GESTURE_CONFIG} from '#angular/platform-browser';
export class MyHammerConfig extends HammerGestureConfig {
overrides = <any> {
'pan': {
enable: true,
direction: Hammer.DIRECTION_HORIZONTAL
}
};
}
Hier is (an extract of) my code:
export class SeekbarQuantizedComponent implements OnInit, OnChanges {
private stepsPositions: number[]; // Will have the position of the different steps (in %)
private progress = 0; // The progress of the progressbar in %
[...]
onClick($event: MouseEvent) {
const clickX = $event.offsetX * 100 / this.background.nativeElement.offsetWidth;
this.setProgress(clickX);
this.valueSelected.emit(this.selectedPosition);
}
onPan($event) {
this.setProgress(100 * ($event.changedPointers[0].offsetX / this.background.nativeElement.offsetWidth));
}
onPanEnd($event) {
this.setProgress(100 * ($event.changedPointers[0].offsetX / this.background.nativeElement.offsetWidth));
this.valueSelected.emit(this.selectedPosition);
}
[...]
}
The html:
<div #background class="progress-outer"
(click)="onClick($event)"
(pan)="onPan($event)"
(panend)="onPanEnd($event)">
<div class="progress-inner"
[style.width]="progress + '%'">
{{text}}
</div>
</div>
I am trying to develop a react-native book-searching app and have found this online as a helper tool: https://www.appcoda.com/react-native-introduction/
However, the site is from 2015, so some of the syntax is not properly updated.
I've run into the following issue:
The code that they tell me to use is as follows:
'use strict';
var React = require('react-native');
var Books = require('./Books');
var Search = require('./Search');
var {
AppRegistry,
TabBarIOS,
Component
} = React;
When I used that, I arrived at an Error Message telling me to use
import React, { Component } from 'react';
instead of
import React from 'react-native';
In my attempt to update it to the latest version of React, I arrived at:
'use strict';
import React, { Component } from 'react';
var Books = require('./Books');
var Search = require('./Search');
var {
AppRegistry,
TabBarIOS
} = React;
This is still causing multiple errors. Can someone explain how to properly do what I am trying to do?
You're trying to import AppRegistry and TabBarIOS from React instead of react-native and some syntax errors. Change:
var {
AppRegistry,
TabBarIOS
} = React;
to
import {
AppRegistry,
TabBarIOS
} from 'react-native';
I'm trying to use youtube component in my react-native app. But it keeps giving me an error "element type is invalid: expected a string or a class/function but got: object. Check the render method of xx"
I installed react-native-youtube and my package.json seems to be ok.
"dependencies": {
"react": "15.2.1",
"react-native": "0.30.0",
"react-native-tabbar-navigator": "^0.3.0",
"react-native-youtube": "^0.7.2"
}
}
And my Main.js code looks like the below.
import React, { Component } from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
TouchableHighlight,
ActivityIndicator,
Image
} from 'react-native';
var YouTube = require('react-native-youtube');
Class Main extends Component {
render() {
return (
<View style={styles.container}>
<YouTube
ref="youtubePlayer"
videoId="KVZ-P-ZI6W4"
play={true}
hidden={false}
playsInline={true}
loop={false}
onReady={(e)=>{this.setState({isReady: true})}}
onChangeState={(e)=>{this.setState({status: e.state})}}
onChangeQuality={(e)=>{this.setState({quality: e.quality})}}
onError={(e)=>{this.setState({error: e.error})}}
onProgress={(e)=>{this.setState({currentTime: e.currentTime, duration: e.duration})}}
style={{alignSelf: 'stretch', height: 300, backgroundColor: 'black', marginVertical: 10}}/>
</View>
);
}
}
I really have no idea why this error happens. Please share any ideas you have!! (:
Best
Use import YouTube from 'react-native-youtube'; instead of var YouTube = require('react-native-youtube');
Also, you have Class in your code starting with uppercase instead of class
My project is giving this warning, which I found after trying to debug why my native view component was no longer showing. This is something that has been working previously, however, the Xcode project has been rebuilt recently. I'm using CocoaPods to integrate RN in my app.
I'm wondering if something has changed or if I have correct versions in my package.json:
"react": "^0.14.8",
"react-native": "^0.22.0",
The code accessing the custom native component:
import React from 'react-native'
var {
View,
StyleSheet,
NavigatorIOS,
Component,
Text,
requireNativeComponent,
} = React;
class JuceComponent extends Component {
render() {
return <ReactJuceView {...this.props} />;
}
}
JuceComponent.propTypes = {
// props to send to Juce Component
}
var ReactJuceView = requireNativeComponent('ReactJuceView', JuceComponent);