I have design header, footer video player view, etc as a separate files.
How do I include those in every pages?
I tried this method. but doesn't work.
Follow the below steps:
Create a file eg: Header.js
import React, { Component } from 'react'
import { Text, View } from 'react-native'
class Header extends Component {
render() {
return (
<View>
<Text> Header Component </Text>
</View>
)
}
}
export that component or function to reuse that in other files.
export default Header;
by exporting that function or class you can import that in any js file by using this:
import Header from './Header.js'
OR
import Header from './Header'
Here is how you can use that imported component in other files:
import React, { Component } from 'react'
import { Text, View } from 'react-native'
import Header from './Header' // import that
class App extends Component {
render() {
return (
<View>
<Header /> // use like this
<Text> textInComponent </Text>
</View>
)
}
}
If you have multiple components or function to export in a single file you can't use export default in all of that. you just have to use export only.
like this: Common.js file
export Header;
export Button;
or you can use that like this.
import { Header, Button } from './Common';
Related
I have a folder called "app" which contains a "views" folder. Inside views I have a "Home.js" file in which I've defined a class component "Home". I want to use the Home class in another file "App.js".
The following code is what's in the Home.js file.
import React from 'react';
import {View, Text} from 'react-native';
export class Home extends React.Component {
render () {
return (
<View>
<Text> Some text </Text>
<Text> Some other random text </Text>
</View>
);
}
}
And this is what's in the App.js file.
import React from 'react';
import { Home } from '.app/views/Home.js';
export default class App extends React.Component {
render () {
return (
<Home />
);
}
}
When I try and run it with expo, I get an error "Error: undefined Unable to resolve module '.app/views/Home.js'"
No matter the path I try to bring Home from, I get the same error, even if I copy and paste the path directly from the Home.js file. I'm curious, I wanna know if this is a code error, or maybe the way I'm bringing up the path is wrong? Any ideas as to how to solve this? Thanks a lot.
You need to get in your folder like this:
'./app/views/Home.js';
I have a react-native app where I have developed a scanner feature using react-native-qrcode-scanner.However, when I try to scan the data, I get the below error-
error: can't find variable navigation
I see this error in onSuccess method at line authorizationToken.
My code-
import React, { Component } from 'react';
import {
Text,
View,
Image,
TouchableOpacity,
Linking
} from 'react-native';
import styles from '../assets/style';
import QRCodeScanner from 'react-native-qrcode-scanner';
export default class ScanScreen extends Component {
onSuccess(scanEvent) {
this.props.navigation.navigate("Result", {
'accessKey': scanEvent.data,
'authorizationToken':navigation.getParam('authorizationToken', undefined),
"userData": navigation.getParam('userData', undefined),
"methodName": "fetchData"
});
}
render() {
return (
<View style={styles.container}>
<QRCodeScanner
onRead={this.onSuccess.bind(this)}
/>
</View>
);
}
}
Any idea what I m missing here. Any help is much appreciated.Thanks in advance.
Make sure that Your Screen is registered in react-navigation config (follow this guide: can't find variable navigation).
Or pass navigation prop to it with HOC withNavigation: https://reactnavigation.org/docs/en/with-navigation.html. Instead export default class ScanScreen extends Component do class ScanScreen extends Component and at end of file do
export default withNavigation(ScanScreen);
Don't forget about importing Higher Order Component: import { withNavigation } from 'react-navigation';
Also be sure that all native parts are properly linked. For example react-native-gesture-handle (https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#linking).
navigation has to be part of props so accessing navigation using this.props.navigation solves this issue.
I'm new to React Native and I am currently trying to create a custom component called OpButton. It's just a button so that I can try to import and export components. However everytime I try to import it, I keep getting errors like "Imvariant Violation" and I have no idea how to fix it.
import React, { Component } from 'react';
import { Button, Alert } from 'react-native';
export default class OpButton extends Component {
render() {
return (
<Button
onPress={() => Alert.alert("Hello World")}
title= "Hello World"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
);
}
}
My button.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, AppRegistry } from 'react-native';
import { OpButton } from "./src/components/button";
export default class App extends Component {
render() {
return (
<OpButton></OpButton>
);
}
}
My App.js
Try import OpButton from "./src/components/button"
Curly braces are used on an import when the file you're importing from is exporting the variable as a const (export const OpButton . . .) but when you export default OpButton, then when you import from that file without curly braces, you always import the default thing, no matter what you call it in your import. So you could do import AnyNameYouWant from "./src/components/button" and then use <AnyNameYouWant /> in your App.js
Though the answer was already accepted. I want to make you clear on few things. You need to understand two things here
export default class
export class
When you use export default class which means that component is exported by default and you can import that like below
import component from ‘./Component’;
When you use export class without default, you can import that like below
import {component, component1} from ‘./Component’;
I have extended the Text component in order to have a reusable text component with a custom font.
My custom component should accept the styles passed to it and add the custom font to it.
I'm currently doing this:
MyText.js
import React from 'react'
import {
Text,
StyleSheet
} from 'react-native';
export default class MyText extends React.Component {
render() {
const style =
Object.assign( {},
StyleSheet.flatten(this.props.style),
{fontFamily: "My Font"}
);
return (
<Text style={style}>
{this.props.children}
</Text>
);
}
}
While this works as expected, having to flatten the stylesheet every time seems wrong. The above is a trivial example, and I can think of other components on which I could use this pattern. For that reason, I want to make sure I'm not ignoring a more suitable approach.
Well it depends on how much you would want to customize. In this case , if it is just a different font, it could be something like
import React from 'react'
import {
Text,
StyleSheet
} from 'react-native';
import _ from 'lodash';
export default class MyText extends React.Component {
render() {
const filteredProps = _.omit(this.props, 'style');
return (
<Text style={[{fontFamily: "My Font"}, this.props.style]} {...filteredProps} />
);
}
}
I am new to react native and I am having trouble passing variables from one file to another.
module.exports works great when passing classes.
However is there any way in native to pass variables from file to file by exporting?
In the example below, one file (button) is creating an array of random numbers and I want to access that array in another file (genreSelector). Similarly I am trying to pass an array of strings from (genre to genreSelector).
I cant find an example of how to do this so I am under the impression that it isn't possible. How should I be passing information if this isn't possible?
Do I need to have all the functions in my main and call them from within the child classes, if so how do I reference the function of the parent class rather than its own this.function?
So main is rendered in index.android.js and it all works great. Bar of course the passing of arrays from file to file. I tried using states but still cant access the variables as desired.
Apologies for such a basic question asked in such a complicated way.
//this is button.js
import React, { Component } from 'react';
import {
Alert,
AppRegistry,
StyleSheet,
Text,
TouchableHighlight,
View
} from 'react-native';
import styles from '../styles/styles.js';
let rNumbers = [1,2,3];
var Button = React.createClass({
rNumberGen: function(){
let rNumbers = [Math.random(), Math.random(), Math.random()];
},
render: function(){
return(
<TouchableHighlight onPress={this.rNumberGen} style={styles.center}>
<Text style={styles.button}>Generate!</Text>
</TouchableHighlight>
);
}
});
module.exports = rNumbers;
module.exports = Button;
//this is genreSelector
import React, { Component } from 'react';
import {
Alert,
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import{
genre1,
genre2,
genre3
} from './genres.js';
import rNumbers from './button.js';
import styles from '../styles/styles.js';
let a = rNumbers.toString();
Alert.alert('This is', a);
var Genre = React.createClass({
render: function(){
let genre = this.props.selected;
return(
<View style={styles.genre}>
<Text style={styles.center}>{genre}</Text>
</View>
);
}
});
module.exports = Genre;
//This is main.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import
Button
from './button.js';
import
Genre
// genres
from './genreSelector.js';
import
styles
from '../styles/styles.js';
class Main extends React.Component {
render(){
return(
<View style={styles.container}>
<Text style={styles.title}>Genre Genrerator</Text>
<Text style={[styles.h2, styles.h21]}>I am listening to</Text>
<View style={styles.genreContainer}>
<Genre selected='{genres[1]}'/>
<Genre selected='{genres[2]}'/>
<Genre selected='{genres[3]}'/>
</View>
<Text style={styles.h2}>You filthy casual</Text>
<Button/>
</View>
);
}
}
module.exports = Main;
module.exports = rNumbers;
module.exports = Button;
You are overwriting it by assigning like that. You should use export keyword:
export {rNumbers};
export {Button};
then import like so:
import {rNumbers} from './button.js';
import {Button} from './button.js';
edit: error: expected { after export. Added in