i am working with the new react native version 0.62 , unfortunately webview is not there anymore , can any one please tell me how to get the webview on the latest react native built.
thanks in advance .
najath
React native web view is removed from a core and moved to a separate package, you will have to install the package to use webview now.
You can install by
npm i react-native-webview
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';
// ...
class MyWebComponent extends Component {
render() {
return <WebView source={{ uri: 'https://reactnative.dev/' }} />;
}
}
You can read the docs using the below url
https://github.com/react-native-community/react-native-webview
Related
I am learning react-native using snack expo and am trying to generate random unique numbers for my components but I get an error when I test my app on an android and iOS but it's works okay with the web:
Device: (3:2294) null is not an object (evaluating 'f.getRandomBase64')
This is my code
import * as React from 'react';
import { View } from 'react-native';
import 'react-native-get-random-values';
import { v4 as uuidv4 } from 'uuid';
export default function App() {
return (
<View>
{uuidv4()}
</View>
);
}
Here is my snack link
Rebuilding the app after installing react-native-get-random-values solved it for me.
After installing react-native-get-random-values:
cd ios && pod install && cd ..
Removed the app from simulator/device and reinstalled it.
PS. This issue didn't appear while the debugger was working.
i'm facing this issue when i tried to run the example code about Navigator tag from React-Native docs.
This is my App.js file:
import React, { Component } from 'react';
import { Navigator } from 'react-native';
export default class App extends Component {
render() {
return (
<Navigator
initialRoute={{title: 'Awesome Scene', index: 0}}
renderScene={(route, navigator) => <Text>Hello {route.title}!</Text>}
/>
)
}
}
And this is my index.js file:
/**
* #format
*/
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
And this is the problem:
The problem is that react-native has deprecated Navigator, so you're most likely using a version that doesn't support it, I believe version 0.46 supports it but the most recent versions do not.
I would recommend you take a look at react navigation
React Native 0.61 Documentation Here you can see on the left that there's no Navigator.
I create project.
react-native init test
Then:
yarn add firebase
After react-native init process I have index.js in root directory. Its contents:
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('test', () => App);
Importing firebase in there is absolutely working case.
import { AppRegistry } from 'react-native';
import App from './App';
import firebase from 'firebase';
AppRegistry.registerComponent('test', () => App);
But when I try to import firebase in App.js,
import React from 'react';
import { Text, View } from 'react-native';
import firebase from 'firebase'; // Anywhere in this file
class App extends React.Component {
constructor(props) {
super(props);
const config = {
// data from firebase portal
};
firebase.initializeApp(config);
}
render() {
return (
<View>
<Text>
Hello.
</Text>
</View>
);
}
}
export default App;
I get an error:
Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
throwOnInvalidObjectType...
This problem exists only in Android simulator. In iOS simulator everything is ok.
Android Studio - the latest version.
React native - the latest version.
Firebase - the latest version.
How to fix that?
In firebase version ^5.3.1
Importing firebase:
import firebase from '#firebase/app'
Work for me!
Try to install the version 5.0.2. Use this command as administrator:
npm install --save firebase#5.0.2
As far as i see, the current version (5.0.4) is buggy!
I am new in react native programming, I am trying to make this work.
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class AppName extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent('AppName', () => AppName);
but I am facing below issue : application appname has not been registered
i tried the following solution but its not working for me Application main thread has not been registered in react native
The issue here is that 'AppName' on the last line is not the same as what you named your project on creation. It should be the same name as your project directory. Capitalization matters. Looking at your error message, you named your project appname.
For example if you create a project:
react-native init appname
And if your class is still the same name:
class AppName extends Component {
Your last line should be:
AppRegistry.registerComponent('appname', () => AppName);
I create a new React Native project and install #shoutem/ui in project and include the Examples component of Shoutem UI into React Native app.
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Examples } from '#shoutem/ui';
class HelloWorld extends Component {
render() {
return (
<Examples />
);
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
But when I run start the project , I get "Unknown named module: 'react/lib/NativeMethodsMixin'" error.
The bug seems to be inside the #shoutem/animation module, in the Parallax.js file: https://github.com/shoutem/animation/blob/develop/Parallax.js
NativeMethodsMixin is not imported correctly from react:
If you change this:
import NativeMethodsMixin from 'react/lib/NativeMethodsMixin';
to this: import NativeMethodsMixin from 'react';
your app should work.
I would either file a Github issue on the #shoutem/animation project or check if the way NativeMethodsMixin is imported is specific to an older version of react and then use that version in your app.
I hope this helps.
This is fixed as of v0.8.9 release of #shoutem/animation.