I just wanted to encompass some JavaScript functions in a helper class. For example, running some fetch or async operations, etc. I do not want to create a Component class, instead it's just pure JavaScript. I don't think I can just create a js file, plop the code in and invoke it from within a Component. Do I need to register it, etc?
Yes you can through module imports. React native comes packed with babel compiler. You can reference all the enabled Syntax transformer at https://facebook.github.io/react-native/docs/javascript-environment.html.
Babel also has very good explanation on modules at https://babeljs.io/learn-es2015/#ecmascript-2015-features-modules.
For example:
File helper.js
export function doSomething(){
console.log("I am calling module helper through exported function")
}
File App.js
import {doSomething} from "./helper"; //simply imports function from another file.
import React, { Component } from "react";
import { AppRegistry, Text, View} from "react-native";
export default class ExampleComponent extends Component {
componentDidMount(){
doSomething(); //invoke your function here for example.
}
render() {
return (
<View>
<Text>I'm a text</Text>
</View>
)
}
}
AppRegistry.registerComponent("Example", () => ExampleComponent);
Related
I am trying to write a custom plugin for our Docusaurus site. I am able to wire up the custom component, but I cannot use hooks like useState or useEffect. The page crashes saying I'm using an invalid React hook.
I know its possible to use hooks because I see other plugins doing it so I'm sure its a syntax problem somewhere.
Here's my code:
index.ts
import path from 'path'
module.exports = function () {
return {
name: 'docusaurus-theme-myorg-technology',
getThemePath() {
return path.resolve(__dirname, './theme')
}
};
};
theme/index.tsx
import React from 'react'
import {CustomTOC} from './CustomTOC'
const WrappedTOC = (props: any) => {
return (
<CustomTOC {...props} />
);
};
export default WrappedTOC;
theme/CustomTOC.tsx
import React, { useState } from 'react';
import TOC from '#theme-init/TOC';
export default function CustomTOC(props: any) {
//const [tags, setTags] = useState<any[]>([]); <-- if I comment this out the page crashes
return (
<>
<TOC {...props} />
Hello world
</>
);
}
"Invalid hooks call" link to a doc page, that you should read carefully.
Most likely: you are using a different version of React for your component lib that the one Docusaurus uses internally, and it leads to the React lib being used twice at runtime. Make sure the final project will only include one React version. You can for example use the exact same version that the one Docusaurus uses
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.
I am a newbie in react-native and I'm trying to use the react-native-ui-kitten library. The problem is that the documentation is not really helpful.
I have I have installed ui-kitten and the theme as indicated with the command: npm i react-native-ui-kitten #eva-design/eva
The documentation asks to configure the application root which I consider to be the App.js file unless I'm wrong.
So i changed the App.js generated code to this:
import React from 'react';
import {
mapping,
theme,
} from '#eva-design/eva';
import { ApplicationProvider } from 'react-native-ui-kitten';
import { Application } from './path-to/root.component';
export default class App extends React.Component {
public render(): React.ReactNode {
return (
<ApplicationProvider
mapping={mapping}
theme={theme}>
<Application/>
</ApplicationProvider>
);
}
}
Unfortunetely it's not working.
Has anyone recently used ui-kitten library ?
What does the documentation mean by Application Root and how to set up a simple react-native project to use react-native-ui-kitten?
And yes I actually checked the documentation but maybe there is something I am not doing right.
I ran into the same problem.
I discovered that the creators of this UI kit use in fact in their code examples Typescript.
So you need to recreate your Reactnative project using a Typescript template, then rename accordingly the App.js into App.tsx
Any other components need to be renamed with the extension .tsx.
Make sure you read about Typescript:
https://www.typescriptlang.org
Here it is how you can recreate your project with Typescript:
https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native
All the best,
I am also a beginner in react-native and it seems we kinda differ in implementing the code. I am not sure if this would help but this is the way I implement your code:
import * as React from 'react';
import { mapping, light as lightTheme } from '#eva-design/eva';
import { ApplicationProvider } from 'react-native-ui-kitten';
import { Application } from './path-to/root.component';
const App = () => (
<ApplicationProvider
mapping={mapping}
theme={lightTheme}>
<Application/>
</ApplicationProvider>
);
export default App;
You could try it and let me know if this suits you. Good luck!
I am trying to import my second file into App.js for my project. I am getting the error "The development server returned response error code: 500". Basically saying "Unable to resolve "MainFile" from "App.js".
Why is this happening? I believe it is correct but for some reason this bugfest saying that the file doesn't exist. First code is my App.js file and the second one is the code i am trying to import.
https://gyazo.com/6911c477f9c9e8149370571ca49a0b9f
https://gyazo.com/73f0079bc6a2640877bcc30fa1e609ec
import React from 'react';
import MainFile from './components/MainFile';
export default class App extends React.Component{
render() {
return(
<MainFile />
);
}
}
import React from 'react';
import {StyleSheet, Text, View, TextInput, ScrollView, TouchableOpacity} from 'react-native';
export default class MainFile extends React.Component{
render(){
return(
<View style={styles.container}>
<Text>Testing</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
},
});
Double check if file exist at given path or not
If file is not javascript(.js), then mention the extension
Try using double quote when referring to file ( e.g. "./src/..")
If file to import is not .js, then make sure appropriate react library is imported in first import
E.g.( import {..., Image } from 'react-native' )
delete node_modules folder
edit package json : react-native version to "55.4" or "55.2" and
babel-preset-react-native to "4.0.0" ( if your version is different
try to use the latest one or downgrade it).
run npm install or yarn install command
you're done
Source : Github
In my situation i changed ./MainFile to ./MainFile.js and it start worked. this should work without specifying extension. But something went wrong and he needed it
You need to add an index.js or ts page in the folder from which you are importing components and then write an export statement for component in that index.js page.
add export just like follows then import should work -
export { default as Home } from './Home'
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.