I have a TextInput in my app.js , but it stays in the middle of the page, But I want it to be on the top of the page, I mean just under the notification bar, Please how can I do this
<View style={BackStyles.container}>
<TextInput
underlineColorAndroid={'transparent'} style={BackStyles.textBox}
/></View>
const BackStyles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'stretch',
flex: 1,
backgroundColor: '#E2E2E2',
marginTop: 20,
},
textBox: {
height: 36,
padding: 4,
marginRight: 5,
flexGrow: 1,
fontSize: 18,
color: '#48BBEC',
backgroundColor: '#fff'
}
});
Try replacing alignItems: 'center' with alignItems: 'flex-start'.
Related
I'm creating a component to show the flag and country name. I'll like that view (image + text) centered in the available space.
So if the width of parent is all the screen, there will be space in the left and same in the right. If the parent is only 50% of the screen will be then left space on the sides...
What I've done:
<View style={styles.mainContainer} >
<View >
<TouchableOpacity
disabled={this.props.disablePicker}
onPress={() => this.setState({ modalVisible: true, dataSource: this.props.dataSource })}
activeOpacity={0.7}
>
<View>
<View style={[pickerStyle,{ flexDirection:'row'}]} >
<Image style={{}} source={selectedLabel.image} />
<Text style={}>{selectedLabel.name}</Text>
{dropDownImage ? <Image
style={dropDownImageStyle}
resizeMode="contain"
source={dropDownImage}
/> : null}
</View>
</View>
</TouchableOpacity>
</View>
</View>
const CountryPickerStyles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
},
itemSeparatorStyle:{
height: 1,
width: "90%",
alignSelf: "center",
backgroundColor: "#D3D3D3"
},
searchBarContainerStyle: {
marginBottom: 10,
flexDirection: "row",
height: 40,
shadowOpacity: 1.0,
shadowRadius: 5,
shadowOffset: {
width: 1,
height: 1
},
backgroundColor: "rgba(255,255,255,1)",
shadowColor: "#d3d3d3",
borderRadius: 10,
elevation: 3,
marginLeft: 10,
marginRight: 10
},
selectLabelTextStyle: {
color: "#000",
fontSize:16,
flexDirection: "row",
marginLeft: 100,
marginRight: 100
},
placeHolderTextStyle: {
color: "#757575",
padding: 10,
textAlign: "left",
width: "99%",
fontStyle: 'italic',
fontSize:12,
flexDirection: "row"
},
dropDownImageStyle: {
marginLeft: 10,
color: "#757575",
width: 10,
height: 10,
alignSelf: "center"
},
listTextViewStyle: {
color: "#000",
alignItems: "center",
justifyContent: "center",
marginLeft: 20,
marginHorizontal: 10,
textAlign: "left"
},
pickerStyle: {
elevation:0,
paddingRight: 10,
paddingLeft: 10,
marginRight: 10,
marginLeft: 10,
width:"90%",
borderWidth:0 ,
flexDirection: "row"
}
});
here's what I got:
https://pasteboard.co/JG5Rx9P.png
and also https://pasteboard.co/JG5Tthie.png
I would like to make a view that is blurred for non-subscribers to my application, with a lock, when we click we are redirected to the subscription page.
For subscribers I want the view to be visible without any filters.
I don't know how to set up a blurry view above my current view.
Can I do it only with CSS?
I saw the Animated package and react-native-blur but I am not sure of the relevance in my case.
I hope my question is clear and that you can help me. In any case, thank you for reading me.
I have this :
<View style={styles.statContainer}>
<ImageBackground
source={require("../../assets/images/stats-background-5.png")}
style={styles.statImage}
>
<Image
source={require("../../assets/images/lock.png")}
style={{
height: 30,
width: 30,
justifyContent: "flex-start",
alignItems: "flex-start",
}}
></Image>
<Text style={styles.statText}>
{i18n.t("stats.action.countries")}
{"\n"}
<AnimateNumber
value={this.state.stats.countries}
countBy={(
this.state.stats.countries / this.state.animateCountBy +
1
).toFixed(0)}
style={styles.statTextData}
/>{" "}
<Text
style={[styles.textimg, styles.measure]}
onLayout={this.handleLayout}
></Text>
</Text>
</ImageBackground>
</View>
Styles :
statContainer: {
flex: 1,
backgroundColor: "transparent",
marginVertical: 15,
justifyContent: "center",
alignItems: "center",
},
statText: {
fontFamily: "FunctionLH",
color: "white",
fontSize: 20,
paddingVertical: 5,
textAlign: "center",
alignItems: "center",
textShadowColor: "rgba(0, 0, 0, 0.90)",
textShadowOffset: { width: -1, height: 1 },
textShadowRadius: 10,
},
statTextData: {
fontSize: 40,
lineHeight: 50,
paddingVertical: 5,
textAlign: "center",
alignItems: "center",
},
statImage: {
height: 100,
width: "100%",
position: "relative", // because it's parent
justifyContent: "center",
alignItems: "center",
},
If i understood you correctly and you want to blur the image, you can use the blurRadius prop for your Image component:
<Image
source={require("../../assets/images/lock.png")}
blurRadius={5}
style={{
height: 30,
width: 30,
justifyContent: "flex-start",
alignItems: "flex-start",
}}
></Image>
In react-native I am using FlatList component for rendering a grid-like list of data that looks like:
However, I want to make the first row (or header) with bold text stylesheet. Do I need to renderHeader as another FlatList or is there any better solution for this?
My code for this table:
<View style={stylesCustom.container}>
<FlatList
data={ data }
renderItem={({item}) =><View style={stylesCustom.GridViewBlockStyle}>
<Text style={styles.description} > {item.key} </Text></View>}
numColumns={5}
/>
</View>
const stylesCustom = StyleSheet.create({
container: {
justifyContent: 'center',
flex:1,
marginTop: 20
},
GridViewBlockStyle: {
justifyContent: 'center',
flex: 1,
alignItems: 'center',
backgroundColor: '#00BCD4',
borderWidth: 1,
borderColor: 'black'
},
GridViewInsideTextItemStyle: {
color: '#fff',
padding: 10,
fontSize: 18,
justifyContent: 'center',
},
}
I am trying to add form fields validation to several forms on a react native mobile app. I am running into an issue where the View that contains the error message I want to appear seems to take up half of the space to the right of the TextInput control instead of the form control taking up the whole line and the error message appearing on the next line. For example, this is how my form field seems to appear when I add a background color to the error View container:
Here is the css code for this:
import { StyleSheet } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
const INPUT_HEIGHT = 36;
const BORDER_RADIUS = 4;
export default EStyleSheet.create({
$buttonBackgroundColorBase: '$white',
$buttonBackgroundColorModifier: 0.1,
container: {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-start',
backgroundColor: '$white',
height: INPUT_HEIGHT,
borderRadius: BORDER_RADIUS,
marginVertical: 11,
borderWidth: 1,
borderColor: 'gray'
},
containerDisabled: {
backgroundColor: '$lightGray',
},
buttonContainer: {
flex: 1,
height: INPUT_HEIGHT,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '$white',
borderTopLeftRadius: BORDER_RADIUS,
borderBottomLeftRadius: BORDER_RADIUS,
},
buttonText: {
fontWeight: '600',
fontSize: 20,
paddingHorizontal: 16,
color: '$primaryBlue',
},
separator: {
height: INPUT_HEIGHT,
width: StyleSheet.hairlineWidth,
backgroundColor: '$border',
},
input: {
height: INPUT_HEIGHT,
flex: 1,
//width: '100%',
borderTopRightRadius: BORDER_RADIUS,
paddingHorizontal: 8,
backgroundColor: '$white',
marginBottom: 0,
paddingBottom: 0,
marginTop: 0,
paddingTop: 0
},
icon: {
flex: 1,
alignSelf: 'flex-start'
},
errorContainer: {
height: INPUT_HEIGHT,
flex: 1,
paddingHorizontal: 8,
backgroundColor: 'transparent'
}
});
The JSX code:
<View style={containerStyles}>
<View style={{flex: 1, flexDirection: 'column', alignSelf: 'stretch'}}><TextInput style={textStyles} underlineColorAndroid="transparent" {...props} /></View>
<View style={{flex: 1, flexDirection: 'column', alignSelf: 'stretch', backgroundColor: '#ff0099'}}>{ error }</View>
</View>
The code that generates the error message:
let error = props.error ? <Text style={{color: '#ff0000'}}>{props.error}</Text> : null;
When the onBlur event fires, it keeps adding the error message in the pink area instead of the text field taking up the entire line and the pink area displaying under the text field? I am setting flex=1 for the all of the containers and the text box. I want to allow for multiple different screen resolutions. Please explain what I am doing wrong and can I fix this issue?
In the style object you're passing into your container view, your flexDirection should be 'column'.
I'm trying to have a TouchableHighlight + View above this list of generated comments. I can't seem to bring the start of the comments closer up to where the TouchableHighlight ends (it ends right after the text, no padding/margin below).
Here's the relevant JSX:
renderListView: function() {
return (
<View style={styles.container}>
<TouchableHighlight onPress={this.onSelect}>
<View style={styles.header}>
<Text style={styles.text}>
Visit Site
</Text>
</View>
</TouchableHighlight>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderCommentCell}
style={styles.commentListView} />
</View>
)
},
And here's my styles.js:
container: {
flex: 1,
marginTop: 65,
backgroundColor: '#FFFFFD',
flexDirection: 'column',
},
commentListView:{
margin: 0,
marginTop: 10,
marginRight: 15,
padding: 0,
backgroundColor: '#FFFFFD',
},
centering: {
alignItems: 'center',
justifyContent: 'center',
height: 80
},
header: {
alignItems: 'center',
flexDirection: 'row',
flex: 1
},
loadingText: {
fontSize: 75,
textAlign: 'center',
marginTop: 75,
marginBottom: 10,
marginRight: 10,
color: '#D6573D'
},
text: {
textAlign: 'center',
flexDirection: 'row',
justifyContent: 'center',
alignSelf: 'stretch',
fontSize: 40,
flex: 1
}
Additionally, here's a screenshot of what I'm seeing:
Add automaticallyAdjustContentInsets={false} to your ListView