There are lines over all the multiline Text tags in the app.Lines only shows on iPhone Plus not on iPad, tab, android or any other device.
Any idea how to fix it? Lines over Text similar to the image below:
import React, {Component} from "react";
import {
Image,
View,
StatusBar,
TouchableOpacity,
WebView,
Dimensions,
Linking,
ScrollView,
NetInfo,
Alert
} from "react-native";
import {
Container,
Header,
Title,
Content,
Text,
H3,
Button,
Icon,
Footer,
FooterTab,
Left,
Right,
Body
} from "native-base";
class Test extends Component {
constructor() {
super();
}
render() {
return (
<Container style={styles.container}>
<View>
<Text> test test test test test test </Text>
</View>
</Container>
);
}
}
export default Test;
iPhone 7 Plus show lines on text component background, this is react native known issue already reported on github as well. To resolve this add this in style:
backgroundColor: 'transparent',
Related
I'm having a problem with a website of mine. See the following error that appears on Google Chrome:
WHen I run npm start command on Visual Studio Code, to see the website locally on the browser, it doesn't show anything, and I'm not sure if this warning is what is keeping it from showing on the screen?
Below is the code for the index.js file the error mention.
import App from "./App";
import React from "react";
import { hydrate, render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
const APP = (
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
hydrate(APP, rootElement);
} else {
render(APP, rootElement);
}
I'm using Material UI in this project.
I want to make this warning disappear, because it might be the reason that my website is not rendering locally in the browser. What I see is just a black screen!
I try to change the status bar in the safari browser, I search it and it was a lot's question about it but none of them fixed my issue.
I tried change-status-bar-color and how-to-change-chrome-header-color.
This blue area is around iPhone's notches, and I want to change the color in the whole app.
thanks for your attention.
You want to change the value for theme-color. The default color you're seeing is defined in your web/manifest.json file.
You could also set it, for example to white for your light-theme and to black for your dark-theme, by adding following lines to your web/index.html:
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#FFFFFF">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000">
You could also change it dynamically via dart:js by adding a script to your web/index.html:
<script>
function setMetaThemeColor(color) {
document.querySelector('meta[name="theme-color"]').setAttribute("content", color);
}
</script>
Then call it via dart:js:
import 'package:flutter/material.dart';
import 'dart:js' as js;
extension ColorString on Color {
String toHexString() {
return '#${(value & 0xFFFFFF).toRadixString(16).padLeft(6, '0').toUpperCase()}';
}
}
void setMetaThemeColor(Color color) {
js.context.callMethod("setMetaThemeColor", [color.toHexString()]);
}
Please try to use the below code:
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.red,
));
I am trying to implement a feature similar to whats available in Facebook i.e. if you have scrolled the news feed, pressing hardware back button takes you to the top of the list.
For this I think believe canDeactivate of Router Guards would be the proper ways.
But I am unable to find a way to check if the page has been scrolled or not.
I have tried window.pageYOffset but this always returns 0, accessing ViewChild within a Guard always returns null.
Can anyone please guide how to achieve this?
There are two approaches for this that should help you.
First, starting with Ionic 4, you can register you back button handler using the Platform features:
https://www.freakyjolly.com/ionic-4-overridden-back-press-event-and-show-exit-confirm-on-application-close/
this.platform.backButton.subscribeWithPriority(999990, () => {
//alert("back pressed");
});
Secondly, you can use more features of Ionic 4 called scrollEvents.
I have explained how to use this feature in other answers:
How to detect if ion-content has a scrollbar?
How to detect scroll reached end in ion-content component of Ionic 4?
ionic 4 - scroll to an x,y coordinate on my webView using typeScript
Hopefully that will get you moving in the right direction.
I think that last answer should solve most of your issue, so something like this:
Freaky Jolly has a tutorial explaining how to scroll to an X/Y coord.
First, you need scrollEvents on the ion-content:
<ion-header>
<ion-toolbar>
<ion-title>
Ion Content Scroll
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [scrollEvents]="true">
<!-- your content in here -->
</ion-content>
In the code you need to use a #ViewChild to get a code reference to the ion-content then you can use its ScrollToPoint() api:
import { Component, ViewChild } from '#angular/core';
import { Platform, IonContent } from '#ionic/angular';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
// This property will save the callback which we can unsubscribe when we leave this view
public unsubscribeBackEvent: any;
#ViewChild(IonContent) content: IonContent;
constructor(
private platform: Platform
) { }
//Called when view is loaded as ionViewDidLoad() removed from Ionic v4
ngOnInit(){
this.initializeBackButtonCustomHandler();
}
//Called when view is left
ionViewWillLeave() {
// Unregister the custom back button action for this page
this.unsubscribeBackEvent && this.unsubscribeBackEvent();
}
initializeBackButtonCustomHandler(): void {
this.unsubscribeBackEvent = this.platform.backButton.subscribeWithPriority(999999, () => {
this.content.scrollToPoint(0,0,1500);
});
/* here priority 101 will be greater then 100
if we have registerBackButtonAction in app.component.ts */
}
}
In Ionic 3 application, I want to show the cancel button of ion-searchbar until the search bar has value.
Mine is a tab based application and on moving to other tab and coming back to the tab, the search text is been retained and I need the cancel button also to be visible if text exists in search bar. But it is not visible.
<ion-searchbar
#projectsearchbar name="query" (search)="doSearch($event)" [(ngModel)]="global.SearchFilter" [showCancelButton]="true" cancelButtonText="Cancel" placeholder="Search" (ionCancel)="onSearchCancel($event)" (ionInput)="onInput($event)" (ionBlur)="onInputBlur()" (ionFocus)="onInputFocus()" (ionClear)="onInputClear($event)" >
I tried to get the cancel element and set the style, but it didn't work
ionViewWillEnter() {
if (this.global.SearchFilter) {
let cancelBlurElement = <HTMLElement>document.querySelector(".searchbar-ios .searchbar-ios-cancel");
cancelBlurElement.style.display = 'block';
}
}
Also tried to get the search bar control by class name and added a custom class but it didn't worked.
ionViewWillEnter() {
if (this.global.projectSearchFilter) {
let el=document.getElementsByTagName('ion-searchbar');
el[0].classList.add('visible-cancel');
}
}
.visible-cancel {
display: block!important;
}
Also tried to import as view child,
import { Component, Output, NgZone, ViewChild } from '#angular/core';
export class SearchPage {
#ViewChild('projectsearchbar') searchbar:Searchbar;
ionViewWillEnter() {
this.searchbar.setFocus();
}
}
i had the same issue
resolved by using this CSS snippet in the encapsulating element
.encapsulating-element {
.searchbar-ios-cancel{
display: none !important;
}
}
I'm new to reactjs and I'm having a hell of a time understanding this bug.
I've read this, and it seems like the solution is there but I'm drawing a blank on how to implement this correctly:
https://facebook.github.io/react/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized
I am trying to render components based on classNames of clicked elements. The classNames match to component names. When I click an element it calls a function that sets the state of my app to that elements className. I then render the component based on the new state.
When testing, if I place the component directly into my app (not rendering the component name dynamically), it works just fine. But when i render the component name dynamically react thinks it's a built-in DOM element and doesn't render properly at all.
In this image you can see both components, rendered next to each other:
both components, first directly added, and the second with the name rendered dynamically
here is my app component code that is rendering everything:
import React, { Component } from 'react';
import logo from '../logo.svg';
import '../css/App.css';
import menus from '../menus';
import MainNav from './MainNav';
import Products from './Products';
import Demos from './Demos';
import Industry from './Industry';
import Customers from './Customers';
import Trials from './Trials';
import Contact from './Contact';
import Newsroom from './Newsroom';
import About from './About';
import Home from './Home';
class App extends Component {
constructor() {
super();
this.chooseComponent = this.chooseComponent.bind(this);
this.state = {
allMenus: menus,
componentMenu: menus,
//sets initial component to load, changes on each click to the clicked component
clickedComponent: Home
};
}
chooseComponent(event) {
//save the classname of the menu i click
var clickedComp = event.target.className;
//saves a reference to a json object for later use
var menu = menus[clickedComp];
//adds those two vars to the state
this.setState({
componentMenu: menu,
clickedComponent: clickedComp
});
}
render() {
//saves a var for rendering the currently clicked component
var ActiveComponent = this.state.clickedComponent;
return (
<div className="App">
<MainNav choose={this.chooseComponent}/>
//renders the components directly without issue
<Products menuData={this.state.componentMenu} />
//renders the component dynamically with problems
<ActiveComponent menuData={this.state.componentMenu} />
</div>
);
}
}
export default App;
here is and example of one of my component being rendered in the App that's giving problems:
import React from 'react';
import products from '../products';
import ProductsMenu from './ProductsMenu';
import Platform from './Platform';
import Applications from './Applications';
import ExMachina from './ExMachina';
import ProductsHome from './ProductsHome';
import Submenu from './Submenu';
import menus from '../menus';
class Products extends React.Component {
constructor() {
super();
this.showContent=this.showContent.bind(this);
this.state = {
productsOverview: products,
content: <ProductsHome />
}
}
render(props) {
return (
<div className="content">
{this.state.content}
</div>
);
}
}
export default Products;