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
Related
Hi I am designing a reporting page for my react-native app. I need to show a circular progress bar and an integer value (0-8) in the middle. I have tried multiple third parties libraries and I am getting similar errors in all of the SVG libraries. So, I want to build a custom circular bar using react-native components. I have already developed a code for it, but the circle is always filled to the full value. I want to change it to the percentage completion of the variable I am passing.
For instance, I passed 4 (the range of the variable is 0-8). So the circle should be 50% filled. But as per my code, it seems not to change at all and always appears full.
I am pasting my full code below and my current output as well.
Can someone please help me with this circle progress-filling issue?
import React from 'react';
import { View, Text, StyleSheet, Animated } from 'react-native';
const CircularProgressBar = ({ value }) => {
const circumference = 2 * Math.PI * (100 / 2);
const strokeDashoffset = new Animated.Value(circumference);
React.useEffect(() => {
Animated.timing(strokeDashoffset, {
toValue: (1 - value / 100) * circumference,
duration: 1000,
useNativeDriver: false
}).start();
}, [value]);
return (
<View style={styles.container}>
<View style={styles.circle}>
<Animated.View
style={[
styles.bar,
{
strokeDashoffset,
strokeDasharray: `${circumference} ${circumference}`
}
]}
/>
<Text style={styles.text}>{value}</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center'
},
circle: {
width: 200,
height: 200,
borderRadius: 100,
borderWidth: 20,
borderColor: "#FF4433",
alignItems: 'center',
justifyContent: 'center'
},
bar: {
width: 100,
height: 100,
borderRadius: 50,
borderColor: '#FFD580',
borderWidth: 20,
transform: [{ rotate: '-90deg' }],
position: 'absolute'
},
text: {
fontSize: 43,
color: '#FFD580'
}
});
export default CircularProgressBar;
The output of this code looks like this
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
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
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',
}
}
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.