I'm trying to implement one functional component. Here I am doing below, But I'm getting error about props. Could someone help me.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const TextField = () => {
return (
<Text> {this.props.title} </Text>
)
}
export default TextField;
// APP Component
import TextField from './Components/TextField'
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<TextField title= "Simple App"/>
</View>
);
}
}
The reason is this.props is not defined in a functional component. They receive the props as an argument.
Change your TextField to take argument props and use props.title
const TextField = (props) => {
return (
<Text> {props.title} </Text>
)
}
Related
I have a react native app and I need to execute a function to change a state in the parent component. Im calling the function from a child of a child.
The structure looks like (Parent->Child->Child).
I am passing the function as a props. How should I do it correctly?
Thank you!
You can directly pass the argument to the function called from props.
Just as done in the submitHandler used in the below child component.
Parent
import React from 'react';
import {View, Text} from 'react-native';
export default class Parent extends React.Component{
state={
name:""
}
nameHandler=(userName)=>{
this.setState({
name:userName
})
}
render(){
return (
<View>
<Greeting askName={this.nameHandler}/>
<Text>hello {this.state.name}</Text>
</View>
)
}
}
Child
import React,{useState} from 'react';
import {View, Button,TextInput} from 'react-native';
export default const Greeting=(props)=>{
let [userName,setUsername]=useState("");
const textHandler=(text)=>{
setUsername(text);
}
const sumbmitHandler=()=>{
props.askName(userName);
}
return(
<View>
<TextInput placeholder="Enter your name." onChangeText={textHandler}/>
<Button onPress={sumbmitHandler} title="submit"/>
</View>
)
}
parent
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Child1 onPress={()=>console.log("on press from parent")}/>
</View>
);
}
}
child 1
export const Child1 = (props) => (
<View>
<Child2 onPress={props.onPress}/>
</View>)
child2
export const Child2 = (props) => (
<Button
onPress={props.onPress}
title="Press Me"
>)
const test=(param)=>{ // parent component function
// do action with param
}
<Test> // parent component
<Test2 doAction={(item)=>this.test(item)}/> // child component import
</Test>
const Test2=({doAction})=>{ // child component
<Test3 onClick={(item)=>doAction(item)}/>// sub child component
}
First thing is that in Test1.js when i uses Test2.js two time.In the first one I passes the data="First" and in second one I passes data="Second". But when the screen render and when I press the Button First It show "First" on the screen but when I press button second,it do'nt render "Second" on screen.
As I found that the value of state in the Test2.js is not changing.
Can You explain me why the value of state is not changing in the Test2.js
And can anyone tell how to fix this.And more thing if I uses component instead of this.A() and this.B() it works fine but as below method not works.
Here is the code..
Test1.js
import React, { Component } from 'react'
import { Text, StyleSheet, View } from 'react-native'
import {Button} from 'react-native-elements'
import Test2 from './Test2';
var a = "First"
var b = "second"
export default class Test1 extends Component {
state={
activeA:true,
activeB:false
}
A = ()=>{
return( <Test2 data={a}/>)
}
B = () =>{
return(<Test2 data={b}/>)
}
render() {
return (
<View style={{ flex:1,justifyContent:'center',padding:20}}>
<Button buttonStyle={{ marginBottom: 10}} title="First" onPress={()=>{this.setState({activeA:true,activeB:false})}}/>
<Button buttonStyle={{ marginBottom: 10}} title="Second" onPress={()=>{this.setState({activeA:false,activeB:true,})}}/>
{this.state.activeA?this.A():this.B()}
</View>
)
}
}
Test2.js
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Test2 extends Component {
state={
data:this.props.data
}
render() {
return (
<View>
<Text syle = {{fontSize:20,}}> {this.state.data} </Text>
</View>
)
}
}
Do not transfer to the status value, but render directly.
Test2.js
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Test2 extends Component {
constructor(props) {
super(props);
const { data } = props
}
render() {
return (
<View>
<Text syle = {{fontSize:20,}}> {this.props.data} </Text>
</View>
)
}
}
Test2.propTypes = {
data: PropTypes.string
}
I'm currently getting started with useSpring in react native . I have the following very simple component
import React from 'react'
import { View, Text } from 'react-native'
import {useSpring, animated} from 'react-spring'
const Pane = () => {
const props = useSpring(() => ({opacity: 1}))
return (
<View style={{ props }}>
<Text> 'test' </Text>
</View>
)
}
export default Pane;
However, rendering this in my simulator for React Native I get the following: What am I doing wrong?
You wrap the content of the style prop in an extra object, which is not needed, just pass the props as prop.
Also, i believe you have to set the props to an animated view instead of the regular RN view.
import React from 'react'
import { View, Text } from 'react-native'
import {useSpring, animated} from 'react-spring'
const AnimatedView = animated(View)
const Pane = () => {
const props = useSpring(() => ({opacity: 1}))
return (
<AnimatedView style={props}>
<Text> 'test' </Text>
</AnimatedView>
)
}
export default Pane;
If your React version is 16.7 or higher, you can use hooks.
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
const [opacity, setOpacity] = useState(0);
return (
<View style={{ opacity }}>
<Button
onPress={() => setOpacity(opacity + 1)}
title="Click me"
color="red"
/>
</View>
);
}
I'm developing a React Native app that using a ScrollView. I want to display an amount of items (A card with title and a child component).
The problem comes when I have to render each item, while the parent renders ok, the child does not.
I don't know where could be the issue, here's my code:
import React, {Component} from 'react';
import {View, Text} from 'react-native';
const mismo =[
'Mismo',
'Mismo',
'Mismo',
'Mismo',
'Mismo'
];
class Mismo extends Component {
renderMismo2(){
mismo.map((item) =>{
return(
<View>
<Text>{item}</Text>
</View>
)
})
}
render(){
return(
<View>
{this.renderMismo2()}
</View>
);
}
}
export default Mismo;
=================================
import React, {Component} from 'react';
import {View, Text, ScrollView} from 'react-native';
import {Card} from 'react-native-elements';
import PriceCard from '../components/PriceCard';
import Mismo from '../components/Mismo';
class OrderPricingCard extends Component{
renderAllPrices(){
this.props.data.orders.map((item, i) => {
return(
<View>
<PriceCard
key={item.transporterName}
data={item}
/>
</View>
);
})
}
renderMismo(){
return(
<Mismo />
);
}
render () {
return (
<Card
containerStyle={styles.cardContainer}
title={`Pedido: ${this.props.data.id}`}
>
<ScrollView
horizontal
>
{this.renderMismo()}
{this.renderAllPrices()}
</ScrollView>
</Card>
);
}
}
const styles = {
cardContainer:{
borderRadius: 10,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
}
}
export default OrderPricingCard;
This can be an easy mistake to make! I've done it several times. What's happened is you've forgotten the return statement for the render methods (renderMismo2() and renderAllPrices()) found in each component. Although the map methods correctly have return statements, you're not actually returning anything from the functions themselves.
If you were to console.log() either of those function calls above the return in the React render() method, you would see undefined in the console.
Here's what they would look like corrected.
renderAllPrices(){
// added the 'return' keyword to begin the line below
return this.props.data.orders.map((item, i) => {
return(
<View>
<PriceCard
key={item.transporterName}
data={item}
/>
</View>
);
})
}
renderMismo2(){
// same here, added the 'return' keyword
return mismo.map((item) =>{
return(
<View>
<Text>{item}</Text>
</View>
)
})
}
I tested the above in a React Native sandbox and it works. Hope that helps!
Just starting out learning React Native. Going through examples on the official site. I did the Hello World example and the status bar is overlapping the text. How can I hide the status bar?
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
Thanks
You can use the StatusBar component.
import React, { Component } from 'react';
import { AppRegistry, StatusBar, Text, View } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<View>
<StatusBar hidden={true} />
<Text>Hello world!</Text>
</View>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);