I'm using react-native-elements Icon component and I'm trying to make it smaller, but only the height, not the size. I want to keep the same size, but with a smaller height.
The Problem is that when I change the height of the icon, the icon itself doesn't get up, only cuts the bottom part of the icon.
I want to center the icon.
Here is the icon with no height, it has some weird paddings that even with padding zero, it doesn't go away.
Here is the icon with a smaller height, but the bottom part of the icon is cut off.
Here is the code I have done so far. Trying to make the Icon smaller.
* only important parts
import { StyleSheet } from 'react-native'
import { Icon } from 'react-native-elements'
<Icon
name='angle-up'
type='font-awesome'
color='blue'
containerStyle={iconStyles.container}
iconStyle={iconStyles.icon}
onPress={() => this.handlePlusValue(time, i)}
size={75}
/>
const iconStyles = StyleSheet.create({
container: {
alignSelf: 'center',
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
icon: {
backgroundColor: 'green',
height: 50,
textAlign: 'center',
width: 100,
},
});
How can I make the height of the icon smaller, without changing the size of it, but also make the icon in the center?
Related
For context, I'm trying to make a progress circle following this article; essentially, I'm overlaying coloured semi-circles made from borders on top of a base circular border to represent progress. These semi-circle borders are theoretically made by setting the bottom and left borders to transparent, but when I do this the entire border disappears.
This is the simplified portion of the code that I'm working with:
import { StyleSheet, View } from 'react-native';
export default function App() {
return (
<View style={styles.semicircle}></View>
);
}
const styles = StyleSheet.create({
semicircle: {
width: 200,
height: 200,
borderWidth: 20,
position: 'absolute',
borderLeftColor: 'transparent',
borderBottomColor: 'transparent',
borderRightColor: '#3498db',
borderTopColor: '#3498db',
borderRadius: 100
}
});
When I set the transparent border sides to black instead, the entire circle is visible like so, but having any transparent borders causes the entire border to disappear. How do I fix this? Any help would be greatly appreciated.
I want to have an Expo BarCodeScanner inside of a view on a screen.
I've been using vw and vh for width and height because I want it to change based on the amount of screen space I have. I've tried putting a border around it but it never shows up. I've tried putting it on the view around the barcodescanner as well as the scanner itself.
Here is the code snippet of my barcodescanner as well as the corresponding styles and screenshot.
scannerContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
width: vw(100),
maxHeight: vh(50),
backgroundColor: 'red',
borderColor: colors.primary,
borderWidth: 5
}
<View style={styles.scannerContainer}>
<BarCodeScanner
onBarCodeScanned={(hasScan) ? undefined : handleScan}
barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
style={[StyleSheet.absoluteFillObject]}
/>
</View>
Instead of using the barcode you can use expo camera because BarCodeScanner have active issue.
Here is the code
import { Camera } from 'expo-camera';
<Camera
onBarCodeScanned={this.onBarCodeScanned}
ratio='16:9'
style={StyleSheet.absoluteFillObject}
/>
Link: https://github.com/expo/expo/issues/5212
I'm trying to make a basic tab application with React Navigation and so I have three pages with plain text. They centre vertically but not horizontally on the tabs. This is using alignContent and justifyContent in conjunction with each other (which has worked for me in the past).
At first I suspected the flex was only flexing vertically and so I applied a contrasting colour. However it seems to span the tab. I have also tried textAlign, but neither cases seem to work.
This is an example of one of the screens:
export class ExampleScreen extends Component {
render() {
return(
<View style={styles.container}>
<Text>Example!</Text>
</View>
)
}
}
And here is the StyleSheet:
export const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFF',
alignContent: 'center',
justifyContent: 'center'
}
})
There are no error messages. However I would expect the text to centre horizontally but all I get is this:
Your text is not horizontally center because Text is taking full width of the screen,
you need to center content inside Text
<Text style={{ textAlign: 'center' }}>Example!</Text>
Background
I have an image placed on a screen meant to show when the screen loads other content.
I want to center the image so it is always center on all devices.
Problem
Currently the image shows up top center. I would like it to be aligned vertically as well. Also to be sure that it will always look the same on all devices.
Question
What is the solution to make sure the image is always centered and the right size for all devices?
Example,
My current code,
In Photoshop
Image is 300 Resolution
Height is 776 px
Width is 600 px
I want the image to be centered horizontally and vertically in all devices and look good without pixelating. Natively I know I need to set the image sizes. But from my understanding in React Native I can use on image but then use JSX to handle it being responsive.
import React from 'react';
import {
StyleSheet,
View,
Image,
} from 'react-native';
const logo = require('../images/logo.jpg');
const LoadingScreen = () => (
<View>
<Image
style={styles.logo}
source={logo}
/>
</View>
);
const styles = StyleSheet.create({
logo: {
justifyContent: 'center',
alignItems: 'center',
width: 300,
height: 400,
},
});
export default LoadingScreen;
You need to set the style of <View> for justifyContent and alignItems for centering the <Image>.
Should be like this :
const LoadingScreen = () => (
<View style={styles.container}>
<Image
style={styles.logo}
source={logo}
/>
</View>
);
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
},
logo: {
width: 300,
height: 400,
},
});
Or you can use alignSelf on the <Image> to make it center, but it will still need to add justifyContent on <View> to make it center vertically.
The View container should have styling as
flexDirection: 'column'
justifyContent: 'center'
alignItems: 'center'
height: '100%'
The height makes sure it spans throughout the page, thus making the image become both vertically and horizontally aligned.
For the image size, I think using percentage will do the trick instead of defining definite width/height.
Set in view:
justifycontent:center
And in child:
alignself:center
And perform in task.
Set in parent view:
justifycontent:center
And in child set:
alignself:center
Using React native 0.26,
My component is something like this
const Search = () => {
return (
<View style={styles.backgroundImage}>
<TextInput style={styles.textInput} onChangeText={(text) => console.log(text)} placeholder={"Enter Search Term"}/>
</View>
)
}
And my styles :
const styles = StyleSheet.create({
backgroundImage: {
flex : 1,
flexDirection: "column",
justifyContent: 'center',
alignItems: 'center'
},
textInput: {
justifyContent: "center",
alignItems: "stretch",
borderRightWidth: 30,
borderLeftWidth: 30,
height: 50,
borderColor: "#FFFFFF",
}
})
The problems that I am facing are
The border right width and left width do not seem to have any effect and the placeholder text just begins on the left edge.
The background of TextInput is "grey" its the same as the View's background. I was expecting it to be white by default, (Feels transparent).
With iOS simulator how to bring up the keyboard, I would like to set returnKeyType and see how the keyboard looks (and have some code on onSubmitEditing and test).
Screenshot below :
1 You cannot declare a specific border directly on the TextInput unless multiline is enabled (For example borderLeftWidth will not work unless multiline={true} is enabled but borderWidth will work), but you can just wrap the TextInput in a View and give it a border.
inputContainer: {
borderLeftWidth: 4,
borderRightWidth: 4,
height: 70
},
input: {
height: 70,
backgroundColor: '#ffffff',
paddingLeft: 15,
paddingRight: 15
}
2 You need to declare a backgroundColor for the TextInput.
3 To make the native keyboard show up, you need to go to the simulator menu and disconnect your hardware. Go to Hardware -> Keyboard -> Connect Hardware Keyboard, toggle it off.
As of react-native: 0.61.5 you can directly set the borderBottomWidth on TextInput. Like below in inline style or if you want in separate style object.
style = {{borderBottomWidth : 1.0}}
By default the boderWidth will be set for 0. So use borderWidth : 5 defaults for (Top, Right, Bottom, Left).
If you want to asign width individually you have options like,
style = {{
borderStartWidth : 2
borderEndWidth : 3
borderTopWidth : 1
boderLeftWidth: 2
borderRightWidth: 3
borderBottomWidth : 4
}}