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);
Related
Been trying to install and use a ReactJS UI library and keep getting a compilation error. It seems that the entry file cannot be found for the modules. I get the same error with the material-ui library.
import { Button } from 'react-bootstrap';
import React, { Component } from 'react';
export class Button extends Component {
render() {
return (
<Button>Button</Button>
);
}
}
Error :
Cannot find file: 'index.js' does not match the corresponding name on disk: 'C:\Users......\node_modules\react-bootstrap\esm\repos'.
Any help would be much appreciated thanks!
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
I created complete offline ReactJS web application and I want to run it from android application from Web View using React-Native.
I followed the following procedure to do so:
1. I created a compiled ReactJS web application got the build using the following command:
npm run build
Then I created react-native project and placed the build folder with following architecture
I updated App.js with the following content:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, WebView} from 'react-native';
import {roscon} from "./build/index.html";
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={{height: 300, width: 300,overflow:'hidden' }}>
<WebView
source={{uri: roscon}}
scalesPageToFit={true}
domStorageEnabled={true}
javaScriptEnabled={true}
startInLoadingState={true}
/>
</View>
);
}
}
After running this code I expected it to run my ReactJS Web application, instead I got white screen.
Can you please tell what can be the causing issues and how i can make my ReactJS Web App run on react-native?
Note: I was able to run generated build folder using npm command
serve -s build
But I still can't figure out how to port it to react-native project as WebView
After research and testing, I found a solution.
The main issue i found was the compiled build folder is rendered as static html. And it needed a server to serve pages.
So, I followed this link for getting build project to get it up and running
Then, integrating it with nodejs Android Project Samples to get my build folder running in android as a Webview.
Note: I also tried react-snapshot and react-snap but they didn't gave satisfactory results.
Try to require the html file correctly and pass it in to source prop in this way:
<WebView
source={require('./build/index.html')}
/>
Install
npm install react-native-react-bridge
These are used to render React app in WebView
npm install react-dom react-native-webview
Requirements
react 16.8+
react-native 0.60+
Usage
Fix metro.config.js to use babelTransformer from this library.
module.exports = {
transformer: {
babelTransformerPath:
require.resolve('react-native-react- >.
.bridge/lib/plugin'),
...
},
};
Make entry file for React app. web.js
import React, { useState } from "react";
import {
webViewRender,
emit,
useSubscribe,
} from "react-native-react-bridge/lib/web";
const Root = () => {
const [data, setData] = useState("");
// useSubscribe hook receives message from React Native
useSubscribe((message) => {
if (message.type === "success") {
setData(message.data);
}
});
return (
<div>
<div>{data}</div>
<button
onClick={() => {
// emit sends message to React Native
// type: event name
// data: some data which will be serialized by JSON.stringify
emit({ type: "hello", data: 123 });
}}
/>
</div>
);
};
// This statement is detected by babelTransformer as an entry point
// All dependencies are resolved, compressed and stringified into one file
export default webViewRender(<Root />);
Use the entry file in your React Native app with WebView.
import React from "react";
import WebView from "react-native-webview";
import { useBridge } from "react-native-react-bridge";
import webApp from "./WebApp";
const App = () => {
// useBridge hook create props for WebView and handle communication
// 1st argument is the source code of React app
// 2nd argument is callback to receive message from React
const { ref, source, onMessage, emit } = useBridge(webApp, (message) => {
// emit sends message to React
// type: event name
// data: some data which will be serialized by JSON.stringify
if (message.type === "hello" && message.data === 123) {
emit({ type: "success", data: "succeeded!" });
}
});
return (
<WebView
// ref, source and onMessage must be passed to react-native-webview
ref={ref}
source={source}
onMessage={onMessage}
/>
);
};
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 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.