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.
Related
I have a modal component that overlays my page with a form to make some data inputs.
a second component is rendered next to the form when a certain condition is met (try to fetch data, render if anything is found).
When this happens I would like the whole card containing the two items to expand with some effect (horizontally if on desktop, vertically if on mobile), reducing smoothly the width of the first box during the transion.
I have tried to achieve this using a simple combination of the MUI Grid Container and Grid items,
but with this approach the second item always go on a new line or shows on the right but never changing the modal card overall size.
this is the style applied to the modal card:
sx={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
display: 'flex',
flexDirection: 'column',
transitionDuration: '500ms',
minWidth: '30%'
}}
So I thought of wrapping the 2 brothers in some DIV and apply some custom CSS taking advantage of the transitionDuration to apply an effect. But I couldn't make it work.
here is the style applied to the DIV that wraps the 2 brothers:
<div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
this is the div that contains the form grid container (1):
<div
style={{
flexGrow: 1,
minWidth: '30%',
transitionDuration: '500ms',
transitionTimingFunction: 'ease-out'
}}
>
and this is the div that contains the component to be shown when condition is met (2):
<div
style={{
paddingLeft: 10,
transitionDuration: '500ms',
transitionTimingFunction: 'ease-in',
whiteSpace: 'nowrap',
minWidth: condition ? '200px' : '0%',
width: '0%'
}}
>
can anybody point me in the right direction?
I'm new to CSS
Thanks
When you fetch the data you can add a class (.active or something similar)to the parent container as well and add the styles you want to change like
container.active > child{Blahblah styles}
I have an app which the user holds the screen (anywhere) to display an animation over the background. When the user releases the screen the animation stops and the background reappears. The problem is that I just don't know how to get the animated image to cover the entire screen.
At the moment it is a small rectangle in the centre of the screen.
Here's the code from the render and the style sheet:
render() {
return (
<ImageBackground source={background} style={styles.background}>
<TouchableOpacity style={styles.background}
onPressIn={this.onItemMouseDown}
onPressOut={this.onItemMouseUp}
>
</TouchableOpacity>
{this.state.isOn === true ? (
<View style={styles.background}>
<Text style={styles.timer}>{this.state.time}</Text>
{this.state.stateImages.map((item, index) => {
const opacity = this.opacity[index];
return (
<Animated.View
key={item.id}
style={[styles.anim, { animations: item, opacity}]}
>
<Image source={item.source} style={styles.animImage}/>
</Animated.View>
);
})}
</View>
) : null}
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
// justifyContent: "center",
// alignItems: 'center',
// position:"absolute"
},
background: {
flex: 1,
resizeMode: 'cover',
justifyContent:'center',
},
anim: {
flex: 1,
resizeMode :'cover',
alignSelf: "center",
position: 'absolute',
},
animImage:{
flex: 1,
resizeMode :'cover',
},
timer:{
alignSelf: "center",
zIndex: 100,
},
I've read:
Full screen background image in React Native app
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Setting component height to 100% in react-native
https://reactnative.dev/docs/layout-props
How do I center one image over another in React Native
Image resizing in React Native
But none of the suggestions work.
I think because this is using the <Animated.View/> which uses 2 styles styles.anim and styles.animImage it's not as straight forward as it seems.
How would I make this animated.view cover the screen without using fixed width and height (which wouldn't be compatible with different screen sizes)?
Any ideas?
T
I am working on a React Native App . The components are vertically center as I desire but are all aligned on the bottom and can't get them move up towards the top of the screen.
Please take a look at the layout screen (attached here).
How can I get them to move up top?
Please Note : The yellow color in the screen is to figure out how far the component's view stretches.
I could not figure out to adjust the 'yellow' view. The 'yellow' view is only suppose to consist the donut/menu button .
<View style={styles.container}>
<TouchableOpacity style={styles.drawerButton} onPress={() => this.props.navigation.openDrawer()} >
<Image
source={menu}
style={{width: 25, height: 25, marginLeft: 5}}
/>
</TouchableOpacity>
<TextInput style={styles.addText} placeholder="Add New Item"/>
<Button style = {styles.submitButton} title = "Add" />
<TouchableOpacity style = {styles.pictureButton} onPress = {this.setCameraWindow}>
<Text style={{fontSize:14}}> Take Picture </Text>
</TouchableOpacity>
{this.state.isCameraVisible ? this.takePicture() : null }
</View>
);
}
}
const styles = StyleSheet.create ({
container:{
flex:1,
flexDirection: 'column',
alignItems:'center',
flexGrow: 1,
justifyContent: 'center',
backgroundColor: 'blue'
},
drawerButton:{
flex:1,
flexDirection:'row',
alignSelf:'flex-start',
backgroundColor:'yellow'
},
menuButton: {
height:50,
flex:1,
flexDirection:'column',
alignSelf:'flex-start',
backgroundColor:'yellow',
},
addText:{
flex:1,
flexDirection:'column',
justifyContent:'center',
backgroundColor:'white',
borderBottomColor: 'black',
borderBottomWidth: 2,
alignSelf:'center',
maxHeight:50,
},
submitButton:{
justifyContent:'center'
},
pictureButton:{
backgroundColor:'white',
justifyContent: 'center',
},
});
Thank you
You have given flex:1 inside the style={styles.drawerButton}, thats why its taking up the entire space and other things are pushed to the end of the screen, please remove flex:1 from that, and also remove justifyContent: 'center' from container style. Then all the content will be moved to the top
These styles are what you need. Specifically:
overflow: hidden: Hides the yellow bit when the menu is collapsed.
position: absolute on the menu. This means the menu will appear in the same position regardless of the other content. Use top: 10px; left: 10px to control the actual positioning of the menu.
position: relative on the menu's parent (TouchableOpacity) element. This means the position: absolute of the menu will be relative to the parent element.
You may have to get rid of some of the other styles, at least temporarily, so you can see what is happening.
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.
I want to make a border image to a View , similar to border-image in the css.
How could I achieve it ?
I believe that if you use Styled Components (https://www.styled-components.com/) you can set it with CSS directly. It will be something like this:
import styled from 'styled-components/native';
const StyledView = styled.View`
border-image: <your definition here>;
`;
And then simply use it like you always do:
<StyledView>
</StyledView>
Hope it helps!
You can use ImageBackground component of react-native and wrap your view inside component by adding some padding around your nested view
<ImageBackground source={imageSource}>
<Text style={{padding:20}}> Inside </Text>
</ImageBackground>
I would go with an image that contains your border as the first element of your view and some padding on the contents of the view.
<Image
style={{
backgroundColor: '#ccc',
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center'
}}
source={{ uri: 'path/to/your/image/of/border' }}
>
<Text
style={{
backgroundColor: 'transparent',
textAlign: 'center',
fontSize: 30,
padding: 40,
}}
>
{text}
</Text>