TypeError: Cannot read property 'isFileUploadSupported' of null - react-native

I am trying to render a HTML snippet in my React-Native app using react-native-webview
, I also tried react-native-render-html, but in this CSS is not work that much.
This is my Error Stack
ERROR TypeError: Cannot read property 'isFileUploadSupported' of null, js engine: hermes
at App (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:93600:36)
at RCTView
at View
at RCTView
at View
at AppContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:85300:36)
at DBC(RootComponent) (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:89907:28)
ERROR Error: Requiring module "node_modules/react-native-webview/index.js", which threw an exception: TypeError: Cannot read property 'isFileUploadSupported' of null, js engine: hermes
at App (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:93600:36)
at RCTView
at View
at RCTView
at View
at AppContainer (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:85300:36)
at DBC(RootComponent) (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.dbc&modulesOnly=false&runModule=true:89907:28)
ERROR TypeError: Cannot read property 'WebView' of undefined
This error is located at:
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in DBC(RootComponent), js engine: hermes
And This is my code
import {SafeAreaView, ScrollView, useWindowDimensions} from 'react-native';
import {WebView} from 'react-native-webview';
import {getTemplate} from './template';
export default class App extends Component {
render() {
const template = getTemplate();
const source = {
html: template,
};
return (
<SafeAreaView>
<ScrollView>
<ScrollView horizontal={true}>
<WebView
ref={r => (this.webref = r)}
originWhitelist={['*']}
source={source}
/>
</ScrollView>
</ScrollView>
</SafeAreaView>
);
}
}

Related

Expo simple Webview, Error: Element type is invalid

I am new to react native and trying to implement this simple webview from Expo docs:
https://docs.expo.dev/versions/latest/sdk/webview/
This is all I am doing and there is not much more to it.
import * as React from 'react';
import { WebView } from 'react-native-webview';
import { StyleSheet } from 'react-native';
import Constants from 'expo-constants';
export default function App() {
return (
<WebView
style={styles.container}
source={{ uri: 'https://google.com' }}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
},
});
my Package.json looks like this:
"dependencies": {
"expo": "~45.0.0",
"expo-constants": "~13.1.1",
"expo-status-bar": "~1.3.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-webview": "11.18.1"
},
But when I run expo start, I get this error on ios simulator:
ERROR Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `App`.
This error is located at:
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in DevAppContainer (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)
ERROR Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `App`.
This error is located at:
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in DevAppContainer (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)

Invariant Violation: A date or time should be specified as `value`. How to fix that with datepicker?

I am trying to add a datepicker to my form created using nativebase in React-Native.
But I am getting error as Invariant Violation: A date or time should be specified as value.
my code:
import React, { Component, useState, useEffect, useRef } from "react";
import {
Container,
Header,
Content,
H1,
Text,
Form,
Item,
Input,
DatePicker,
} from "native-base";
export default function createOrder() {
const [name, setName] = useState("");
const [amount, setAmount] = useState("");
const [count, setCount] = useState("");
const [price, setPrice] = useState("");
const [commission, setCommission] = useState("");
const [date, setDate] = useState(new Date());
// used to regulate when calculations are made
const [focusedInput, setFocus] = useState(null);
console.log(date);
// run an effect when price, count, or amount changes
useEffect(() => {
// if price and count exist and user isnt changing amount, calculate amount
if (price && count && focusedInput !== "amount") {
setAmount((parseFloat(price) * parseFloat(count)).toString());
}
// if price and count exist and user isnt changing count, calculate count
else if (price && amount && focusedInput !== "count") {
setCount((parseFloat(amount) / parseFloat(price)).toString());
}
}, [price, count, amount]);
// when amount changes, update commission and total
useEffect(() => {
if (isNaN(parseFloat(amount))) setCommission("");
if (amount) setCommission((parseFloat(amount) * 0.002).toString());
}, [amount]);
return (
<Container>
<Header />
<Content>
<Form>
<Item>
<Input
placeholder="coin name"
onChangeText={(text) => setName(text)}
/>
</Item>
<Item>
<Input
placeholder="number of coins"
onChangeText={(text) => setCount(text)}
keyboardType="decimal-pad"
value={count}
onFocus={() => setFocus("count")}
/>
</Item>
<Item>
<Input
placeholder="Amount Invested"
onChangeText={(text) => setAmount(text)}
keyboardType="decimal-pad"
value={amount}
onFocus={() => setFocus("amount")}
/>
</Item>
<Item>
<Input
placeholder="coin price"
onChangeText={(text) => setPrice(text)}
keyboardType="decimal-pad"
value={price}
onFocus={() => setFocus("price")}
/>
</Item>
<Item last>
<DatePicker
style={{ width: 200 }}
date={date}
mode="date"
placeholder="select date"
format="YYYY-MM-DD"
minDate="2016-05-01"
maxDate="2017-11-01"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
onDateChange={(date) => setDate(date)}
/>
</Item>
</Form>
<Text>Commission: {commission}</Text>
<Text>
Total Amount:{" "}
{(parseFloat(commission) + parseFloat(amount)).toString()}
</Text>
</Content>
</Container>
);
}
I checked with the default sample provided in the native base examples also.But same error as below.
When I click on select date field in the UI, then I am getting this error.
Invariant Violation: A date or time should be specified as `value`.
This error is located at:
in RNDateTimePicker (at DatePicker.js:94)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at Modal.js:220)
in RCTView (at View.js:34)
in View (at Modal.js:242)
in RCTModalHostView (at Modal.js:228)
in Modal (at DatePicker.js:80)
in RCTView (at View.js:34)
in View (at DatePicker.js:79)
in RCTView (at View.js:34)
in View (at DatePicker.js:64)
in RCTView (at View.js:34)
in View (at DatePicker.js:63)
in DatePicker (at DatePickerExample.jsx:17)
in RCTView (at View.js:34)
in View (at ScrollView.js:1124)
in RCTScrollView (at ScrollView.js:1260)
in ScrollView (at ScrollView.js:1286)
in ScrollView (at KeyboardAwareHOC.js:487)
in KeyboardAwareScrollView (at Content.js:37)
in RCTView (at View.js:34)
in View (at SafeAreaView.js:41)
in ForwardRef(SafeAreaView) (at Content.js:36)
in Content (at connectStyle.js:392)
in Styled(Content) (at DatePickerExample.jsx:16)
in RCTView (at View.js:34)
in View (at Container.js:12)
in Container (at connectStyle.js:392)
in Styled(Container) (at DatePickerExample.jsx:14)
in DatePickerExample (at App.js:9)
in App (created by ExpoRoot)
in ExpoRoot (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:293:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:154:27 in invoke
at node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue
This happens when you cancel the picker instead of selecting a new date, it sets the date's value to an undefined value, the solution is the check the event of the onChange function and set it to the previous date state if dismissed eg.
const [date, setDate] = useState(new Date())
const onChange = (event, selectedDate) => {
setShowDate(false);
// on cancel set date value to previous date
if (event?.type === 'dismissed') {
setDate(date);
return;
}
setDate(selectedDate);
};

(SOLVED) TypeError: undefined is not an object (evaluating 'y.Font.isLoaded')

I am working on the Currency Converter app course by handlebarlabs. I am trying to add icons to my ScrollView ListItem by importing Ionicons from #expo/vector-icons.
Can anyone guide me what did I do wrongly?
Below are my code as per the course notes:
import React, { Component } from 'react';
import { ScrollView, StatusBar, Platform } from 'react-native';
import { Ionicons } from '#expo/vector-icons';
import { ListItem, Separator } from '../components/List';
const ICON_PREFIX = Platform.OS === 'ios' ? 'ios' : 'md';
const ICON_COLOR = '#868686';
const ICON_SIZE = 23;
class Options extends Component {
handleThemesPress = () => {
console.log('Press Themes');
}
handleSitePress = () => {
console.log('Site Press');
}
render() {
return (
<ScrollView>
<StatusBar translucent={false} barStyle={"default"} />
<ListItem
text="Themes"
onPress={this.handleThemesPress}
customIcon={
<Ionicons name={`${ICON_PREFIX}-arrow-forward`} size={ICON_SIZE} color={ICON_COLOR} />
}
/>
<Separator/>
<ListItem
text="Fixer.io"
onPress={this.handleSitePress}
customIcon={
<Ionicons name={`${ICON_PREFIX}-link`} size={ICON_SIZE} color={ICON_COLOR} />
}
/>
<Separator/>
</ScrollView>
);
}
}
export default Options;
Below is the error I am getting:
TypeError: undefined is not an object (evaluating 'y.Font.isLoaded')
This error is located at:
in p
in RCTView
in RCTView
in TouchableHighlight
in f
in RCTScrollContentView
in RCTScrollView
in u
in l
in Unknown
in v
in RCTView
in RCTView
in c
UPDATE:
Following the answer by #Oleg, I was already on SDK 35.0.0 but it seems that somehow the previous update wasn't done properly. Reinstalling the latest SDK solves the issue. Thank you!
I created snack with Ionic Example by reusing your code that was posted in question.
Please check the versions in package.json and expo sdk in your project also.
https://snack.expo.io/#djalik/ionicons

Why do I need to export the component to pass it to the registerComponent method?

This code works fine:
import React, { Component } from 'react';
import { Text, AppRegistry } from 'react-native';
export default class App extends Component {
render() {
return (
<Text>Hello World!</Text>
);
}
}
AppRegistry.registerComponent('SampleApp', () => App);
But I get the error when I do not export the App component:
import React, { Component } from 'react';
import { Text, AppRegistry } from 'react-native';
class App extends Component {
render() {
return (
<Text>Hello World!</Text>
);
}
}
AppRegistry.registerComponent('SampleApp', () => App);
Why do I need to export the App component to pass it to the registerComponent method? Is this because AppRegistry.registerComponent is not inside the App class component? Do I need to export class components even if there were in the same file?
Here is the error I get in the iOS simulator:
*I use expo.
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `ExpoRootComponent`.
This error is located at:
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)
throwOnInvalidElementType
ReactNativeRenderer-dev.js:4705:2
createFiberFromElement
ReactNativeRenderer-dev.js:4663:16
reconcileSingleElement
ReactNativeRenderer-dev.js:8337:22
reconcileChildFibers
ReactNativeRenderer-dev.js:8421:12
reconcileChildrenAtExpirationTime
ReactNativeRenderer-dev.js:8621:29
finishClassComponent
ReactNativeRenderer-dev.js:8839:4
updateClassComponent
ReactNativeRenderer-dev.js:8761:11
beginWork
ReactNativeRenderer-dev.js:9580:15
performUnitOfWork
ReactNativeRenderer-dev.js:12924:15
Something needs to be exported in order for it to be imported later on by some other script.
According to MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
The export statement is used when creating JavaScript modules to export functions, objects, or primitive values from the module so they can be used by other programs with the import statement.
My guess is the registerComponent method expects a module as one of the parameters.

React-Native: each child in array should have unique key even when I include the key

I just started React-Native and I came across a problem while dealing with the map of array.As it needs a unique key for all elements.
I have specified the key in the render method but I am still getting the warning.
Here is the code
import React, { Component } from 'react';
import {Text , ScrollView} from 'react-native';
import axios from 'axios';
import AlbumDetail from './AlbumDetail'
export default class AlbumList extends Component {
state = {albums: ['Fetching Data...']};
componentWillMount() {
console.log('fetching data');
// Make a request
axios.get('http://rallycoding.herokuapp.com/api/music_albums')
.then(response => this.setState({albums: response.data}));
}
renderAlbums() {
return this.state.albums.map(album =>
<AlbumDetail
key = {album.title}
album = {album}
/>
);
}
render() {
return(
<ScrollView>
{this.renderAlbums()}
</ScrollView>
);
}
}
And here is the warning I receive even after including the key
ExceptionsManager.js:73 Warning: Each child in an array or iterator should have a unique "key" prop.
Check the render method of `AlbumList`. See https://fb. me/react-warning-keys for more information.
in AlbumDetail (at AlbumList.js:16)
in AlbumList (at index.js:21)
in RCTView (at View.js:113)
in View (at index.js:19)
in FirstApp (at renderApplication.js:35)
in RCTView (at View.js:113)
in View (at AppContainer.js:102)
in RCTView (at View.js:113)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)
Look at your error. Its saying the error is in the render call of AlbumList. The code you specified is fine.