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

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

Related

how to have more than one switch?

I am trying to have more than one switch on the same page, I succeeded but the problem is that when I click on a switch it modifies all the other switches.
Here is my code
const Setting =() => {
const [switchValue, setSwitchValue] = useState(false);
const toggleSwitch = (value, nb) => {
setSwitchValue(value);
};
return (
<View>
<View style={styles.Container}>
<Text style={styles.Title}>Change Profil Setting</Text>
</View>
<View style={styles.ContainerText}>
<Text syle={styles.Normal}>Over 18:</Text>
<Switch
style={{left: 50}}
onValueChange={toggleSwitch}
value={switchValue}
/>
</View>
<View style={styles.ContainerText}>
<Text syle={styles.Normal}>AutoPlay:</Text>
<Switch
style={{left: 50}}
onValueChange={toggleSwitch}
value={switchValue}
/>
</View>
<View style={styles.ContainerText}>
<Text syle={styles.Normal}>FlexDirecttion:</Text>
<Switch
style={{left: 50}}
onValueChange={toggleSwitch}
value={switchValue}
/>
</View>
</View>
)
}

const Setting =() => {
const [switchValue, setSwitchValue] = useState(false);
const [switch2Value, setSwitch2Value] = useState(false);
const [switch3Value, setSwitch3Value] = useState(false);
const toggleSwitch = (value, nb) => {
setSwitchValue(value);
};
const toggle2Switch = (value, nb) => {
setSwitch2Value(value);
};
const toggle3Switch = (value, nb) => {
setSwitch3Value(value);
};
return (
<View>
<View style={styles.Container}>
<Text style={styles.Title}>Change Profil Setting</Text>
</View>
<View style={styles.ContainerText}>
<Text syle={styles.Normal}>Over 18:</Text>
<Switch
style={{left: 50}}
onValueChange={toggleSwitch}
value={switchValue}
/>
</View>
<View style={styles.ContainerText}>
<Text syle={styles.Normal}>AutoPlay:</Text>
<Switch
style={{left: 50}}
onValueChange={toggle2Switch}
value={switch2Value}
/>
</View>
<View style={styles.ContainerText}>
<Text syle={styles.Normal}>FlexDirecttion:</Text>
<Switch
style={{left: 50}}
onValueChange={toggle3Switch}
value={switch3Value}
/>
</View>
</View>
)
}
This can be considered as a work around. What I would suggest is wrap the Switch component inside another component and import it where-ever you want by incorporating the state management in that component.

How can I pass the current item to a component in react-native?

I'm trying to pass the currently clicked item to the React-Native's own Modal component with props, but without success. Now it will only show the same item in all the modals regardless of what item was pressed.
Homepage that renders content and passes the data for Modal component:
<HomepageDataView>
{habitData !== null &&
Object.values(habitData).map((item, index) => (
<HomepageDataBox
key={index.toString()}
onPress={() => {
setModalVisible(true);
haptics.selection();
}}
style={{ borderBottomWidth: 7, borderBottomColor: `${item.color}` }}
>
<Image style={{ height: 50, width: 50 }} source={item.icon} />
<Text fontFamily="SemiBold" marginLeft="5px">
{item.name}
</Text>
<ShowHabitModal
data={item}
modalVisible={modalVisible}
setModalVisible={setModalVisible}
/>
</HomepageDataBox>
))}
</HomepageDataView>
Modal component:
export default function ShowHabitModal({ modalVisible, setModalVisible, data }) {
return (
<Modal animationType="slide" presentationStyle="pageSheet" visible={modalVisible}>
<ModalContent>
<HomeheaderContainer>
<TouchableOpacity
style={{ marginLeft: 10, marginTop: 10 }}
onPress={() => setModalVisible(false)}
>
<Ionicons name="close-circle-sharp" size={34} color="gray" />
</TouchableOpacity>
<TouchableOpacity>
<Text marginRight="15px" color={colors.mainGreen} fontFamily="SemiBold">
Edit
</Text>
</TouchableOpacity>
</HomeheaderContainer>
<ShowHabitDataContainer>
<View style={showHabitImageBackground}>
<Image style={{ width: 90, height: 90 }} source={data.icon} />
</View>
{data.description !== '' && <Text>{data.description}</Text>}
<Text fontFamily="SemiBold" marginTop="15px" twentyEight>
{data.name}
</Text>
<Text>{data.days}</Text>
<Text>{data.times}</Text>
</ShowHabitDataContainer>
</ModalContent>
</Modal>
);
}

Kuncheria is right. You have few modals open at the same time.
If you need to create few modals, try something like this:
const HomePage = () => {
const [visibleItem, setVisibleItem] = useState();
return <HomepageDataView>
{habitData !== null && Object.values(habitData).map((item, index) => {
const id = index.toString();
return (
<HomepageDataBox
key={id}
onPress={() => {
setVisibleItem(id);
haptics.selection();
}}
style={{ borderBottomWidth: 7, borderBottomColor: `${item.color}` }}
>
<Image style={{ height: 50, width: 50 }} source={item.icon} />
<Text fontFamily="SemiBold" marginLeft="5px">
{item.name}
</Text>
<ShowHabitModal
data={item}
modalVisible={visibleItem === id}
setModalVisible={setVisibleItem}
/>
</HomepageDataBox>
);
})}
</HomepageDataView>
};
const ShowHabitModal = ({ modalVisible, setModalVisible, data }) => (
<Modal animationType="slide" presentationStyle="pageSheet" visible={modalVisible}>
<ModalContent>
<HomeheaderContainer>
<TouchableOpacity
style={{ marginLeft: 10, marginTop: 10 }}
onPress={() => setModalVisible(false)}
>
<Ionicons name="close-circle-sharp" size={34} color="gray" />
</TouchableOpacity>
<TouchableOpacity>
<Text marginRight="15px" color={colors.mainGreen} fontFamily="SemiBold">
Edit
</Text>
</TouchableOpacity>
</HomeheaderContainer>
<ShowHabitDataContainer>
<View style={showHabitImageBackground}>
<Image style={{ width: 90, height: 90 }} source={data.icon} />
</View>
{data.description !== '' && <Text>{data.description}</Text>}
<Text fontFamily="SemiBold" marginTop="15px" twentyEight>
{data.name}
</Text>
<Text>{data.days}</Text>
<Text>{data.times}</Text>
</ShowHabitDataContainer>
</ModalContent>
</Modal>
);
If you can use a single modal, then try something like this:
const HomePage = () => {
const [modalVisible, setModalVisible] = useState();
const [visibleItem, setVisibleItem] = useState();
return <HomepageDataView>
{habitData !== null && Object.values(habitData).map((item, index) => {
const id = index.toString();
return (
<HomepageDataBox
key={id}
onPress={() => {
setVisibleItem(item);
setModalVisible(true);
haptics.selection();
}}
style={{ borderBottomWidth: 7, borderBottomColor: `${item.color}` }}
>
<Image style={{ height: 50, width: 50 }} source={item.icon} />
<Text fontFamily="SemiBold" marginLeft="5px">
{item.name}
</Text>
</HomepageDataBox>
);
})}
<ShowHabitModal
data={visibleItem}
modalVisible={modalVisible}
setModalVisible={setModalVisible}
/>
</HomepageDataView>
};
const ShowHabitModal = ({ modalVisible, setModalVisible, data }) => (
<Modal animationType="slide" presentationStyle="pageSheet" visible={modalVisible}>
<ModalContent>
<HomeheaderContainer>
<TouchableOpacity
style={{ marginLeft: 10, marginTop: 10 }}
onPress={() => setModalVisible(false)}
>
<Ionicons name="close-circle-sharp" size={34} color="gray" />
</TouchableOpacity>
<TouchableOpacity>
<Text marginRight="15px" color={colors.mainGreen} fontFamily="SemiBold">
Edit
</Text>
</TouchableOpacity>
</HomeheaderContainer>
<ShowHabitDataContainer>
<View style={showHabitImageBackground}>
<Image style={{ width: 90, height: 90 }} source={data.icon} />
</View>
{data.description !== '' && <Text>{data.description}</Text>}
<Text fontFamily="SemiBold" marginTop="15px" twentyEight>
{data.name}
</Text>
<Text>{data.days}</Text>
<Text>{data.times}</Text>
</ShowHabitDataContainer>
</ModalContent>
</Modal>
);

React-native adding components to array and accessing them

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>
);
}

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 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