when we use firstName and lastName without a space - everything is fine
image
but if you add a space to one of the words, the other word rises up
image
code
JSX:
<View style={styles.nameContainer}>
<Text style={styles.firstname} numberOfLines={1}>{firstName}</Text>
<Text style={styles.lastname} numberOfLines={1}>{lastName}</Text>
</View>
Styles:
nameContainer: {
flexDirection: 'row',
maxWidth: 176,
overflow: 'hidden'
},
firstname: {
fontSize: 16,
color: Colors.light.text,
fontWeight: 'bold',
marginEnd: 4
},
lastname: {
fontSize: 16,
color: Colors.light.text,
fontWeight: 'bold',
paddingRight: isRTL ? 0 : 24,
marginRight: isRTL ? 0 : 8,
marginBottom: 4,
},
can someone tell me why this is happening?
Hi check this issue https://github.com/facebook/react-native/issues/10712 might help.
Related
I am building an application which uses react native on expo dev. I am trying to add a button in the top left corner which is adjacent to some text o the right hand side, I have used marginRight: 'auto' for this and it does display as expected on the web version but on the app version on Android it appears centered as if the margin styling is ignored, any solutions?
<View style={styles.header}>
<View style={styles.headerTop}>
<Text style={styles.headerText}>Question {currentQuestion+1}/{questions.length}</Text>
<TouchableOpacity
onPress={() => navigation.navigate("Home")}
style= {styles.exitButton}
>
<Text style={styles.buttonText}>Exit</Text>
</TouchableOpacity>
</View>
<Text style={styles.timer}>{timer}</Text>
</View>
header: {
flexGrow: 0,
padding: 8,
},
headerTop: {
flexDirection: 'row-reverse',
},
headerText: {
fontSize: 24,
textAlign: 'right',
},
exitButton: {
padding: 12,
paddingHorizontal: 12,
backgroundColor: '#1BA7F9',
borderRadius: 12,
marginRight: 'auto',
},
buttonText: {
fontSize: 20,
}
You have specified 'row-reverse' for header-top
headerTop: {
flexDirection: 'row-reverse',
},
So, instead of marginRight: 'auto', try using marginLeft: 'auto',
exitButton: {
padding: 12,
paddingHorizontal: 12,
backgroundColor: '#1BA7F9',
borderRadius: 12,
marginLeft: 'auto',
},
This should fix the issue. I tried it in the emulator and works fine. Attaching the screenshot.
I have a simple <Text> element in my react-native application and I can't figure out what's going on with this behavior.
When I provide a longer string and the <Text> element wraps the text, it seems to be adding a bunch of padding to the right side of the view.
Note: I've made the <Text> element have a red background just so it's easier to see what's going on in this image.
The left button has the wrapped text, the right button does not. Only when the text wraps do I see the strange padding.
Note that I'm using flexShrink: 1 so that my icon doesn't get stomped out by the text element.
<View style={styles.buttonContainer}>
<View style={styles.buttonContent}>
<Grid fill={'#fff'} style={[styles.buttonIcon, {marginRight: 6}]} />
<Text style={styles.buttonText}>
Something Longer Here
</Text>
</View>
</View>
const styles = StyleSheet.create({
buttonContainer: {
justifyContent: 'center',
paddingVertical: 14,
paddingHorizontal: 12,
borderRadius: 16,
backgroundColor: '#27292d',
opacity: 0.90,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1},
shadowOpacity: 0.8,
shadowRadius: 1,
elevation: 5
},
buttonContent: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
buttonIcon: {
width: 16,
height: 16,
flexShrink: 1
},
buttonText: {
color: 'white',
fontSize: 14,
lineHeight: 16,
backgroundColor: '#ff0000',
fontFamily: 'GeezaPro',
flexShrink: 1
}
});
Update
I've put together this small example to demonstrate the problem.
https://snack.expo.dev/72_24tf4O
When run on the web it looks like this:
But when run on android, it looks like this:
This is my code and below you can find the image where I am not able to scroll.
I have tried using scrollview and also tried dimensions and also tried adding view tag in the top but still not working. What should I do to overcome this behavior? I am not able to fix it and tried many hours fixing it but still not able to achieve the scroll.
const data = useContext(BlogContext);
const singleBlog = data.filter((blog) => blog.title === route.params.title);
return (
<View style={styles.container}>
<ScrollView contentContainerStyle={styles.outer}>
{singleBlog.length > 0 &&
singleBlog.map((blog) => (
<View key={Math.random()}>
<Image source={{ uri: blog.image }} style={styles.blogImage} />
<Text style={styles.title}>{blog.title}</Text>
<View style={styles.authorAndDate}>
<Text style={styles.author}>
<Text style={{ fontWeight: "500" }}>Wriiten by: </Text>
{blog.author === null ? "unknown" : blog.author}
</Text>
<Text style={styles.date}>
{new Date(blog.published_at).toDateString()}
</Text>
</View>
<Text style={styles.description}>{blog.description}</Text>
</View>
))}
{/* <StatusBar style="light" /> */}
</ScrollView>
</View>
);
};
const styles = StyleSheet.create({
blogImage: {
width: "100%",
height: "40%",
marginBottom: 5,
},
title: {
fontFamily: "Poppins_600SemiBold",
textTransform: "capitalize",
fontSize: 40,
fontWeight: "600",
paddingHorizontal: 10,
},
authorAndDate: {
flexDirection: "row",
justifyContent: "space-between",
marginHorizontal: 10,
borderBottomColor: "#BDBDBD",
borderBottomWidth: 1,
paddingBottom: 10,
marginBottom: 10,
},
author: {
fontFamily: "Poppins_500Medium",
textTransform: "capitalize",
fontSize: 18,
fontWeight: "700",
color: "#434343",
},
date: {
color: "#878787",
fontFamily: "Poppins_500Medium",
textTransform: "capitalize",
fontWeight: "500",
fontSize: 14,
},
description: {
color: "#555555",
fontFamily: "Poppins_400Regular",
fontWeight: "400",
paddingHorizontal: 10,
fontSize: 20,
lineHeight: 31,
},
container: {
flexGrow: 1,
borderColor: "red",
borderWidth: 4,
},
outer: {
flex: 1,
// borderColor: "red",
borderWidth: 4,
},
inner: {
flexGrow: 1,
},
});
export default SingleBlogScreen;
enter image description here
In this Image, I am not able to scroll.
I have found the solution for the above issue
changing the blogImage height from 60% -> 600
fixed the issue and now scroll is working
thanks to #wojtek2939 for helping....
txtLeft: {
flex: 7,
textAlign: 'left',
fontFamily: theme.Font.Bold,
color: theme.Color.Gray,
paddingRight: 20,
flexWrap: 'wrap',
},
txtRight: {
flex: 3,
textAlign: 'left',
color: theme.Color.Gray,
},
set textBreakStrategy of your Text component to simple
<Text textBreakStrategy="simple">You text goes here</Text>
available on Android API Level 23+
As you guys can see the text is cut at the end, how can I change that small white box size or make my text show 'Enter a postcode, street or ...' since, if, the text was smaller it would cut it and put the three dots.
TouchablePlatform is a component used to join both TouchableOpacity and TouchableComponent.
<View style={styles.subContainer1}>
<TouchablePlatform onPress={this._onBackIconPress}>
<Image
source={icon}
style={isListing ? styles.imageIconBack : styles.image}
/>
</TouchablePlatform>
<TextInput
ref={textInput => (this.textInput = textInput)}
placeholderTextColor={'#9CAFB3'}
underlineColorAndroid={'#FFFFFF00'}
placeholder={'Enter a postcode, street or area…'}
style={styles.textInput}
onFocus={this._onTextInputFocus}
value={this.state.text}
/>
</View>
These are the styles being used
const styles = StyleSheet.create({
...
subContainer1: {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
marginLeft: 15,
marginTop: 10,
height: 40,
borderRadius: 5,
elevation: 4,
shadowOpacity: 0.4,
shadowRadius: 4,
shadowColor: '#073741',
shadowOffset: { height: 2, width: 0 },
},
image: {
resizeMode: 'contain',
height: 25,
width: 25,
marginLeft: 15,
},
imageIconBack: {
resizeMode: 'contain',
height: 18,
width: 18,
marginLeft: 22,
},
...
textInput: {
width: '65%',
fontSize: 14,
marginLeft: 15,
fontFamily: 'azo-sans-light',
color: '#043742',
},
});
How can I change the size of the white area? To make sure the text isn't cut, or, at least, make it cut the text, and show three dots (...) on the trimmed area.
The starting point of the TextInput is controlled by the textInput.marginLeft style, and the end point is set by textInput.width, which is set to 65% of the parent container. You can tweak these values to resize the input box.
The React Native TextInput does not support automatic ellipsization of overflowing placeholder text. If you want to do this, you could hack it by absolutely positioning a Text element on top of it with the following properties, and hiding it when the text input is focused.
<Text numberOfLines={1} ellipsizeMode="tail" pointerEvents="none" />