I'm new to react-native-material and I have the label text on top of the input text image when I use the :
<View style={styles.layout} >
<TextInput label="Email" variant="outlined" style={styles.textInput} />
<View/>
const styles = StyleSheet.create({
layout: {
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
width: "100%"
},
textInput:{
width: "80%",
marginVertical: 10
},
});
Thank you in advance for your help.
I expect the label to stay on top as long as the there's an input in the TextInput
Related
I'm trying to align my component TextInput that uses a TextField from #ubaids/react-native-material-textfield and a Text but i couldn’t. The result i have is in the image below :
I added alignItems: 'center' in the container but i didn't work. My code is:
<View style={styles.container}>
<View style={styles.input}>
<TextInput
containerStyle={{ height: 20, marginVertical: 10 }}
label=""
value=""
keyboardType="phone-pad"
/>
</View>
<View style={styles.label}>
<Text style={[styles.text, { textTransform: 'uppercase' }]}>Text</Text>
</View>
</View>
container: {
flexDirection: 'row',
alignItems: 'center'
},
input: {
flex: 0.2
},
label: {
paddingTop: 20,
paddingHorizontal: 10
},
You should try and add justifyContent to your container‘s Styling:
container: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
}
And also, you don't need the view above the Text with the styles.label.
This way, both your TextInput and your Text components will be aligned on both axis
You have to set display css property to inline-block for both input and label style:
text: {
fontWeight: "bold",
fontSize: "1.5rem",
marginVertical: "1em",
},
container: {
flexDirection: "row",
alignItems: "center"
},
input: {
flex: 0.2,
display: 'inline-block'
},
label: {
// paddingTop: 20,
paddingHorizontal: 10,
display: 'inline-block'
}
As you can see I commented paddingTop: 20 in label (but if you need, you can add it again but you have to add it to input also).
Here a codesandbox.
Already answered but I'd like to add a bit more on the topic and different ways to do it depending on your use case.
You can add adjustsFontSizeToFit={true} (currently undocumented) to Text Component to auto adjust the size inside a parent node.
<Text adjustsFontSizeToFit={true} numberOfLines={1}>Hiiiz</Text>
You can also add the following in your Text Component:
<Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
I have two Views under my main View
<View style={styles.container}>
<View style={styles.header}>
<Image
resizeMode="contain"
source={require("../assets/logo-large.png")}
style={styles.logo}
/>
</View>
<View style={styles.content}>
<TextInput
style={styles.input}
onChangeText={(email) => setEmail(email)}
defaultValue={email}
placeholder="Your email"
autoCompleteType="email"
textContentType="emailAddress"
></TextInput>
</View>
My code for styling looks like this:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
},
header: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "gold",
},
content: {
flex: 2,
justifyContent: "center",
alignItems: "center",
backgroundColor: "lightblue",
},
});
What I want to achieve is to have a header with logo at the top of the screen and to have the content below, but I want to have all elements in content to be top aligned. At the moment those elements are center aligned in content.
Can someone help with this?
Since your main view defaults to flex-direction = column then your content style justifyContent: "center", will arrange elements from content at vertical middle and alignItems: "center" will make them horizontal center. You need to remove those to keep the content elements to start from the top.
Please update your styles to the following.
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
},
header: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "gold",
},
content: {
flex: 2,
alignItems: "center",
backgroundColor: "lightblue",
},
});
Good Luck
I have adjusted it using justifyContent on header and footer styles.
header: {
flex: 1,
justifyContent: "flex-end",
alignItems: "center",
backgroundColor: "gold",
paddingBottom: "10%",
},
content: {
flex: 2,
justifyContent: "flex-start",
alignItems: "center",
backgroundColor: "lightblue",
},
I am having the following modal box. Problem is whatever renderContent displays gets overflows visually outside the right boundary of modal box. How to fix it?
<Modal
transparent
animationType="fade"
visible={this.state.visible}
onRequestClose={this.hideModal}
>
<Container style={styles.overlay}>
<View style={[styles.container]}>
{ this.renderContent() }
</View>
</Container>
</Modal>
renderContent = () => {
return (
<ShopList
ref={ref => (this.shopList = ref)}
loadData={this.props.fetch}
/>
);
};
styles
overlay: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: Colors.overlay,
},
container: {
backgroundColor: Colors.white,
borderRadius: Metrics.WIDTH * 0.04,
flexDirection: 'column',
width: '96%',
},
Did you try this?
container: {
overflow: hidden,
backgroundColor: Colors.white,
borderRadius: Metrics.WIDTH * 0.04,
flexDirection: 'column',
width: '96%',
},
If not work, define max and min lengths to width content
I'm trying to have my two buttons sit in a row, equally spaced, and I want them of equal height and width. But they look like this at the moment.
I'm very new to React Native so please go gently!
Here's my code for what's returned.
return (
<View style={styles.screen}>
<View style={styles.horseProfile}>
<HorseProfile />
</View>
<View style={styles.vitalSignsGrid}>
<LargeVitalSigns />
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity onPress={this._alertHandler}>
<View style={styles.buttonStyling}>
<Text style={styles.buttonText}>ECG</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this._alertHandler}>
<View style={styles.buttonStyling}>
<Text style={styles.buttonText}>Resp Pattern</Text>
</View>
</TouchableOpacity>
</View>
<View>{/* timer and stop button */}</View>
</View>
)
Here are my styles.
const styles = StyleSheet.create({
screen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
horsePatientProfile: {
flex: 1
},
vitalSignsGrid: {
flex: 3,
backgroundColor: '#14172B'
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-around',
backgroundColor: 'green',
width: '100%',
flex: 4
},
buttonStyling: {
backgroundColor: '#2B4250',
borderRadius: 30,
alignItems: 'center',
justifyContent: 'space-around',
width: '50%',
height: '35%',
flexDirection: 'row',
},
buttonText: {
color: '#84C5C6',
fontWeight: 'bold'
}
})
Can anyone help please? Thank you.
the width of your buttons styles.buttonStyling is 50% which is 50% of the parent Component, the parent is the touchableOpacity, since it doesn't have a set width itself it will stretch with the content, in other words the 50% does not mean the same thing, you should give an exact (relative size, I like react-native-size-matter) to the touchable opacity and justifyContent as space between to space evenly
For height, width try using React Native Dimensions React Native Dimentions
Import it:
import {Dimensions} from "react-native";
var {height, width} = Dimensions.get('window');
Example using in style:
buttonStyling: {
backgroundColor: '#2B4250',
borderRadius: 30,
alignItems: 'center',
justifyContent: 'space-around',
width: width/2,
height: height / 3.5,
flexDirection: 'row',
},
or use Flexbox
I currently have a multiline textInput that automatically expands and a button below it. The problem is that the button's location seems to be fixed, it doesn't move down and textInput would just run over it.
Everything is wrapped in a KeyboardAvoidingView:
<KeyboardAvoidingView
style={styles.container}
behavior="padding">
<StatusBar barStyle="light-content"/>
<Text style={styles.title}>{this.state.form.prompt}</Text>
<View style={styles.simpleContainer}>
{this._renderForms()}
<View style={[styles.forwardButtonLocation, styles.indentLeft]}>
<ForwardButton
onButtonPress={this._submitInfo}
/>
</View>
</View>
<View style={{flex: 1, justifyContent: 'flex-end', alignItems: 'flex-end',}}>
<SkipButton
onButtonPress={this._nextState}
/>
</View>
</KeyboardAvoidingView>
this._renderForms() renders the corresponding form for each state, in this case, it renders:
<View style={styles.simpleContainer}>
<AutoExpandingTextInput
style={styles.textContentDark}
placeholder={this.state.form.userInput}
placeholderTextColor={DARK_THEME_CONTENT_COLOR_SECONDARY}
onChangeText={(userInputValue) =>
//TODO: Saving text to nested userInput is causing problem, temporarily save it to userInputValue
//this.setState({form: {...this.state.form, userInput: text}}
this.setState({userInputValue}
)}
/>
</View>
Here is my style sheet:
const styles = StyleSheet.create({
simpleContainer: {
flex:1,
justifyContent: 'center',
},
container: {
flex: 1,
justifyContent: 'space-between',
backgroundColor: THEME_COLOR,
},
title: {
flex: 1,
marginTop: '15%',
marginLeft: '3%',
fontWeight: 'bold',
fontSize: TITLE,
color: DARK_THEME_CONTENT_COLOR_PRIMARY,
},
textContentDimmed: {
fontSize: TITLE_SECONDARY,
color: DARK_THEME_CONTENT_COLOR_SECONDARY,
},
textContentWhite: {
fontSize: TITLE_SECONDARY,
color: DARK_THEME_CONTENT_COLOR_PRIMARY,
},
textContentDark: {
fontSize: TITLE_SECONDARY,
color: LIGHT_THEME_CONTENT_COLOR_SECONDARY,
},
indentLeft: {
marginLeft:'10%',
},
forwardButtonLocation: {
flex: 1,
justifyContent: 'flex-start',
},
whiteLine: {
width: '100%',
height: 1,
marginTop: 4,
marginHorizontal: '6%',
backgroundColor: DARK_THEME_CONTENT_COLOR_PRIMARY,
},
});
Is there any way to automatically relocate the button when the size of the textInput changes?