Why does iOS not center the text input control?
I am including the render and stylesheet
code:
left android, right ios
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.input}
onChangeText={(text) => this.setState({text})}
underlineColorAndroid='rgba(0,0,0,0)'
value={this.state.text}
placeholder= 'username'
/>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#13493A'
}
input: {
height: 40,
width: 250,
borderRadius: 5,
backgroundColor: '#598176',
color: 'white',
marginTop: 30,
textAlign: 'center'
}
});
Thank you in advance,
Anthonie
Looking on the issue tracker, this appears to be a bug in React Native on iOS: #11892 So your code should work but doesn't. There is a listed workaround which is to add alignSelf: 'center' to the TextInput's styles (see example).
Related
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 want to make a floating image that looks like this, float on a carousel
1
I've done this
const styles = StyleSheet.create({
manualHeader: {
backgroundColor: color.light_blue,
height:150,
width:150,
borderRadius: 150/2,
alignItems: 'center',
},
manualImage: {
height: normalize(60),
width: normalize(60),
resizeMode: 'contain',
marginVertical: normalize(15),
},
});
<View style={styles.manualContainer}>
<View style={styles.manualHeader}>
<Image style={styles.manualImage} source={item.image} />
</View>
<View style={styles.manualBody}>
</View>
</View>
and it looks like this
!2
This is a simple example using margin. Also, we can use absolute positioning.
Also, I've created the below example in the snack.
https://snack.expo.io/Sk882TV1r
In the example below, just add your image source.
import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
// or any pure javascript modules available in npm
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone!.
</Text>
<View style={styles.mybody}>
<View style={styles.imageContainer}>
<Image style={styles.imageStyle} source={{}}/>
</View>
<View style={styles.bodyContainer}>
<Text style={styles.bodyParagraph}>
Local files and assets can be imported by dragging and dropping them into the editor
Local files and assets can be imported by dragging and dropping them into the editor
Local files and assets can be imported by dragging and dropping them into the editor
Local files and assets can be imported by dragging and dropping them into the editor
</Text>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
imageContainer:{
marginTop: -70,
justifyContent: 'center',
alignItems: 'center'
},
imageStyle:{
height: 150,
width:150,
backgroundColor:'yellow',
borderRadius:150/2,
alignItems: 'center',
},
paragraph: {
margin: 24,
marginBottom:100,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
mybody:{
backgroundColor:'red'
},
bodyContainer: {
alignItems: 'center',
justifyContent: 'center',
padding: 24,
// backgroundColor:'red'
},
bodyParagraph:{
margin: 10,
marginBottom:100,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
}
});
The final output looks like this.
Thanks!
I have a few elements on my app screen and I want the last one to be positioned towards the bottom-right (I'm using the Expo client on Android). Here's the render() function from App.js:
render() {
return (
<View style={styles.container}>
<StatusBar
hidden={true}
/>
<TodoItem/>
<TodoItem/>
<TodoItem/>
<AddTodoButton style={styles.button}/>
</View>
);
}
So, it's the <AddTodoButton\> that I want to position. Here's the styles I'm using:
const styles = StyleSheet.create({
container: {
backgroundColor: '#fcf7e2',
height: '100%',
},
button: {
position: 'absolute',
bottom: 0,
right: 0,
}
});
The code for AddTodoButton is as follows:
const Button = () => (
<Text style={styles.button}>+</Text>
);
const styles = StyleSheet.create({
button: {
fontSize: 30,
paddingLeft: 21,
paddingTop: 7,
width: 60,
height: 60,
backgroundColor: '#FF4456',
borderRadius: 60/2,
overflow: 'hidden',
}
});
I've tried several variations of styles for the button property, but the element doesn't respond and is stuck to the left edge right after the three <TodoItem/> (which are nothing but <Text> as of now).
I'm happy doing this in Flexbox, except that I don't know how to and managed to mess up the layout completely when I tried. :|
Any thoughts?
See if simply adding flex:1 to container style works, if not try the following
render() {
return (
<View style={styles.container}>
<StatusBar
hidden={true}
/>
<TodoItem/>
<TodoItem/>
<TodoItem/>
<View style={styles.buttonContainer}>
<AddTodoButton style={styles.button}/>
</View>
</View>
);
}
// In your styles, do the following
container: {
flex: 1
}
buttonContainer{
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'flex-end',
alignSelf: 'flex-end'
}
Not sure about your AddTodoButton but I'd recommend looking there to see if that's the one not pushing things to the right.
I think you just simply did not apply the style to your button:
const Button = (props) => (
<Text style={[styles.button,props.style]}>+</Text>
);
const styles = StyleSheet.create({
button: {
fontSize: 30,
paddingLeft: 21,
paddingTop: 7,
width: 60,
height: 60,
backgroundColor: '#FF4456',
borderRadius: 60/2,
overflow: 'hidden',
}
});
Here is my code. I want the product view to take up 90% width of its parent. However, the settings below are not working.
...any idea how to achieve it without using dimensions?
return (
<LazyloadScrollView
style={styles.container}
contentContainerStyle={styles.content}
name="scrollImage" >
{list.map((product, i) => <View key={i} style={styles.product}>
<LazyloadImage
host="scrollImage"
style={styles.image}
source={image}
animation={false}>
<View style={styles.id}>
<Text style={styles.idText}>{product.id}</Text>
</View>
</LazyloadImage>
</View>)
}
</LazyloadScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff'
},
content: {
paddingTop: 20,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#eee'
},
product: {
flex: 0.9,
marginTop: 5,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#FFFFFF'
},
Why not use Dimensions? It will enable your app to be responsive.
If you don't want to use dimensions, try some style settings in the container and it's children, for example, make it full width with padding
container: {
backgroundColor: '#ffffff',
alignSelf: 'stretch',
padding: 30
}
I don't know if it works because you would have to post the rest of the code to test it but keep playing with the style and flex properties until you make it work, shouldn't take long.
Btw, always good to revisit the official layout props docs from react native
And css tricks guide to flexbox
What is the best way to align the placeholder text for TextInput component? I have already attempted to use the styles component as described below. There doesn't seem to be a property for this.
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.textInput}
onChangeText={(text) => this.setState({
username: text
})}
placeholder='Add Username'
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
textInput: {
height: 40,
width: 200,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
borderColor: 'gray',
borderWidth: 1,
}
});
Add textAlign: 'center' to your textInput style.
Add textAlign={'center'} as a property to the TextInput component
if you doesnt give multiline property of textinput 'true'
place holder is always center of text input
you can give padding for example paddingTop
to style of textInput
to make distance between place holder and textinput
set TextInput style padding:0 and adjust spacing accordingly