We have a situation where on a screen there are multiple View components are present. And each component has some progress bar related stuff.
But when the user taps on any View, we want to expand it to the full screen and we are doing it by applying a new style,
fullscr: {
top: 0,
left: 0,
height: "100%",
width: 100%,
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
position: 'absolute',
justifyContent: 'center',
alignItems: 'center',
}
But the View is not expanding above Header and Footer of native base. It is expanding rest of the view but not Header and Footer.
I tried zIndex and elevation option but no luck. How can I expand a view to fill the entire screen?
You can conditionally hide the footer and header of native-base, that way in the Container component of native-base you have your view inside Content.
<Container>
{condition ? <Fragment> :<Header/>}
<Content>
{{Your main view goes here}}
</Content>
{condition ? <Fragment> :<Footer/>}
</Container>
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 have a ScrollView with some Views inside it, but I want to start an animation when the user gets to specific View and after it starts my animation.
Example:
<ScrollView style={{ width: DeviceWidth, height: DeviceWidth * 0.5 }}>
{/* When user position scroll is here,
is where I want to start the animation,
not since the page is loaded */}
<View style={{
width: DeviceWidth * 0.4,
height: DeviceWidth * 0.4,
resizeMode: "contain",
}}>
<ProgressBarAnimated
width={barWidth}
value={65}
backgroundColor="#F68D29"
height={40}
barAnimationDuration={6000}
/>
</View>
</ScrollView>
Instead of using a ScrollView you can instead use a FlatList, this gives you a lot more support for the type of indexing you're trying to do.
To detect when a user reaches a specific point you can use onViewableItemsChanged and the define which viewable items need to be on screen in order to trigger your animation.
FlatLists also support a number of build in animations like scrollToEnd or ScrollToIndex which may be helpful.
I am trying to create a "tiled" background with a single ImageBackground element covering the entire screen of the device. My issue is that even though the ImageElement is covering the entire screen as can be seen by the red border on the attached image, the internal image only covers the entire width and leaves a blank space vertically. I have checked the docs but cannot find anything relevant. Here is my component
<ImageBackground source={require('../../images/linepattern.jpg')} style={[styles.container]}
resizeMode='repeat'
imageStyle={{resizeMode : 'repeat', overflow : 'visible', backfaceVisibility: 'visible', flex : 1}}>
and its styling
container: {
flex : 1,
borderColor: 'red',
borderWidth:10
}
thanks for the help.
try this;
<ImageBackground
source={require('../../images/linepattern.jpg')}
style={styles.container}
imageStyle={{
resizeMode: 'repeat',
overflow: 'visible',
backfaceVisibility: 'visible',
flex: 1,
}}
>
....
</ImageBackground>;
and then
container:{height:'100%, width:'100% }
Background
I have an image placed on a screen meant to show when the screen loads other content.
I want to center the image so it is always center on all devices.
Problem
Currently the image shows up top center. I would like it to be aligned vertically as well. Also to be sure that it will always look the same on all devices.
Question
What is the solution to make sure the image is always centered and the right size for all devices?
Example,
My current code,
In Photoshop
Image is 300 Resolution
Height is 776 px
Width is 600 px
I want the image to be centered horizontally and vertically in all devices and look good without pixelating. Natively I know I need to set the image sizes. But from my understanding in React Native I can use on image but then use JSX to handle it being responsive.
import React from 'react';
import {
StyleSheet,
View,
Image,
} from 'react-native';
const logo = require('../images/logo.jpg');
const LoadingScreen = () => (
<View>
<Image
style={styles.logo}
source={logo}
/>
</View>
);
const styles = StyleSheet.create({
logo: {
justifyContent: 'center',
alignItems: 'center',
width: 300,
height: 400,
},
});
export default LoadingScreen;
You need to set the style of <View> for justifyContent and alignItems for centering the <Image>.
Should be like this :
const LoadingScreen = () => (
<View style={styles.container}>
<Image
style={styles.logo}
source={logo}
/>
</View>
);
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
},
logo: {
width: 300,
height: 400,
},
});
Or you can use alignSelf on the <Image> to make it center, but it will still need to add justifyContent on <View> to make it center vertically.
The View container should have styling as
flexDirection: 'column'
justifyContent: 'center'
alignItems: 'center'
height: '100%'
The height makes sure it spans throughout the page, thus making the image become both vertically and horizontally aligned.
For the image size, I think using percentage will do the trick instead of defining definite width/height.
Set in view:
justifycontent:center
And in child:
alignself:center
And perform in task.
Set in parent view:
justifycontent:center
And in child set:
alignself:center
I would like the size of my boxes not to be changed by margin and padding.
React Native styles all views as if box-sizing: border-box is set. See this code: https://github.com/facebook/react-native/blob/5aa1fb3ff326a429e33a443576da866f2a63c20c/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java#L632
As mentioned in another answer, In React Native, everything is treated as if as if box-sizing: border-box is set.
A workaround to simulate css content-box is to wrap your component in a container View, and add your border and padding to that View.
react native don't have an option for
boxSixing: "border-box"
what you can do in your styling is this
<View style={ {
flex: 1,
alignContent: "center",
justifyContent: "center",
}}>
<View style={ {
flex: 1,
width: "95%" // or width of the box - intended margin
}}>
***chi;dren goes here***
<View/>
<View/>
Any component that goes into that view will be at the center With a margin of 5% or whats is specified, which solves the issue for now till react-native provides a better solution
Let O (for outer) = (top, left, bottom, right) be the rectangle that represents the size
* and position of a view V. Since the box-sizing of all React Native views is border-box, any
* border of V will render inside O.
you can use resizeMode: 'cover' or 'stretch' or 'contain'