I have a TextInput component with limited width, while the content inside sometimes longer. I set numberOfLines to 1 and expected that each time the content's length larger than the input's width, the overflow part will be hidden. It goes fine on Android, but in iOS, initially it's still show all the content, the overflow part is placed in a new line, but when the input is focused, it becomes as normal as I expected. How can I fix this.
At the first time, when value is set by useEffect
When the input is focused
Code:
<TextInput
allowFontScaling={false}
autoComplete="off"
autoCapitalize={'none'}
onChangeText={e => {
onChange(e);
trigger && trigger([triggerTags]);
}}
value={value}
autoCorrect={false}
spellCheck={false}
placeholderTextColor={Colors.placeholder}
placeholder={placeholder}
style={[
{
zIndex: 100,
borderWidth: 1,
borderRadius: 12,
width: Sizes.width(76),
height: 40,
marginTop: 8,
color: Colors.text,
fontSize: Sizes.h6,
paddingHorizontal: Sizes.padding,
backgroundColor: !editable ? '#E5E5E5' : undefined,
textAlign: 'center',
paddingVertical: 0,
textAlignVertical: 'center',
},
inputStyle,
]}
// multiline={false}
numberOfLines={1}
maxLength={maxLength}
keyboardType={keyboardType}
editable={editable}
/>
I found the solution, just change textAlign from 'center' to undefined
Related
I'm building a mobile chat application and I came across this problem where I display the messages as text inside of a view, but apparently I can't make the messages appear in a certain height where it would fit inside the view. It's either the message is too long so it won't be displayed completely (there isn't enough space in the view) or the message appears but there is a lot of spaces after the text.
Please see the image that describes exactly the problem :
Here is my code :
1- Views :
if (chat.from !== CurrentUser) {
temp_chat.push(
<View key={i} style={styles.messageContainer1}>
<View style={styles.thisUserText}>
<Text style={styles.message}>{chat.msg}</Text>
</View>
<View style={styles.empty}></View>
</View>
);
} else {
temp_chat.push(
<View key={i} style={styles.messageContainer2}>
<View style={styles.empty}></View>
<View style={styles.otherUserText}>
<Text style={styles.message}>{chat.msg}</Text>
</View>
</View>
);
}
2- Style :
messageContainer1: {
flexDirection: "row",
marginBottom: 10,
flex: 1,
},
messageContainer2: {
flexDirection: "row",
justifyContent: "flex-end",
marginBottom: 10,
flex: 1,
},
message: {
fontSize: 16,
color:"#fff",
padding:10
},
empty: {
flex: 1,
},
thisUserText: {
backgroundColor: "#bf0010", // red
flex: 1,
height: 100,
borderRadius: 5,
color:"#fff",
},
otherUserText: {
backgroundColor: "#13283E", // dark blue
flex: 2,
height: 100,
borderRadius: 5,
},
What I need to have is a dynamic height for the red and dark blue views, to make the text inside fit perfectly whether it's a long or short text. How can I achieve this ?
Thanks in advance 🙏
You can use flexBasis: auto
Read here for more information
As an underline, I have added borderBottom to a view that is wrapped around my text element. However, the bottom is a bit lower than how I want it to be. Is there any way I can reduce the distance?
<View
style={[
styles.textContainer,
selected === index ? styles.selectedTab : null,
]}>
<Text style={styles.tabText}>{item.text}</Text>
</View>
selectedTab: {
borderBottomWidth: 3,
borderBottomColor: 'red',
}
Codesandbox:
You'll see the underline when you click on one of the text items.
https://snack.expo.io/#nhammad/shallow-watermelon
In your code you have
tabText: {
color: 'black',
paddingBottom: 10,
},
You can decrease paddingBottom to achieve what you want
I was tasked with making some tweaks on a react native app. while it's not my skill there is no one available to work on this so I am stuck with it. for the most part I was able to make the edits needed, however I have few questions about the code if anyone can help me understand better.
1 - what is the difference between
color={Colors.myColorGold}
color: Colors.myColorGold
2 - if I want to use the predefined style but change one parameter like color, or font size how can I do it while keeping the rest of the parameters
<Text style={{ color: Colors.ochsnerGold, fontWeight: 'bold' }}>
<Text style={styles.emphasized}>{alert.SensorType}</Text>
3 -
what is the differance between the two below
this.props.navigation.navigate('NotificationPreferences');
this.navigate('NotificationPreferences')
4 - and lastly, I wanted to change the color of the placeholder, I have tried everything without success, below is the code and all the things I tried.
const ItemPicker = ({itemOptions, handleChangeitem, selectedItemID}) => {
return Platform.OS === 'ios' ? (
<RNPickerSelect
placeholder={{label: 'Select an item', value: null, placeholderTextColor: Colors.myGold}}
placeholderTextColor={Colors.myGold} //tried this
items={itemOptions}
onValueChange={handleChangeItem}
style={{inputIOS: styles.inputIOS, inputAndroid: styles.inputAndroid, Color: Colors.myGold}} //tried this
value={selectedItemID}
textColor={Colors.myGold} //tried this
/>
) : (
<Picker
selectedValue={selectedItemID}
style={styles.inputAndroid}
onValueChange={handleChangeItem}
textColor={Colors.myGold} //tried this
Color={Colors.myGold} //tried this
>
<Picker.Item label="Select a Item" value="null" textColor={Colors.myGold} Color={Colors.myGold}/> //tried this
{
itemOptions.map((item) => (
<Picker.Item key={item.value} label={item.label} value={item.value} textColor={Colors.myGold} Color={Colors.myGold} /> //tried this
))
}
</Picker>
)
}
For
1. If you are using a component which has style as its props so you can use as color={Colors.myColorGold} . like suppose in
<MaterialIcon color={Colors.myColorGold} />
and if you want to add a color property in the styles object you do :
const proAppHeaderStyles=StyleSheet.create({
hederStyle:{
color:"#4f58ff",
}
})
suppose you want to change in
<Text style={styles.emphasized}> {alert.SensorType}</Text> just go to styles.emphasized object where its defined and add color or fontsize whatever you want to change. e.g
emphasized:{
color:'red'
}
3.this.props.navigation.navigate('NotificationPreferences') is same as the below one. Only that the above one states in explicitly and below syntax will only work if you first destructure navigate. i.e
const {navigate} = this.props.navigation; and after that use navigate as below
this.navigate('NotificationPreferences')
SO you have to apply styles as below
<RNPickerSelect
placeholder={{
label: 'Select a number or add another...',
value: null,
color: 'red',
}}
items={this.state.numbers}
onValueChange={value => {
this.setState({
favNumber: value,
});
}}
style={{
...pickerSelectStyles,
iconContainer: {
top: 20,
right: 10,
},
placeholder: {
color: 'purple',
fontSize: 12,
fontWeight: 'bold',
},
}}
value={this.state.favNumber}
Icon={() => {
return (
<View
style={{
backgroundColor: 'transparent',
borderTopWidth: 10,
borderTopColor: 'gray',
borderRightWidth: 10,
borderRightColor: 'transparent',
borderLeftWidth: 10,
borderLeftColor: 'transparent',
width: 0,
height: 0,
}}
/>
);
}}
/>
so basically inside the style object you need to pass placeholder object and then the style :
style={{
...pickerSelectStyles,
iconContainer: {
top: 20,
right: 10,
},
placeholder: { // this is the part
color: 'purple',
fontSize: 12,
fontWeight: 'bold',
},
}}
Do check out this link : example
ask me for doubts.
I have a scrollview in my React project that is supposed to list a map of data. these tiles also open accordion style in order to display more info. Nine items should be mapped and viewable, however scrollview only shows 7 and the last is cut off/the accordion and the tile itself.
Attempted: Creating a View around it with flex: 1, using FlexGrow instead of flex, adding height: 100.
<ScrollView style={styles.contentContainer}>
<View style={styles.accordianContainer}>
<Accordion
sections={this.props.gyms}
activeSections={this.state.activeSections}
renderHeader={this._renderHeader}
renderContent={this._renderContent}
onChange={this._updateSections}
underlayColor={"#ffffff"}
/>
</View>
</ScrollView>
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
contentContainer: {
flex: 1,
borderColor: 'red',
borderWidth: 1,
},
accordianContainer: {
height: ( Layout.noStatusBarHeight)* .9,
width: Layout.window.width,
marginBottom: Layout.window.height / 4,
}
I had similar issue and I found a solution by adding an extra view with certain height on bottom of scrollview as :
<View style={{height: 54}} />
Hope it helps you.
I've actually a TextInput like that :
<TextInput
onChange={(event) => {
this.setState({
text: event.nativeEvent.text,
height: event.nativeEvent.contentSize.height,
});
}}
editable={!this.state.load}
style={{height: this.state.inputFocused == true || this.state.text.length > 0 || this.state.picture.uri != undefined ? Math.max(height / 11.8, this.state.height) : height / 2.5, width: width, backgroundColor: 'white', fontFamily: 'Aller', fontSize: width / 24, padding: width / 38, alignItems: 'flex-start', justifyContent: 'flex-start', textAlignVertical: 'top',}}
multiline={true}
value={this.state.text}
/>
I'm using this TextInput to add content but also to edit, so I initialize class that uses it with default value in TextInput and height And the height of the textInput does not automatically adjust as I would like.
So how can I do to get height occupied by the text in a textInput without using any event ?
just do not give it a height style, so it will not get any height and match its content height