In react-native-maps Marker allows a description props which should be string. But in my use case I have a description with html tags like this "<p>hello <strong>world</strong></p>". How can I show the html in Marker description? Currently It shows the whole string with tags.
I can remove the html tags using regex, but I really want the html tag's effect such as <b><strong> e.t.c
<MapView.Marker
/*--- other props ----*/
title={marker.name}
description={marker.description}
>
/*--- marker custom image ---*/
</MapView.Marker>
Note: I don't want to any third-party library for this.
Try with https://www.npmjs.com/package/react-native-render-html. I am not sure that it will work, but I use it for displaying HTML in the app.
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 an Image of the body I am using a <Image> Component for that, and I have to mark wound on the body Image, but the thing is I have used <TouchableOpacity> for gain touch on the Image. Please Help me out on this. Thanks in advance.
I'd suggest you use react-native-svg to render a path instead .. which will allow you to handle onPress event for the path
<Svg {/**props */}>
<Path
d="..." /** Path */
onPress={() => alert('Pressed!')}
/>
</Svg>
It'll also give you sharper looking image...
The onPress handler of TouchableOpacity receive a PressEvent as parameter. This object contains information about the press location.
https://reactnative.dev/docs/pressevent
Need to show the long text, which is retrieved from server.
I'm using web storm and react native 0.57
<Text>{this.state.responseText}</Text>
Should be able to view long text under the text tag. Why long text is not shown under Text component?
Yes, I was also facing same problem. Use WebView instead of text component.
<WebView
originWhitelist={['*']}
source={{html: this.state.responseText}}}
/>
I think you should use numberOfLine = {} property of text component.
you can edit style of your text component and make fontsize larger
<Text style={{fontSize: 40}}>{this.state.responseText}</Text>
I'm interested in determining if its possible for me to completely customize the drop-down that appears in response to a user typing text into a select2 text field (using the react-select component).
I want the text to generate output similar to what appears in Apple's Spotlight OS feature (see screenshot - in which I typed the text 'mini').
Is this possible using react-select and if so - how ? Are there samples ?
I found this repo ( https://github.com/bvaughn/react-virtualized-select/ ) which seems like it supports what I want to do - but its no longer supported.
Thanks
Dave
Of course you can customize the contents of the dropdown with the components framework implemented into react-select. You have to overwrite the Menu component to add new content to the dropdown. You might also have to set some styles with the styles api.
const Menu = ({ children , ...props }) => {
return <components.Menu>
<div> My custom content </div>
{children} // This contains the `MenuList` component with the options
</components.Menu>
}
<Select
{ ... }
components={{
Menu
}}
/>
To achieve something like Apples Spotlight feature you have to do some more advanced customisation. This example shows a basic implementation of how you could do it.
I am using the InputText component from react-native-paper. How do I add input masking without having to use another library? In the image below, I want to add an input mask for the mobile number, but I don't know how to do it without using another library, and if I use another library, then I won't have the material design input style. Please help.
Screenshot
You can use react-native-mask-input or any other mark library with react-native-paper. You can use render prop of Text Input to pass react-native-mask-input component such that
<TextInput
label="Phone number"
render={props =>
<TextInputMask
{...props}
mask="+[00] [000] [000] [000]"
/>
}
/>
Refer render of TextInput
HTH