I have this problem and I have not been able to solve it, how can I make view 1 limited by view 2?
I need view 1 not to leave the edges of view 2, the image is on the outside, it should be cropped limited by view 2, I don't know if I make myself understood
<View style={styles.container}>
<View style={styles.progressBar}>
<Animated.View style={[styles.absoluteFill, { borderRadius: 30, backgroundColor: colors.blue2, width }]} />
</View>
<Text style={styles.progressText}>
{`${progress}%`}
</Text>
</View>
const styles = StyleSheet.create({
absoluteFill: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
},
progressText: {
position: 'absolute',
color: colors.white,
fontFamily: "OpenSans-Regular"
},
container: {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
height: 30,
borderRadius: 30,
},
progressBar: {
//alignSelf: 'baseline',
height: 30,
width: '100%',
backgroundColor: colors.blue3,
borderRadius: 30
}
})
thank you
You need to add an overflow: hidden at your progressBar style.
progressBar: {
height: 30,
width: '100%',
overflow: 'hidden',
backgroundColor: colors.blue3,
borderRadius: 30
}
I did this live demo for you:
https://codesandbox.io/s/vibrant-fermi-49ztl?file=/src/App.js
Related
I have created a component VeiwImageScreen and i imported in App.js I want this picture in mid of the screen that the two div above it can clearly be seen I have given width 80% its working height do not
I want to decrease its height and align it in center I have given align-items center but due to height it not coming in middle here is my code
<View style={styles.Container}>
<View style={styles.closeIcon}></View>
<View style={styles.deleteIcon}></View>
<View></View>
<Image
style={styles.VeiwImage}
source={require("../assets/horror-background.jpg")}
/>
</View>
this is my styling I want this picture in mid of the screen I have given width 80% and height 80%
const styles = StyleSheet.create({
Container: {
justifyContent: "center",
alignItems: "center",
height: "100%",
width: "100%",
},
VeiwImage: {
flex: 1,
width: "80%",
height: 10,
},
closeIcon: {
width: 50,
height: 50,
backgroundColor: colors.red,
position: "absolute",
zIndex: 1,
top: 20,
left: 20,
},
deleteIcon: {
zIndex: 1,
width: 50,
height: 50,
backgroundColor: colors.black,
position: "absolute",
top: 20,
right: 20,
},
});
Remove flex:1 from VeiwImage and add it to container
const styles = StyleSheet.create({
Container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
height: "100%",
width: "100%",
},
VeiwImage: {
width: "80%",
height: 10,
},
closeIcon: {
width: 50,
height: 50,
backgroundColor: colors.red,
position: "absolute",
zIndex: 1,
top: 20,
left: 20,
},
deleteIcon: {
zIndex: 1,
width: 50,
height: 50,
backgroundColor: colors.black,
position: "absolute",
top: 20,
right: 20,
},
});
I'm having a hard time setting some shadow only for the left and right part of a view like this: imgur
I've been trying to work out the properties on react-native-shadow-generator website but to no success. Anyone knows how / if this is possible to be achieved in react-native?
You can do like this:
return (
<View style={styles.mainContainer}>
<View elevation={5} style={styles.boxStyle}>
<Text>Box 1</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
mainContainer: {
backgroundColor: '#ebebeb',
padding: 10,
height : height
},
boxStyle: {
backgroundColor: '#fff',
alignItem: 'center',
justifyContent: 'center',
flexDirection: 'column',
marginLeft: 30,
marginTop: 15,
width: 120,
height: 120,
padding: 12,
borderRadius: 8,
shadowColor: "00000",
shadowOpacity: 0.9,
shadowRadius: 4,
shadowOffset: {
height: 2,
width: 2
}
}
});
I'm having an issue where my container is collapsing on my child components which consists of a list of 4 images and one icon at the end of the container in a row. If I set the height explicitly then I can make it large enough to fit the content for one device. However, I have the images resizing themselves right now based off of width of the phone and a percent and then scaling to conserve aspect ratio. Is there a way to make my container grow just large enough to ensure it fits its child components when its child components scale based off of device width?
I thought that React Native flex default was to do this but for whatever reason my container is not fitting the images inside it but instead shrinking and all inside content is shrinking down except the images which lay over the top of my now shrunk containers.
export default function BadgeQuickView() {
return (
<View style={styles.badgeViewContainer}>
<View style={styles.badgeContainerTop}>
<View style={styles.badgeContainerLeftBorder}></View>
<Text style={styles.badgeContainerTitle}>FEATURED BADGES</Text>
<View style={styles.badgeContainerRightBorder}></View>
</View>
<View style={styles.quickBadgeList}>
{TEST_BADGE_ARRAY.map(option => (
<View style={styles.badgeInfoContainer} key={option.id}>
<Image style={styles.badgeImage} source={{uri: option.url}} fadeDuration={0} />
<Text style={styles.badgeDescText}>{option.name}</Text>
</View>
))}
<View style={styles.moreBadgesButtonContainer}>
<TouchableOpacity style={styles.moreBadgesButton}>
<Text style={styles.moreBadgesText}>All {`\n`} Badges</Text>
<Entypo name={'dots-three-horizontal'} size={moderateScale(20)} color={profileColors.editProfileText}/>
</TouchableOpacity>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
badgeViewContainer: {
width: '100%',
height: moderateScale(130),
borderStyle: 'solid',
borderColor: userInterface.borderColor,
borderBottomWidth: 2,
backgroundColor: 'white',
paddingBottom: 5
},
moreBadgesText: {
color: 'black',
fontFamily: 'montserrat',
fontSize: moderateScale(8),
textAlign: 'center',
color: profileColors.editProfileText,
textAlign: 'center',
},
badgeDescText: {
color: 'black',
fontFamily: 'montserrat',
fontSize: moderateScale(8),
textAlign: 'center',
color: profileColors.editProfileText,
textAlign: 'center',
},
quickBadgeList: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
paddingLeft: 15,
},
badgeImage: {
aspectRatio: 1,
width: '100%',
height: undefined,
resizeMode: 'contain',
marginBottom: 10,
},
moreBadgesButton: {
height: '100%',
width: '100%',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center'
},
moreBadgesButtonContainer: {
height: '100%',
width: '15%',
},
badgeInfoContainer: {
height: '100%',
width: '20%',
flexDirection: 'column',
padding: 5,
},
badgeContainerTop: {
flexDirection: 'row',
alignItems: 'center',
},
badgeContainerLeftBorder: {
borderStyle: 'solid',
borderColor: userInterface.borderColor,
borderTopWidth: 2,
width: '5%',
bottom: moderateScale(13) / 2,
},
badgeContainerTitle: {
fontFamily: 'montserrat-bold',
color: profileColors.editProfileText,
marginHorizontal: 10,
fontSize: moderateScale(13),
bottom: moderateScale(13) /2,
},
badgeContainerRightBorder: {
borderStyle: 'solid',
borderColor: userInterface.borderColor,
borderTopWidth: 2,
width: '100%',
bottom: moderateScale(13) / 2,
},
});
** Edit: Added current working code for reference. moderateScale(...) is just taking the screenHeight and scaling the height and working for most devices that I have tested thus far. I would like to not have to set this explicitly though if possible and instead have it expand based on its content.
Below is the desired and undesired looks. When I comment out the height: from the view container and set it to flex it won't expand to fit its content. When real images are added in the images show over the top of the bottom border and the text is not visible at all that will show under the red box typically. Added the red just as an indicator of where the image and text renders.
I am trying to make my own tab navigation like Instagram has instagram example. I noticed that the items within the footer view I made does not stay within the bounds and moves to the top left of the screen. Images shown - What I am trying to achieve What happens frequently
Here is the most important part of my code. I have done inline styles temporarily to try and figure out the issue. Here is the part where the issue lays <View style = {{ width: Dimensions.get('window').width, backgroundColor: '#fff', height: 80}} <TouchableOpacity onPress = {() => this.props.navigation.navigate('Profile')} style = {{justifyContent: 'flex-end'}}>
<Text style = {{justifyContent: 'flex-end'}}> Profile </Text>
</TouchableOpacity> </View>-
render() {
return (
<MapView style = {[style.container, style.map]}
region = {this.state.initialPosition}>
<MapView.Marker coordinate = {this.state.markerPosition}>
<View style = {style.radius}>
<View style = {style.marker}/>
</View>
</MapView.Marker>
<View style = {{ width: Dimensions.get('window').width, backgroundColor: '#fff', height: 80}} >
<TouchableOpacity onPress = {() => this.props.navigation.navigate('Profile')} style = {{justifyContent: 'flex-end'}}>
<Text style = {{justifyContent: 'flex-end'}}> Profile </Text>
</TouchableOpacity>
</View>
</MapView>
);
}
}
const style = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-end',
//alignItems: 'center',
},
text: {
color: '#fff'
},
map: {
left: 0,
right: 0,
top: 0,
bottom: 0,
position: 'absolute'
},
radius:{
height: 50,
width: 50,
borderRadius: 50 / 2,
overflow: 'hidden',
backgroundColor: 'rgba(1,213,106,0.3)',
borderWidth: 1,
borderColor: 'rgba(1,213,106,0.3)',
alignItems:'center',
justifyContent: 'center'
},
marker: {
height: 20,
width: 20,
borderWidth: 3,
borderColor: '#fff',
borderRadius: 20 / 2,
borderWidth: 3,
overflow: 'hidden',
backgroundColor: '#01D56A'
},
menuSection: {
backgroundColor: 'rgba(255, 255, 255, 0.7)',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height/3,
justifyContent: 'flex-end',
alignItems: 'center'
},
icon:{
width: 50,
height: 50,
backgroundColor: 'black'
}
})
He, I was trying to put the right styles in place in order to see the focus image over the camera screen with a little padding on all sides, but somehow I could not get it done.
The shoutem.camera source looks like:
<View style={style.cameraContainer}>
<Camera
onBarCodeRead={this.onQRCodeScanned}
style={style.cameraView}
aspect={Camera.constants.Aspect.fill}
captureQuality={cameraQuality}
/>
<Image
source={require('../assets/images/focus-frame.png')}
style={style.cameraFocusFrame}
/>
</View>
I am asking for style.cameraContainer & style.cameraView & style.cameraFocusFrame.
The style rules for those styles can be found at the very end of themeName.js. Here it is from the default theme, Rubicon:
'shoutem.camera.QRCodeScanner': {
cameraContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
cameraFocusFrame: {
width: 175,
height: 165,
resizeMode: 'contain',
},
cameraView: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
},
noPermissionsMessage: {
alignSelf: 'center',
fontSize: 18,
lineHeight: 20,
},
}
We do intend to reimplement the focus frame to be responsive by nature, as you had mentioned.