Develop Reference

React Native TextInput Value persist when Tab is changed

I have encountered a weird issue in the newest react native where the value in the text input in a component remains when a tab is switched.
I can't figure what is going on and I thought it should re-render when tab is changed but it doesn't.
Here's my code
app.js
export default function App() {
const [tab, setTab] = useState("TAB1")
return (
<View style={styles.container}>
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity
style={{ borderRadius: 5, borderWidth: 1, marginRight: 5, padding: 20 }}
onPress={() => setTab("TAB1")}
>
<Text>Tab 1</Text>
</TouchableOpacity>
<TouchableOpacity
style={{ borderRadius: 5, borderWidth: 1, padding: 20}}
onPress={() => setTab("TAB2")}
>
<Text>Tab 2</Text>
</TouchableOpacity>
</View>
<View style={{ marginTop: 20}}>
{
tab === "TAB1" ? (
<View>
<InputComponent tab={tab} />
</View>
) : (
<View>
<InputComponent tab={tab} />
</View>
)
}
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
marginTop: 100,
padding: 10
},
});
inputcomponent.js
export function InputComponent({ tab }) {
const [value, setValue] = useState("");
return (
<View>
<Text>{tab}</Text>
<TextInput placeholder="INPUT HERE" value={value} onChangeText={setValue}/>
</View>
)
}
It seems like the input component re-renders but the text input within it doesn't change.
Demo Issue

This is such a good question. This is because we are importing it once and passing it to two different components. It changes the tab but uses the same textinput state because they are using the same key.
To fix this pass in the key prop so React knows that tab changed:
{
tab === "TAB1" ? (
<View>
<InputComponent key={1} tab={tab} />
</View>
) : (
<View>
<InputComponent key={2} tab={tab} />
</View>
)
}
Snack: https://snack.expo.io/mVVLb9uId
Read about keys: https://reactjs.org/docs/lists-and-keys.html#keys

Unable to display Formik Form

I am trying to display my formik form, this is the first time I am using this. The screen however is completely blank. I think it has something to do with my styling however I'm not sure. Here is my code:
export default class Checkout extends Component {
render() {
return (
<View style={styles.container}>
<Formik
initialValues={{first_name: '', last_name: ''}}
onSubmit={(values) => {
console.log(values);
}}>
{(props) => {
<View>
<TextInput
style={styles.input}
placeholder="first name"
onChangeText={props.handleChange('first_name')}
value={props.values.first_name}
/>
<TextInput
style={styles.input}
placeholder="last name"
onChangeText={props.handleChange('last_name')}
value={props.values.last_name}
/>
<Button
title="place order"
color="maroon"
onPress={props.handleSubmit}
/>
</View>;
}}
</Formik>
</View>
);
}
}
const styles = StyleSheet.create({
input: {
borderWidth: 1,
borderColor: 'black',
padding: 10,
fontSize: 18,
borderRadius: 6,
},
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Since you are using {} then you should return something like this
<Formik
initialValues={{first_name: '', last_name: ''}}
onSubmit={(values) => {
console.log(values);
}}>
{(props) => {return (<View ...} }
or you can remove these {} inside Formik and then no need to type a return statement as you are returning only one thing. Here's what you should do
export default class Checkout extends Component {
render() {
return (
<View style={styles.container}>
<Formik
initialValues={{first_name: '', last_name: ''}}
onSubmit={(values) => {
console.log(values);
}}>
{(props) =>
<View>
<TextInput
style={styles.input}
placeholder="first name"
onChangeText={props.handleChange('first_name')}
value={props.values.first_name}
/>
<TextInput
style={styles.input}
placeholder="last name"
onChangeText={props.handleChange('last_name')}
value={props.values.last_name}
/>
<Button
title="place order"
color="maroon"
onPress={props.handleSubmit}
/>
</View>;
}
</Formik>
</View>
);
}
}

How to get multiple checkbox values and update to server in react native

I am posting my full code what I am trying. I am trying to get values from multiple checkbox and I have to send in OnButtonClick() function. If the value is true its Y else N I have to send . But I am not able to check the check boxes. Nor unchecked them. Please help I tried something but not succeeded. Please help me with this. It will great help for me .
import React, { Component } from 'react';
import { ImageBackground, ScrollView, TouchableOpacity, View, Platform, Image } from 'react-native';
import { Button, Text, Item, Input, Icon, Form, ListItem, CheckBox, Body, List } from 'native-base';
import Header from '../../ui/header';
import TextFieldTypeClear from '../../ui/textFieldTypeClear';
import SelectField from '../../ui/selectField';
import { PrimaryBtn } from '../../ui/buttons';
import BG from '../../../images/bg.jpg';
import styles from '../../simSwap/SimSwap.style';
import { RegularText, SmallText } from '../../ui/text';
import { ACCOUNT_OWNER,ADDRESS,CYCLE,EMAIL,PHONE,PERIODICITY,CURRENCY,LANGUAGE,EDIT,MAIL,FAX,POST,SMS,WHATSAPP } from '../../../images';
import _ from 'lodash';
const styless = {
icon:{
marginRight:5, marginTop:3
},
label:{
fontSize:14, color:'grey'
}
}
const Label = ({img, textLabel}) =>{
return (
<View style={{flexDirection:'row'}}>
<Image style={styless.icon} source={img}/>
<Text style={styless.label}>{textLabel}</Text>
</View>
);
}
class UpdateBillPreferences extends Component {
constructor(props) {
super(props);
const {navigation,clmmasterData} =this.props;
this.state = {
title: 'Update Bill Preferences',
mobile: navigation.state.params.customer.service.serviceNumber,
icon: 'sim',
email:'',
smsNum:'',
faxNum:'',
languageAndCurrecny:{
preferredLanguage: navigation.state.params.customerInfo[0].billingPreferenceDetails.presentationLanguageCode,
preferredCurrency: navigation.state.params.customerInfo[0].billingPreferenceDetails.preferedCurrencyCode,
},
};
}
componentDidMount() {
}
OnButtonClick = async (preferredLanguage, preferredCurrency,email,smsNum,faxNum) => {
const { OnButtonClick } = this.props;
await OnButtonClick(preferredLanguage, preferredCurrency,email,smsNum,faxNum);
this.setState({
preferredCurrency:'',
preferredLanguage:'',
email :'',
smsNum :'',
faxNum :''
})
}
languageChanged = (key, val) => {
this.handleChange({ field: "preferredLanguage" }, val);
};
handleChange = (props, e) => {
let tempObj = this.state.languageAndCurrecny;
tempObj[props.field] = e;
this.setState({ preferredLanguage: tempObj });
};
render() {
let { title, mobile, icon,languageAndCurrecny } = this.state;
const { navigation,clmmasterData} = this.props;
const {billingAddressDetails,billingPreferenceDetails} = navigation.state.params.customerInfo[0];
const {masterData , language} = clmmasterData;
let submitBtn = { label: 'Submit', OnSubmit: this.onSubmit };
let currencyData=[];
masterData.preferredCurrency.map(({ code: value, name: label }) => {
currencyData.push({ value, label });
});
let languageData=[];
masterData.language.map(({ code: value, name: label }) => {
languageData.push({ value, label });
});
return (
<ImageBackground source={BG} style={styles.imgBG}>
<ScrollView>
<View style={styles.container}>
<View>
<Header title={title} subtitle={mobile} icon={icon} navigation={navigation}/>
</View>
<View style={styles.contentContainer}>
<View style={{ padding: 20 }}>
<Form style={{ width: '100%' }}>
<SelectField
label="Presentation Language"
node="presentationLanguage"
options={languageData}
value={languageAndCurrecny.preferredLanguage}
onChange={this.languageChanged}
that={this}
setIcon={true}
img="LANGUAGE"
/>
<SelectField
label="Preferred Currency"
options={currencyData}
value={languageAndCurrecny.preferredCurrency}
node="preferredCurrency"
onChange={this.languageChanged}
that={this}
setIcon={true}
img="CURRENCY"
/>
<View style={{flexDirection:'column', marginBottom:15}}>
<View>
<Text style={{ color: 'grey', marginBottom: 15, marginTop:10, fontSize:14 }}>Preference</Text>
</View>
<View style={{flexDirection:'row', marginLeft:-10}}>
<View style={{flex:1}}>
<CheckBox color="#00678f" checked={billingPreferenceDetails.isBillByPost === "Y" ? true : false} onPress={() =>this.handleChange()}/>
</View>
<View style={{flex:1}}>
<Text style={{fontSize:14}}>Post</Text>
</View>
<View style={{flex:1}}>
<CheckBox color="#00678f" checked={billingPreferenceDetails.isBillByEmail === "Y" ? true : false} onPress={() =>this.handleChange()}/>
</View>
<View style={{flex:1}}>
<Text style={{fontSize:14}}>Email</Text>
</View>
<View style={{flex:1}}>
<CheckBox color="#00678f" checked={billingPreferenceDetails.isBillBySms === "Y" ? true : false} onPress={() =>this.handleChange()}/>
</View>
<View style={{flex:1}}>
<Text style={{fontSize:14}}>SMS</Text>
</View>
<View style={{flex:1}}>
<CheckBox color="#00678f" checked={billingPreferenceDetails.isBillByFax === "Y" ? true : false} onPress={() =>this.handleChange()}/>
</View>
<View style={{flex:1}}>
<Text style={{fontSize:14}}>FAX</Text>
</View>
</View>
</View>
<View style={{flexDirection:'column', marginBottom:15}}>
<View style={{marginTop:10, marginBottom:10, marginLeft:-3}}>
<Label img={ADDRESS} textLabel="Address"/>
</View>
<View>
<RegularText style={{ fontWeight: 'normal' }} text={`${billingAddressDetails.address1}, ${billingAddressDetails.address2}, ${billingAddressDetails.cityName}, ${billingAddressDetails.state}, ${billingAddressDetails.country}`} textColor="black" />
</View>
</View>
<View style={{marginBottom:15}}>
{billingPreferenceDetails.isBillByEmail === 'Y' &&
<View>
<Label img={EMAIL} textLabel="Email"/>
<Item style={{borderColor: '#00fff', borderBottomWidth:1, marginLeft:0}}>
<Input
value={this.state.email}
onChangeText={(text) => this.setState({email:text})}
/>
</Item>
</View>}
{billingPreferenceDetails.isBillBySms === 'Y' &&
<View>
<Label img={EMAIL} textLabel="SMS"/>
<Item style={{borderColor: '#00fff', borderBottomWidth:1, marginLeft:0}}>
<Input
value={this.state.smsNum}
onChangeText={(text) => this.setState({smsNum:text})}
/>
</Item>
</View>}
{billingPreferenceDetails.isBillByFax === 'Y' &&
<View>
<Label img={EMAIL} textLabel="FAX"/>
<Item style={{borderColor: '#00fff', borderBottomWidth:1, marginLeft:0}}>
<Input
value={this.state.faxNum}
onChangeText={(text) => this.setState({faxNum:text})}
/>
</Item>
</View>}
</View>
<View style={{ marginTop: 50 }}>
<PrimaryBtn label={'submit'} disabled={false} onPress={()=> this.OnButtonClick(this.state.preferredLanguage,this.state.preferredCurrency,
this.state.email,this.state.smsNum,this.state.faxNum)}/>
</View>
</Form>
</View>
</View>
</View>
</ScrollView>
</ImageBackground>
);
}
}
export default UpdateBillPreferences;
Thanks

your code have multiple checkbox,when you clicked checkbox that's value change correct,
i suggest when you clicked check box that checked value store to array using push()
finally you access multiple checkboxs.

If you can shorten your code sample to clarify what needs to change, it might help folks provide a more precise answer. If not, this sample function at least shows how to retrieve the checked status of each checkbox on the page.
The returned object has one property for each checkbox, and the property's value will be "Y" if the corresponding checkbox is checked.
document.getElementById("primaryBtn").addEventListener("click", submit);
function submit(){
const checkboxes = document.querySelectorAll("input[type='checkbox']"); // Finds checkboxes
let formData = {};
for(let checkbox of checkboxes){
formData[checkbox.value] = checkbox.checked ? "Y" : "N"; // Adds one property per checkbox
}
console.log(formData);
return formData;
}
// If you also want a function that notices when a checkbox changes, uncomment this:
/* document.addEventListener("change", handleChange);
function handleChange(event){
if(event.target.type && event.target.type == "checkbox"){
console.log(event.target.value + ": " + event.target.checked);
}
}
*/
<h3>Preference</h3>
<input type="checkbox" value="isBillByPost" />
<label>Post</label>
<br />
<input type="checkbox" value="isBillByEmail" />
<label>Email</label>
<br />
<input type="checkbox" value="isBillBySMS" />
<label>SMS</label>
<br />
<input type="checkbox" value="isBillByFax" />
<label>Fax</label>
<br /><br />
<button id="primaryBtn">Submit</button>

How to avoid jsx styling error in react native?

Whenever I tried to build UI from scratch I'm getting this error adjacent jsx element must be wrapped in an enclosing tag. I don't know how to solve this. Because I tried different methods, I've tried to put the blocks within View component withflex:1 but non-use. Is there any proper solution for this. This is becoming a great challenge for me because I can't design any components of my own. What to do please help me. Following is my code.
screen.js
export default class FirstScreen extends Component {
constructor(props){
super(props);
this.state = {
showPopupDialog: false,
workType: "",
workers: []
}
}
componentWillMount(){
fetch('http://192.168.1.6:3000/api/worker', {
method:'GET',
headers:{
Accept: 'application/json'
}
})
.then(response => response.json())
.then(responseData =>
this.setState({
workers:responseData
})
)
}
onPressYes = (workType) => {
console.log(workType);
}
popupDialog = (id, workType) => {
this.setState ({
showPopupDialog: true,
workType: workType
});
//make sure you set showPopupDialog to false and workType to "" when you click yes or no button in PopupDialog component so that it will work the next time you click on card
}
render() {
const { workers, workType, showPopupDialog} = this.state;
return (
<View style={{flex:1}}>
<Header />
<ScrollView>
{workers.map((a, index)=> (
<View style={{flex:1}}>
<CardSection>
<TouchableOpacity onPress={() => this.popupDialog(a.id, a.work_type)}>
<View style={{ maringTop: 10, marginLeft:120}}>
<Image style={{ height: 100, width: 100 }} source={{ uri: a.work_type == 'Carpenter' ? images[0].image : images[1].image}}/>
<Text style={{marginLeft:20, fontSize:20}}>{a.work_type}</Text>
</View>
</TouchableOpacity>
</CardSection>
</View>
))}
{showPopupDialog && <PopupDialog
dialogStyle={{ backgroundColor: "#FFFFFF", height: 180, width:300, borderWidth:1,padding:10}}
overlayBackgroundColor="#fff" dismissOnTouchOutside={true}>
<View style={styles.dialogContentView}>
<Text style={{fontSize:18, margingTop:10,color:"#000000"}}>Are you sure you want to submit?</Text>
<View style={{flexDirection:'row'}}>
<View style={styles.button_1}>
<Button title="Yes" color="#FF6633" onPress={() => this.onPressYes(workType)}/>
</View>
<View style={styles.button_1}>
<Button title="No" color="#FF6633" onPress={() =>this._onPressNo() }/>
</View>
</View>
</View>
</PopupDialog>}
</ScrollView>
</View>
);
}
}
The issue I'm facing is I can't place the <PopupDialog> component adjacent to <CardSection> , in order to that I put the <PopupDialog> within <View> ,even though it doesn't solve my issue.Please help..Please

Give a try with below corrected code.
There are two things that needs be corrected
You are doing .map but you are not returning anything which I have
corrected in the code below
export default class FirstScreen extends Component {
constructor(props){
super(props);
this.state = {
workType: "",
workers: []
}
}
componentWillMount(){
fetch('http://192.168.1.6:3000/api/worker', {
method:'GET',
headers:{
Accept: 'application/json'
}
})
.then(response => response.json())
.then(responseData =>
this.setState({
workers:responseData
})
)
}
onPressYes = (workType) => {
console.log(workType);
}
popUpDialog = (id, workType) => {
this.setState ({
workType: workType
});
this.popupDialog.show();
//make sure you set workType to "" when you click yes or no button in PopupDialog component so that it will work the next time you click on card
}
render() {
const { workers, workType} = this.state;
return (
<View style={{flex:1}}>
<Header />
<ScrollView>
{workers.map((a, index)=> (
<View style={{flex:1}}>
<CardSection>
<TouchableOpacity onPress={() => this.popUpDialog(a.id, a.work_type)}>
<View style={{ maringTop: 10, marginLeft:120}}>
<Image style={{ height: 100, width: 100 }} source={{ uri: a.work_type == 'Carpenter' ? images[0].image : images[1].image}}/>
<Text style={{marginLeft:20, fontSize:20}}>{a.work_type}</Text>
</View>
</TouchableOpacity>
</CardSection>
</View>
))}
<PopupDialog ref={popupDialog => {
this.popupDialog = popupDialog;
}}
dialogStyle={{ backgroundColor: "#FFFFFF", height: 180, width:300, borderWidth:1,padding:10}}
overlayBackgroundColor="#fff" dismissOnTouchOutside={true}>
<View style={styles.dialogContentView}>
<Text style={{fontSize:18, margingTop:10,color:"#000000"}}>Are you sure you want to submit?</Text>
<View style={{flexDirection:'row'}}>
<View style={styles.button_1}>
<Button title="Yes" color="#FF6633" onPress={() => this.onPressYes(workType)}/>
</View>
<View style={styles.button_1}>
<Button title="No" color="#FF6633" onPress={() =>this._onPressNo() }/>
</View>
</View>
</View>
</PopupDialog>
</ScrollView>
</View>
);
}
}

If I understand your question correctly...
You can return multiple root elements in jsx by wrapping is in a <React.Fragment> element (you can use <> and </> in v16.2 and later). Fragments are new in React v16. Prior to that, you just have to wrap them in some element (a div or span, usually).

The problem is that you have this structure:
<a>
{this.state.workers.map((a, index)=>
<b/>
<c/>
)}
</a>
Since <b/><c/> is parsed separately and there's no enclosing element, you're getting the error. But an enclosing element isn't necessary for the final structure, which does have an enclosing element. The solution is to simply return an array of JSX elements, like this:
<a>
{this.state.workers.map((a, index)=>
[<b/>,
<c/>]
)}
</a>

React Native TextInput setState() issue

I am having an issue with React Native's this.setState() within a TextInput's onChangeText. I am trying to display the content of the TextInput in the Text tag below it. However, it displays nothing -- the setState() call never changes this.state.searchtext. I also get no errors. Thank you in advance for your help! Here is my code:
export default class ShowScreen extends Component {
constructor(props) {
super(props);
this.state = {
searchtext: ""
};
}
render() {
var thisscreen = (
<View>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
pagingEnabled={true}
>
<View
style={{
flex: 1,
height: totalheight,
justifyContent: "space-around",
alignItems: "center",
width: totalwidth,
backgroundColor: "#FF0000"
}}
>
<TextInput
style={{ height: 80, fontSize: 20 }}
placeholder="placeholder"
value={this.state.searchtext}
onChangeText={searchtext =>
this.setState({ searchtext })
}
ref={input => {
this.textInput = input;
}}
returnKeyType="go"
/>
<Text>{this.state.searchtext}</Text>
</View>
</ScrollView>
</View>
);
return thisscreen;
}
}

In your TextInput add value prop
<TextInput
style={{height: 80, fontSize: 20}}
placeholder="placeholder"
value={this.state.searchtext}
onChangeText={(searchtext) => this.setState({ searchtext })}
ref={input => { this.textInput = input }}
returnKeyType="go"
/>

Hey you have used a variable to store screen code which is thisscreen. This might be preventing it from updating state.
Your render function should be like this:
render () {
return (
<View>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
pagingEnabled={true}
>
<View style={{
flex: 1,
height: totalheight,
justifyContent: "space-around",
alignItems: "center",
width: totalwidth,
backgroundColor: "#FF0000"
}}>
<TextInput
style={{height: 80, fontSize: 20}}
placeholder="placeholder"
value={this.state.searchtext}
onChangeText={(searchtext) =>
this.setState({searchtext})}
ref={input => { this.textInput = input }}
returnKeyType="go"
/>
<Text>{this.state.searchtext}</Text>
</View>
</ScrollView>
</View>);
}

onChangeText={(search_text) => this.setState({searchtext:search_text})}
try this, that might do job.

When you use setState, we provide a JSON as parameter. Please follow below code.
<TextInput
style={{height: 80, fontSize: 20}}
placeholder="placeholder"
value={this.state.searchtext}
onChangeText={(searchtext) => this.setState({ searchtext: searchtext })} // <--
ref={input => { this.textInput = input }}
returnKeyType="go"
/>
Do let me know if it does not work.

I think there might bug in React onChangeText method. You just need to replace onChangetText to onChange then It will work fine.
<TextInput
style={{height: 80, fontSize: 20}}
placeholder="placeholder"
onChange={(text) => this.setState({searchtext : text})}
ref={input => { this.textInput = input }}
returnKeyType="go"
/>