I have a React Native app that uses.
react : 16.0.0-alpha.6
react-native : 0.44.2
And in it I'm using TextInput
The problem is on Android, if the text is more than the TextInput can handle, it's getting right aligned instead of left
I'm expecting it to show something along the lines of :
Lorem ipsum dolor sit amet, consectetur...
This works fine on ios. This issue is only happening on android.
<TextInput
style={inputStyle}
/>
inputStyle: {
fontSize: 20,
flex: 0.6,
textAlign: 'left,
borderWidth: 1,
},
I made few attempts and the best solution I have so far is to enable multiline on TextInput. But I don't want to have a multiline text input. I want a single line TextInput with left text alignment.
This is how it looks like with multiline
Had this issue myself. One alternative is to use the TextInput's selection property, e.g.
selection={{start: 0, end: 0}}
Just make sure you remove the property on input focus (in case the user wants to edit the text again).
You can use:
inputStyle: {
fontSize: 20,
flex: 0.6,
flexWrap: 'wrap',
textAlign: 'left,
borderWidth: 1,
},
flexWrap takes the property of autoHeight adjustment and increases the height of the component based on the content inside it.
Src: Layout Props
Related
React Native : 0.61.4
If paste formatted text into my TextInput, the styles of TextInput are ignored.
<TextInput
multiline
scrollEnabled={false}
inputAccessoryViewID="reviewButton"
style={{
fontSize: 20,
alignSelf: 'center',
marginHorizontal: '15%',
flex: 1,
textAlignVertical: 'top',
color: 'black',
}}
value={content}
maxLength={200}
onChangeText={changeContent}
/>
I specified the color and fontSize in the style of TextInput, but when I use paste, the color and fontSize are different.
How can I remove Text format when pasting?
It only happens on Android.
After doing some research and try to recreate your case in some famous React native app, I think its can't be possible :)
And btw, in case you haven't notice yet, in Android, there are always two options for pasting including Paste and Paste as plain text.
Looking for a solution for this problem since 2 days and the internet didn't provide me with a solution for the first time of my life, so this is my first post on StackOverflow :)
So, I'm building a react-native (0.59.8) app with Expo (3.4.1), testing with Android 9.1.
I have an email TextInput that looks like that :
const style = {
backgroundColor: '#181818',
color: '#fafafa',
width: '100%',
borderColor: $primary,
borderWidth: 1,
borderRadius: 4,
marginBottom: 16,
padding: 8,
};
return (
<TextInput
placeholder="Email"
keyboardType="email-address"
autoCompleteType="email"
style={style.input}
autoCorrect={false}
selectionColor={$primary}
/>
);
The TextInput is first shown as expected, and there are no problems when I fill it manually (typing my email address).
But, when I select an Android suggestion, the TextInput style changes (colour become light yellow, backgroundColor become yellow/green, and borderColor become orange) that is a bit ugly :/.
It looks like the behaviour is the same as -webkit-text-fill-color in standard CSS, but can't find the counterpart in RN.
Thanks for your help :)
https://developer.android.com/guide/topics/text/autofill-optimize#highlighted
You can customized the styling using the android xml files. See here for more details.
Trying to use
StyleSheet.create({
row: {
borderStyle: 'dashed',
borderWidth: 1,
},
})
or any borderWidth and getting inconsistency with dark outlines on some of my elements.
Is this a known bug?
No idea why it's an issue but I solved this by wrapping my dashed border view with another <View> that sets a background color.
I have a circle button (made with borderRadius) in React Native. The text in the component should be centered both vertically and horizonatlly.
Horyzontally it's fine, but the vertical alignment seems to fail whatever I do. Even if it looks good on large cicles with small fontSize, the small circles proof it wrong!
<View style = {{
alignItems:'center',
justifyContent:'center',
backgroundColor:'yellow',
borderColor: this.props.color,
width:size, height:size,
borderRadius:size,
borderWidth:borderWidth,
}}>
<Text style = {{
textAlign: 'center',
backgroundColor:'none',
fontSize:fontSize,
lineHeight:fontSize,
}}>
{this.props.title}
</Text>
</View>
Although already answered elsewhere, I'm unable to center text (in this case) in a circle properly.
As one can see on the image with the green background of the <Text>-Component, the text is just not centered perfectly. Even though the itself is perfecttly aligned...
Here is a snack for Expo with the whole code reduced to the necessary and with different example sizes: https://repl.it/#PaulHuchner/Centered-Text-in-Circles
I have tried the previous answer with only Text and calculating line-height. which looks like a little overkill and didn't work for me. So here's my answer.
I am using View as the container with justifyContent:center
<View style={{
width: 40,
height: 40,
borderRadius: 20,
borderWidth: 1,
borderColor: 'black',
borderStyle: 'solid',
justifyContent: 'center'}}>
<Text style={{fontSize: 20,textAlign: 'center'}}>20</Text></View>
You're trying to set the same fontSize and lineHeight as the circle's diameter, which has borderWidth of 10 included to it.
Due to the borderWidth, the text is being cut and overlayed over the circle. The lineHeight assigned to the cut Text is more than required, hence it is displayed misaligned.
Therefore you need to reduce the fontSize and the lineHeight based on the borderRadius of the circle, to function properly for all dimensions.
<Text style = {{
textAlign: 'center',
backgroundColor:'green',
fontSize:fontSize - 2 * borderWidth, //... One for top and one for bottom alignment
lineHeight:fontSize - (Platform.OS === 'ios' ? 2 * borderWidth : borderWidth), //... One for top and one for bottom alignment
}}>
Here's a snack link
The solution that worked the best for me was instead of using a Text Element, instead, use a plus Icon. The difference is that the viewBox of "+" as a character isn't centered.
If that is confusing look at these three letters
A+a
Notice that "A" is taller than "+" and also "a". So instead, use a PLUS icon instead and it will be perfectly centered such as 24x24 px. This drove me mad!
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
}}