I want to use custom emoji in my application, so that emojis are consistent over different platforms. So I have to add some small images in TextInput component to achieve this. However it is not possible in React Native yet.
I mean something like this:
<TextInput>
<Text>Some Text Here...</Text>
<Image
source={require('./src/assets/1f602.png')}
style={styles.image}
/>
</TextInput>
This doesn't show image on IOS, and has some problems Android too. I know this is possible in both Android and IOS but React Native implementation doesn't allow us to do so.
I have read these posts and issues:
How to insert custom emoji (small pictures) into Textinput of React Native?
https://github.com/facebook/react-native/issues/17468
Can you help me achieve what I want? How to use custom emoji in TextInput?
It is not possible to use images inside textInput. Maybe it can be added in the future versions of react native.
But for now, we can use some RTE(Rich Text Editor) like this one. This way we can add images into text editor and work with it with ease.
Related
I want to create a button using Skia library in React Native. The width of button should expand acconding to text or content in it.
Thanks.
If you're aiming for creating a button with the Skia library in React Native you probably have some drawing magic on your mind. If you really need this for a button then I would advice to check out the excellent tutorials of William Candillon: https://www.youtube.com/c/wcandillon/videos
In the example shown here at Shopify you can already find some tips towards building the button you would need: https://shopify.engineering/react-native-skia-shopify
I have a webpage I made in React. It renders some charts. The charts will appear slightly differently depending if the user is viewing the page on desktop or mobile.
I have used html2canvas and jsPDF to export the page to PDF. The problem is that I ALWAYS want to export the charts in the format seen in mobile view.
I have thought of the following:
rendering the mobile view inside a div with display set to none and using that div as the input to html2canvas. This does not work. I get an error.
Trying the above, but instead of using the hidden div, just send the div as the input to html2canvas inline. I do not know if you can even do this.
Using React-pdf to output the pdf. The problem here is that I do not know how to embed the charts when using react-pdf.
Does anyone have an idea of what I can try?
Thank you.
I wanted to know if there is any other type of marker that comes with react leaflet apart from the default blue one. Also without uploading any icon image, how can I customize the existing marker icon? I have already tried to refer many online sources but everywhere it consists of uploading your own marker icon which I would not like to do in my project. Any help would be highly appreciated, thanks!
There is also the CircleMarker and... that is it.
The Circle Marker offers some style customization though.
Then you have plenty plugins, not sure how to use them with React Leaflet. But it might be not too difficult given that you just need to specify an icon prop on the Marker.
i got only one Typography element that uses a different font than the rest of the application , could someone advise what's the best way to get the font from google font website for jus this component.
If you want to use google font, the easiest way is to add the cdn link in the <head> of your html. Then you may use like this:
<Typography sx={{fontFamily: "Merriweather" }}>
Sample Text
</Typography>
I have an iOS app in which, we take user pics, and then allowed them to put some random custom images above the pics.
While placing these custom pics above real image, they can rotate, scale these custom image. ( See this StickerViewIOS )
Now I am looking for exact same solution while making ReactNative.
Tried lot of Googling but no results found.
Just want to ask community if any of the ReactNative component available for the same.
Thanks,
There's no rotation support, but I did something similar for an app I made for Chain React.
Here's the image component that supports gestures: https://github.com/cball/ChainReactPhotobomb/blob/master/App/Components/TransformableImage.js
To overlay them on top, just use the ImageBackground Component