I was wondering how to wrap the title on to another line or possibly 2 lines before cutting off... I tried flex wrap but im possibly not applying it correctly. Or if theres some javascript I could add to the ternary. Apologies if this has already been answered I couldnt find it. enter image description here
<View style={styles.titleWrapper}>
<Text style={styles.title}>
{title.length > 20 ? title.slice(0, 22) + "..." : title}
</Text>
<MaterialIcons name="favorite-border" color="#72bcd4" size={24} />
</View>
<View style={styles.descriptionWrapper}>
<Text style={styles.description}>
{description.length > 100 ? description.slice(0, 100) + "..." : description }
</Text>
</View>
</View>
</TouchableOpacity>
)
const styles = StyleSheet.create({
card: {
backgroundColor: "#fff",
height: 300,
margin: 20,
borderRadius: 10,
shadowColor: "black",
shadowOpacity: 0.25,
shadowOffset: {width: 0, height: 2},
shadowRadius: 8,
elevation: 5
},
imageWrapper: {
width: "100%",
height: "60%",
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
overflow: "hidden"
},
titleWrapper: {
height: "10%",
paddingHorizontal: 15,
justifyContent: "space-between",
alignItems: "center",
flexDirection: "row",
marginTop: 10
},
You have specify the line count like
<Text style={styles.title} numberOfLines={2}>
{titile}
</Text>
React native will handle the ellipsis for you based on the lines
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments