I need to add a square frame in the middle of the viewfinder of the react native camera view. There is not information about it in the repository also. And questions there is not being answered also.
Which module you are using? react-native-camera or react-native-camera-kit?
If you using react-native-camera just put View (or Image) inside Camera component, then add styles to vertically and horizontally align this view.
Like this:
const styles = {
container: {
flex: 1,
},
camera: {
flex: 1,
// These below are most important, they center your border view in container
// ref: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
alignItems: "center",
justifyContent: "center"
},
borderImage: {
// Your styles for image, or custom borders
},
}
class Component extends React.Component {
...
render(){
return <View style={styles.container}>
<Camera style={styles.camera}>
<Image style={styles.borderImage} source={require("./img/qrBorder.png")} />
</Camera>
</View>;
}
}
Related
I want to make an interactive app where users can view crime rates in their area by pulling in geo-data from the met police website.
I want to display hexagons across the map (either through using H3 Uber library, or an alternative) but essentially it needs to uniformly cover the world map. I have gotten the Mapbox map to display but I am trying to figure out how exactly would I render the hexagons on to the map. Like where would I put it.
Below is my code. Where can I improve it?
import React from "react";
import { StyleSheet, View } from "react-native";
import MapboxGL from "#rnmapbox/maps";
MapboxGL.setAccessToken("<ACCESS-TOKEN-HERE>");
const App = () => {
return (
<View style={styles.page}>
<View style={styles.container}>
<MapboxGL.MapView style={styles.map} />
</View>
</View>
);
};
export default App;
const styles = StyleSheet.create({
page: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
container: {
height: "100%",
width: "100%",
},
map: {
flex: 1,
},
});
I've created a new project using the stencil component starter. Inside my component I'm using an external JS nouislider, which injects HTML elements into my div (this.slider ref):
...
componentDidLoad() {
noUiSlider.create(this.slider, {
start: [20, 80],
range: {
'min': 0,
'max': 100
}
})
}
...
I've copied the slider's CSS into my-component.css and rewrote everything with :host selectors for the shadow dom:
:host(.my-component) .noUi-target {
position: relative;
direction: ltr
}
Everything works fine on Chrome/Firefox but the slider styles are not working on IE11/Edge because Stencil appends a helper sc-my-component class to every element that I have inside the render method and generates CSS rules like so:
.my-component.sc-my-component-h .noUi-target.sc-my-component {
position: relative;
direction: ltr
}
but the injected nouislider child HTML elements don't have the helper classes on them. I have an ugly fix for this case atm:
...
componentDidLoad() {
noUiSlider.create(this.slider, {
start: [20, 80],
range: {
'min': 0,
'max': 100
}
})
this.slider.querySelectorAll('div').forEach((child)=>{
child.classList.add('sc-my-component')
})
}
...
I'm appending the helper classes after the slider is created (the slider generates child divs only). Is there a better way to tell Stencil that I'm injecting elements inside lifecycle methods and that it needs to recognize those elements when CSS rules are being generated?
This is not an answer to your question, nevertheless this could also be interesting for you:
We are currently working on the same topic (StencilJS, shadow: true, noUiSlider) and encountered the problem, that the slider's touch events are not working correctly in shadowDOM on mobile devices. We found a solution for this and already created a PR (https://github.com/leongersen/noUiSlider/pull/1060).
I too had problems using nouislider in StencilJS but just managed to make it work.
my-slider.scss
#import '~nouislider/distribute/nouislider.css';
:host {
padding: 50px 30px;
display: block;
}
my-slider.tsx
import { Component, h, Prop, Event, EventEmitter } from '#stencil/core';
import noUiSlider from "nouislider";
#Component({
tag: 'skim-slider',
styleUrl: 'skim-slider.scss',
shadow: true
})
export class SkimSlider {
#Prop() min!: number;
#Prop() max!: number;
private slider: HTMLElement;
#Event() update: EventEmitter;
componentDidLoad() {
const slider = noUiSlider.create(this.slider, {
start: [this.min, this.max],
tooltips: [true, true],
range: {
'min': this.min,
'max': this.max
}
});
slider.on('change', (value) => this.update.emit(value));
}
render() {
return (
<div ref={e => this.slider = e}></div>
);
}
}
The trick that did it for me was 'display: block'
This issue seems to apply TextFields that are: variant='outlined'
. I am trying to export my own outlined text field with a height of 40px:
import { withStyles } from '#material-ui/core/styles';
import TextField from '#material-ui/core/TextField';
const MyTextField = withStyles({
root: {
backgroundColor: 'yellow',
height: 40,
margin: 0,
paddingBottom: 0,
marginTop: 0,
}
})(TextField);
export default MyTextField;
I use the component as an outlined text-field because exporting the variant='outlined' does not seem to work from the styled component.
<MyTextField
value={"hello"}
variant="outlined"
/>
The height of the outlined text-field is larger than 40px because there is additional padding at the bottom of the field; but the background yellow is now only 40px. How do you change the height of the TextField that is outlined?
Congrats! You're code works exactly as you want it, when you isolate it. When put in a sandbox, the <TextField> shows a height of 40px. Something else in your app is causing the height issue.
I want to give vertical height manually in a bootbox prompt.
Here is the bootbox, We can fix it exactly in the center but I want to place it slightly above.
$('#btnNewPra').on('click',function(){
bootbox.prompt({
size: "small",
title: 'Spot',
margin: '50px' ,
// centerVertical: true,
callback: function(result){
}
})
})
Your simplest option is to use the className option and some custom CSS, like so: https://jsfiddle.net/6vmjpx3y/
bootbox.prompt({
size: "small",
title: 'Spot',
className: 'mini-box',
centerVertical: true,
callback: function(result) {
}
})
and
.mini-box .modal-dialog-centered .modal-content {
margin-top: -50px;
}
The className value would be whatever makes the most sense for you. There are probably other ways of accomplishing this, but using the centerVertical option adds the .modal-dialog-centered class to the dialog wrapper. You can then apply a negative margin to the .modal-content class (the outermost "visible" part of the modal) to pull the dialog up your desired amount from the center of the viewport.
I am new to React and Material UI. I am struggling with how much vertical space the components take up. One thing I would like to do is decrease the height of the toolbar.
I have tried specifying the style:
<Toolbar style={{ height: '36px' }}>
I have also tried doing it this way:
const styles = {
root: {
height: 36,
}
};
<Toolbar className={classes.root} >
but neither works. Is there a different way to do this?
I tried changing the Toolbar height before too but it didn't work.
I end up just setting Toolbar variant to dense which still give me a shorter height Toolbar compared to the regular one.
<Toolbar variant="dense">
You need to change the min-height to adjust the height, as min-height is specified in material-ui.css as 64px.
const styles = {
customizeToolbar: {
minHeight: 36
}
};
<Toolbar className={classes.customizeToolbar} >
Hope this will help you.
To change height of Toolbar globally, configure this in MUI theme:
const theme = createTheme({
components: {
MuiToolbar: {
styleOverrides: {
dense: {
height: 32,
minHeight: 32
}
}
}
},
})
Then use this theme:
<ThemeProvider theme={theme}>
...
</ThemeProvider>
This way you can tune look of many Mui components in theme, and this will be applied for all elements in the <ThemeProvider/> react block.
No css tweaks for individual elements, rather do it correctly in one place by modifying theme.
It is because the default height is 64px.
To change the height you have to actually change the minHeight property.
To do that, I have used inline styling but it works with other methods too.
const toolbarStyle = {
minHeight: '80px',
};
Then in your component simply specify the stylename using style attribute
<Toolbar style={toolbarStyle}>
Hope this helps!!
i too run into a similar issue after some time i put the
min height in AppBar instead of tool bar and it worked here is my code.
return (
<AppBar position="static" sx={{ height: '70px' }} >
<Container >
<Toolbar disableGutters >
</Toolbar>
</Container>
</AppBar>
)
}
Assign minHeight value:
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
toolbar: {
minHeight: '10px',
backgroundColor: 'IndianRed'
}
}));
const classes = useStyles();
Simply specify className in your component:
<Toolbar className={classes.toolbar}>
I had buttons in my toolbar with default margin. That was preventing the Toolbar to get a height of less than 64px. After setting the button margins to 0 the problem was solved for me.