I am using the ReactVr framework to work on a project. My primary goal is to set multiple hotspots and when clicked it should display full-width display with a cross button on the top to close the viewer. This is what I have done so far.
I have created a condition that if infoText is true then display the box else show the infoButton.png:
<VrButton onClick={this.toggleDisplayText}>
{this.state.infoText === true?
(
<View
style = {{
position: 'absolute',
height: 2,
width: 3,
backgroundColor: '#000',
opacity: 0.5,
flex: 2, // for two columns in the box
flexDirection: 'column', //specifying column or row
justifyContent: 'space-between', //justify space between the objects.
layoutOrigin: [0.7, 0.7],
transform: [{translate: [0.6, -0.7, -2.5]}]
}}
>
<Text
style = {{
width: 1,
fontSize: 0.18,
marginLeft: 1.9,
marginTop: 0.2,
fontWeight: '300',
textAlign: 'left',
}}>
This bag is the most precious bag in the world. You will love this bag.
</Text>
<Image source = {asset('004.png')}
style =
{{
position: 'absolute',
width: 1.8,
height: 1.8,
opacity: 2,
}}
/>
</View>
In the above code, as you can see it appears a text box with info and image on it. To exit, we can click with the text box area to close down. Instead, I am looking for full-width of browser and a cross on the top to close. I tried to use Flex: 1 and alignItem: 'strected' but it didn't yield any result. I would really appreciate if anyone could suggest an idea to this problem.
Thanks alot.
Related
I'm in need of applying a box shadow to one of my buttons in my react native application but box shadow property is not supported in android. So i'm trying to create a shadow view from LinearGradient and place the button at center of that view. Something like this
<LinearGradient
colors={['transparent', backgroundColor]}
start={{ x: 0.5, y: 0.5 }}
end={{ x: 1, y: 1 }}
style={{
width: '100%',
padding: 5,
height: 60,
justifyContent: 'center',
alignItems: 'flex-start',
marginTop: 0,
borderRadius: 2,
backgroundColor: 'transparent',
zIndex: 2,
bottom: 0,
}}>
<Pressable
onPress={onPress}
disabled={disabled}
style={({ pressed }) => [
{
borderWidth: state === 'primary_link' ? 0 : pressed ? 4 : borderWidth,
},
styles.background,
]}>
<ButtonTitle />
</Pressable>
</LinearGradient>
I tried changing the start and end values but could not get it to start from the center. Is there a way to do this using LinearGradient? I'm trying to get something like this
As the name implies, LinearGradient is for linear gradients only. What you described is a radial gradient. See this issue: https://github.com/react-native-linear-gradient/react-native-linear-gradient/issues/29
You may have box shadows as described here: Creating a UI with box shadow in react native
boxWithShadow: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5
}
According to the Docs, default value for flexShrink in RN is 1. But, given the code below, I have to explicitly set it to 1 to make it work, it seems to be 0 by default. The expected behaviour is that all the inner containers should shrink in width, so that all of them fit in the screen, by default. but it does not behave like that, unless I uncomment the lines.
Thanks for your time
<View
style={{
flexDirection: "row",
}}
>
<View
style={{
backgroundColor: "green",
width: 100,
height: 200,
// flexShrink: 1,
}}
/>
<View
style={{
backgroundColor: "red",
width: 100,
height: 200,
// flexShrink: 1,
}}
/>
<View
style={{
backgroundColor: "blue",
width: 100,
height: 200,
// flexShrink: 1,
}}
/>
<View
style={{
backgroundColor: "maroon",
width: 130,
height: 100,
// flexShrink: 1,
}}
/>
</View>
It looks like the the documentation has been corrected by now.
Now it says:
flexShrink accepts any floating point value >= 0, with 0 being the
default value (on the web, the default is 1)
I found the change log of doc here:
https://github.com/facebook/react-native-website/commit/2007c56fd09262cdb6803a2193a65fe555ef8344
Latest doc here:
https://reactnative.dev/docs/flexbox
Posted on 12/31/2021
I am using React Native Elements to add a button to my layout here is the code below:
<Button
title="Login"
buttonStyle={{ backgroundColor: Colour.green }}
containerStyle={{
paddingLeft: '20%',
paddingRight: '20%',
alignSelf: 'center',
position: 'absolute',
bottom: '-5.2%',
elevation: Platform.OS === 'android' ? 5 : 0,
}}
titleStyle={{ fontSize: normalize(10) }}
loading={loggingIn}
onPress={login}
/>
The problem is the loading spinner is bigger than the button text, so when you click the button it makes the loading spinner appears within the button and the button height increases to cater for the size of the loading spinner which looks terrible and then it shrinks back down when loading spinner goes away. Ive tried to set the loading spinner size with:
loadingProps={{size:normalize(10)}}
But its not consistent among Android/IOS screen sizes, some devices the button wont increase/decrease in size but other devices do.
Is there a way to set the button height on all devices so the button height never changes once rendered, but also the button height needs to fit the spinner correctly?
Try to use a fixed width and a height for buttonStyle.
<Button
title="Login"
buttonStyle={{ width: 150, height: 50, backgroundColor: null }}
containerStyle={{
backgroundColor: 'green',
alignItems: 'center',
alignSelf: 'center',
// position: 'absolute',
elevation: Platform.OS === 'android' ? 5 : 0,
}}
loadingProps={{ color: 'red' }}
loading={true}
onPress={login}
/>
Feel free for doubts.
I have a view similar to the following
<View style={{
flex: 1,
paddingTop: 20,
flexWrap: 'wrap',
backgroundColor: 'pink'
}}>
<View style={{
flex: 1,
minHeight: 200,
flexGrow: 1,
backgroundColor: 'red',
}} />
<View style={{
flex: 1,
minHeight: 200,
flexGrow: 1,
backgroundColor: 'blue',
}} />
</View>
The above layout works on https://yogalayout.com. Two rectangles which get wrapped if in landscape mode. (When height and width are interchanged in yogalayout. 500x300 or 300x500)
But when used in react-native the child view takes only the width of the content in it. Does not get the default alignItems: 'stretch' behavior.
If I add alignContent: 'stretch' the child views are stretched to full width in portrait mode. But, in landscape mode, the views will not be wrapped.
Just needed to use flexBasis instead of minHeight for child views along with alignContent: 'stretch' in the parent view.
Having some styling issues on React Native with Shadows.
I'd like to get a shadow on just the image, which has curved edges (not a square) with the borderradius I've given it. But if I apply a shadow on the parent View, it can't seem to 'follow the edges' of the Image. I'd like for the shadow to be around the curved edges of the Image, not around the square view.
Here is my code:
<View style={[styles.closedcontainer]}>
<Image source={{uri: props.food.url}}
style={styles.smallimage}
/>
</View>
And here is my styling:
const styles = StyleSheet.create({
closedcontainer: {
height: 100,
width: 100,
flexDirection: 'row',
flexWrap: 'wrap',
paddingLeft: 50,
paddingRight: 50,
paddingBottom: 0,
paddingTop: 0,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff9f9',
shadowColor: 'black',
shadowOffset: {width: 2, height: 5},
shadowOpacity: .30,
shadowRadius: 5,
// overflow: 'hidden'
},
smallimage: {
height: 100,
width: 100,
borderRadius: 30,
borderColor: "#f97070",
borderWidth: 2.75,
margin: 10,
backgroundColor: 'white',
resizeMode: 'contain'
}
I thought perhaps adding overflow hidden to the parent View's styling (closedcontainer) would do it, but that gets hides the whole shadow altogether.
Any ideas? Thanks!
UPDATE: per suggestion, tried setting the borderRadius directly in the , unfortunately still no luck.
Try setting borderRadius directly as a prop on the image instead using it as a style.
<Image borderRadius={25}/>
Or similar