I am trying to develop native module in android for react native.
Exactly followed the link at
https://facebook.github.io/react-native/docs/native-modules-android.html#content
but it is giving me error
/ReactNativeJS: undefined is not an object (evaluating '_ToastAndroid2.default.show')
I have implemented ToastAndroid.js
'use strict';
/**
* This exposes the native ToastAndroid module as a JS module. This has a
* function 'show' which takes the following parameters:
*
* 1. String message: A string with the text to toast
* 2. int duration: The duration of the toast. May be ToastAndroid.SHORT or
* ToastAndroid.LONG
*/
import { NativeModules } from 'react-native';
module.exports = NativeModules.ToastAndroid;
and then in other Jsfiles tried to import using
import ToastAndroid from './ToastAndroid';
change the name of Module "ToastAndroid" because ToastAndroid module is already in react-native package.
You are importing wrong. module.exports as the name implies exports your module to one of many exports that the file ToastAndroid.js can have. It's called a named export.
The correct import will therefore be import {ToastAndroid} from './ToastAndroid';
If you want to use import ToastAndroid from './ToastAndroid';
You should write export default NativeModules.ToastAndroid;
See this related answer for more information.
Related
I've moved my code of a custom React Native component to it's own file such as this:
import React from 'react';
import { StyleSheet, Text, View } from "react-native";
export default class MyButton extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Text style={{fontSize: 20, color: "#008000"}}>Foo Bar</Text>
);
};
};
In App.js I can refer to that file that contains that code. The framework does not complain:
import { MyButton } from "./MyButton";
But as soon as I include MyButton in the App rendering function I receive the following 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.
The rest of the error message is completely useless.
I did some searches on the web to learn what could have caused that error. But none of all hints I found seemed to be related to my case here. For example I use import React from 'react'; which is advised by some answers even here on stack overflow, but still this doesn't work. (See: Custom component undefined in React Native)
If I move the code to App.js everything works fine. If I move it to another file things don't work. What do I need to change in that file in order to successfully have a component in that file? And include that in similar way as those native components in my App.js?
Thank you for your help!
Your import statement is incorrect.
import { MyButton } from "./MyButton";
This import statement imports a named export called MyButton from the ./MyButton module. However, in your MyButton file you are default exporting the MyButton component. What you want to do is:
import MyButton from "./MyButton";
which imports whatever is exported by default from the module, in this case the MyButton component.
Hell, I'm trying to create a tab bar in my react native app, but after importing it, it appears it's always undefined. Has this component been deprecated? I still see it listed in the docs. https://facebook.github.io/react-native/docs/tabbarios.html
import React, { Component } from 'react';
import {
TabBarIOS
} from 'react-native';
export default class App extends Component {
render() {
return (
<TabBarIOS/>
);
}
}
I'm using react-native 0.59.3
Looks like this has been removed as part of a core cleanup effort. There doesn't appear to be any native alternative that also behaves correctly on tvos.
https://github.com/facebook/react-native/commit/02697291ff41ddfac5b85d886e9cafa0261c8b98
I've gone ahead and extracted TabBarIOS out into a native module for anyone looking for this.
https://github.com/modavi/NativeIOS
install instructions:
npm install git+https://github.com/modavi/NativeIOS#master
react-native link native-ios
I am hitting this error when i am trying to define my own custom components.
// /common/MyAppText.js
import React, {Component} from 'react';
import {
Text,
View,
} from 'ReactNative';
class MyAppText extends Component {
render(){
return (
<View>
<Text>hello</Text>
</View>
)
}
}
export default MyAppText
On the other app, i tried to import it and use it by
import MyAppText from './common/MyAppText'
class Home extends Component {
render(){
return (
<View>
<MyAppText />
</View>
)
}
}
But i hit the error "expected a string or a class/function but got: undefined, please check render method of 'MyAppText'. Anyone can see what is wrong with the export syntax?
If i defined everything in the same document then it works, so it is something with the export that i couldn't figure out.
Your own export/import looks fine. Not sure if this is the issue, but the line
import {..} from 'ReactNative';
Should be:
import {..} from 'react-native';
You might expect that to crash with a different error (module not found), but since this internal React Native file exports a globally available module "ReactNative" via Haste, your import ends up picking that file. Because that file doesn't export properties View and Text, the code compiles fine, but ends up with undefined variables.
Edit for more context:
The React Native bundler (called Metro) uses Facebook's own module system (called Haste), which allows anybody to decorate a file with a comment #providesModule Name, and then import it from globally anywhere with just import ... from 'Name';
One of the internal renderer modules declares #providesModule ReactNative. So when you've imported from 'ReactNative', you got that module instead of a build error.
I have compiled a c code to js code using EMScripten using this command in command prompt:
emcc [xxx.c] -o [xxx.js] -s EXPORTED_FUNCTIONS="['function1']"
and when I import Module from xxx.js within my index.js file, Module object is empty. Not sure if I need to change something within the generated file or if I did something wrong..
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Module from './xxx';
console.log(Module) // gives me {}
any suggestion will be appreciated.
thanks :)
Before you import your emscripten js file, you will need to create a "Module" object and implement a property(function) "onRuntimeInitialized".
Only after you get a callback on this function you can expect the Module object to be non-empty.
window.Module = {
onRuntimeInitialized : function() {
console.log("Emscripten Ready!");
var event = new Event('emReady');
// Dispatch the event.
document.dispatchEvent(event);
}
};
// Now register for this event in your React code and only call Module functions when this event has been received.
I was having the same issue and found an emcc option that solved it: -s MODULARIZE=1
MODULARIZE puts all the output into a function so when you call Module, you can call it as a function (Module()) and not receive an empty object.
For more details, here is a link to a more in-depth answer of mine:
https://stackoverflow.com/a/54117913/4848700
After upgrading my project to React-Native 0.26, the app crashing with the following error :
"Super expression must either be null or a function, not undefined"
It crashes in the Switch.js file, which belongs to the React-Native-Material-Kit package.
Ahh, it's because React-Native is moving fast! Too fast in my option. In 25 we saw this warning:
Deprecations
Requiring React API from react-native is now deprecated - 2eafcd4 0b534d1
Instead of:
import React, { Component, View } from 'react-native';
you should now:
import React, { Component } from 'react';
import { View } from 'react-native';
And just one release later in 26 this is now a breaking change
You can try this codemod if you dare. I'm just doing a manual change.