How to change the underline thickness in react native - javascript

I have been using reactive native for a few weeks and I have stuck at a point. I have a text and it is underlined. But I need to make the thickness of the underline higher so that it is clearly visible. I tried finding a solution and didn't get any. Can someone help me here?
My code is like the following. :
<Text style={{textDecorationLine: 'underline'}}>Underlined Text</Text>

<TextInput style={styles.textInput}/>
const styles = StyleSheet.create({
textInput: {
borderBottomColor: '#000', // Add this to specify bottom border color
borderBottomWidth: 10 // Add this to specify bottom border thickness
}
});

Underline Text
const styles = StyleSheet.create(
{
Container:
{
justifyContent: 'center',
flex: 1,
},
TextStyle:
{
textAlign: 'center',
fontSize: 20,
textDecorationLine: 'underline',
}
}

Related

React Native TextInput on iPhone initially show all the content inside

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

How to make a view height fit the content inside in react native?

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

decrease distance between bottomBorder and text

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

Scrollview cutting off the bottom of tiled-list

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.

React Navigation Bottom TabBar Icon Spacing

I am using React Navigation with React Native. This is on Android.
I am trying to add some spacing between the icon and the top of the tab bar and reduce the spacing between icon and the label.
I am trying to change the bottom border color ie Yellow line.
I am trying to reduce the spacing, padding left and right inside each cell.
Any idea how I can achieve this?
{
tabBarPosition: 'bottom',
animationEnabled: true,
swipeEnabled: true,
tabBarOptions: {
showIcon: true,
labelStyle: {
fontSize: 8
},
style: {
backgroundColor: 'grey',
},
tabStyle: {
height: 49
},
iconStyle: {
flexGrow: 0,
marginTop: 1.5
}
}
}
Regarding the first problem about the spacing between the icon and the top of the tab bar you can add padding to the tabStyle property in tabBarOptions:
tabBarOptions: {
tabStyle: {
paddingVertical: 5
}
}
For reducing the space between the icon and the label, you can add some padding or margin to your Icon object:
tabBarIcon: ({ tintColor }) => {
return <Icon containerStyle={{ marginTop: 6 }} name="map" size={25} color={tintColor} />;
},
About the problem with the active Yellow line on Android, you can change the background color property to be transparent or set 0 for height:
tabBarOptions: {
indicatorStyle: {
height: 0
}
}
And for the last problem about the problem about the space between the cells, I don't think that there is a solution for now.
You can try to make the navigation smaller ( for example: width: '80%' )... this will set the cells closer to each other... but I have never tried that and I am not sure is it a good solution ;)
To change the distance between the icon and the top of the bar (Question 1 as of react-navigation 4.x), add padding to tabStyle inside tabBarOptions:
tabBarOptions: {
tabStyle: {
paddingBottom: 8,
paddingTop: 8,
}
}
Try the indicatorStyle config option:
tabBarOptions: {
indicatorStyle: {
backgroundColor: 'transparent'
}
}

Categories

Resources