for printing receipts I am using Template strings so it looks like this
<TouchableHighlight onPress={() => {
var textToPrint =
`
--------------------------------
how to put image logo here
--------------------------------
${GLOBAL.USERNAME}
${new Date().getDate()}
Bestell ID: ${props.currentorder.order.OrderID}
--------------------------------
Kunde:
${props.currentorder.order.firstname} ${props.currentorder.order.lastname}
${props.currentorder.order.phone}
Adresse:
${props.currentorder.order.address}
${props.currentorder.order.zip} ${props.currentorder.order.city}
********************************
${(props.currentorder.order.payment==='cash'?"BARGELD":'Online – Bestellung schon bezahlt')}
********************************
--------------------------------`
BtPrint(textToPrint)
}}
>
<Text>Print</Text>
</TouchableHighlight>
Is there any way that on the begining of the recipe in this text I can put image logo?
Thank you so much
Related
Problem: I have 2 Functional Components component1,component2 and 1 FlatList having its own RenderComponent.
When I merge this 3 Components(Comp1, Comp2 & Flatlist) under one View I get output as seen in image 1. I expect an output as Image 2. How can this be achieved and Is this possible.
Image 1 (Output I am getting)
Image 2 (Expected Output)
What you can do is to add your 1st component explicitly at the first index of your Flatlist, 2nd component at the last index, and traverse the list additionally two more times.
E.g: If the length of data is 10 then you should consider the length 12 so this would work
// consider this is the data to show in flalist
const data = [{...}, {...}, {...}];
// Add single dummy item to the beginning of an array
data.unshift({...});
// Add single dummy item to the end of an array
data.push({...});
<FlatList
columnWrapperStyle={{justifyContent: 'space-between'}}
data={data}
numColumns={2}
renderItem={({ item, index }) => {
// first item
if (index === 0) {
return <ComponentOne />
}
// last item
if (index === data.length - 1) {
return <ComponentTwo />
}
return <Item />
}}
/>
I'm looking to store some content in the backend which contains a mix of tag components with styles. When the following renders, I just get '<Text style={{color:"#f00"}}>Hello World' as the output rather than 'Hello World'.
let fromDb = '<Text style={{color:"#f00"}}>Hello World</Text>';
return (
{fromDb}
)
How can I render or evaluate the tag string as code?
This might help
let fromDb = '<Text style={{color:"#f00"}}>Hello World</Text>';
return (
<View style={styles.container}>
{fromDb}
</View>
)
So basically I want to be able to collect all the values from multiple inputs and set that array as a state. Here is what I am currently working with:
this.state.basket.map(b => {
return (
<View>
<InputSpinner
style={styles.spinnerQty}
max={50}
min={1}
step={1}
rounded={false}
showBorder
colorMax={"#2a292d"}
colorMin={"#2a292d"}
value={b.qty}
onChange={num => {
this.setState({ popUpQty: num });
}}
/>
<View style={styles.hrLine}></View>
</View>
);
});
So I am iterating my basket and setting a spinner with a value from axios output. So there are now multiple InputSpinner with multiple values.
My question is, how can I collect all the values of the onChange, and push it to an array which will eventually become a state. Something like QuantityState: [] would be the values of all the InputSpinner. Hope that made sense. Any help is appreciated. Thanks!
PS. InputSpinner is an npm package from here.
Through this code you can dynamically add/update onChange number on it's particular array instance. num key will be added when a particular onChange trigger so at the end you will get its values which placed on it's index and if key not found that means onChange never triggered for that index
state = {
spinnerData : {},
basket: []
}
this.state.basket.map((b, index) => {
return (
<View>
<InputSpinner
style={styles.spinnerQty}
max={50}
min={1}
step={1}
rounded={false}
showBorder
colorMax={"#2a292d"}
colorMin={"#2a292d"}
value={b.qty}
onChange={num => {
const newbasket = [...this.state.basket];
newbasket[index]["num"] = num;
this.setState({ basket:newbasket });
}}
/>
<View style={styles.hrLine}></View>
</View>
);
});
Hi as shown in the picture you canno't see the full text however I don't want to decrease the fonsize for all other items.
Only if it they're greater that 16 in length.
Can I return the fontSize in my renderTitleStyle method or can I do in within the ListItem props e.g {infoText.length > 16 ? (fontSize: 12) : (fontSize: 32)} However I don't think this works.
renderTitleStyle = item => {
const infoText = item.location_from + item.location_to;
if (infoText.length > 12) {
// Return fontSize ???
}
console.warn(infoText.length);
};
<ListItem
style={styles.activeUser}
onPress={() => this.toggleModalConfirmTrip(item)}
roundAvatar
subtitle={item.user[0].name}
titleStyle={this.renderTitleStyle(item)}
title={`${item.location_from} to ${item.location_to} `}
....[![Example of text not fitting][1]][1]
You should be able to set styles dynamically by passing an array of styles with a style array element that depends on a state or a conditional.
<Text style={[styles.mainStyles, {fontSize: ((infoText && infoText.length) > 16 ? 12 :32) }]}>
{/*other elements*/}
</Text>
In your specific case i would try passing that condictional as property for ListItem Component.
titleStyle={this._renderItemTitleStyle(item)}
dont forget to create the function.
_renderItemTitleStyle = (item) => {
if (item && Object.keys(item).length) {
const infoText = item.location_from + item.location_to;
return {fontSize: (infoText.length > 16 ? 12 :32)}
}
console.warn("param item has no properties");
}
hey guys im using react native ImageCarahousal in that. I want to show my array of image in this they can be multiple or many . I need to show that in my imagecarahousal...
that is showing normally static image like this [{uri:'https://images.pexels.com/photos/889087/pexels-photo-889087.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'}]
how can I make it based on array of multiple images
<ImageCarousel
height={300}
delay={7000}
animate= "true"
indicatorSize={10}
indicatorColor="white"
images={
[this.props.navigation.state.params.itemimage.map
( ( item,i)=> {
{uri:item}
} ) ]
}
/>
Try this:
const { params } = this.props.navigation.state;
<ImageCarousel
height={300}
delay={7000}
animate= "true"
indicatorSize={10}
indicatorColor="white"
images={params.itemimage && params.itemimage.map(item => {uri:item})}
/>