I want to add some local images(emojis) to pell rich editor component. I don't want to use Rich Toolbar, and have some custom emoji picker to select the emoji.
When user selects an emoji, I want to show an image for that emoji in the rich editor. These images are located locally in the project, so I tried insertImage method but cannot use it properly.
I have used insertImage this way:
editorRef.current?.insertImage(
'./1f602.png',
'width: 64px; height: 64px',
)
But it doesn't work.
How can I add a local image to pell rich editor?
I solved it like...
import ImgToBase64 from 'react-native-image-base64';
import ImagePicker from "react-native-image-crop-picker";
openGalleryClickProfile() {
ImagePicker.openPicker({
width: 300,
height: 400,
cropping: true,
}).then((image) => {
console.log("Imagemime", image);
this.onPressAddImage(image)
});
}
onPressAddImage(image){
ImgToBase64.getBase64String(image.path)
.then((base64String) => {
const str = `data:${image.mime};base64,${base64String}`
this.richText.current?.insertImage(
str
);
})
.catch((err) => {
console.log("base64:Image:", err)
})};
Related
I cannot find a way to change the style the IconButton of the status: 'error' Toast component in native base v3, which under the hood is using an IconButton component.
Here is the link to the main Toast functions such as useToast and their props
The simplified code to render a toast looks like the following:
import { useToast } from 'native-base';
...
const Toast = useToast():
...
Toast.show({
title: 'title',
status: 'error',
style: { backgroundColor: 'blue.200' },
})
But how would I increase the padding of the close icon button for example? It would be nice to do something like
I understand I can use the render prop to render a custom component, but I would prefer to use the default styling from native base and my extended theme - instead of having to style and render a component that looks exactly the same as the current Toast. This poses an issue if there are default style changes from native base or the app's extended theme, as changes would have to be hardcoded and changed in this render fn as well. Which is not practical!
Toast.show({
style: {
_icon: {
padding: 10,
},
}
// or
iconButtonStyle: { padding: 10 },
})
I can extend the theme and set a default style for IconButton component like so, but this would change every single IconButton in the app - which is not practical.
const myTheme = extendTheme({
components: {
IconButton: {
baseStyle: {
rounded: 'full',
padding: 10,
},
},
...
Is it possible to change the base styles like so?
const myTheme = extendTheme({
components: {
Toast: {
baseStyle: {
_icon: {
padding: 10,
},
},
},
...
It would be great to know how to change the styling of either:
the icon button of one specific Toast component (like in toast.show() above)
or the default styling for the close icon button of all Toast's, but not other IconButtons
Thanks!
I have a qr-code in my react-native project from react-native-qrcode-svg like this:
<QRCode
value={singleTicketResponse.voucher}
size={width * 0.5}
getRef={(c) => (svg = c)}
/>;
I want to save this QR to the gallery! I use this code for saving it to gallery!
svg.toDataURL((data) => {
RNFS.writeFile(
RNFS.CachesDirectoryPath + `/${tracking_code}.png`,
data,
"base64"
)
.then((success) => {
return CameraRoll.save(
RNFS.CachesDirectoryPath + `/${tracking_code}.png`,
"photo"
);
})
.then(() => {
onClose();
})
.catch((e) => {
console.log("saveToGallery", e);
});
});
Now I want to save this QR with white background in the gallery!
Because now, I save QR to gallery and gallery show this in black background and scanner does not detect QR-code!!! Is there any solution??
In other words, how to combine two images (white background and QR-code) or how to set a background for this image??
You can simply add quietZone props to QRCode component. This props is the margin around the QR-code and when yo save the QR it is shown!!
<QRCode
value={singleTicketResponse.voucher}
size={width * 0.5}
quietZone={10} // this props
getRef={c => (svg = c)}
/>
Not sure if I'm doing this the right way, but the problem I'm trying to solve is to have a page counter on every page (using puppeteer footerTemplate), and on the last page, a standard disclaimer produced via the regular html.
As can be seen in the below screenshot, the brown border is from the html tag. The blue border from my footer and the black border is from the footerTemplate.
This is the current code. I thought that using a transparent background might work, but no luck so far.
Open to other suggestions as well, but everything I tried so far have failed due to the disclaimer should only be on the last page.
const page = await browser.newPage()
await page.setContent(html, { waitUntil: 'networkidle2' })
await page.evaluate(() => document.body.style.background = 'transparent');
const buffer = await page.pdf({
format: 'A4',
displayHeaderFooter: true,
headerTemplate: '<span></span>',
footerTemplate: '<footer html code>',
printBackground: true,
omitBackground: true,
margin: {
top: '40px',
bottom: '40px',
left: '50px',
right: '50px',
}
})
I was wondering, is it possible to add a react component as the content?
I added the component inside the overlay like so -
this.player.overlay({
content: <SomeReactComponent />,
align: 'bottom-left',
overlays: [{
start: 'play',
end: 'end'
}]
});
and the SomeReactComponent is just a react component for a dynamic image renderer that looks like this
import like from './like.png';
import love from './love.png';
import neutral from './neutral.png';
class SomeReactComponent extends Component {
getImage(pic) {
const image = pic;
return image;
}
render() {
const pic = [love, like, neutral];
return (
<div>
{ sentimentsArray.map(sentiment =>
<img src={this.getImage(pic)} style={{ width: '75%', height: '75%', objectFit: 'scale-down' }} />
)}
</div>
);
}
}
When i call this.player.overlay in my console, it says the overlays.options.content is a Symbol of React.element, however, I'm not getting anything as an overlay
It's not possible to use React component for this property unfortunately, but only string or node element. Take a look to the doc for more information.
How can I apply a dynamic width and height to a react-bootstrap modal window?
I have checked the react-bootstrap docs here but could not figure out how to do that.
Actually the value of width and height props would be dynamic (could be any values) as this will be a reusable component in my app (to be used on many pages) thus can't apply width/height through some CSS class.
'bsSize' property as mentioned in docs also not working, although predefined sizes of xs, md, lg is not what I exactly want, rather I need width and height to be set on modal via props.
Here is my sample JSX code:
var MyWindow = React.createClass({
getInitialState() {
return { show: true };
},
close() {
this.setState({ show: false });
},
open() {
this.setState({ show: true });
},
save() {
},
render: function () {
var Button = ReactBootstrap.Button,
Modal = ReactBootstrap.Modal,
ModalBody = ReactBootstrap.ModalBody,
ModalHeader = ReactBootstrap.ModalHeader,
ModalFooter = ReactBootstrap.ModalFooter,
ModalTitle = ReactBootstrap.ModalTitle;
return (
<Modal show={this.state.show} onHide={this.close}>
<ModalHeader closeButton>
<ModalTitle>My Cool Window</ModalTitle>
</ModalHeader>
<ModalBody>
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus</p>
</ModalBody>
<ModalFooter>
<Button onClick={this.close}>Cancel</Button>
<Button bsStyle="primary" onClick={this.save}>Save</Button>
</ModalFooter>
</Modal>
);
}
});
React.render(<MyWindow width={700} height={400} />, mountNode);
According to its documentation, you have to customize your own css class to achieve the style you want via modal's prop dialogClassName.
So we might have my.jsx code below:
<Modal dialogClassName="my-modal">
</Modal>
With my.css below:
.my-modal {
width: 90vw /* Occupy the 90% of the screen width */
max-width: 90vw;
}
Then you will have your custmized modal!
.my-modal{
min-width: 50%
}
Works for me!!!
The other mentioned solution only works for setting the width.
For editing the height, you need to add your custom css class to the contentClassName attribute.
For Example:
<Modal contentClassName="modal-height"></Modal>
Css Class:
.modal-height {
height: 70%;
}
For editing the width you need to add your custom css class to the dialogClassName attribute.
For Example:
<Modal dialogClassName="modal-width"></Modal>
Css Class:
.modal-width {
width: 70%;
}
Possible Issues:
Sometimes you will have to use !important to over-ride bootstrap imposed CSS, so experiment with that as well.
Credits: Found the solution here.