CODEWITHSUNDEEP
reactjsreact-native
walker1
walker1

Reputation: 361

How to wrap title on to new line react native

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

Upvotes: 2

Views: 3574

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

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

Upvotes: 3

Related Questions