I have react-native TextInput that automatically grows if I input long strings. On iOS it works as expected, but on Android, it starts cutting-off left side after 5-7 characters. The longer the string - the bigger cut-off. I tried to remove margins and paddings - no change. I looked into props in documentation - couldn't find a solution yet. I can scroll to see the cutted-off string, but I would like to see it without scrolling unless there is no more space to grow.
<TextInput
key={key}
style={{
flex:1,
fontSize: '1.2rem',
fontWeight: 'bold',
}}
value={this.state.value}
onChangeText={this._onChangeText}
underlineColorAndroid="transparent"
autoCapitalize="none"
autoCompleteType='off' // Android
autoCorrect={false} // iOS
contextMenuHidden={true}
importantForAutofill="no"
keyboardAppearance="dark"
maxLength={150}
returnKeyType={returnKeyType}
spellCheck={false}
keyboardType={Platform.OS==='ios'
?'default'
:"visible-password" // to disable autocorrect suggestions on android
}
/>
Setting textBreakStrategy to simple on the TextInput element also seems to work for some devices.
Basically this is the conflict with the system font, so you can specify some other fontFamily for your text input. On more hack can be adding some extra space on left
When I was preparing the question I found out that setting fontWeight: 'bold' causes this issue. But I am still looking at how to make it work with the bold text (if possible).
I tried to find a font which is bold without bold property, but it behaves the same... So it seems that TextInput works fine only with the default font, without bold property, which is unhandy.
Issue on github: https://github.com/facebook/react-native/issues/30317
Related
In my React Native Project, I am trying to make some kind of lists using Flatlist or sometimes using map method, for executing JSX Element. I am getting the result correctly, But there is a bit of a problem in separate.
Let's take chatting app example, When we open WhatsApp there are a lot of people showing up, but there is also a tiny separator after each item, That looks great, Now exactly when I try to put that separator in my React Native application using ItemSeparatorComponent attribute in Flatlist, It's working but still in some places, meaning in some items that separator not showing up, its looks missing, it feels that there is no border/separator. And actually what's going on is that, the below item from that separator which is hidden or which height looks smaller than others, that below View go a little bit towards the upside, so the separator gets to hide, That's the main problem, Why is that happening, I tried everything but still, I am getting that UI problem.
Here is code example:
<FlatList
data={actionSheet._data}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
keyExtractor={(_, index) => index}
renderItem={({item, index}) => <ActionSheetClickableItem data={item} index={index}/> }
ItemSeparatorComponent={() => (
<View
style={{
height: 1,
width: '100%',
backgroundColor: 'red'
}}
/>
)}
/>
OR
<ScrollView>
{
actionSheet._data.map((item, index) => (
<>
<ActionSheetClickableItem data={item} index={index} key={index}/>
<View
style={{
height: 1,
width: '100%',
backgroundColor: 'red'
}}
/>
</>
))
}
</ScrollView>
So according to the above code, I know for sure, that everything is correct, But why is that separator get hidden, If we look at this picture in the area of the green rectangles, there is no border showing up, Why... I want to show it here, I tried to put zIndex property, that trick working correctly but that isn't the solution, It have to correct view as we expecting, why its behave like this, any solution??????
I was facing the same issue.
That might be with Emulator or Your screen.
You can use also increase the height of itemSeparater or make the background color more darker.
If you check it in real device then it displays all the separaters.
I am using react-native-timeago to display how long ago a post was written. So far, it is working fine, but I am trying to incorporate a dark theme on my app and the timeago text is black - this doesn't work out well.
Here is the code I am using to try and change the color:
<View style={styles.timeContainer}>
<Text style={{color: 'white'}}> <TimeAgo time = {this.state.date_created} /> </Text>
</View>
the styling:
timeContainer: {
paddingLeft: 20,
color: '#FFFFFF',
},
It is still black. I even dm'ed the creator of the package on twitter to ask him if it is possible to turn it white, because I am having no luck. Let me know if you know how to do it/know of an alternative package I can use to make the text color white.
Simply adding style props to timeago worked. I don't know why it didn't last time I tried, but this time It did:
<TimeAgo style={{color: '#696969'}} time = {this.state.date_created} />
I am new to React Native and wanted to create a text with border. Therefore I checked the docs at https://facebook.github.io/react-native/docs/text - the word "border" appears exactly zero times. However, border is available on Text and this works fine:
<Text style={{fontSize: 30, borderWidth: 1, borderColor: 'red'}}>Hello, world!</Text>
But where is this documented? Did I look at the wrong place? Thanks!
It is included under the style prop, there is a link to the inherited View Style Props that include the border details that you are after.
I have the following react-native code which does exactly what I want because it prints a solid black rectangle:
getTable() {
const cell = {
backgroundColor:'black',
flex:1,
height:50,
};
const table = {
borderColor:'black',
borderLeftWidth:0,
borderRightWidth:0,
borderTopWidth:0,
borderBottomWidth:0,
width:'100%'};
return (
<View style={table}>
<View style={{flexDirection:"row"}}>
<View style={cell}></View>
<View style={cell}></View>
<View style={cell}></View>
</View>
</View>
);
}
However, when I change the table.borderLeftWidth to a value of 1, I see a white vertical line 66% from the left of the black box as depicted in this image:
Why does adding a border left to the container cause a white line to the interior content?
This issue happens in all iOS devices and all iOS simulated devices. It does not appear in Android. What am I doing wrong?
Based on the fact that this issue only occurs on iOS devices I'd suspect it's an issue with the iOS implementation. The react-native issue #2089 on GitHub seems to be similar to what you're encountering.
The issue lies in react-native's "implementation" of CSS on iOS devices (since it's not actually CSS) and that it's simply a rendering bug (probably with flexbox). I'd recommend that you post about your issue there and see if they can resolve it.
I've been trying to make a growing textinput with multiple lines now for a while, and is now finding my app in a situation where the keyboard blocks the text when entering a new line on the textinput. I've tried solutions ranging from KeyboardAwareScrollView-based solutions to ScrollView solutions, but alas nothing I've tried yet have worked.
I would really appreciate if someone could provide me with a solution that works for both android and iOS.
What I have now is a view with a textinput with multiline prop
<View style={{ height: this.state.height, flex: 1 }}>
<TextInput
{...otherProps}
placeholder="Skriv här"
placeholderTextColor="rgba(0,0,0,0.3)"
blurOnSubmit={false}
multiline
onContentSizeChange={this._onContentSizeChange}
style={[styles.textInputStyle, { height: this.state.height }]}
/>
</View>
with the _onContentSizeChange function as follows:
_onContentSizeChange = (event): void => {
const height = event.nativeEvent.contentSize.height;
this.setState({ height });
}
Problem illustrated with pictures:
imgur album
KeyboardAvoidingView seems to be the solution for you. You can set the distance between your view and the keyboard and calculate it with the height of your input. In the docs you find all properties: https://facebook.github.io/react-native/docs/keyboardavoidingview.html
You can also try using KeyboardAvoidingScrollView, then when your input is high enough you just scroll down the screen.
Here's an awesome article with great examples of keyboard avoids: https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580
Hope it helps.