React Native Collapse list with button - react-native

I'm making an app with expo react native, and I made a collapse that shows profile information about all users on my SQLite database.
I added a button (touchableopacity) inside the collapse and my idea is to edit information in the input where I'm showing information, but i don't know how to link the button press to the profile where is being touched.
so my code is as follows (i deleted styles to make it cleaner to see):
render(){
const miLista = this.state.datos.map((item) => //this is "list" and it works(show information of each profile and shows the button of each profile when i open the collapse of each on of them)
<ScrollView style={styles.container}>
<Collapse>
<CollapseHeader>
<Text>{item.id} {item.nombre}</Text> //here shows id and name (from sqlite data)
</CollapseHeader>
<CollapseBody >
<View key={item.id} >
<Text >Nombre</Text>
<TextInput
value={item.nombre}
onChangeText={(val) => this.setState({ nombre: val})}/>
<Text style=>Rut</Text>
<TextInput
value={item.rutPersona}
onChangeText={(val) => this.setState({ rutPersona: val})}/>
<Text >Clave</Text>
<TextInput
value={item.clave}
onChangeText={(val) => this.setState({ clave: val})}/>
{this.boton(item.id)}
</View>
</CollapseBody>
</Collapse>
</ScrollView>
);
return(
<View >
<SafeAreaView >
<TouchableOpacity
onPress={() => this.props.navigation.openDrawer()}>
<FontAwesome5 name="bars" size={24} color="#161924"/>
</TouchableOpacity>
</SafeAreaView>
<Text>Perfiles</Text>
<ScrollView>
{miLista}
</ScrollView>
</View>
);
};

so i needed to add .bind to the onpress of my button and pass the data: like this
boton(id,nombre,rutPersona,clave){
return(
<TouchableOpacity
key={id}
style={styles.boton}
onPress={this.funcionBoton.bind(this,nombre,rutPersona,clave,id)}
>
<Text>SAVE </Text>
</TouchableOpacity>
);
};

Related

React onPress execute immediately ( render time) , but once replace with arrow function it does not work

export const Focus = ({addSubject})=>{
const [tempValue, setTempValue] = useState(null);
return(
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.title}> What are you going to focus on....?</Text>
<View style={styles.inputcontainer}>
<TextInput style ={{flex:1, marginRight:10}}
onSubmitEditing ={
({nativeEvent}) => {
setTempValue(nativeEvent.text+'0000')
}
}
/>
<RoundedButton title ='+' onPress={
addSubject(tempValue)
}/>
</View>
</View>
</View>
);
}
Just after entering data, once hit the 'return' it submit entered "text+0000"
but once replace with
<RoundedButton title ='+' onPress={
()=>{ addSubject(tempValue)}
}/>
on press is not working
*** I'm testing this on on Expo web
What is the reason for this behavior and what is the solution to make it work once press the button.
Try without braces, then only it will return the addSubject function
<RoundedButton
title ='+'
onPress={()=> addSubject(tempValue)}
/>

Fetch data from API based on clicks and display it on modal React Native

I want to display data based on the day selected by the user on the calendar and displayed it on modal, this is my code for calendar
<Calendar style={styles.calendar} onDayPress={day => {
getCalendarEvent(day);
}}
markingType={'multi-dot'}
markedDates={markedDay}/>
GetcalendarEvent() is a function that call the request from rest API, This is the code
const getCalendarEvent=(day)=>{
axios.get(`${BASE_URL_COURSE}&wsfunction=core_calendar_get_calendar_day_view&year=${day.year}&month=${day.month}&day=${day.day}`)
.then(res=>{
const data = (res.data)
seteventItems(data)
setModalVisible(true)
}).catch(e=>{
console.log(`error ${e}`)
})
}
and i want to display data from GetcalendarEvent() function into modal, so i tried setModalVisible(true) inside of GetcalendarEvent() function. But it didn't worked, the data was not displayed on modal and just an empty flatlist.
this is my modal code
<View style={styles.centeredView}>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
setModalVisible(!modalVisible);
}}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<FlatList
data={eventItems}
renderItem={({item}) =>{
return (
<View>
<Text style={styles.modalText}>{item.name}</Text>
</View>
)
}} />
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={() => setModalVisible(!modalVisible)}
>
<Text style={styles.textStyle}>Close</Text>
</Pressable>
</View>
</View>
</Modal>
</View>

Problem with updating state in react native component

I have an array with values i want to present and then if the user press the edit button the presentation is changed to a list of TextInput components. When done editing the user can press Save or Cancel. If Cancel is pressed the values in the textInput fields should not be saved to the original array of values.
My problem is that even when pressing Cancel the data in the original array seems to be updated.
This is the code:
`
const handlePress = (text, index) => {
const newSchedule = [...scheduleTempState]
newSchedule[index].value = text
setScheduleTempState(newSchedule)
}
const handlePress2 =()=>{
setScheduleTempState([]);
console.log("handlepress2")
setEdit(false)
}
const handlePress3 =()=>{
setScheduleTempState(scheduleState);
console.log("handlepress3")
setEdit(true)
}
return (
edit
?
<View style={styles.scheduleRow}>
<View style={styles.buttonView}>
<TouchableOpacity onPress = { ()=>{saveSchedule(projectId,scheduleState);updateClient() ;setEdit(false)}} >
<MaterialIcons name="save" size={16} color="green" />
</TouchableOpacity>
<TouchableOpacity onPress = { ()=>{handlePress2()}} >
<MaterialIcons name="cancel" size={16} color="red" />
</TouchableOpacity>
</View>
<View>
<FlatList
horizontal = {true}
data={scheduleTempState}
keyExtractor={item => item.id}
renderItem={({item, index}) => {
return (
<View style={styles.decimalInputView}>
<TextInput
style={styles.cellInput}
onChangeText={(text) => {handlePress(text, index)}}
value = {item.value} />
</View>
)
}}
/>
</View>
</View>
:
<View style={styles.scheduleRow}>
<View style={styles.buttonView}>
<TouchableOpacity onPress = { ()=>handlePress3()} >
<MaterialIcons name="edit" size={14} color="black" />
</TouchableOpacity>
</View>
<View >
<FlatList
horizontal={true}
data={scheduleState}
renderItem={renderScheduleItem}
keyExtractor={item => item.id}
/>
</View>
</View>
);
}`
I guess my problem has something to do with states not being updated, but i can not see how the edited values can be saved when i press cancel.
Problem:
You are updating the scheduleTempState by referencing your scheduleState. So when you mutate scheduleTempState, it also mutates the scheduleState.
Solution: Please use spread operator to scheduleState which can help to create a new copy of a reference.
const handlePress3 =()=>{
setScheduleTempState([...scheduleState]);
...
}
Suggestion: It would be better to use explanatory names for function. It will make the code more readable. For example:
onChangeText() instead of handlepress()
onCancelEditing() instead of handlepress2()
onEdit instead of handlepress3()
Hope you will get the idea.

React native Model popup with Check box list style Issue

I make check box list on Model Pop up by using react native multiple select checkbox list listed but it take full screen height i am not able to fix this issue please Any body help me
below is my Model Pop up Code
[![<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
}}
>
<View style={styles.ModalcenteredView}>
<View style={styles.ModalView}>
<View style={{height:'30%'}}>
<SelectMultiple
items={this.state.ParticipantCheckBox}
// renderLabel={renderLabel}
selectedItems={this.state.selectedFamilyMembers}
onSelectionsChange={this.SelectFamilyMembers} />
</View>
<View style={{flex:1, flexDirection:'row', flex:1,height:'1%'}}>
<TouchableHighlight style={{height:'5%'},\[styles.ModalCloseButton\] }
onPress={() => {
this.HideShowFamilyMemberModel(false);
}}
>
<Text style={styles.ModalCloseButtonTextStyle}>Close</Text>
</TouchableHighlight>
<TouchableHighlight style={{height:'5%'},\[styles.ModalSaveButton\] }
onPress={() => {
this.SaveFamilyMemberModel(false);
}}
>
<Text style={styles.ModalSaveButtonTextStyle}>Save</Text>
</TouchableHighlight>
</View>
</View>
</View>
</Modal>][1]][1]
You can make your modal like this
<Modal>
//this is parent view
<View>
//set this vide at the center of parent view and set height 40% or 30%
<View>
<ScrollView>
…
...
</ScrollView>
</View>
</View>
</Modal>

How to create custom tabs in the centre of the screen in React Native

I am doing react native application. In that, One screen have custom tabs in centre of the screen.
My screen is like,
top view around 200px height with some text lines showing.
After that, Custom tabs as picture attached.
After that, I am showing for first tab on tap flat list data.
I have checked online forums and tutorials, According to tab bar, We can show either top or bottom screen with tabs.
But, How to show tabs with customisation like my requirement.
I have 4 tabs, and each tab has same top view which I mentioned in above (some text lines), And if I tap on each tab, different data bottom page should show.
Like,
First tab with some flat list,
second tab with some text lines,
likewise all tabs has different layout in bottom screen.
As I am very new to react native. How to achieve this?
Due to privacy policy, I am unable to post complete screenshot.
Here is my code.
Screen.js
onClickTelugu = () => {
alert("you clicked onClickTelugu")
}
onClickTamil = () => {
alert("you clicked onClickTamil")
}
onClickHindi = () => {
alert("you clicked onClickHindi")
}
onClickEnglish = () => {
alert("you clicked onClickEnglish");
}
render(item) {
return (
<View style={styles.container}>
<View style ={styles.Container}>
<Text style={styles.textStyle}>
Some Text
</Text>
<View style={styles.somestyles}>
<TouchableOpacity onPress={this.onClick}>
<Image
style={styles.somestyles}
source={MenuImage}
/>
</TouchableOpacity>
<TouchableOpacity onPress={this.onClick}>
<Image
style={styles.menuIcon}
source={MenuImage}
/>
</TouchableOpacity>
</View>
</View>
<View style ={styles.somestyles}>
<View style={styles.somestyles}>
<Text style= {styles.somestyles}>
Some Text
</Text>
<Text style= {styles.somestyles}>
Some Text
</Text>
<Text style= {styles.somestyles} >
<Text style= {styles.somestyles}>
Some Text
</Text>
<Text style ={styles.somestyles}>
Some Text
</Text>
</Text>
</View>
<View style={styles.somestyles}>
<Text style={styles.somestyles}>some text</Text>
<Text style={styles.somestyles} >some text</Text>
<Text style={styles.somestyles}>date</Text>
<Text style={styles.somestyles}>some other date</Text>
</View>
</View>
</View>
<View style = {styles.tabContainer}>
<View style ={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClickTelugu}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClickTelugu}>Telugu</Text>
</View>
<View style={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClickTamil}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClickTamil}>Tamil</Text>
</View>
<View style={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClickHindi}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClickHindi}>Hindi</Text>
</View>
<View style={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={this.onClicEnglish}>
<Image
style={styles.tabItemsImages}
source={image}
/>
</TouchableOpacity>
<Text style={styles.tabTextItems} onPress={this.onClicEnglish}>English</Text>
</View>
</View>
<View style = {styles.flatListContainer}>
<FlatList style = {styles.flatList}
showsVerticalScrollIndicator = {true}
data = {this.state.dataArray}
renderItem = {({item}) => (
<TouchableWithoutFeedback onPress={ () => this.flatListItemHandler(item)}>
<Image
style={styles.flatListArrowImage}
source={image}
/>
</View>
<View style={styles.flatListItemInsideSeparator}>
)
}
ItemSeparatorComponent = {() => (
<View style={{height:15, backgroundColor:'#F8F8F8'}}/>
)}
/>
</View>
</View>
);
}
}
And I have to show overlay tab images too. If 1st tab tapped, 2,3,4
tabs images should be like delighted images. Like
highlighted/delighted images.
Ok you need to give this component it's own state to keep track of what you want to show in the lower section. then you should replace all of your onClick events with just one onClick event that you pass different languages to. For Example this.onClickTelugu becomes () => this.onClick('telugu'), then your onClick event should be:
onClick = (language) => {
this.setState({selectedLanguage: language})
}
then in your renderBottomContent function, you can render different things depending on what this.state.selectedLanguage is.
something like...
class MyComponent extends Component {
constructor(props) {
super(props)
this.state = { selectedLanguage: null}
}
onClick = (language) => {
this.setState({selectedLanguage: language})
}
renderBottomContent = () => {
const {selectedLanguge} = this.state
switch(selectedLanguage) {
case "telugu":
return <View><Text>Telugu</Text></View>
case "tamil":
return <View><Text>Tamil</Text></View>
case "hindi":
return <View><Text>Hindi</Text></View>
case "english":
return <View><Text>English</Text></View>
default:
return <View><Text>No Language Selected...</Text></View>
}
}
render() {
...
<View style ={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('telugu')}>
<Image style={styles.tabItemsImages} source={image} />
<Text style={styles.tabTextItems}>
Telugu
</Text>
</TouchableOpacity>
</View>
<View style ={styles.tabInnerContainer}>
<TouchableOpacity style={styles.tabIcons} onPress={() => this.onClick('tamil')}>
<Image style={styles.tabItemsImages} source={image} />
<Text style={styles.tabTextItems}>
Tamil
</Text>
</TouchableOpacity>
</View>
...
// after all the other tab buttons, render bottom content depending on the component state
{this.renderBottomContent()}
}
}