Develop Reference

Reset form button Rect Native

I'm trying to create a form with a reset button in order to clear all fields, I'm building a Class Component I don't like the idea of using setState in each field, do you know any better way to clear this form?
simplified code example:
class Registration extends React.Component {
constructor(){
super();
this.state= {}
}
render() {
return (
<View >
<View >
<TouchableOpacity
style={{ styles.button }}
onPress={ } >
<Text style={{ style.text }} >RESET</Text>
</TouchableOpacity>
</View>
<ScrollView>
<View >
<TextInput
ref={this.textInput}
style={{ styles.input }}
placeholder='Name'
onChangeText={(text) => { }}
/>
</View>
<View >
<TextInput
style={{ styles.input}}
onChangeText={(text) => { }}
placeholder='Username'
/>
</View>
<View >
<TextInput
style={{ styles.input}}
onChangeText={(text) => { }}
placeholder='password'
/>
</View>
<View >
<TextInput
style={{ styles.input}}
onChangeText={(text) => { }}
placeholder='email'
/>
</View>
.
.
.
</ScrollView>
</View>
);
}
}

<PDFDownloadLink/> Slowing Down Website In reactJS

I want my users to be able to click a button to download a pdf file after they have completed an operation.
But when I put the <PDFDownloadLink/> component it slows down the website tremendesouly.
I believe it is because component is being re rendered several times. But how do I stop it from doing that and still be able to download the pdf?
What am I doing wrong?
here is my code:
import { Document, Page, Text, View, StyleSheet, Image, PDFViewer, PDFDownloadLink } from '#react-pdf/renderer';
// Create Document Component
const MyDocument = () => (
<Document>
<Page size="A4" orientation="landscape" style={styles.page}>
<View style={styles.sectionHead}>
<Image style={styles.image} src={logo}/>
<Text style={styles.freightCode}>{freightType}</Text>
<View style={styles.headDate}>
</View>
</View>
{/*The body section of the pdf*/}
<View style={styles.sectionInfo}>
<View style={styles.sectionInfo1}>
<Text style={styles.sectionInfoHeader}>COLLECTION:</Text>
<Text style={styles.sectionInfoText}>{collname}</Text>
<Text style={styles.sectionInfoText}>{collcompany}</Text>
<Text style={styles.sectionInfoText}>{colladdress}</Text>
<Text style={styles.sectionInfoText}>{collphone}</Text>
<Text style={styles.sectionInfoText}>{collemail}</Text>
</View>
<View style={styles.sectionInfo2}>
<Text style={styles.countryBlock}>{collcountry}</Text>
<Text style={styles.locationBlock}>{collcity}</Text>
</View>
</View>
{/*The body section of the pdf*/}
<View style={styles.sectionCodeLocation}>
<Text style={styles.collDelCode}>{collcountrycode} - {freightType} - {delcountrycode}</Text>
</View>
<View style={styles.sectionInfo}>
<View style={styles.sectionInfo1}>
<Text>DELIVERY:</Text>
<Text style={styles.sectionInfoText}>{delname}</Text>
<Text style={styles.sectionInfoText}>{delcompany}</Text>
<Text style={styles.sectionInfoText}>{deladdress}</Text>
<Text style={styles.sectionInfoText}>{delphone}</Text>
<Text style={styles.sectionInfoText}>{delemail}</Text>
</View>
<View style={styles.sectionInfo2}>
<Text style={styles.countryBlock}>{delcountry}</Text>
<Text style={styles.locationBlock}>{delcity}</Text>
</View>
</View>
{/*The product section of the pdf*/}
<View style={styles.sectionDetail}>
<View style={styles.sectionInfo1}>
<Text style={styles.weightCode}>Weight: {rangeval}</Text>
<Text style={styles.weightCode}>Content: {shipContent}</Text>
</View>
<View style={styles.sectionInfo2}>
<Text style={styles.weightCode}>Pieces: {pieces}</Text>
<Text style={styles.weightCode}>Value: {shipValue} BHD</Text>
</View>
</View>
{/*The product section of the pdf*/}
<View style={styles.sectionAWB}>
<Image style={styles.barcode} src={barcode}/>
</View>
{
<View style={styles.footerDetail}>
<Text>*Freight DOC* </Text>
<Text>{getCurrentDate()}</Text>
</View>}
</Page>
</Document>
);
return(
<li><PDFDownloadLink document={<MyDocument/>} fileName="waybill.pdf">{({ blob, url, loading, error }) => (loading ? 'Download Waybill' : 'Download Waybill')}</PDFDownloadLink></li>
)

TouchableOpacity overwriting other buttons

In my component, I was rendering a button for each Item. It was working. However, when I wrap all of it in a touchable TouchableOpacity, the button no longer works. Everything is the touchable opacity now. How can I still use the button?
return (
<TouchableOpacity onPress= {()=> console.log('Hello')}>
<View style={styles.item} key={item.id}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}}></Thumbnail>
<View style={styles.nameNumber}>
<Text style={styles.userName}>{userName}</Text>
</View>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteContact(item.id)}
>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
</TouchableOpacity>
);
},

Change like this? (Wrap the tag except the button?)
return (
<View style={styles.item} key={item.id}>
<TouchableOpacity onPress= {()=> console.log('Hello')}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}}></Thumbnail>
<View style={styles.nameNumber}>
<Text style={styles.userName}>{userName}</Text>
</View>
</TouchableOpacity>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteContact(item.id)}
>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
);
},

How to create a Button that Change Background Color onPress in react native?

How can i create a button/TouchableOpacity that change the background color of style={styles.view} ?
<View style={styles.view}>
{user &&
<>
<TouchableOpacity onPress={carregaUsuarioAnonimo}>
<Image
style={styles.avatar}
source={{ uri: user.picture }} />
</TouchableOpacity>
<Text style={styles.nome_usuario}>{user.name}</Text>
</>
}
<ScrollView style={styles.scrollview} ref={(view) => { setScrollview(view) }}>
{
mensagens.length > 0 && mensagens.map(item => (
<View key={item.id} style={styles.linha_conversa}>
<Image style={styles.avatar_conversa} source={{ uri: item.avatar }} />
<View style={{ flexDirection: 'column', marginTop: 5 }}>
<Text style={{ fontSize: 12, color: '#999' }}>{item.usuario}</Text>
{typeof (item.mensagem) == "string" ?
<Text>{item.mensagem}</Text>
:
<Text> </Text>
}
</View>
</View>
))
}
</ScrollView>
<View style={styles.footer}>
<TextInput
style={styles.input_mensagem}
onChangeText={text => setCaixaTexto(text)}
value={caixaTexto} />
<TouchableOpacity onPress={salvar}>
<Ionicons style={{ margin: 3 }} name="md-send" size={32} color={'#999'} />
</TouchableOpacity>
</View>
</View>)

you can make a condition inside the style, like that:
create a boolean inside your state and change it value to true when the button is clicked.
Inside your Touchable, drop the condition.
style={
this.state.buttonCliked ? styles.backgroundBlue :
styles.backgroundGreen
}
I hope it helps you.

This is an example:-
state={isClicked:false}
checkToChangeStyle=()=>{
this.setState({isClicked:!this.state.isClicked})
}
return(
<TouchableOpacity onPress={this.checkToChangeStyle}
style={this.state.isClicked ? styles.backGround1 : styles.backGround2}>
<Text>Your Button</Text>
</TouchableOpacity>
)
const styles=StylesSheet.create({
backGround1:{backgroundColor:'green'},
backGround2:{backgroundColor:'red'},
})

How to display cards in two columns in React Native?

I have this code that makes cards but it only displays three cards and does not display the fourth card and it does not display cards in 2 columns.
Is there any way to change a code a bit so that it can display cards in 2 columns and display all cards? I have tried squeaking the code by changing Stylesheet.create with different options but due to lack of knowledge and experience, I cannot implement it.
import React from 'react'
import { Card, ListItem, Button, Icon } from 'react-native-elements';
import {ScrollView, StyleSheet, Text,Image, TouchableOpacity, View} from 'react-native';
import { Ionicons, AntDesign } from '#expo/vector-icons';
class App extends React.Component{
render(){
return(
<ScrollView>
<View style = {styles.container}>
<Card
image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}} style ={styles.item}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row', justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
<Card
image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}} style ={styles.item}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
<Card
image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}} style ={styles.item}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
<Card
image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}} style ={styles.item}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
</View>
</ScrollView>
)
}
}
export default App;
const styles = StyleSheet.create({
container:{
flexDirection: 'row',
alignContent:'stretch',
},
item:{
width: '50%'
}
})

You can use flatlist instead.
Code:
<FlatList style={{margin:5}}
data={this.state.items}
numColumns={2} <-- you can change number of columns by changing this value
keyExtractor={(item, index) => item.id }
renderItem={(item) =>
<Card /> <-- render your card component here
}
/>

container:{
flexDirection: 'row',
flexWrap: 'wrap',
},

Simplest way is to divide it in 2 views if you have limited/fixed number of cards
<View style={{flexDirection: 'column'}}>
<View style={{flexDirection: 'row'}}>
<Card1 style={{flex:1}}/>
<Card2 style={{flex:1}}/>
</View>
<View style={{flexDirection: 'row'}}>
<Card3 style={{flex:1}}/>
<Card4 style={{flex:1}}/>
</View>
<View>

You need to wrap your Card in two View parts
Changed code
<View style = {styles.container}>
<View style ={styles.item}>
<Card
image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row', justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
<Card
image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}} style ={styles.item}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
</View>
<View style ={styles.item}>
<Card
image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
<Card
image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}} style ={styles.item}>
<Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
$299.99
</Text>
<AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
<Text>
Grey Suit
</Text>
</Card>
</View>
</View>