I have the following screen which should show a loading indicator while the website isn't shown. However the WebView prevents any other composables from showing up until it is ready to show the website.
How can I show something else on this screen before the website shows up?
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.google.accompanist.web.LoadingState
import com.google.accompanist.web.WebView
import com.google.accompanist.web.rememberWebViewState
#Composable
fun UrlScreen() {
val state = rememberWebViewState(url = "https://stackoverflow.com")
Column {
val loadingState = state.loadingState
if (loadingState is LoadingState.Loading) {
LinearProgressIndicator(
progress = loadingState.progress,
modifier = Modifier.fillMaxWidth()
)
}
Text("This text won't show up before the website shows up.")
WebView(
state = state,
modifier = Modifier.weight(1f),
)
}
}
I faced a similar issue while I was implementing my own WebView wrapper based on Accompanist WebView component. I had flag android:hardwareAccelerated="true in the manifest for the WebWiew's hosted activity. In my case adding setLayerType(View.LAYER_TYPE_SOFTWARE, null) for the CustomWebView component fixed the issue.
Here is snipped of my code:
AndroidView(
factory = { context ->
CustomWebView(context).apply {
setLayerType(View.LAYER_TYPE_SOFTWARE, null)
}
})
Maybe it will help or direct you to the solution.
Related
I am working on my first React app - everything has been going great but all of a sudden I started getting the error mentioned above. I am not aware of making any changes to my code and therefore for me as an absolute beginner, it is very hard to spot the error. I have been trying to fix the code for two days already and am considering starting over. All I know is that filter seems to be the problem but I cannot really see anything wrong with it. I tried looking for the answer but nothing I found really helped me solve it.
error
And this is my code:
import React from "react";
import { StyleSheet, Text, View, TouchableOpacity, Modal } from "react-native";
import colors from "../colors";
import TodoModal from "./TodoModal";
export default class TaskList extends React.Component {
state = {
showListVisible: false,
};
toggleListModal() {
this.setState({ showListVisible: !this.state.showListVisible });
}
render() {
const list = this.props.list;
const completedCount = list.todos.filter(todo => todo.completed).length;
const remainingCount = list.todos.length - completedCount;
my guess is that during the initial render, this.props.list is null. all you have to do is have a line of code to guard against that.
render() {
const list = this.props.list;
if (!list) return null; // or return some sort of loading element
const completedCount = list.todos.filter(todo => todo.completed).length;
const remainingCount = list.todos.length - completedCount;
I have just started learning React Native and development for mobile devices. One of the things I've tried is using fetch API to get data from http://jsonplaceholder.typicode.com/posts
The App.js file is given below:
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
export default function App() {
const [firstLoad, setLoad] = React.useState(true);
const [data, upDateData] = React.useState([]);
let isLoading = true;
async function sampleFunc() {
let response = await fetch("https://jsonplaceholder.typicode.com/posts");
let body = await response.json();
upDateData(body);
}
if (firstLoad) {
sampleFunc();
setLoad(false);
}
if (data.length > 0) isLoading = false;
const posts = data.map(post => (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
</div>
));
return (
<View style={styles.container}>
{isLoading ?
<Text>Loading</Text> :
<Text>{posts}</Text>
}
</View>
);
}
Nothing fancy is going on here, just making an https request to the server to get posts. While the data is being transferred, the Loading label is being displayed, after that, all fetched posts are rendered on the page.
I am using Expo, and everything works fine when I run it in the browser, but when I scan the QR code, Expo app opens, the Loading message is displayed for a couple of seconds, and then the app crashes.
I may be doing something here that is typical of regular React and is not used in React Native. It is just strange that it would work on my computer and not the phone. Any suggestions would be greatly appreciated. Thank you in advance!
You cannot have text outside of Text components in react-native.
In your example, in the post function, you use the h1 and p tags, which are not supported by react-native.
The fix here is to make sure that those texts are inside Text components, you can have styling set to those to make them look closer to what you want.
You can refer the docs on how to create custom styles.
const posts = data.map(post => (
<View>
<Text>{post.title}</Text>
<Text>{post.body}</Text>
</View>
));
To debug similar issues in the future, you should be getting a red flashing screen with the exception. (Maybe it doesn't appear when running on Expo)
I know console.disableYellowBox = true could be answer. But I want ban it with all my control because my App has multiple package and I do not want to use console.disableYellowBox = true in every package.
is there any way to achieve this by set a config in shaking bar ?
I tried with the new React version replacing the import to:
import { LogBox } from "react-native";
and adding this line inside App.js
LogBox.ignoreAllLogs();
And it's working good for me.
You have multiple way's in doing that, which is not recommended since you want to know what's causing these warnings and sometimes it's important informations you need to know, here is some of the ways you can do
Warnings will be displayed on screen with a yellow background. These
alerts are known as YellowBoxes. Click on the alerts to show more
information or to dismiss them.
As with a RedBox, you can use console.warn() to trigger a YellowBox.
YellowBoxes can be disabled during development by using
console.disableYellowBox = true;
using ignore
console.ignoredYellowBox = ['Warning: Each', 'Warning: Failed'];
ignoredYellowBox allows you to ignore certain warnings as you can see in the example above.
using disableYellowBox
console.disableYellowBox = true;
disableYellowBox allows you to disable it completely from your app.
however both these ways you need to use inside App.js before you render you app.
example:
import React, { Component } from "react";
import { View } from "react-native";
//console.disableYellowBox = true;
//OR
//console.ignoredYellowBox = ['Warning: Each', 'Warning: Failed'];
export default class App extends Component {
render() {
return (
<View>
{/*Your Code will be here*/}
</View>
);
}
}
Take a look at Debugging React Native to learn more about YellowBox
// RN >= 0.52
import {YellowBox} from 'react-native';
YellowBox.ignoreWarnings(['Warning: ReactNative.createElement']);
// RN < 0.52
console.ignoredYellowBox = ['Warning: ReactNative.createElement'];
Cannot find flow type for PanResponder like shown in the official react-native example.
Example here: https://github.com/facebook/react-native/blob/0ccedf3964b1ebff43e4631d1e60b3e733096e56/RNTester/js/examples/PanResponder/PanResponderExample.js#L17
This does not work:
import type {
PanResponderInstance,
} from 'react-native';
For typing PanResponders:
// #flow
type Props = {…};
type State = {…};
class Screen extends Component<Props, State> {
_panresponder: PanResponderInstance
…
}
I want to use the flow type for PanResponder like in the example linked above. How can I access the type for PanResponder (PanResponderInstance) from react-native?
import type {
PanResponderInstance,
} from 'react-native';
This will work on react native 0.64
I figured it out:
import type {
PanResponderInstance,
} from 'react-native/Libraries/Interaction/PanResponder';
Sadly it seems like this is the way to do it, which is suboptimal but works.
I have a probably odd question. I am trying to navigate to a previous page using:
const popAction = StackActions.pop({
n: 1,
});
this.props.navigation.dispatch(popAction);
but it does not work.
So my first idea was to check which pages are registered in StackActions, how can I do that?
If you want to simply navigate back, you can use this
import { NavigationActions } from 'react-navigation';
this.props.navigation.dispatch(NavigationActions.back());