iOS is working fine BarCodeScanner take full screen but when i use android there is extra white space.
<BarCodeScanner
onBarCodeScanned={scanned ? undefined : this._handleBarCodeScanned}
style={[StyleSheet.absoluteFill, { flex: 1 }]}
/>
I have also checked by giving a different style like but no luck
style={{
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
}}
This seems to be an issue in recent versions of expo-barcode-scanner. One possible workaround is to explicitly set the dimensions of the BarCodeScanner to the dimensions of the screen:
import { Dimensions } from 'react-native';
<BarCodeScanner style={{
width: Dimensions.get('screen').width,
height: Dimensions.get('screen').height,
}} />
Note that setting it to the dimensions of the window, like you tried, does not work.
FrederikVds's answer not worked for me. So I have changed the expo camera which has the barcode scanner functionality too. You can do it like following:
import { Camera } from 'expo-camera'
<Camera
onBarCodeScanned={scanned ? undefined : this._handleBarCodeScanned}
style={StyleSheet.absoluteFillObject}
/>
Optionally you can use ratio='16:9'.
If you need to use expo libraries in react-native cli, you should follow these setups
Here is the issue discussion: https://github.com/expo/expo/issues/5212
import { BarCodeScanner, BarCodeScannerResult } from
'expo-barcode-scanner'
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default function XYZ() {
return(
<BarCodeScanner
onBarCodeScanned={scanned ? undefined :
handleBarCodeScanned}
style={{ width: height - 188, height: height,
alignSelf: "center" }}
/>
)
}
Related
I want to have an Expo BarCodeScanner inside of a view on a screen.
I've been using vw and vh for width and height because I want it to change based on the amount of screen space I have. I've tried putting a border around it but it never shows up. I've tried putting it on the view around the barcodescanner as well as the scanner itself.
Here is the code snippet of my barcodescanner as well as the corresponding styles and screenshot.
scannerContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
width: vw(100),
maxHeight: vh(50),
backgroundColor: 'red',
borderColor: colors.primary,
borderWidth: 5
}
<View style={styles.scannerContainer}>
<BarCodeScanner
onBarCodeScanned={(hasScan) ? undefined : handleScan}
barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
style={[StyleSheet.absoluteFillObject]}
/>
</View>
Instead of using the barcode you can use expo camera because BarCodeScanner have active issue.
Here is the code
import { Camera } from 'expo-camera';
<Camera
onBarCodeScanned={this.onBarCodeScanned}
ratio='16:9'
style={StyleSheet.absoluteFillObject}
/>
Link: https://github.com/expo/expo/issues/5212
I am using rn-bottom-drawer for drawer implementation for my app. I tried several ways like PixelRatio, ModerateScale, If-else for range of screen height but i am unsuccessful in setting such a containerHeight that it works perfectly with all device screens and there is no space between my drawer and bottom of my screen.
My Code:
<BottomDrawer
ref={"_drawer"}
containerHeight={moderateScale(270)}
startUp={false}
backgroundColor={null}
downDisplay={moderateScale(200)}
onExpanded={() => this.setState({ isRecentSearchesExpanded: true })}
onCollapsed={() => this.setState({ isRecentSearchesExpanded: false })}
>
<View style={{
width: screenWidth,
}}>
<ImageBackground source={require('../../assets/tabBkgd.png')} style={{ height: "100%", width: screenWidth, justifyContent: "center", backgroundColor: "transparent" }} resizeMode="stretch">
{/* some views here */}
</ImageBackground>
</View>
</BottomDrawer>
This is the package i use for dynamic heights and widths :
rn-responsive.
Basically what you have to do is check in your phone what height suits well. Suppose you get 80 and your deviceHeight is 640 , then all you need to do is calculate (80/640)*100 i.e 12.5 so now
Just do :
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
<BottomDrawer
ref={"_drawer"}
containerHeight={hp("12.5%")}
and its fixed. Hope it helps. feel free for doubts
In the iOS version of my react native app built with NativeBase, everything is too skinny, unless a specific width is given. See images below. I have given the header and footer a width of 100% so it is fine, but I haven't done that for the inputs and they are too skinny. The header and footer are that skinny when not given a width too.
code:
import React from 'react'
import {
Container,
Header,
Form,
Item,
Input,
Label,
Content,
Footer,
FooterTab,
Button,
Left,
Right,
Body
} from 'native-base'
import { Text, Image } from 'react-native'
export const Volcalc = () => {
return (
<Container style={styles.container}>
<Header style={styles.header}>
<Left>
<Image resizeMode={Image.resizeMode.contain} style={styles.thumbnail} source={require('./img/logo_red_nowords.png')} />
</Left>
<Body>
</Body>
<Right />
</Header>
<Content>
<Form>
<Item stackedLabel bordered >
<Label>height</Label>
<Input />
</Item>
<Item stackedLabel >
<Label>width</Label>
<Input />
</Item>
</Form>
</Content>
<Footer >
<FooterTab style={styles.footer}>
<Button full>
<Text>Footer 1</Text>
</Button>
</FooterTab>
</Footer>
</Container>
)
}
const $mainColor = '#00d1b2'
const styles = {
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: $mainColor
},
header: {
width: '100%',
backgroundColor: $mainColor
},
footer: {
width: '100%',
backgroundColor: $mainColor
},
thumbnail: {
width: 35,
height: 35
}
}
I'm pretty sure I'm supposed to be able to add inputs and header, without specifying width, and it should take up the full width like Android does when not specifying. What could be wrong with my project that is causing this?
width: '100%' is supported in react native, it will take 100% of its parent width.
I think your problem is the the justifyContent:'center' and alignItems:'center' in the styles.container, they are causing all elements to be in the center of the component. You can try adding a distinctive background color to your Content component to see where it is and how much width it has.
Try adding this style:
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: $mainColor,
flexDirection: 'row' // <--- Add this line
}
Apart from above suggestion, you can use "Toggle Inspector" to get the style attributes. But I also found react native apps during development sometimes gets stuck in previous states. Try to uninstall and reinstall it.
Try using Dimensions.
import { Dimensions } from 'react-native';
var {width} = Dimension.get('window');
then you can use like
<Form style={{width:width}}>
I am trying to implement react native webview component in my application, but the web view is not loading any url its just showing the white page.
var React = require('react-native');
var{
View,
Text,
StyleSheet,
WebView
} = React;
module.exports = React.createClass({
render: function(){
return(
<View style={styles.container}>
<WebView source={{uri: 'https://m.facebook.com'}} style= {styles.webView}/>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: '#ff00ff'
},webView :{
height: 320,
width : 200
}
});
Below is the screenshot of the output .
I had this issue. WebView would render when it was the only component returned, but not when nested in another View component.
For reasons I'm not entirely sure of the issue was resolved by setting a width property on the WebView component.
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<WebView
source={{uri: 'https://www.youtube.com/embed/MhkGQAoc7bc'}}
style={styles.video}
/>
<WebView
source={{uri: 'https://www.youtube.com/embed/PGUMRVowdv8'}}
style={styles.video}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'space-between',
},
video: {
marginTop: 20,
maxHeight: 200,
width: 320,
flex: 1
}
});
I'm facing same issue. What I observed is that WebView doesn't work if it's nested. If component returns just WebView, then everything is fine.
Using the answers from other users, I was able to get my react native with webview working both inside a view and outside a view. My problem came down to two things. Being on the android emulator and behind a proxy, I just had to go to my browser (chrome) in the android emulator and sign in to the corporate proxy. Secondly, some sites work and others will not work. Whether the webview was nested or not inside of a View tag, some sites like cnn.com and slack.com etc will work fine, but no matter what settings I tried for google.com it wouldn't work (even though the proxy will definitely allow google.com) Lastly, when I rebuild my application and push to the emulator the new app, sometimes it took an inordinately long time to load any site. But once the site was loaded, the links are quick and responsive. So if you don't at first see something after a build, also be patient. Hope this helps someone else.
My final app.js
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Dimensions
} from 'react-native';
import { WebView } from 'react-native';
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={{flex:1}}>
<WebView
style={styles.webview}
source={{uri: 'https://www.slack.com'}}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={false}
scalesPageToFit={true} />
</View>
);
}
}
const styles = StyleSheet.create({
webview: {
flex: 1,
backgroundColor: 'yellow',
width: deviceWidth,
height: deviceHeight
}
});
WebView works well on Android. However you need to enable javascript and dom storage for some web pages.
<WebView style={styles.webView}
source={{uri: 'https://google.com/'}}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
>
</WebView>
If you want the component to render the entire page, you need to wrap it with View that has flex: 1. The code below works for me:
<View style={{flex:1, alignItems: 'flex-end'}}>
<WebView
source={{uri: this.state.webContentLink}}
startInLoadingState={true}
scalesPageToFit={true} />
</View>
WebView is being moved to react-native-webview
.
None of the other answers worked except this method:
npm install --save react-native-webview
Then use it as follows:
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<WebView
source={{
uri: 'https://www.yahoo.com',
}}
startInLoadingState={true}
scalesPageToFit={true}
style={{
width: 320,
height: 300,
}}
/>
</View>
<View>
<WebView
source={{uri: this.props.link}}
style={styles.webview}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
/>
</View>
and style as follows:
const React = require('react-native');
const { Dimensions } = React;
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
export default {
webview: {
width: deviceWidth,
height: deviceHeight
}
};
All this to deal with bad webview dimension, so just set a specific height and specific width too (deviceHeight and deviceWidth as the example above).
As of June 2020 (noting the date because React Native answers seem to become out-of-date quickly), the simplest solution to this appears to be:
import React from 'react'
import { View, StyleSheet } from 'react-native'
import { WebView } from 'react-native-webview'
export const ComponentWithWebView = () => {
return (
<View style={styles.view}>
<WebView source = {{uri: 'https://www.google.com/'}} />
</View>
)
}
const styles = StyleSheet.create({
view: {
alignSelf: 'stretch',
flex: 1,
}
}
This results in a WebView filling the available space and being nested within a View. I believe the typical problems faced when placing a WebView within a View is that View expects children to force the View to expand (that is, a Text component would take up some amount of width and height which the View then accommodates). WebView, on the other hand, expands to the size of the parent component unless a style is passed specifying the width. Therefore, a simple <View><WebView /></View> results in a 0 width and nothing shown on the screen. The earlier solutions of setting the WebView width work well but require either the device dimensions to be fetched (which might not be the desired width) or for the View to have an onLayout function AND have some way to expand the View to the desired space. I found it easiest to just apply the flex: 1 and alignSelf: 'stretch' for the View to fill the space as desired and then WebView to automatically follow suit.
Hope this helps someone before it becomes obsolete!
I ran into the same issue recently. And I found that
alignment: 'center'
was causing the issue for me. I commented it and the webView got loaded immediately.
I found the solution here :
https://github.com/facebook/react-native/issues/5974
'brunocvcunha's' response worked for me.
Let me give the simplest example which will work seamlessly:
import React from 'react';
import { WebView } from 'react-native';
export default class App extends React.Component {
render() {
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
/>
);
}
}
Do not add your WebView component within a view that created problem and webview url is not rendered rather styles of view will be shown.
I had the same issue and spent a day attempting to fix it. I copied in the UIExplorer webview example, and that didn't work.
I ultimately ended up upgrading react and creating a new react-native project and copying the files in there, and that fixed it.
I wish I had a better answer as to why that fixed it, but hopefully that helps
Below is piece of the code which worked for me.
render: function(){
return(
<View style={styles.container}>
<WebView url={'https://m.facebook.com'} style= {styles.webView}/>
</View>
);
}
I am doing React Native Webview, Could you please suggest me how to makeWebview loading the uri
render() {
return (
<Modal
animationType="slide"
ref={"webModal"}
style={{
justifyContent: 'center',
borderRadius: Platform.OS === 'ios' ? 30 : 0,
width: screen.width,
height: screen.height,borderColor:'red',
borderWidth: 5
}}
position='center'
backdrop={false}
onClosed={() => {
// alert("Modal closed");
}}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 20, top: 10 }} >
<Text style={{ fontSize: 24, fontWeight: '700' }}>
Interests
</Text>
<Icon name="ios-close" size={40} color='purple' onPress={() => { this.refs.webModal.close() }} />
</View>
<WebView
source={{ uri: this.state.link }}
style={{ marginTop: 20,borderColor:'green',
borderWidth: 5 }}
/>
</Modal>
);
}
}
import { WebView } from 'react-native'; is deprecated
use below line instead
npm install react-native-render-html#4.1.2 --save
then
import HTML from 'react-native-render-html';
react-native-render-html starting with version 4.2.0, react-native-webview is now a peer dependency. As a result, you need to install it yourself.
Try
<WebView
source={{ uri: "https://inhall.in/" }}
style={Styles.webView}
javaScriptEnabled={true}
scalesPageToFit />
javaScriptEnabled={true} might help
I can give the height element of style numeric values such as 40 but these are required to be integers. How can I make my component to have a height of 100%?
check out the flexbox doc. in the stylesheet, use:
flex:1,
Grab the window height into a variable, then assign it as the height of the flex container you want to target :
let ScreenHeight = Dimensions.get("window").height;
In your styles :
var Styles = StyleSheet.create({ ... height: ScreenHeight });
Note that you have to import Dimensions before using it:
import { ... Dimensions } from 'react-native'
flex:1 should work for almost any case. However, remember that for ScrollView, it's contentContainerStyle that controls the height of view:
WRONG
const styles = StyleSheet.create({
outer: {
flex: 1,
},
inner: {
flex: 1
}
});
<ScrollView style={styles.outer}>
<View style={styles.inner}>
</View>
</ScrollView>
CORRECT
const styles = StyleSheet.create({
outer: {
flex: 1,
},
inner: {
flex: 1
}
});
<ScrollView contentContainerStyle={styles.outer}>
<View style={styles.inner}>
</View>
</ScrollView>
You can simply add height: '100%' into your item's stylesheet.
it works for me
most of the time should be using flexGrow: 1 or flex: 1
or you can use
import { Dimensions } from 'react-native';
const { Height } = Dimensions.get('window');
styleSheet({
classA: {
height: Height - 40,
},
});
if none of them work for you try it:
container: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
}
Try this:
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'skyblue'}} />
</View>
You can have more help in react-native online documentation (https://facebook.github.io/react-native/docs/height-and-width).
I was using a ScrollView, so none of these solutions solved my problem. Until I tried contentContainerStyle={{flexGrow: 1}} prop on my scrollview. Seems like without it -scrollviews will just always be as tall as their content.
My solution was found here: React native, children of ScrollView wont fill full height
<View style={styles.container}>
</View>
const styles = StyleSheet.create({
container: {
flex: 1
}
})
I looked at lots of these solutions, and none worked across React Native mobile and web.
Tracking the screen height using Dimensions API is one way that does work, but this can be innacurate on some mobile devices. The best solution I found was to use this on your element:
<View style={{ height:Platform.OS === 'web' ? '100vh' : '100%' }}
/* ... your application */
</View>
Please also note the caveat with ScrollView as mentioned here.
I would say
<View
style={{
...StyleSheet.absoluteFillObject,
}}></View>
In this way, you can fill the entire screen without caring about, flex, width, or height