I am learning ReactNative, and now I'm looking into how to organize the files (for now I am going to create a folder for each page, each with an index, functions and styles file). For some reason, though, I am not being able to import information to index.js, can't use the styles or functions, when I open the page, it doesn't return the func method.
I am wondering whether I am using import wrong. Using import { MenuFunctions} from './Menu' has resulted in an error saying nothing was imported, this error no longer appears, but nothing is being returned still.
This is my code, index, Menu and styles are all in the same folder.
index.js
import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles'
import { Text, View } from 'react-native';
export default class MenuPage extends React.Component {
render(){
return(
<View>
<Text> Text: {MenuFunctions.func} </Text>
</View>
);
}
}
Menu.js
import React from 'react';
export default class MenuFunctions extends React.Component{
constructor(props){
super(props);
}
func = () => {return "Hello, World!"};
}
styles.js
import React from 'react';
import { StyleSheet } from 'react-native';
export default class MenuStyles extends React.Component{
styles = StyleSheet.create({
text: {
color: "red",
}
});
}
Menu.js and styles.js shouldn't be React.Component and you forgot to call to Func method, () is missing.
React.Component is a UI component only which include a render method that returns JSX element.
Your code should look like that:
index.js
import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles';
import {Text, View} from 'react-native';
export default class MenuPage extends React.Component {
render() {
return (
<View>
<Text> Text: {MenuFunctions.func()} </Text>
</View>
);
}
}
Menu.js
import React from 'react';
class MenuFunctions {
func = () => {
return 'Hello, World!';
};
}
export default new MenuFunctions();
styles.js
import {StyleSheet} from 'react-native';
export default styles = StyleSheet.create({
text: {
color: Colors.red30,
}
});
The problem is that you are trying to import Menu.js using import MenuFunctions from './Menu' when you had to specify the file itself:'./Menu/Menu.js'. (remember to call the function using parentheses class.function())
Also, whenever you export as default you don't have to use curly braces {}
If you are wondering about your project structure, you can use the following as a common structure to create projects. Let's say you have the following
- index.js
- src
- assets
- screens
- MenuScreen
- components
- services
- menu
- index.js //this is Menu.js
- android
- ios
NOTE
Do not extend React.Component if you are not exporting a component.
You need an object to perform the function of the class you created.
Then declare and use the constructor.
index.js
import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles'
import { Text, View } from 'react-native';
export default class MenuPage extends React.Component {
constructor(props){
super(props);
this.menu = new MenuFunctions()
MemuStyle = new MenuStyles()
}
render(){
return(
<View>
<Text style={MemuStyle.styles.text}> Text: {this.menu.func()}</Text>
</View>
);
}
}
Menu.js
import React from 'react';
export default class MenuFunctions extends React.Component {
func(){
return 'Hello, World!';
}
}
styles.js
import { StyleSheet } from 'react-native';
export default class MenuStyles extends React.Component {
styles = StyleSheet.create({
text: {
color: "red",
}
});
}
NOTE: The features you intend to use do not necessarily have to inherit React.
Related
I would like to have a react native View dynamically added. This will be completely undetermined before calling.
import React, {Component} from 'react';
import {View} from 'react-native';
export default class HelloWorld extends Component {
render() {
return (
<View>{ /** add a component a view depending on paremeters passed into class in Props**/}</View>
);
}
}
Since this will be completely undetermined I am not sure how to call a module from another module without first importing it.
How can I go about it?
Thank you all in advance.
How to dynamically call a module in React Native
import React, {Component} from 'react';
import {View} from 'react-native';
export default class HelloWorld extends Component {
render() {
let dynamicComponent = this.props.displayDynamicComponent ? <DynamicComponent /> : null;
return (
<View>{dynamicComponent}</View>
);
}
}
Hello i'm getting this error when tried to implement a header containing a logout button. The error i'm getting is to check the render method.But can't figure out the error.The file in which i'm getting error is the following
import React from "react";
import {
ScrollView,
View,
StyleSheet,
Image,
Text,
Button,
Title,
Header,
AsyncStorage,
Icon
} from "react-native";
import {
RkText,
} from "react-native-ui-kitten";
import Card from "./Card";
import CardSection from "./CardSection";
import Login from './Login';
export class GridV2 extends React.Component {
onPressLogout(){
AsyncStorage.removeItem(token);
}
render() {
return (
<View>
<Header style={{backgroundColor:'#B00000'}}>
<Button
transparent
onPress={() => this.onPressLogout()}
>
<Icon
style= {{color: '#ffffff', fontSize: 25, paddingTop:0}}
name="bars" />
</Button>
</Header>
<Card>
<CardSection>
</CardSection>
</Card>
</View>
);
}
}
I'm importing this GridV2 in my Login screen.Login screen is as follows. What is the mistake in this code?Please help..
import React, {Component} from 'react';
import { Container,
Title,
InputGroup,
Input,
Button,
Text,
View,
Spinner,
Item,
Label,
} from 'native-base';
import {
StyleSheet,
Image,
Navigator,
TouchableOpacity,
AsyncStorage,
Linking
} from 'react-native';
import QASection from './QASection';
import GridV2 from './grid2';
class Login extends Component{
state = { userdetail: [] };
constructor(props) {
super(props);
this.initialState = {
isLoading: false,
error: null,
username: '',
password: ''
};
this.state = this.initialState;
}
render() {
return();
}
You got your exports/imports wrong. Please remove all unused imports and check if the ones you are importing are in the package they are imported from. For example, as far as I know, there is no such thing as Header component in react-native (DOC
You should import GridV2 using named import:
import { GridV2 } from './grid2';
or export is as a default first:
export default class GridV2 extends React.Component {
Please check if your other imports are intact (you have correct filenames etc.).
This link explains exports/imports well.
Also you should not return like this return (); from render method. Instead return null like below:
return (null);
This is my class:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from 'react-intl';
class MyClass extends Component {
constructor(props) {
super(props);
}
get pageTitle() {
const { intl } = this.props;
return intl.formatMessage({id: 'messages_my_class_page_title'});
}
render() {
return (
<div>
Dummy content
</div>
);
}
}
MyClass.propTypes = {
intl: intlShape.isRequired
}
export default injectIntl(MyClass);
My page title appears when I put in a random text and don't use react-intl injectIntl function.
I have 'react-intl' working fine for all other cases. Even for static properties using 'hoist-non-react-statics' library.
I am stumbled upon this one.
Edit 1:
I can fix it using
<FormattedMessage id="messages_my_class_page_title"/>
But I want to know how to use injectIntl way.
I want to exetend Tab component with es6 class like this:
import React from "react";
import {Tab} from "material-ui";
class MyTab extends Tab {
constructor(props){
super(props);
}
render(){
return super.render();
}
}
export default MyTab;
But i get an error:
Uncaught TypeError: Cannot read property 'muiTheme' of undefined
What am I doing wrong?
The correct way to extend an MUI component is using their withStyles() higher-order component Design Approach
import React, { Component } from "react";
import Tab from "#material-ui/core/Tab";
import { withStyles } from "#material-ui/core/styles";
const styles = theme => {
return ({
myTab: {
fontFamily: 'Courier New',
});
}
class MyTab extends Component {
render() {
return (
const {classes, ...other} = this.props
<Tab {...other} className={classes.myTab} label="Home" />
}
}
export default withStyles(styles)(MyTab);
Currently it seems to require a 'getInitialState' function even if you are working in ES6. So just add one (and ignore the errors) for now.
import ThemeManager from 'material-ui/lib/styles/theme-manager';
import LightTheme from 'material-ui/lib/styles/raw-themes/light-raw-theme';
getInitialState() {
return this.state;
}
I also set this state in the constructor ala ES6 React.
this.state = {muiThem : ThemeManager.getMuiTheme(LightThem),};
I have two react components that have to stay in separate files but need to share a property. One component will change the this.props.color and the other component needs to know what that new color is. I know you can import the actual component but I don't know how to access the properties from that component. Here's a very simple example of my app (I'm using ES6)
component1.js
import React, {Component, PropTypes} from 'react';
export default class FirstComponent extends Component {
static propTypes = {
color: PropTypes.string
}
handleClick () {
//change color here
}
render () {
var styles = {
backgroundColor: this.props.color
};
return <div id="one" style={styles} onclick={this.handleClick}></div>;
}
}
component2.js
import React, {Component} from 'react';
import FirstComponent from './component1.js';
export default class SecondComponent extends Component {
/*...*/
render () {
console.log(FirstComponent); //??
return <div id="two"></div>;
}
}
parent1.js
import React, {Component} from 'react';
import FirstComponent from './component1.js';
export default class FirstComponentParent extends Component {
color = 'rgb(255, 0, 0)';
return React.createElement(FirstComponent, {color: this.color});
}
parent2.js
import React, {Component} from 'react';
import SecondComponent from './component2.js';
export default class SecondComponentParent extends Component {
return React.createElement(SecondComponent);
}
You use a common parent component and pass the color as a prop to the second component and pass a method updating the color as a prop to the first component.
import React, {Component, PropTypes} from 'react';
export default class FirstComponent extends Component {
constructor() {
super();
this.state = {color: 'black'};
}
handleClick () {
//change color here
this.props.changeColor(newColor);
}
render () {
var styles = {
backgroundColor: this.state.color
};
return <div id="one" style={styles} onclick={this.handleClick}></div>;
}
}
import React, {Component, PropTypes} from 'react';
export default class SecondComponent extends Component {
render () {
var styles = {
backgroundColor: this.props.color
};
return <div id="one" style={styles}></div>;
}
}
import React, {Component, PropTypes} from 'react';
import FirstComponent from './first';
import SecondComponent from './second';
export default class ParentComponent extends Component {
constructor() {
super();
this.state = {firstColor: 'black'};
}
changeColor = (newColor) => {
this.setState({firstColor: newColor});
}
render () {
return (
<div>
<FirstComponent changeColor={this.changeColor}/>
<SecondComponent color={this.state.firstColor}/>
</div>;
)
}
}