In header I add left component - icon, and I want to set icon on click. How can I do that?
I tried to set state value and return component that depends from this value.
<Header
placement="left"
leftComponent={
<Icon
name='keyboard-arrow-left'
color='#ffffff'
size={40}
onPress={}
/>
}
centerComponent={<Text>User Info</Text>}
/>
You can create separate component for icon
export class MyIcon extends Component {
state = { name: 'keyboard-arrow-left' }
render() {
return (
<Icon
name={this.state.name}
color='#ffffff'
size={40}
onPress={() => this.setState({ name: 'close' })}
/>
);
}
}
and use this component for leftComponent of your Header
<Header
placement="left"
leftComponent={
<MyIcon/>
}
centerComponent={<Text>User Info</Text>}
/>
The simplest way to fix this issue is to add a reference to your Icon component. Then use that reference to change any of the props of your icon.
constructor(props){
super(props);
this.state = {};
this.myIcon = '';
}
updateIconName = (nameEntered) => {
this.myIcon.name = nameEntered;
}
render() {
return(
<View style={{flex: 1}}>
<Header
placement="left"
leftComponent={
<Icon
name='keyboard-arrow-left'
color='#ffffff'
size={40}
onPress={this.updateIconName}
ref={(element) => {this.myIcon = element;}}
/>
}
centerComponent={<Text>User Info</Text>}
/>
</View>
);
}
Related
MainPage
export class Diet extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
};
}
addToList(item) {
const list = [...this.state.list, item];
this.setState({ list });
}
render() {
return (
<View>
<Text style={styles.txtYourMeals}>Your Meals</Text>
<FoodList items={this.state.list} /> <--------
</View>
);
}
}
export default Diet;
FoodList
import React, { Component } from "react";
export class FoodList extends Component {
render() {
return (
<View>
<Content>
<List>
<ListItem>
<Text>FoodCreated</Text>
</ListItem>
</List>
</Content>
</View>
);
}
}
export default FoodList;
FoodCreate
export default function FoodCreate({ navigation: { goBack } }) {
const [FoodName, setFoodName] = useState("");
return (
<Container>
<Header>
<Left>
<Button transparent>
<Icon
name="arrow-back"
onPress={() => goBack()}
style={{ fontSize: 25, color: "red" }}
/>
</Button>
</Left>
<Body>
<Title>Add Food</Title>
</Body>
<Right>
<Button transparent>
<Icon <-----------
name="checkmark"
style={{ fontSize: 25, color: "red" }}/>
</Button>
</Right>
</Header>
<TextInput
placeholder="Food Name"
placeholderTextColor="white"
style={styles.inptFood}
value={FoodName}
onChangeText={(FoodName) => setFoodName(FoodName)}
/>
</Container>
);
}
So I'm trying to let the user type a Food Name in a TextInput in the FoodCreate page and pressing the button checkmark to add that food name in the FoodList which is displayed in the MainPage. I started but I have no idea on how to proceed. It's a basic grocery shopping list in which you type a food name and add it to your list and every time you do that you insert a new item.
What you need is to tell the parent component i.e. MainPage that a new food item has been created.
This should look something like this in your MainPage
render() {
return (
<>
<FoodCreate addToList={addToList}/>
<View>
<Text style={styles.txtYourMeals}>Your Meals</Text>
<FoodList items={this.state.list} /> <--------
</View>
);
}
Now, this addToList would be available to your FoodCreate component which you can call whenever you create the food item. Also, I don't see any Save button in your FoodCreate. I think that's where you might want to add a click listener so that whenever user clicks on that button, you call the addToList method
I am trying to call my emailInput and have it show up on my createPassword page, specifically where youremail#email.com is. I have given the two pages below, the email page consisting of a user input and the password page where I want that user input to appear on. I cannot really wrap my head around how to refer to the Input in my onPress. Any insight at all is appreciated more than you know!
Also, can I call two onPress's like that? Or do I need to create two functions and do it that way?
SignUpEmail.js
export default class SignUpEmailPage extends Component {
constructor() {
super();
this.state = {
color1: '#A2A2A2'};}
render() {
return (
<View style={styles.containerMain}>
{/* Email Input */}
<Container style = {styles.emailInput}>
<Form>
<Item floatingLabel >
<Label style={{color:this.state.color1}}>Email Address</Label>
<Input
style={styles.textInput}
autoCorrect={false}
autoCapitalize="none"
onFocus={() => this.setState({color1: '#F7018D'})}
onBlur={() => this.setState({color1: '#A2A2A2'})}
/>
</Item>
</Form>
</Container>
<View style={styles.containerBottom}>
<ContinueButton
onPress = {() => navigation.navigate('CreatePassword', { emailInput: })}
onPress={() => this.props.navigation.navigate('CreatePassword')}
/>
</View>
CreatePassword.js
export default class CreatePasswordPage extends Component {
constructor() {
super();
this.state = {
color1: '#A2A2A2'};}
render() {
return (
<View style={styles.containerMain}>
{/* Password Input */}
<Container style = {styles.passwordInput}>
<Form>
<Item floatingLabel>
<Label style={{color:this.state.color1}}>Password</Label>
<Input
style={styles.textInput}
autoCorrect={false}
autoCapitalize="none"
secureTextEntry={true}
onFocus={() => this.setState({color1: '#F7018D'})}
onBlur={() => this.setState({color1: '#A2A2A2'})}
/>
</Item>
</Form>
</Container>
<View style={styles.containerHeader}>
<Text style={styles.title}>Create a Password</Text>
</View>
<View style={styles.containerCaption}>
<Text style={styles.caption}> Lets create your Password for
</Text>
</View>
<View style={styles.containerCaption2}>
<Text style={styles.caption}> youremail#email.com</Text>
</View>
<View style= {styles.backArrowPlacement}>
<BackArrow
onPress={() => this.props.navigation.navigate('SignUpEmail')}
/>
</View>
<View style={styles.containerBottom}>
<ContinueButton
onPress={() => this.props.navigation.navigate('PhoneVerification')}
/>
</View>
</View>
);
}
}
You can't use navigation.navigate as it needs Hooks implementation in the functional component. You can do is
export default class SignUpEmailPage extends Component {
constructor() {
super();
this.state = {
color1: '#A2A2A2',
inputValue: '', // add state here
};
}
updateInputValue = (evt) => {
this.setState({
inputValue: evt.target.value
});
}
render() {
return (
<Input
value = {this.state.inputValue}
onChange={this.updateInputValue }
/>
<ContinueButton
//onPress = {() => navigation.navigate('CreatePassword', { emailInput: })} // remove this
onPress={() => this.props.navigation.navigate('CreatePassword',{ emailInput: this.state.inputValue })} // use this like
/>
)
}
}
Hey there so i'm new to react native and javascript and currently i'm learning to make a custom radio button with images it looks like this my custom radio button in this page user is going to pick one button from the list, and i want to make it when the page first render it will show one pressed button and user is only allowed to pick one button. Can anyone tell me how to figure this out? Thanks in advance
here are my codes
RadioButton.js
export default class RadioButton extends Component {
constructor(props) {
super(props);
this.state = {
selected: this.props.currentSelection === this.props.value,
}
}
button() {
var imgSource = this.state.selected? this.props.normalImg : this.props.selectedImg;
return (
<Image
source={ imgSource }
/>
);
}
render() {
let activeButton = this.props.activeStyle ? this.props.activeStyle : styles.activeButton;
return (
<View style={[styles.container, this.props.containerStyle, this.state.selected || this.props.normalImg ? activeButton : inactiveButton]}>
<TouchableOpacity onPress={() => {
this.setState({ selected: !this.state.selected });
}}>
{
this.button()
}
</TouchableOpacity>
</View>
);
}
}
ActivityLog.js
class ActivityLog extends Component {
constructor(props){
super(props);
}
render() {
return (
<View style={styles.innerContainer}>
<Text style={styles.dialogText}>{`Log my activity at ${time} as...`}</Text>
<View style={styles.buttonContainer}>
<RadioButton selectedImg={img.activity.breakA} normalImg={img.activity.break} containerStyle={{marginHorizontal: normalize(10)}}/>
<RadioButton selectedImg={img.activity.meetingA} normalImg={img.activity.meeting} containerStyle={{marginHorizontal: normalize(10)}}/>
</View>
<View style={styles.buttonContainer}>
<RadioButton selectedImg={img.activity.otwA} normalImg={img.activity.otw} containerStyle={{marginHorizontal: normalize(10)}}/>
<RadioButton selectedImg={img.activity.officeA} normalImg={img.activity.office} containerStyle={{marginHorizontal: normalize(10)}}/>
</View>
);
}
}
Extract the activeStatus to ActivityLog so as to track which button is selected,right now you are maintaing a state for every button as a local state.So it is difficult to know other components to know about the button's active status.
Here is a generic implementation for rough idea.
const Child=(props)=>{
<TouchableOpacity onPress={props.handlePress}>
<Text style={[baseStyle,active && activeStyle]}>{props.title}</Text>
</TouchableOpacity>
}
class Parent extends React.Component{
state={
selectedChild:''
}
changeSelection=(sometitle)=>{
this.setState({
selectedChild:sometitle
})
}
render(){
return(
<View>
<Child handlePress={()=>this.changeSelection('1')} active={this.state.selectedChild==='1'}/>
<Child handlePress={()=>this.changeSelection('2')} active={this.state.selectedChild==='2'}/>
<Child handlePress={()=>this.changeSelection('3')} active={this.state.selectedChild==='3'}/>
<Child handlePress={()=>this.changeSelection('4')} active={this.state.selectedChild==='4'}/>
</View>
)
}
}
Expo demo Link
I'm using react native List to generate a Dynamic list using a custom data array and in the ListItem. I am using nested checkbox in every list item and I can't set the switch. I tried it by setting array of state but it doesn't seem to work.
This is my list
const DashboardList = props => (
<List
style={props.ListStyle}
dataArray={props.ListData}
renderRow={item => <ListContent ListData={item} />}
/>
);
This is my listItem
class ListContent extends Component {
static navigationOptions = {
title: "ListContent",
header: null
};
constructor(props) {
super(props);
this.state = {
IsContentVisible: false
};
}
render() {
return (<ListItem>
<View>
<View>
<Left>
<View>
<CheckBox
checked={this.state.checked}
onPress={checked => {
this.setState({ checked: !this.state.checked });
this.props.CheckBoxChange(this.props.ListItem,
checked);}}/>
</View>
<View>
<Image
source={this.props.ListItem.DataFolderContent[0].Image}
resizeMethod="auto"
resizeMode="contain"
/>
</View>
<View>
<Text>
{this.props.ListItem.Name}
</Text>
</View>
</Left>
<Body>
<View>
<Badge style={{ backgroundColor: "#eeae30" }}>
<Text>{this.props.ListItem.DataFolderContent.length}
</Text>
</Badge>
</View>
</Body>
<Right >
<Switch
onTintColor="#eeae30"
value={this.state.switched}
onValueChange={() => {
this.setState({ switched: !this.state.switched });
this.props.SwitchToggled(this.props.ListItem);
}}
/>
</Right>
</View>
</View>
</ListItem>;
}
}
I am new in React Native and I searched on Google but I only could find old version of React Native.
Actually, I am not sure how to pass state value to other js files
I am making Authpage that will redirect to tappage.js if the state value 'isValid' becomes 'true'
I am planning to change the page like this on App.js, if there are other better way, please let me know.
Thank you this is my code.
AuthManager.js
export default class AuthPage extends Component {
constructor(props) {
super(props);
this.state = {
user : null,
firebaseUser : null,
fcmToken : null,
accessToken : null,
authType : null,
hasInitialNotification : null,
isValid : false
};
this.unsubscribe = null;
}
...some codes..
render() {
// if (!this.state.firebaseUser) {
return (
<Provider store={store}>
<View style = {styles.main}>
<View style ={styles.logotemp}>
<Image style ={styles.logo}
source={require('../../resources/logo/logo.png')}
/>
</View>
<View style = {styles.inputid}>
<FormInput
ref={(el)=> {this.email = el;}}
textInputRef='email'
placeholder = "Email"
onChangeText={(email) => this.setState({email})}
value = {this.state.email}
/>
<FormInput
ref={(el)=> {this.password = el;}}
textInputRef='password'
onChangeText={(password) => this.setState({password})}
value = {this.state.password}
placeholder = "Password"
secureTextEntry = {true}
/>
<TouchableOpacity onPress={this._emailSignIn.bind(this)}>
<Image
style = {styles.loginbut}
source={require('../../resources/socialicon/signin.png')}
/>
</TouchableOpacity>
</View>
<View style = {styles.socialicons}>
<TouchableOpacity onPress={this._facebookSignIn.bind(this)} >
<Image
style={styles.fbicons}
source={require('../../resources/socialicon/facebook.png')}
/>
</TouchableOpacity>
<Image
style={styles.divider}
source = {require('../../resources/socialicon/divider.png')}
/>
<TouchableOpacity onPress={this._googleSignIn.bind(this)} >
<Image
style={styles.ggicons}
source={require('../../resources/socialicon/google.png')}
/>
</TouchableOpacity>
</View>
</View>
</Provider>
);
// }
if (this.state.firebaseUser) {
return(
<Provider store = {store}>
{store.isValid = this.state.isValid}
</Provider>
);
}
}
export default class MainPage extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
}
render() {
alert(store.isValid);
if(!this.props.isValid){
return(<View style={{flex:1}}>
<AuthPage></AuthPage>
</View>
);
}
if(isValid){
return(
<View style={{flex:1}}>
<TabPage></TabPage>
</View>
);
}
}
}
thank you!!
The idiom in React is that only the current element can know it's state.
I would highly recommend using Redux for the global data transfer between components, or, if you do not need data synced, you can use AsyncStorage.