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.
Related
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
I want to add bottom sheet in Modal. I am using reanimated-bottom-sheet and react native modal.
But when I use BottomSheet inside Modal gesture not work and can't closeBottomSheet with swiping down.
I searched and I found this is RCGH problem.
So I decide to use View instead of Modal.
but View doesn't cover Header.
This is bottomSheet code:
<View style={BottomSheetStyles.container}>
<TouchableWithoutFeedback onPress={handleOutsidePress}>
<Animated.View style={[BottomSheetStyles.dropShadow, { opacity }]} />
</TouchableWithoutFeedback>
<Animated.Code exec={onChange(position, [cond(eq(position, 1), call([], onClose))])} />
<BottomSheet
ref={sheet}
initialSnap={zeroIndex}
snapPoints={snapPoints}
callbackNode={position}
renderHeader={() => <View style={BottomSheetStyles.header} />}
renderContent={() => (
<View style={[BottomSheetStyles.content, { height: "100%" }]}>{children}</View>
)}
/>
</View>
and this is styles:
const BottomSheetStyles = StyleSheet.create({
container: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
flex: 1,
zIndex: 100,
},
dropShadow: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
flex: 1,
zIndex: 100,
backgroundColor: "rgba(0, 0, 0, 0.3)",
},
header: {
backgroundColor: Colors.greyC4C,
width: 90,
height: 7,
margin: 5,
alignSelf: "center",
borderRadius: 11,
},
content: {
backgroundColor: Colors.whiteFFF,
paddingTop: 18,
borderTopLeftRadius: 22,
borderTopRightRadius: 22,
},
});
So problem can be solve either whit solving gesture in Modal or do something to cover Header with View.
I am using React Navigation.
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 using this module for displaying blur image. My question is blur is applied to bottom of the image. This issue is faced in Android but iOS working fine.
Please follow this issue in GitHub:- enter link description here
Here is the screenshots:-
Android:-
iOS:-
<View style={styles.container}>
<Text>Hi, I am some unblurred text</Text>
<Image source={{ uri: 'https://picsum.photos/200/300' }} style={styles.img} />
<BlurView style={styles.blur} blurType="light" blurAmount={10} />
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
position: 'relative',
zIndex: 1
},
img: {
flex: 1,
position: 'relative',
height: '100%',
zIndex: 2,
width: '100%'
},
blur: {
position: 'absolute',
left: 0,
bottom: 0,
right: 0,
height: '30%',
zIndex: 3
}
});
Hi, Just a case of styling each of the elements, in this case, its 30% high, but you can alter that figure on your project to be 50% or whatever you need it to be.
Hope this helps.
I use React Native 0.55, and I want to display a kind of icon on top of a , like this : http://b3.ms/qpknagGre9BR
For now, I use this :
<View style={styles.cardContainer}>
<Image source={iconPlayers} style={styles.iconTop} />
<View style={styles.cardBox}>
<View style={styles.container}>
<Text style={styles.txtTitle}>
My title
</Text>
</View>
</View>
</View>
And my styles :
cardBox: {
borderRadius: 20,
backgroundColor: "#FFF",
padding: 5,
marginBottom: 10,
borderColor: "#DDD",
elevation: 4,
paddingTop: 40,
},
cardContainer: {
marginTop: 40,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
txtTitle: {
color: "#000",
textAlign: "center",
fontWeight: "bold",
},
iconTop: {
width: 60,
height: 60,
zIndex: 999,
position: "absolute",
top: -30,
elevation: 4,
alignSelf: "center",
},
It's crazy because now it works, but I have a problem, I can't put elevation: 4 on styles for an <Image /> element, I have a Warning.
If I remove the elevation: 4, of my styles, the image is shown behind the cardBox.
How can I achieve what I want without any warning ... ? Thanks.
** EDIT **
I wrapper the <Image /> in a <View />, and I put elevation property to the wrapper, and it works.
I thought elevation was for boxShadow for android, but it impacts the zIndex.
I am trying your code in snack expo, which uses the latest react-native version (55.4). There is no warning in applying elevation to Image property, it just works fine and the image is also above the card. If your react-native version gives warning just wrap it in a View and apply elevation to that View. Also, remember zIndex gets affected by your Views elevation (only Android). Since you have applied elevation: 4 to card box, you must give elevation >= 4 for your Image component else it will draw beneath the card box.
snack example: https://snack.expo.io/B14UPA9Bm
You can also avoid Zindex by changing the order of components,
// Render the image component after your card box this way you can avoid setting the zIndex
<View style={styles.cardContainer}>
<View style={styles.cardBox}>
<View style={styles.container}>
<Text style={styles.txtTitle}>
My title
</Text>
</View>
</View>
<Image source={iconPlayers} style={styles.iconTop} />
</View>
cardBox: {
borderRadius: 20,
backgroundColor: "#FFF",
padding: 5,
marginBottom: 10,
borderColor: "#DDD",
elevation: 4,
paddingTop: 40,
},
cardContainer: {
marginTop: 40,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
txtTitle: {
color: "#000",
textAlign: "center",
fontWeight: "bold",
},
iconTop: {
width: 60,
height: 60,
//zIndex: 999, not required now
position: "absolute",
top: -30,
elevation: 4,
alignSelf: "center",
},
Check and tell if it works in Android and iOS. thanks