React-native adding components to array and accessing them - javascript

I'm trying to make some sort of quiz, and I want to have all the boxes in a FlatList. I want all of them to be hidden, except for the first one, and that when you answer it the next question appears.
Here is my code:
const TYPE = [{id:"1",title:"first question",options:["option 1","option 2"],correct:1},{id:"2",title:"secondquestion",options:["option 1","option 2"],correct:0}];
const answer=a=>Alert.alert(a == 0 ? 'wrong' : 'correct');
const Item = ({info}) => (
<View style={styles.item}>
<Text style={styles.title}>
{info.title}
</Text>
<TouchableOpacity style={styles.button} onPress={() => info.correct == 0 ? answer(1) : answer(0)}>
<Text>
{info.options[0]}
</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={() => info.correct == 1 ? answer(1) : answer(0)}>
<Text>
{info.options[1]}
</Text>
</TouchableOpacity>
</View>
);
function HomeScreen({ navigation }) {
return (
<View style={styles.homescreen}>
<Text style={styles.homeTitle}>
Welkom!
</Text>
<Text style={styles.homeIntro}>
Play the test, yes?
</Text>
<TouchableOpacity style={styles.homeButton} onPress={() => navigate(navigation, "Type")}>
<Text style={styles.homeButtonText}>
Start the Test!
</Text>
</TouchableOpacity>
</View>
)
}
function type() {
const renderItem = ({ item }) => <Item info={item} />;
return (
<View style={styles.container}>
<FlatList
data={TYPE}
renderItem={renderItem}
keyExtractor={item => item.id}
style={styles.list}
/>
<StatusBar style="auto" />
</View>
);
}
export default function App() {
console.log("Starting...");
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Type" component={type} />
</Stack.Navigator>
</NavigationContainer>
)
}
My approach to this would be to add all s into an array, so that I can simply do this: itemArray[i].style.display='None' or something like that.


Try below code that could help to achieve what you want:
import React from 'react';
import {
Alert,
StatusBar,
Text,
TouchableOpacity,
View,
} from 'react-native';
const TYPE = [
{
id: '1',
title: 'first question',
options: ['option 1', 'option 2'],
correct: 1,
},
{
id: '2',
title: 'secondquestion',
options: ['option 1', 'option 2'],
correct: 0,
},
];
const Item = ({info, onPressOption}) => (
<View style={styles.item}>
<Text style={styles.title}>{info.title}</Text>
<TouchableOpacity style={styles.button} onPress={() => onPressOption(0)}>
<Text>{info.options[0]}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={() => onPressOption(1)}>
<Text>{info.options[1]}</Text>
</TouchableOpacity>
</View>
);
function HomeScreen({navigation}) {
return (
<View style={styles.homescreen}>
<Text style={styles.homeTitle}>Welkom!</Text>
<Text style={styles.homeIntro}>Play the test, yes?</Text>
<TouchableOpacity
style={styles.homeButton}
onPress={() => navigate(navigation, 'Type')}>
<Text style={styles.homeButtonText}>Start the Test!</Text>
</TouchableOpacity>
</View>
);
}
function QuestionScreen({navigation}) {
const [activeQuestionIndex, setActiveQuestionIndex] = React.useState(0);
const showAlert = (isCorrect, onPress) => {
Alert.alert(isCorrect ? 'correct' : 'wrong', null, [
{
onPress,
},
]);
};
const onPressOption = (optionIndex) => {
const isCorrectOption = TYPE[activeQuestionIndex].correct === optionIndex;
showAlert(isCorrectOption, () => {
isCorrectOption && setActiveQuestionIndex(activeQuestionIndex + 1);
});
};
return (
<View style={styles.container}>
<StatusBar style="auto" />
<Item info={TYPE[activeQuestionIndex]} onPressOption={onPressOption} />
</View>
);
}

Related

React Native - undefined is not an object (evaluating 'number.toFixed')

I am a newbie, I'm having trouble getting the number format when passing data from flatList to modal. It is worth mentioning here that when I format in the flatlist, it does not have an error, but when transferred to the modal, it fails.
>TypeError: undefined is not an object (evaluating 'number.toFixed')
Declaration functions
const [{user}, dispatch] = useValueContext();
const navigation = useNavigation();
const [data, setData] = useState([]);
const [modalVisible, setModalVisible] = useState(false);
const [selectedItem, setSelectedItem] = useState([]);
const [maxId, setMaxId] = useState('0');
const [loading, setLoading] = useState(false);
const [isListEnd, setIsListEnd] = useState(false);
const [modalFilterVisible, setModalFilterVisible] = useState(false);
const handleOnSelectItem = ({item}) => {
setSelectedItem(item);
};
const handleOnCloseModal = () => {
setSelectedItem([]);
};
Modal function
const ModalView = ({item}) =>{
return(
<Modal
animationType="none"
transparent={true}
visible={modalVisible}
onRequestClose={handleOnCloseModal}
>
<TouchableOpacity
style={styles.modal_content}
activeOpacity={1}
onPressOut={() => {setModalVisible(false)}}
>
<TouchableWithoutFeedback style={styles.modalView}>
<View style={styles.modal_header}>
<TouchableOpacity
style={{
marginEnd: 5
}}
onPress={() => {
setModalVisible(!modalVisible);
}}
>
<FontAwesome5 name="times" size={16} />
</TouchableOpacity>
</View>
<View style={styles.modal_body}>
<View style={{}}>
<Text style={styles.detail_content_name}>{item.MoneyAction_Name}</Text>
<View style={styles.detail_content_status}>
<Text style={styles.detail_content_status_text}>{item.MoneyStatus_Name}</Text>
</View>
{item.Money_Value > 0 ?
(<Text style={{color: '#56ab2f', fontSize: 17, textAlign: 'center'}}>+{item.Money_Value.toFixed(1).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/\./g, ' ').replace(/\,/g, '.').replace(/\ /g, ',')} {item.Money_Ticker}</Text>)
:(<Text style={{color: '#e41318', fontSize: 17, textAlign: 'center'}}>{item.Money_Value.toFixed(1).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/\./g, ' ').replace(/\,/g, '.').replace(/\ /g, ',')} {item.Money_Ticker}</Text>)
}
<View style={{marginBottom: 16, marginTop: 16, borderStartColor: 'rgba(0,0,0,.1)', borderWidth: .3, alignItems:'stretch'}}>
</View>
<View style={styles.detail_list}>
<Text>Nguồn tiền</Text>
<Text>Ví {item.Money_Ticker}</Text>
</View>
{item.Money_PartnerGiftCode !== '' ? (
<View style={styles.detail_list}>
<Text>Mã nâng cấp</Text>
<Text>{item.Money_PartnerGiftCode}</Text>
</View>
): null}
<View style={styles.detail_list}>
<Text>Phí giao dịch</Text>
</View>
<View style={styles.detail_list}>
<Text>Mã giao dịch</Text>
<Text>#632542</Text>
</View>
<View style={styles.detail_list}>
<Text>Thời gian</Text>
<Text>19/10/2020 23:21</Text>
</View>
</View>
</View>
</TouchableWithoutFeedback>
</TouchableOpacity>
</Modal>
);
}
Item function:
const Item = ({item}) => {
return(
<TouchableOpacity
style={styles.history_li}
onPress={() => {
handleOnSelectItem({item})
setModalVisible(true)
}}
>
<View style={styles.history_view}>
<View style={styles.history_view_left}>
<Text style={styles.history_view_left_name}>{item.MoneyAction_Name}</Text>
<Text style={styles.history_view_left_time}>
{new Date(item.Money_Time * 1000).getDate()}
/{new Date(item.Money_Time * 1000).getMonth()}
/{new Date(item.Money_Time * 1000).getFullYear()} {new Date(item.Money_Time * 1000).getHours()}
:{new Date(item.Money_Time * 1000).getMinutes()}
:{new Date(item.Money_Time * 1000).getSeconds()}
</Text>
</View>
<View style={styles.history_view_right}>
{item.Money_Value > 0 ?
(<Text style={styles.history_view_right_receive}>+{item.Money_Value.toFixed(1).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/\./g, ' ').replace(/\,/g, '.').replace(/\ /g, ',')}</Text>)
:(<Text style={styles.history_view_right_pay}>{item.Money_Value.toFixed(1).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/\./g, ' ').replace(/\,/g, '.').replace(/\ /g, ',')}</Text>)
}
<Text style={styles.history_view_right_currency}>{item.Money_Ticker}</Text>
</View>
</View>
</TouchableOpacity>
);
}
const _renderItem = ({item}) => {
return(
<Item item = {item} />
);
}
executable function
return (
<View style={styles.container}>
<View style={{padding: 5, flexDirection: 'row', justifyContent:'space-between'}}>
<View style={styles.HeaderScreen}>
<Image
style={styles.imgStyle}
source={require('../assets/images/vietsmile.png')}
/>
<Text style={styles.title}>Lịch sử</Text>
</View>
<View style={styles.bell}>
<Ionicons name="ios-notifications" size={26} color="#596475" />
</View>
<View lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
</View>
<View style={{backgroundColor: '#f1f2f3'}}>
<View style={styles.filter_menu}>
<TouchableOpacity
style={styles.shop_filter}
onPress={()=>{setModalFilterVisible(true)}}
>
<FontAwesome5 name="filter" size={16} color="#3696D9" />
<Text style={{marginLeft: 3, color: '#3696D9',}}>Bộ lọc</Text>
</TouchableOpacity>
</View>
<FlatList
data={data}
renderItem={_renderItem}
keyExtractor={item => item.Money_ID.toString()}
ListFooterComponent={renderFooter}
/>
</View>
{selectedItem !== [] ? (
<ModalView item={selectedItem} />
) : null}
</View>
);
Please help me

Why external function can't navigate other javascript file in React?

I'm making simple app which contains Todo App.
However, the function which locate in outside of main function(Is this expression right?) in same Javascript file can't navigate to other screen.
Below is my Screen structure(simplified)
<Stack.Screen name="Myqtwrite" component={MyqtwriteScreen} options={{headerShown: false}} />
<Stack.Screen name="Myqtupdate" component={MyqtupdateScreen} options={{headerShown: false}} />
And the problem is below.
I expressed the location of problem.
MyqtwriteScreen.js
export function Note(props, {navigation, route}) {
return (
<View style={[styles.myblock, {backgroundColor:props.val.color}]}>
<View style={{alignItems:'flex-start'}}>
<View style={{borderBottomWidth:2,borderColor:'white',marginBottom:5}}>
<Text style={[styles.myblocktitle]}>{props.val.date}</Text>
</View>
<Text style={styles.myblocktext}>{props.val.note}</Text>
</View>
<View style={{width: '100%' ,flexDirection:'row',justifyContent:'flex-end'}}>
/* problem is here--> */ <TouchableOpacity onPress={() => {navigation.navigate('Myqtupdate') }} style={{marginTop:5,marginLeft:10}} >
<Text style={styles.myblockbuttontext}>UPDATE</Text>
</TouchableOpacity>
<TouchableOpacity onPress={props.deleteMethod} style={{marginTop:5,marginLeft:10}} >
<Text style={styles.myblockbuttontext}>DELETE</Text>
</TouchableOpacity>
</View>
</View>
);
}
export function MyqtwriteScreen({ navigation, route }) {
const [noteArray, setNoteArray] = useState([]);
const [noteText, setNoteText] = useState('');
let rdcolor = 'hsl('+Math.random()*255+','+ Math.random()*(60)+10+'%, 82%)';
let notes = noteArray.map((val, key) => {
console.log('start');
return <Note key={key} keyval={key} val={val}
deleteMethod={() => deleteNote(key)} />
});
const addNote = () => {
if (noteText) {
var d = new Date();
noteArray.unshift({
'date': d.getFullYear() +
"Y " + (d.getMonth() + 1) +
"월 " + d.getDate() + "일 " + d.getHours() + "시 " + d.getMinutes()+"분",
'note': noteText,
'color': rdcolor,
});
setNoteArray(noteArray);
setNoteText('');
// alert('큐티 입력을 완료했습니다.');
}
else {
alert('큐티를 입력하세요');
}
};
const deleteNote = (key) => {
const newArray = [...noteArray];
newArray.splice(key, 1);
setNoteArray(newArray);
};
return (
<View style={styles.container}>
<View style={styles.topbar}>
<Text style={styles.topbartext}>오늘의 큐티</Text>
<Icon style={styles.topbarmenu} name="close" onPress={() => { navigation.navigate('My') }} />
</View>
<View style={styles.qtinputblock}>
<TextInput
onChangeText={(noteText) => setNoteText(noteText)}
value={noteText}
placeholder='큐티를 입력하세요'
placeholderTextColor='gray'
multiline={true}
style={styles.qtinputtext}
/>
<TouchableOpacity onPress={addNote} style={styles.myblockbutton}>
<Text style={styles.myblockbuttontext}>추가</Text>
</TouchableOpacity>
</View>
<ScrollView style={styles.scroll}>
<View style={{alignItems:'flex-start'}}>
{notes}
</View>
</ScrollView>
</View>
);
}
I made 'MyqtupdateScreen.js' file of course.
The most interesting thing is that when I wrote same onPress={() => {navigation.navigate('Myqtupdate') }} in some TouchableOpacity in the 'function MyqtwriteScreen({navigation, route'})' , it works!!
I don't understand why navigation.navigate('Myqtupdate') doesn't work in export function Note, but works in export function MyqtwriteScreen.
Any words would be help!

Note doesnt get a navigation prop you will have to pass it like below
return <Note key={key} keyval={key} val={val} navigation={navigation} deleteMethod={() => deleteNote(key)} />
It works on the other screen as its part of the stack.
You can also use the useNavigation hook to get access to navigation.

How can i set focus to only one TextInput in list item after TouchableOpacity pressed in this item?

I have a list of many items where each item has TextInput and TouchableOpacity wrapped by View.
I've trying to set focus on TextInput in the list item in which TouchableOpacity has been pressed. It's needed for editing each item's name.
Below is the code of how I tried to do this. The problem of this code is that after pressing on any of the TouchableOpacity the last TextInput will always be focused due to the fact that the last iteration overwrites textInputRef.
Is there a way to make textInputRef contain a reference to the TextInput which TouchableOpacity will press?
const ListComponent = ({list}) => {
const textInputValue = useRef('');
const textInputRef = useRef(null);
changeItemName = (text) => {
textInputValue.current = text;
};
return (
<ScrollView>
{list.length > 0 &&
list.map((item) => (
<View key={item._id}>
<TouchableOpacity>
<View
<Text>{`Item: `}</Text>
<TextInput ref={textInputRef} onChangeText={changeItemName}>
{item.name}
</TextInput>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
textInputValue.current = '';
}}>
<Icon name={'check'} size={25} color="#000" />
</TouchableOpacity>
<View>
<TouchableOpacity
onPress={() => {
textInputValue.current = item.name;
textInputRef.current.focus();
}}>
<Icon name={'edit'} size={25} color="#000" />
</TouchableOpacity>
</View>
</View>
))}
</ScrollView>
);
};

I think creating an array of ref will help you to resolve.
Try this way
const ListComponent = ({list}) => {
const textInputValue = useRef('');
const textInputRef = useRef(null);
changeItemName = (text) => {
textInputValue.current = text;
};
const collectionRef = useRef(list.map(() => createRef()));
return (
<ScrollView>
{list.length > 0 &&
list.map((item, index) => (
<View key={item._id}>
<TouchableOpacity>
<View
<Text>{`Item: `}</Text>
<TextInput ref={collectionRef.current[index]} onChangeText={changeItemName}>
{item.name}
</TextInput>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
textInputValue.current = '';
}}>
<Icon name={'check'} size={25} color="#000" />
</TouchableOpacity>
<View>
<TouchableOpacity
onPress={() => {
textInputValue.current = item.name;
collectionRef[index].current.focus();
}}>
<Icon name={'edit'} size={25} color="#000" />
</TouchableOpacity>
</View>
</View>
))}
</ScrollView>
);
};

How to navigate between different components based on conditions in react native

I am building a a mobile app in react native in which I have videos and audios coming in same data array. Now I am rendering them into a flatlist and audios and videos are coming together randomly. Now I want that If I click on the audio file it should navigate to Audios component and if I click on any video it should navigate to Videos Component. But I don't know how to filter and navigate to their respective components. Kindly help me. Thank you
My code
Main File: It is navigating to Audio component either I click on audio file or either on video file
<FlatList
horizontal
data={latestuploads}
keyExtractor={item => item.id}
renderItem={({item}) => {
return (
<ScrollView horizontal={true}>
<Card transparent style={{width: 170}}>
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate('Audio', {id: item.id})
}>
<CardItem>
<ImageBackground
source={{uri: item.image_url}}
style={styles.image}>
<Image
source={require('../assets/play-icon.png')}
style={styles.icon}
/>
</ImageBackground>
</CardItem>
</TouchableOpacity>
<CardItem cardBody>
<Text numberOfLines={1} style={styles.title}>
{item.title}
</Text>
</CardItem>
<CardItem cardBody>
<Text style={styles.speaker}> {item.speaker} </Text>
</CardItem>
</Card>
</ScrollView>
);
}}
/>

I suppose you're getting file extension example .mp4/.mp3 etc or Audio/Video flag from your data array.
Create a function that takes file info example:
navigateTo = (fileinfo) => {
// const filetype = check for file type, Audio/Video or file extension
if (filetype === 'Audio'){
this.props.navigation.navigate('Audio', {id: fileinfo.id})
} else {
this.props.navigation.navigate('Video', {id: fileinfo.id})
}
Pass this to your TouchableOpacity:
<TouchableOpacity
onPress={() => navigateTo(item)}>
// your code here
</TouchableOpacity>

constructor()
{
super(props)
this.state = {
ItemindexChecked: "",
}
this.Dataarrayholder = latestuploads;
}
............................your code ............
DataFilter(p_value)
{
const newData = this.Dataarrayholder.filter(function (item) {
const itemData = item.value ? item.value.toUpperCase() : ''.toUpperCase();
const textData = p_value.toUpperCase();
return itemData.indexOf(textData) > -1;
if (p_value != "")
{
if (newData == 0) {
return
}
else
{
this.props.navigation.navigate('Audio', { id: newData[0].id });
}
}
});
}
...........................................your code ..............
<FlatList
horizontal
data={latestuploads}
keyExtractor={item => item.id}
renderItem={({ item }) => {
return (
<ScrollView horizontal={true}>
<Card transparent style={{ width: 170 }}>
<TouchableOpacity
//onPress={() =>
// // this.props.navigation.navigate('Audio', { id: item.id })
// }
onPress={() => { this.DataFilter(item.value), this.setState({ ItemindexChecked: item.key }) }}
>
<CardItem>
<ImageBackground
source={{ uri: item.image_url }}
style={styles.image}>
<Image
source={require('../assets/play-icon.png')}
style={styles.icon}
/>
</ImageBackground>
</CardItem>
</TouchableOpacity>
<CardItem cardBody>
<Text numberOfLines={1} style={styles.title}>
{item.title}
</Text>
</CardItem>
<CardItem cardBody>
<Text style={styles.speaker}> {item.speaker} </Text>
</CardItem>
</Card>
</ScrollView>
);
}}
/>
maybe it helpful for you

How I can handle multiple checkbox and basis of that show and hide input fields and update to server in react native

In my code there are 2 dropdowns, 4 checkboxes, 4 input fields and one button.
Basically I have to update these fields on button click.
Problem with ckeck box .
I have to make checkbox "checked={true/false}" on condition basis, and I have to take these value and update the server:
1 [] Emal [] sms [] fax (all are unchecked )
Suppose I click on email the email should be checked and one Email input field should appear. And if again I uncheck the checkbox, the input field should be hidden.
If the value is checked Y value should go to server else N value if unchecked when I press the button below .
Basically there are multiple checkboxes and I have to update their value to server . Below Is UX link please see once .
https://xd.adobe.com/view/2b0336f6-6ff6-40ae-6653-f71e080dd0da-5d32/?fullscreen
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: '',
isBillByEmail : navigation.state.params.customerInfo[0].billingPreferenceDetails.isBillByEmail,
isBillBySms : navigation.state.params.customerInfo[0].billingPreferenceDetails.isBillByFax,
isBillByFax : navigation.state.params.customerInfo[0].billingPreferenceDetails.isBillBySms,
languageAndCurrecny:{
preferredLanguage: navigation.state.params.customerInfo[0].billingPreferenceDetails.presentationLanguageCode,
},
currencyChangedValue:{
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 });
};
currencyChanged = (key, val) => {
this.handleChange2({ field: "preferredCurrency" }, val);
};
handleChange2 = (props, e) => {
let tempObj = this.state.currencyChangedValue;
tempObj[props.field] = e;
this.setState({ preferredCurrency: tempObj });
};
handleChange1 = () => {
let isBillByEmail=this.state.isBillByEmail;
console.log("-----------------------clicked-------");
this.setState(previousState => {
return { isBillByEmail: !previousState.checked };
})
console.log("----------isBillByEmail--------------------",isBillByEmail);
}
render() {
let { title, mobile, icon,languageAndCurrecny,currencyChangedValue,isBillByEmail } = 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={currencyChangedValue.preferredCurrency}
node="preferredCurrency"
onChange={this.currencyChanged}
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}/>
</View>
<View style={{flex:1}}>
<Text style={{fontSize:14}}>Post</Text>
</View>
<View style={{flex:1}}>
<CheckBox color="#00678f" checked={isBillByEmail==='Y'?true : false} onPress={() =>this.handleChange1()}/>
</View>
<View style={{flex:1}}>
<Text style={{fontSize:14}}>Email</Text>
</View>
<View style={{flex:1}}>
<CheckBox color="#00678f" checked={true} onPress={() =>this.handleChange()}/>
</View>
<View style={{flex:1}}>
<Text style={{fontSize:14}}>SMS</Text>
</View>
<View style={{flex:1}}>
<CheckBox color="#00678f" checked={true} 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;
// Checkbox part where I am facing problem .
Props Value
isBillByEmail: "N"
isBillByFax: "Y"
isBillByPost: "Y"
isBillBySms: "N"
<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}/>
</View>
<View style={{flex:1}}>
<Text style={{fontSize:14}}>Post</Text>
</View>
<View style={{flex:1}}>
<CheckBox color="#00678f" checked={isBillByEmail==='Y'?true : false} onPress={() =>this.handleChange1()}/>
</View>
<View style={{flex:1}}>
<Text style={{fontSize:14}}>Email</Text>
</View>
<View style={{flex:1}}>
<CheckBox color="#00678f" checked={true} onPress={() =>this.handleChange()}/>
</View>
<View style={{flex:1}}>
<Text style={{fontSize:14}}>SMS</Text>
</View>
<View style={{flex:1}}>
<CheckBox color="#00678f" checked={true} 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>
Please help..Thanks

Categories

Resources