Scrollview cutting off the bottom of tiled-list - javascript

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.

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

How to change the underline thickness in react native

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',
}
}

React Native / Victory Charts : Need to style coords

I am building a small mobile app in React Native that displays a line graph.
I have built the line graph via Victory Charts component.
This is my App.js
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { VictoryBar, VictoryChart, VictoryAxis, VictoryLine } from 'victory-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<VictoryChart
domainPadding={{x: 40}}
style={{marginLeft: 120}}
>
<VictoryLine
data={[
{logdate: "11-01", temp: 110 },
{logdate: "12-01", temp: 98 },
]}
x="logdate"
y="temp"
style={{
data: {opacity: 0.7},
labels: {fontSize: 12},
parent: {border: "1px dotted #001"}
}}
/>
<VictoryAxis
label="logdate"
style={{
axisLabel: { padding: 30 }
}}
/>
<VictoryAxis dependentAxis
label="temp"
style={{
axisLabel: { padding: 40 }
}}
/>
</VictoryChart>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
The line graph is displayed as shown below
The graph is working fine.
I need help in styling of the x-axis co-ord's label as highlighted in the pic.
Instead of showing "11-01" horizontally I want it to be shown vertically as shown in the pic.
Anyone has any ideas ?
Add tickLabels: { angle: -90, }
in style of VictoryAxis :
<VictoryAxis
label="logdate"
style={{
axisLabel: { padding: 30 },
tickLabels: { angle: -90, }
}}
/>
You should just add two victory Axis before the victory line
add dependentAxis for the first
<VictoryAxis dependentAxis />
for the second add the axeY list to the ticketFormat item and define the -60 angle style.
<VictoryAxis
style={{ tickLabels: { angle: -60 } }}
tickFormat={AxeY}
/>
Hopefully I help you

Categories

Resources