iam having a text string with characters like "__"(two underscores) in the string whenever i encounter the two underscores i want to replace them with a specific view like box and render it so for example:
str = "iam __ and i want to go to __"
so i want to render iam (want to render rectangular box here) and i want to go to (rectangular box here)
i have tried using the split function in js and split them by __ and tried pushing the jsx to array based on condition but it was rendering in different lines is there any better way to do it
code i tried:
const stringsArr = str.split('__');
const toRender = []
for(let i=0;i<stringsArr.length;i++){
toRender.push(<Text styles={styles.emptyBlock} />)
toRender.push(<Text>{stringsArr[i]}</Text>)
}
Components will render below each other by default. Wrap a View around each text line and give it a style of flexDirection: 'row' so that they render side by side. If you want it working like a paragraph, then apply flexWrap: 'wrap' as well.
Related
I want to create a summary page in react native with different items, which will be displayed through slider with card. Im using intro slider library.
I dont want to set the title and content with static text, but everything has to come from server as JSON data and map items to card.
like
content = [{"title": "Title 1", "item1":"value1", "item2":"value2"},{"title": "Title 2", "item1":"value1", "item2":"value2", "item3": "value3"},....]
render()
{ map(contents) =>item( implement card here and return)
}
What is best way to do this?
Need help with deciding json format and rendering it with map. No of items in each page, and it's name wont be be same always.
It should be a generic slider card which can display any title and items of any length and content.
Considering your case, I have developed a solution for you. Please try the following:
{contents.map((item, index) => (
<View key={index}>{item.index}</View>
))}
If this doesn't work then try
{contents.map((item, index) => (
<View key={index}>{item[index]}</View>
))}
This solution work regardless of the property name.
I have two editors on the screen, one read-only. What I want to do is allow the user to select content from the read-only editor and paste it into the current position of the other by clicking a button. (the logic may manipulate the text which is one reason I don't want to use the system's clipboard.)
So far I have the function that is able to paste the text like as follows. (I am using the Angular wrapper which explains the presence of the CKEditorComponent reference.
doPaste(pasteEvent: PasteEvent, editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
editor.model.change(writer => {
writer.insertText(pasteEvent.text, editor.model.document.selection.getFirstPosition() );
});
}
What I can't find from the documentation is how to extract the selected text. What I have so far is:
clickPasteSelectedPlain(editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
const selection = editor.model.document.selection;
console.log('clickPasteAll selection', selection);
console.log('clickPasteAll selectedcontent', editor.model.document.getSelectedContent);
}
The selection appears to change depending on what is selected in the editor's view. The getSelectedContent function is undefined. How do I get the content?
With a bit of poking around I figured out how to do this. I'll document it here on the chance that it will help someone down the road avoid the process of discovery that I went through.
On the source document I have a ckeditor element like this:
<div *ngIf="document">
<ckeditor #ckEditor
[editor]="Editor" [config]="ckconfig" [disabled]="true"
[(ngModel)]="document.text"></ckeditor>
<button mat-flat-button (click)="clickPasteSelectedPlain(ckEditor)">Paste Selected Text Plain</button>
</div>
In the component the function called on the click event is like this:
#Output() paste = new EventEmitter<PasteEvent>();
...
clickPasteSelectedPlain(editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
this.paste.emit({
content: editor.model.getSelectedContent(editor.model.document.selection),
obj: this.document,
quote: false
});
}
The PasteEvent is defined as an exported interface which I will omit here to save space. The content key will refer to a DocumentFragment.
Note that I am passing the CKEditorComponent as a parameter. You could also access it via an Angular #ViewChild declaration but note that my ckeditor is inside an *ngIf structure. I think that works well in Angular 6 but in the past I have had difficulty with #ViewChild references when the target was conditionally in the DOM. This method always works but use whatever method you want.
The event fired by the emit is processed with a method that looks like this:
doPaste(pasteEvent: PasteEvent, editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
editor.model.insertContent(pasteEvent.content);
}
Because the content is a DocumentFragment the paste operation will include all formatting and text attributes contained in the selected source. But that's all there is to it.
I need to align this long text and it should start from left. As shown in the following image the end of the text is nicely displayed and start is hidden.
How to start the text from left,
alignText: 'left'
didnt work.
Geocoder.geocodePosition({
lat: origin.latitude,
lng: origin.longitude
}).then(res => {
console.log(res[0]);
this._destination.setAddressText(res[0].formattedAddress);
});
Here the formattedAddress is very long, I need to show it from the begining.
By default this is working in iOS.
try maxLength. assign value for maxlength according to visible text size. Otherwise use multiline=true if you want to show the full text.
ex:
<TextInput maxLength={50} />
Read more about it:
https://reactnative.dev/docs/textinput.html#maxlength
https://reactnative.dev/docs/textinput.html#multiline
You need to learn about flex box system in react native :
flexDirection : 'row' -> used to set the text in row direction.
alignSelf : 'flex-start' -> used to set the start from the left.
Also please read it from there React Native Basics flexbox
I am using Tcomb Form Native for forms and putting auto tag for placeholder in the options. However I would like to change the style for the text displayed. Is it possible to change that ?
var options = {
auto: 'placeholders',
};
<TextInput/> takes a prop of placeholderTextColor additionally the placeholder text should inherit whatever styles you put on the TextInput see the following example here: https://rnplay.org/apps/Yyfuag
In React Native, is there a way to toggle visibility of an element?
For example:
<Text visibility={this.state.isVisible}>Visibility depends on state</Text>
this might be crude but it works.
under render
var visibletext = null;
if (this.state.isVisible) {
visibletext = (<Text>Visibility depends on state</Text>);
}
then, under return part
<View style={styles.container}>
{visibletext}
</View>
There are various ways to do this. See the Conditional Rendering guide at the React.js website, which explains different options.
One simple way is to use the && operator inline:
{this.state.isVisible &&
<Text>Something</Text>
}
Note that with the conditional rendering approach, if you have (for example) some views centered vertically, this views will suddenly move up or down when the text appears (to give room for the new view). Another approach that avoids this jump is to either change the text color or set the text to empty string:
// Change the text color
<Text style={this.state.isVisible ? {color: 'black'} : {color: 'white'}}>Something</Text>
// Set text to empty string
<Text>{this.state.isVisible ? "Something" : ""}</Text>
Changing the color of the text is the best way to make sure that the other views don't suddenly move when showing the text, given that the text is already occupying the layout space it needs.