How to add 'requireNativeComponent' to exports? - reactjs

This is my first ever React Native app. I am trying to use MapView from react-native-maps, but am running into this error: "Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'." I am viewing my app in web view (if that matters). I have installed and linked react-native-maps. Here is my current code:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MapView from 'react-native-maps';
import { requireNativeComponent } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
And the errors:
C:/React/AwesomeProject/node_modules/react-native-maps/lib/components/MapView.js
Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.
C:/React/AwesomeProject/node_modules/react-native-maps/lib/components/decorateMapComponent.js
Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.
C:/React/AwesomeProject/node_modules/react-native-maps/lib/components/decorateMapComponent.js
Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.

I had the same problem, and finally i realised that this is due to the compatibility of MapView with web browser, you can check it in Platform Compatibility.
Probably you are trying to run this code in the web browser, so you will have this error due to the MapView import.
I suggest two options:
1- try to add this script to your index.html, replace the API_KEY with your Google Maps API:
<script
async
defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY"
type="text/javascript"
></script>
2-Change the way you test and run the app in some mobile device using expo, normally it will work well.

Related

Element type is invalid . React Native

I know there are so many questions about this Error. And I have faced so many times with this error and answers over here helped me so Much to get Over that Error. But now I just wanted to use react-native-maps and in the documentation of react-native-maps they gave us this sample of code to run and see how things work. I copied this code and paste it into my App.js and ı got this problem. I tried to something to solve that but ı couldnt figure it out.
I get this 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 `ExpoRoot`
And here is My code :
import * as React from 'react';
import MapView from 'react-native-maps';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
export const App = () => {
return (
<View style={styles.container}>
<MapView style={styles.map} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
map: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
});
As you said, this is a common error you can see while developing with React Native.
It occurs when the component name is wrong or the import path is entered incorrectly. To solve the problem, you need to check all the import statements and check if those are exported and imported correctly.
This usually happens when you export functions like the below.
export const HelloWorld = 'hello world';
Then import like below.
import HelloWorld from 'helloWorld';
I saw many people having similar mistakes. Hope you can check that out.

React navgiation AppRegistry is not registered

I have setup a brand new project using react-native init <proj> and it builds fine. I have added react-navigation to the project following the docs. However, I cannot get passed this error:
Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
Even using the single file stack example from their documentation:
import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen,
},
});
export default createAppContainer(AppNavigator);
It does not work. I am at a loss to what the issue could be here as I am using a base install with their working example and nothing else added. I have tried everything from restarting the bundler to clearing all caches I can think of.
Make sure you're registering the component:
const App = createAppContainer(navigator):
AppRegistry.registerComponent(appName, () => App)

Module AppRegistry is not a registered callable module and Cant find variable: Constants [duplicate]

This question already has answers here:
module appregistry is not a registered callable module (calling runApplication)
(3 answers)
Closed 3 years ago.
I am trying to build a simple react native app by using expo android app but I am getting these 2 error log always - Module AppRegistry is not a registered callable module and Cant find variable: Constants.
import React, { Component } from "react";
import { StyleSheet, Text, View, Image } from "react-native";
export default class App extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Hello, world!</Text>
</View>
);
}
}
I am using my mobile hotspot in my laptop.
I wrote the answer by referring to this link.
here
cd android
sudo ./gradlew clean
then back to the working directory and run react-native run-android
you should restart your npm too after that upgrade.
and
delete the Constant usage in the program.
import android.provider.SyncStateContract.Constants.ConstantName
This will cause the Can not find Constants error to disappear.
I hope this will solve your problem.

How to display MathML equation in React Native app using MathJax?

I tried to display MathML equation in my react native app using MathJax, but it is not showing. In the code below, the equation is not displayed, only "Helloworld".
import React, {Component} from 'react';
import {Text, View} from 'react-native';
import MathJax from 'react-native-mathjax'
export default class TipsAndTricksScreen extends Component {
static navigationOptions = {
title: 'Tips And Tricks',
};
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<MathJax math={String.raw`<math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><mn>2</mn><mfrac bevelled="true"><mn>7</mn><mn>7</mn></mfrac></msqrt><mo>+</mo><mfrac><mn>5</mn><mn>8</mn></mfrac></math>this is just a string`} />
<Text>Helloworld</Text>
</View>
);
}
}
It seems quite straight forward to implement the dependency. Looking at the source code of the dependency it looks like it is just a wrapper around a Webview, so just be aware that it will probably only work if you are online.
The dependency has some default options already set for MathJax and you can pass further options using the mathJaxOptions prop. So if we pass
{
jax: ['input/MathML']
}
then it should tell MathJax that you are passing MathML as a input.
So here is a simple component that uses react-native-mathjax
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import MathJax from 'react-native-mathjax';
const mmlOptions = {
jax: ['input/MathML'],
};
class MathView extends Component {
render () {
return (
<View style={{flex:1}}>
<MathJax
mathJaxOptions={mmlOptions}
html={'<math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><mn>2</mn><mfrac bevelled="true"><mn>4</mn><mn>7</mn></mfrac></msqrt><mo>+</mo><mfrac><mn>5</mn><mn>8</mn></mfrac></math> this is just a string'}
/>
</View>
);
}
}
export default MathView;
This would give you something like this
That should be enough to get you started. You can pass additional options via the mathJaxOptions prop. You just need to look at the MathJax documentation for all the different things that you can pass.
Caveat
On Android it doesn't look like the Android WebView can render MathML, there maybe a configuration that will make it work but I don't know it, however the Android WebView does render LaTex, so perhaps converting your MathML to LaTex could be a fallback option for you.
If you want to render MathML in React Native, you'll need some extensions and of course input and output method. After some research, I found this solution particular for MML to HTML:
<MathJax
html={`<math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><mn>2</mn><mfrac bevelled="true"><mn>7</mn><mn>7</mn></mfrac></msqrt><mo>+</mo><mfrac><mn>5</mn><mn>8</mn></mfrac></math>this is just a string`}
mathJaxOptions={{messageStyle: 'none',
extensions:
['mml2jax.js','MathMenu.js','MathZoom.js','AssistiveMML.js','a11y/accessibility-
menu.js',],
jax: ['input/MathML', 'output/CommonHTML'],
tex2jax: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']],
processEscapes: true,},
TeX: {extensions:['AMSmath.js','AMSsymbols.js','noErrors.js','noUndefined.js'],},}} />

React Native project, index.ios.js or index.android.js not generated

I started with React-Native today. And I am following a web tutorial.
Did all the installations correctly on my Windows machine:
Java Jdk
Android Studio
Node/NPM
Yarn
then installed react-native
npm install -g react-native-cli
finally a hello world project
react-native init albums
I am not getting any errors. My app runs (basically loads up) on my Android phone perfectly.
The app.js is bit conditional on platform choice:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
I just want to know if this is normal to not get those files generated.
Shall I create those 2 index files? Or the latest react-native does not need 2 separate files? (The tutorial I am following is of Jan 2017)
This is a new feature added to react-native. The new project template now doesn't contain two separate files. You can still create and use like before if you prefer but its just normal to use it as it is. Its just a preference and the requirement of your project. You can find more info about the change on here.
From the commit notes
This change (initially discussed in
react-community/create-react-native-app#26) moves the HelloWorld
project template from two nearly identical entry points
(index.android.js and index.ios.js) to a single, minimal
index.js entry point. The root component is created in App.js.
This unifies the project structure between react-native init and
Create React Native App and allows CRNA's eject to use the entry point
from the HelloWorld template without any hacks to customize it. Also
examples in the docs can be just copy-pasted to App.js the same way
in both HelloWorld and CRNA apps without having to first learn about
AppRegistry.registerComponent.
Simply because the new project template now doesn't contain index.android.js and index.ios.js separately. It now only contains a one minimal index.js entry point.
If you want to do something specific for both/one of the platforms
then you can create your own index.android.js and index.ios.js files
and then just import the code in both of them from index.js file and
do the necessary changes there.
index.android.js and index.ios.js can be written as:
import Render from './App';
export default Render;

Resources