I know that the following snippet gets optimized if styles are created by Stylesheet.create() and Child extends PureComponent.
import React, { Component } from 'react'
import { View } from 'react-native'
import Child from './Child'
import styles from './stylesheets'
export default class Parent extends Component {
render() {
return (
<View>
<Child style={styles.x} />
</View>
)
}
}
Does it also works with multiple styles? I'm afraid that [] literals prevent optimization.
import React, { Component } from 'react'
import { View } from 'react-native'
import Child from './Child'
import styles from './stylesheets'
export default class Parent extends Component {
render() {
return (
<View>
<Child style={[styles.x, styles.y]} />
</View>
)
}
}
Or do I need to define combined style statically?
import React, { Component } from 'react'
import { View } from 'react-native'
import Child from './Child'
import styles from './stylesheets'
const childStyles = [styles.x, styles.y]
export default class Parent extends Component {
render() {
return (
<View>
<Child style={childStyles} />
</View>
)
}
}
I confirmed that array literal spoils PureComponent optimization.
Related
I have 2 component parent(LoginScreen) and a child(SignupSection). Child component have onClick button. When user click button I need to fire childcall() function from the parent component and this is not working for me. I get this Error
_this.props.childcall is not a function.
(In '_this2.props.childcall()' is undefined)
I have the following code:
Parent
import React, {Component} from 'react';
import Wallpaper from './Wallpaper';
import SignupSection from './SignupSection';
export default class LoginScreen extends Component {
constructor(props) {
super(props)
}
childcall()
{
alert("hello , this call from child component");
}
render() {
return (
<Wallpaper>
<SignupSection
childcall ={this.childcall.bind(this)}
/>
</Wallpaper>
);
}
}
Child
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {StyleSheet, View, Text} from 'react-native';
export default class SignupSection extends Component {
constructor(props) {
super(props)
}
componentWillMount()
{
}
render() {
return (
<View style={styles.container}>
<Text style={styles.text} onPress={()=>this.props.childcall()}>Create Account</Text>
<Text style={styles.text}>Forgot Password?</Text>
</View>
);
}
}
It doesn't work because you are rendering the function instead of passing it as a prop.
You are passing inside children prop
<SignupSection>
childcall={this.childcall}
</SignupSection>
change it to
<SignupSection childcall={this.childcall} />
I'm trying to use react-native, react-navigation and typescript together to create an app. There are only two screens(HomeScreen and ConfigScreen) and one component(GoToConfigButton) in total, as follows.
HomeScreen
import React from "react";
import { NavigationScreenProps } from "react-navigation";
import { Text, View } from "react-native";
import GoToConfigButton from "./GoToConfigButton";
export class HomeScreen extends React.Component<NavigationScreenProps> {
render() {
return (
<View>
<Text>Click the following button to go to the config tab.</Text>
<GoToConfigButton/>
</View>
)
}
}
GoToConfigButton
import React from "react";
import { Button } from "react-native";
import { NavigationInjectedProps, withNavigation } from "react-navigation";
class GoToConfigButton extends React.Component<NavigationInjectedProps> {
render() {
return <Button onPress={this.handlePress} title="Go" />;
}
private handlePress = () => {
this.props.navigation.navigate("Config");
};
}
export default withNavigation(GoToConfigButton);
The code for ConfigScreen is not given because it's not important here. Well, actually the above code works, I can go to the config screen by clicking on the button. The problem is, Typescript thinks I should provide the navigation property to GoToConfigButton manually.
<View>
<Text>Click the following button to go to the config tab.</Text>
<GoToConfigButton/> <-- Property "navigation" is missing.
</View>
How can I tell Typescript that the navigation property is given automatically by react-navigation?
You were just missing Partial<> interface wrapping your NavigationInjectedProps as it is described in this pull request where this issue was fixed.
import React from "react";
import { Button } from "react-native";
import { NavigationInjectedProps, withNavigation } from "react-navigation";
class GoToConfigButton extends React.Component<Partial<NavigationInjectedProps>> {
render() {
return <Button onPress={this.handlePress} title="Go" />;
}
private handlePress = () => {
this.props.navigation.navigate("Config");
};
}
export default withNavigation(GoToConfigButton);
Tested with #types/react-navigation >= 2.13.0
import styles from "./styles";
import React, { PureComponent } from "react";
import { Button } from "react-native-elements";
import {
DrawerItems,
NavigationInjectedProps,
SafeAreaView,
withNavigation
} from "react-navigation";
class BurgerMenu extends PureComponent<NavigationInjectedProps> {
render() {
return (
<SafeAreaView style={styles.container} >
<Button
icon={{ name: "md-log-out", type: "ionicon" }}
title={loginStrings.logOut}
iconContainerStyle={styles.icon}
buttonStyle={styles.button}
titleStyle={styles.title}
onPress={() => this.props.navigation.navigate("LoginScreen")}
/>
</SafeAreaView>
);
}
}
export default withNavigation(BurgerMenu);
When i run the code, i get this error:
invariant violation view config not found
index.js code is :
import { AppRegistry, Text, Image, View } from 'react-native';
import React, { Component } from 'react';
import main from './src/codes/main';
class app extends Component{
render(){
return <main/>;
}
}
AppRegistry.registerComponent('app', () => app);
main.js code is :
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class main extends Component{
render(){
return (
<View>
<Text>Salam</Text>
</View>
);
};
}
please help
The component names must be capitalized as a syntax requirement in React Native.
index.js
import { AppRegistry, Text, Image, View } from 'react-native';
import React, { Component } from 'react';
import Main from './src/codes/main';
class App extends Component{
render(){
return <Main/>;
}
}
AppRegistry.registerComponent('App', () => App);
main.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class Main extends Component{
render(){
return (
<View>
<Text>Salam</Text>
</View>
);
};
}
THE ERROR MESSAGE I AM GETTING ON MY DEVICEIam working on React Native.As I import my other react native file(i.e component1.js) into the index.android.js file.
It's giving an error
"Expected a component class,got[object Object]".
component1.js
import React, { Component } from 'react';
import {AppRegistry,Text,View} from 'react-native';
export default class component1 extends Component {
render() {
return(
<View>
<Text>This is component1</Text>
</View>
);
}
}
AppRegistry.registerComponent('component1', () => component1);
index.android.js
import React, { Component } from 'react';
import {AppRegistry,Text,View} from 'react-native';
import component1 from'./app/Components/component_a/component1'
export default class myapp extends Component {
render() {
return (
<View>
<component1 />
</View>
);
}
}
AppRegistry.registerComponent('myapp', () => myapp);
The problem is you define multiple AppRegistry in child and parent file. Remove AppRegistry.registerComponent('component1', () => component1); in component1.js, you don't need it . Just declare in the root component.
From RN docs.
AppRegistry should be required early in the require sequence to make sure the JS execution environment is setup before other modules are required.
I have a parent component and a child component, I want to pass
property from Parent to Child by using {...this.props}, I dont want
any action or reducer in the picture,Is it possible to do this?
My Child Component is like this:-
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class SampleChild extends Component {
constructor(props) {
super(props)
}
render(){
return(
<div>This is Parent</div>
)
}
}
SampleChild.propTypes={
Header:React.PropTypes.string.isRequired
}
export default SampleChild
My Parent Component is like this:-
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class SampleParent extends Component {
constructor(props) {
super(props)
}
render(){
return(
<div><SampleChild {...this.props}/></div>
)
}
}
export default SampleParent
Now how can I pass the Header Property from the SampleParent Component to SampleChild?.Please assist me.
<SampleParent Header="Hello from Parent" />
Will do the trick for you since you're spreading all props coming from SampleParent to SampleChild you need to make sure that the SampleParent just receives it as a prop if it's dynamic.
If it's a static prop you can define it in defaultProps for the SampleParent and you'll always pass the same string.
SampleParent.defaultProps = {
Header: 'Hello from Parent'
}
If you are just trying to pass "all" props from parent to child, you can do it this way.
From the component that is rendering the SampleParent ...
<SampleParent />
The SampleParent component:
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import SampleChild from './SampleChild';
class SampleParent extends Component {
render() {
return(
<div>
<SampleChild {...this.props} />
</div>
)
}
}
SampleParent.defaultProps = {
Header: "Header from parent"
}
export default SampleParent;
The SampleChild component:
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class SampleChild extends Component {
render() {
return(
<div>
<div>This is the Header passed from parent:</div>
{this.props.Header}
</div>
)
}
}
SampleChild.propTypes = {
Header: React.PropTypes.string.isRequired
}
export default SampleChild;