Basically, i had two buttons that had a top and bottom border, they are inside a view, like this
<View>
<MyTab>Sobre</MyTab>
<MyTab>Portfólio</MyTab>
</View>
This view is inside another one. This main container applies a padding arround the entire app. How can i make this border bottom and top to overlap this main padding and make the border to touch the end of the screen
My css applied to the buttons are
navigationTabs: {
fontFamily: Fonts.main.REGULAR,
width: '50%',
borderRadius: 0,
paddingTop: ScreenSize.getSpaces(10),
paddingBottom: ScreenSize.getSpaces(10),
marginBottom: ScreenSize.getSpaces(10),
textAlign: 'center',
borderColor: Colors.TEXT_DARK,
borderTopWidth: 0.5,
borderBottomWidth: 0.5,
},
Related
I have an image container that wraps dynamic number of circular image components as shown below:
<View style={styles.imageContainer}>
{imageList.map(item=> <Image .../>)}
</View>
container has the following style:
imageContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
flexWrap: 'wrap',
width: '100%',
borderWidth: 1,
paddingVertical: 20,
},
As you can see, since justifyContent is flex-start, it leaves more space on the right than on the left side of the container. I tried doing justifyContent: 'center', but it leaves with the following:
now the left and right spaces are equal, but problem is that the images on the second row are centered, which is not what I want. I want them to align to left just like the first screen shot (but left/right space of the container being equal).
How would I solve the problem?
Thanks!
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 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.
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
I have a view with an icon (from react-native-vector-icons) inside as following:
return (
<View style={styles.iconContainerStyle}>
<Icon name='menu' size={23} style={styles.iconStyle} />
</View>
);
The following is the styling for both the components:
const styles = {
iconContainerStyle: {
justifyContent: 'center',
alignItems: 'center',
height: 30,
width: 35,
borderRadius: 5,
backgroundColor: '#ffffff',
padding: 2
},
iconStyle: {
color: '#2279b4',
}
};
The weird part is that the border radius prop of 5 should give evenly rounded borders, but this is what I get:
Notice that on the right hand side, the borders are sharper then the left part!
I even tried with different borderRaduis values, its still the same concept.
The header you see is provided by react-native-router-flex for my scenes, I think this is also a factor as their styles are also applied on the hamburger button.
A work around (temporarily) is by supplying another parent view with he following style:
<View style={{ justifyContent: 'center', alignItems: 'center', height: 35, width: 40, }}>
The height and width need to be a value bigger then that of the iconContainer.
Please add border: 1px solid #f00; to your code to see if toggle icon is not hidden behind something.
If it looks fine, try to add seperate radius to each angle, Like:
border-top-left-radius: 5px;
border-top-right-radius: 5px;
and so on. Also, try to use border-radius styles with !important.