<PDFDownloadLink/> Slowing Down Website In reactJS

<PDFDownloadLink/> Slowing Down Website In reactJS - javascript

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

Related

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>

TouchableOpacity doesnt work at all - react native

this is my code:
<TouchableOpacity style={{height:100,width:'100%'}} onPress={()=>this.aba()}>
<Text style={{position:'absolute',top:0,right:0,marginTop:10,marginRight:10,fontSize:18}}>total</Text>
<Text style={{position:'absolute',top:0,left:0,marginTop:10,marginLeft:10,fontSize:18,color:'#7fbe41'}}>100$</Text>
<View style={{bottom:0,position:'absolute',width:'100%',padding:10}}>
<Button success style={{alignSelf:'center',width:'100%',justifyContent:'center',}}>
<Text style={{textAlign:'center',color:'#fff',fontSize:18,zIndex:10,width:'100%',height:'100%'}}>continue</Text>
</Button>
</View>
</TouchableOpacity>
aba(){
console.log("masoud")
}
constructor(props) {
super(props);
this.state = {};
this.goTo = this.goTo.bind(this)
this.aba = this.aba.bind(this)
}
updated
all codes:
return (
<View style={{width:'100%',height:'100%'}}>
<Card style={{position:'absolute',bottom:0,height:100,width:'100%',marginBottom:0,marginLeft:0,marginRight:0,paddingLeft:0,paddingRight:0}}>
<CardItem style={{height:100,width:'100%',paddingLeft:0,paddingRight:0}}>
<TouchableOpacity style={{height:100,width:'100%'}} onPress={()=>this.aba()}>
<Text style={{position:'absolute',top:0,right:0,marginTop:10,marginRight:10,fontSize:18}}>مبلغ کل</Text>
<Text style={{position:'absolute',top:0,left:0,marginTop:10,marginLeft:10,fontSize:18,color:'#7fbe41'}}>۱۰۰۰ تومان</Text>
<View style={{bottom:0,position:'absolute',width:'100%',padding:10}}>
<Button success style={{alignSelf:'center',width:'100%',justifyContent:'center',}}>
<Text style={{textAlign:'center',color:'#fff',fontSize:18,zIndex:10,width:'100%',height:'100%'}}>ادامه</Text>
</Button>
</View>
</TouchableOpacity>
</CardItem>
</Card>
<ScrollView>
<Card style={{marginTop:10,marginRight:10,marginLeft:10,height:100,}}>
<CardItem style={{width:'100%',height:'100%',paddingTop:0,paddingBottom:0}}>
<Image resizeMode='stretch' style={{width:80,height:80,position:'absolute',right:0,top:0,marginRight:10,marginTop:10}} source={{uri: 'https://javacupcake.com/wp-content/uploads/2017/07/IceCreamConeCupcakes_0307.jpg'}} />
<Text style={{position:'absolute',top:0,right:0,marginTop:14,marginRight:100,fontWeight:'bold',fontSize:18}}>صندلی</Text>
<Text style={{position:'absolute',bottom:0,right:0,marginBottom:20,marginRight:100,fontWeight:'bold',color:"#ddd"}}>فروشگاه راد آراد</Text>
<View style={{width:40,position:'absolute',left:0,height:'100%'}}>
<View style={{height:'50%',width:'100%',backgroundColor:'#fa767b',alignItems:'center',justifyContent:'center'}}>
<Icon name="close" type="EvilIcons" style={{color:'#fff',alignSelf:'center',fontSize:20,paddingLeft:6}}/>
</View>
<View style={{height:'50%',width:'100%',backgroundColor:'#f5f5f5',flexDirection:'column',justifyContent:'center',alignItems:'center'}}>
<Text>۱</Text>
<Text>عدد</Text>
</View>
</View>
<Text style={{position:'absolute',left:0,top:0,marginTop:20,marginLeft:50,color:'#7fbe41'}}>۳۰۰.۰۰۰.۰۰۰ تومان</Text>
<Text style={{textDecorationLine: 'line-through',position:'absolute',left:0,top:0,marginTop:40,marginLeft:50,color:'#fa767b'}}>۳۰۰.۰۰۰.۰۰۰ تومان</Text>
</CardItem>
</Card>
</ScrollView>
</View>
);

Navigate to another stack navigator screen from a view not in the navigator

So I've got a view that contains both a stack navigator and a view at the bottom. The view at the bottom serves as a footer. Currently I'm trying to use a reference to the stack navigator but its not working. How do I trigger a screen navigation in the StackNavigator view from the footer view?
render() {
return (
<View style={styles.container}>
/*This is the Stack Navigator*/
<myNavigator.StackNavigation ref={(c)=>{this._stacky = c}} screenProps={{setNowPlaying:this.setNowPlaying.bind(this),
globalState:this.state,
showFooterPlayer:this.showFooterPlayer.bind(this),
playPauseSong:this.playPauseSong.bind(this),
seekToPosition:this.seekToPosition.bind(this)}}/>
/*This is the footer section*/
<TouchableOpacity onPress={()=>{console.log(this._stacky); this._stacky.navigation.navigate('Player')}} style={[styles.bottomFooterContainer, {height:this.state.showFooterPlayer?60: 0}]}>
<Image style={styles.headerImage} source={{uri:this.state.nowPlaying.image}} resizeMode="cover" />
<View style={styles.playerRight}>
<Text style={styles.songTitle} ellipsizeMode="tail" numberOfLines={1}>{this.state.nowPlaying.title}</Text>
{/* <Text style={styles.songTitle}>{counter}</Text> */}
<View style={styles.controlButtonsContainer}>
<TouchableOpacity><Image style={styles.controlButton} source={require('./app/images/previous.png')} resizeMode="cover" /></TouchableOpacity>
<TouchableOpacity onPress={this.playPauseSong}><Image style={styles.controlButton} source={this.state.isPlaying?pauseImage: playImage} resizeMode="cover" /></TouchableOpacity>
<TouchableOpacity><Image style={styles.controlButton} source={require('./app/images/next.png')} resizeMode="cover" /></TouchableOpacity>
</View>
</View>
</TouchableOpacity>
</View>
);
}

Develop Reference

JavaScript is the programming language of the Web.

<PDFDownloadLink/> Slowing Down Website In reactJS - javascript

Related

TouchableOpacity overwriting other buttons

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

How to display cards in two columns in React Native?

TouchableOpacity doesnt work at all - react native

Navigate to another stack navigator screen from a view not in the navigator

Categories

Resources