I have four files that look similar to these:
index.xml
<Alloy>
<Window>
<View class="container">
<View id="report">
<!-- Adds a textfield for name entry -->
<Require type="view" src="textfield" id="name"/>
<Button id="checkNameValue" title="Check Value" width="100" height="40" onClick="checkname"/>
</View>
</View>
</Window>
</Alloy>
index.js
function checkname(e) {
alert("Your name is " + $.name.getView('nameTextField').value);
}
textfield.xml
<Alloy>
<View id="nameView">
</View>
</Alloy>
textfield.js
var nameTextField = Titanium.UI.createTextField({
hintText:"Type your name",
height:40,
width:300,
top:20,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
$.nameView.add(nameTextField);
When I try clicking the Button to read the name value, I get an error:
message = "'undefined' is not an object (evaluating $.name.getView(\"nameTextField\").value')";
What is going wrong and how can I fix this?
try changing textfield.js to
$.nameTextField = Titanium.UI.createTextField({
hintText:"Type your name",
height:40,
width:300,
top:20,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
$.nameView.add($.nameTextField);
Then your alert code should look like this
alert("Your name is " + $.name.nameTextField.value);
Simply you can add your Textfield into the included file as well like
textfield.xml
<Alloy>
<View id="nameView">
<TextField value="" hintText="Type Here" id="textfield" />
</View>
</Alloy>
Now you can access the textfield easily into your index file as :
index.js
alert($.name.textfield.value);
Related
I have a download pdf button that when clicked will populate the pdf with onStartPDFGeneration but in order to download the PDF, I need to wrap that button with PDFDownloadLink from react-pdf/renderer.
The first time I click the link, nothing happened because the data is getting processed. If I press it again the pdf will generate with that data and download.
How can I get the PDFDownloadLink to wait for all the data to populate
<PDFDownloadLink document={<MyDocument />} fileName="example.pdf">
<Button
onClick={onStartPDFGeneration}
/>
</PDFDownloadLink>
pdfState.data is coming from redux
qrCodeArray is in local state with useState
const MyDocument = () => {
return (
<>
{pdfState.data && (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.headerSection}>
<Text>test</Text>
</View>
<View>
<Image style={{ width: "40%" }} src={qrCodeArray[0]} />
</View>
</Page>
</Document>
)}
</>
);
};
I have a project, where I am using React-pdf to generate a document. I want to add an SVG logo to this document. According to the React-pdf documentation, they have an element called
Svg that is a container that defines a new coordinate system and viewport, and it is used as the outermost element of SVG documents. From what I understand I should somehow convert a normal svg to the type of element that React-pdf uses, in order to make it work? (If so, how could I accomplish this? Can I use some sort of external library?). My code is below(Now it gives me an error because I can`t use the Image from React-pdf to render svg. If I use the Image element with src of an image that is in the format .jpeg or .png it works.
import {
Page,
Text,
View,
Document,
StyleSheet,
Image,
Svg,
PDFViewer,
} from "#react-pdf/renderer";
...
return (
<div>
<PDFViewer style={{ width: "98vw", height: "98vh" }}>
<Document title="TITLE" author="AUTHOR">
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Svg>
<Image src={logoUrl} style={styles.logo} />
</Svg>
<Text>My PDF</Text>
</View>
</Page>
</Document>
</PDFViewer>
</div>
);
...
An easy way to do this is to put your SVG file in a folder in your React Project. And then import it into your app.js or wherever you need it using an img tag
import myIcon from 'icons/myIcon.svg';
import {
Page,
Text,
View,
Document,
StyleSheet,
Image,
Svg,
PDFViewer,
} from "#react-pdf/renderer";
import myIcon from 'icons/myIcon.svg'
...
return (
<div>
<PDFViewer style={{ width: "98vw", height: "98vh" }}>
<Document title="TITLE" author="AUTHOR">
<Page size="A4" style={styles.page}>
<View style={styles.section}>
//CALL YOUR SVG USING IMG TAG
<img src={myIcon} />
<Text>My PDF</Text>
</View>
</Page>
</Document>
</PDFViewer>
</div>
);
...
I replaced your SVG TAG with <img src={myIcon} />
You will need to use actual svg code and any svg related tags. It is all documented pretty well here: https://react-pdf.org/svg
Example in React:
import React from 'react';
import {
Svg,
Polygon,
Rect,
Page,
Document,
} from '#react-pdf/renderer';
const ExampleSvg = () => (
<Svg width="200" height="200" viewBox="-100 -100 200 250">
<Polygon points="0,0 80,120 -80,120" fill="#234236" />
<Polygon points="0,-40 60,60 -60,60" fill="#0C5C4C" />
<Polygon points="0,-80 40,0 -40,0" fill="#38755B" />
<Rect x="-20" y="120" width="40" height="30" fill="#A32B2D" />
</Svg>
);
const PdfToShow = () => (
<Document>
<Page size="A4">
<ExampleSvg />
</Page>
</Document>
);
export default PdfToShow;
This is very old but, as far as I can see the Element from react pdf expects actual svg code, you are giving it and img tag which is invalid.
Image Magick can convert your svg to a png. This answer might help: How to convert a SVG to a PNG with ImageMagick?
I'm using a Button component from react-native-elements and for the title prop I would like to underline one of the words, is this possible?
button.js:
<Button
buttonStyle={styles.buttonStyle}
titleStyle={styles.titleStyle}
containerStyle={styles.containerStyle}
title={title}
onPress={onPress}
disabled={disabled}
disabledStyle={[styles.disabledStyle]}
/>
I'm using it like this:
<Button
title={'First line \nSecond line'} // <- How to underline First & Second?
onPress={() => console.log('pressed button')}
/>
How do I underline the words First and Second?
I tried doing title={`${First} line \n${Second} line`} where First and Second is a <Text style={{textDecoration: 'underline}}>First</Text> but I'm getting [object, Object] since it's not an expression
<Button> implementation in React Native Elements indeed does support passing component as title property value - but in your code you try to pass those as text. That's what you might try instead:
const ButtonTitle = (
<>
<Text style={{textDecoration: 'underline'}}>First</Text>
<Text style={{textDecoration: 'underline'}}>Second</Text>
</>
)
<Button title={ButtonTitle} />
For situations like this, I generally will use React.ReactNode as the type for title instead of a string. This will be backwards-compatible, as strings are valid ReactNodes, but it also allows you to do this:
// style example
const style = Stylesheet.create({
underline: { textDecoration: 'underline' },
});
// Implementation in component
title={
<Text>
<Text style={style.underline}>
First line
</Text>
<Text style={style.underline}>
Second line
</Text>
</Text>
}
Reminder that the original will also still work as ReactNode is a type which includes string:
title={'First line \nSecond line'}
I am adding two props (textProp & imgProp) to my custom component, but I keep on getting this error <Image> component cant contain children. This is what I have soo far
function TextImg(textprop, imgprop) {
return(
<div>
<div>
<Text>{textprop.text}</Text>
</div>
<div>
<Image source={imgprop.imageUri}>!</Image>
</div>
</div>
);
}
Can anyone help me regarding this, Thanks!
Images (img) are considered empty elements and are self-closing, and required to be per the html spec.
https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
The react native Image has the same restriction.
They can't wrap anything or have any children nodes. The "!" is the issue.
<Image source={imgprop.imageUri}>!</Image>
Try instead
<Image source={imgprop.imageUri} />
If you need to display an "!" then it'll have to be outside the image.
if you need to show "!" in image,
Try
<View>
<Image source={img} />
<Text
style={{
position: "absolute",
// some stylng
}}
>
!
</Text>
</View>
I will be very happy if you can help me. I am making react native expo app. I have code that displays information from the database. When I inserted the code to add an image, I had an error, why?
Error:
Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...? (79:12)
<View>
<ListView
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparator}
renderRow={(rowData) =>
<Image
source={require('../assets/rose-blue-flower-rose-blooms-67636.jpeg')}
/>
<Text
onPress={() => {
/* 1. Navigate to the Details route with params */
this.props.navigation.navigate('Details', {
otherParam: rowData.article_title,
});
}}
>{rowData.article_title}</Text>
}
/>
</View>
<View>
<ListView
dataSource={this.state.dataSource}
renderSeparator={this.ListViewItemSeparator}
renderRow={rowData => (
<>
<Image
source={require("../assets/rose-blue-flower-rose-blooms-67636.jpeg")}
/>
<Text
onPress={() => {
/* 1. Navigate to the Details route with params */
this.props.navigation.navigate("Details", {
otherParam: rowData.article_title,
});
}}
>
{rowData.article_title}
</Text>
</>
)}
/>
</View>;
This issue is that you're rendering in your expression two components that are on the same level. so you must have a JSX fragment or another div as a single parent in your return statement of the renderRow.. I believe the above code should solve the problem
You just need to wrap the elements with a Fragment element. The reason why is ListView requires one element to work off of for a "row". You can simulate this with the fragment :)
<React.Fragment>
<Image />
<Text />
</React.Fragment>
theres some nice syntax for fragments if your compiler supports it
<>
</>
To apply it to your code
<ListView
dataSource={this.state.dataSource}
renderSeparator={this.ListViewItemSeparator}
renderRow={rowData => (
<React.Fragment>
<Image
source={require("../assets/rose-blue-flower-rose-blooms-67636.jpeg")}
/>
<Text
onPress={() => {
/* 1. Navigate to the Details route with params */
this.props.navigation.navigate("Details", {
otherParam: rowData.article_title,
});
}}
>
{rowData.article_title}
</Text>
</ React.Fragment>
)}
/>