Text is being truncated in the title instead of moving to the next line

<View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          height: 130,
          marginVertical: 10,
          overflow: 'hidden'
        }}
      >
        <Image
          source={{
            uri: props.image_medium
          }}
          style={{
            height: 120,
            width: 120,
            borderRadius: 10
          }}
        />
        <View style={{ marginLeft: 10 }}>
          <Text
            style={{
              fontFamily: 'Montserrat_bold',
              fontSize: 14,
              color: Colors.NewBlue
            }}
          >
            {props?.title.trim()}
          </Text>

I am attempting to prevent the title from being cut off and instead continue on the next line, but the outcome is not as expected. Refer to the image https://i.sstatic.net/Hmqeg.png

Answer №1

After making a simple adjustment by adding flex:1 to the parent container

<View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          height: 130,
          marginVertical: 10,
          overflow: 'hidden'
        }}
      >
        <Image
          source={{
            uri: props.image_medium
          }}
          style={{
            height: 120,
            width: 120,
            borderRadius: 10
          }}
        />
        <View style={{ marginLeft: 10, flex:1}}> // this change here
          <Text
            style={{ 
              fontFamily: 'Montserrat_bold',
              fontSize: 14,
              color: Colors.NewBlue
            }}
          >
            {props?.title.trim()}
          </Text>

and just like that

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The "href" attribute must contain a valid URL and the link should be inactive

Situation: I am creating an "anchor" tag and adding a "href" attribute. The challenge is that when the link is clicked, it should do nothing, but we also cannot leave the "href" attribute empty. How can this be achieved? ...

Attempting to ensure that my website is fully optimized for all devices and

I am currently facing an issue with my CSS code on iPad. I want to change the background-image displayed based on whether the user is using an iPad or not. Specifically, I want to use headerold.jpg as the background-image for iPads while keeping headernew. ...

React Native: Troubleshooting Issue with Shallow Copying of Nested JSON Objects

I have a JSON structure with nested objects like this: {"name", "children": [JSON objects]}. I am attempting to add a new child to the object based on a variable path, which is an array of names. Strangely, my code works fine in the Ch ...

What is the correct way to include '?i#efix' in a font directory path in a Rails application?

It is suggested to include ?#iefix at the end of .eot font paths in order to resolve another erratic behaviour issue in IE: @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url(&ap ...

Selection of text within a block resembling a bar of buttons

design.css body { background-color: #666666; margin-left:500px; margin-right:500px; margin-top:10px; margin-bottom:20px; font-family:Verdana, Geneva, Tahoma, sans-serif; font-size:12px; color:white; } div.header { bac ...

Continuously slide the client's logo from right to left in an endless loop

I have implemented the following code to create an infinite slider for my client's logo. The slider moves from right to left and I am using jQuery to add duplicate slides to ensure the loop continues seamlessly. However, I am facing a particular issu ...

What could be causing the DIV elements to not align side by side?

<div id="dvFirst" class="mainSecond" style="background: #6FA5FD;"> <div id="leftdiv3" class="leftdiv">Client: </div> <div id="rightdiv3" class="rightdiv"><asp:DropDownList ID="ddlCliNewMsg" AutoPostBack="t ...

Position the text to the left of the floating paragraph on the right

I am looking to align some text on the right side of the page with consistent starting positions. Each paragraph has two spans, one floated left and the other floated right. Here is an example with HTML and an image included for clarity. .card { ma ...

There seems to be a hitch in moving API information from one screen to another

In the code for Screen 1 (LoginScreen.js), we are fetching data from an API that responds in JSON format. The data includes 'custRegId', 'email', 'firstName', 'lastName', and 'mobileNumber'. import { Styl ...

Responsive Bootstrap breadcrumbs for mobile devices

I'm struggling to make my bootstrap tabs mobile-friendly. While I like their appearance on desktop, I find that they don't look great when stacked on top of each other on mobile devices. Is there anyone who can provide some CSS tips on how to sh ...

Showcased with picture aligned to the right hand side describing in a lengthy fashion

Can you assist me with this issue? I am trying to position a span and an img inside an li element within a sidebar. My goal is to have the span always display to the right of the image, with the image vertically centered, regardless of the length of the te ...

Ways to position buttons at the bottom of a webpage

I am looking to position all buttons at the bottom of the page: https://i.sstatic.net/ikXW5.png This is the code snippet: https://codesandbox.io/s/angular-7-bootstrap-4-3pv0p?from-embed <div class="container-fluid py-2"> <div class="row"> ...

How to ensure an absolutely positioned div spans the entire width of the screen

I am facing an issue with an absolutely positioned div that I want to stretch the full width of the screen using 100vw. However, the problem is that it aligns with its parent's starting point rather than the left side of the viewport. How can I make s ...

What is the best way to overlay a fixed-position element on top of a relative positioned element?

Can it be done? I set the position of the header on my site to "fixed". Then I also positioned an image as "relative". But whenever I scroll the site.... I noticed that the image was placed above the header. Even the twitter profile widget I added ended up ...

Evenly distribute top and bottom padding within a fixed-height border using CSS

I'm facing a challenge with centering the content vertically on an online certificate that users can print out. The main issue lies in aligning the inner wrapper (#wrapper) inside the outer border (#outerBorder), which has a fixed height to ensure pro ...

Content and form off-center when window width is limited

I am currently working on a responsive HTML page, but I am facing an issue that I cannot replicate on fiddle. To troubleshoot, I have published the page on "www.000webhost". You can access it using this link : . Kindly view it on Firefox and let me know if ...

The gaps separating rows

I'm struggling with getting my divs to look like a table, especially when it comes to highlighting a selected row. I've tried adjusting padding and margins without success. Does anyone have any suggestions on how I can achieve this effect? .ta ...

The module 'module://graphql/language/parser.js' could not be resolved

I'm facing an issue while creating a React Native TypeScript project on Snack Expo. Even though I have added graphql to the package.json and included the types file, I keep getting this error : Device: (1:8434) Unable to resolve module 'module:/ ...

Tips for personalizing the sidebar on your WordPress site and incorporating a collapsible menu feature

Is there a way to customize the sidebar in WordPress so that all the categories and their children are easily accessible? For example, on https://www.w3schools.com, clicking on the header category "HTML" displays all related links in the left sidebar. I&a ...

Modifying the DOM in Safari before unloading a webpage

I need a way to display a loading animation when I navigate between pages on my website. To achieve this, I have added the following HTML code for the loader: <div class="ajax-loader"><i class="icon-spin5"></i></div> And here is t ...