Text in React Native exceeding one line is causing it to extend beyond the screen boundaries

I am having trouble displaying the last messages in my simple contact list as the text is getting cut off the screen. Below is the code I am using:

(the readableTimestamp should be positioned behind the text.)

View
  style={{
    fontSize: 16,
    backgroundColor: Green,
    flexDirection: "row",
    flex: 1,
  }}>
  <Text
    numberOfLines={1}
    style={{
      flex: 1,
      fontSize: 16,
    }}>
    {item.message}
  </Text>
  <View style={{marginRight: 20, backgroundColor: Yellow}}>
    <Text style={{fontSize: 16, color: 'blue'}}>{item.readableTimestamp}</Text>
  </View>
</View>

https://i.sstatic.net/xIWOE.png

cssreactjsreact-native

Answer №1

Here's a suggestion you could consider:

<View
  style={{
    fontSize: 16,
    backgroundColor: Green,
    justifyContent: "space-between",
    flexDirection: "row",
    flex: 1,
  }}
>
  <View style={{flex: 1}}>
    <Text numberOfLines={1} style={{fontSize: 16}}>
      {item.message}
    </Text>
  </View>
  <View style={{marginRight: 20, width: 50, backgroundColor: Yellow}}>
    <Text style={{fontSize: 16, color: 'blue'}}>{item.readableTimestamp}</Text>
  </View>
</View>

You could try enclosing the text within a view and specifically defining the width for the timestamp to trigger ellipsis. By using space-between, you can also ensure that the timestamp appears at the end of the row.

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

Is state updating batched in React when utilizing hooks?

When it comes to class components, this.setState will batch state updates if they are called within event handlers. But what about updating state outside of an event handler using the useState hook? function Component() { const [a, setA] = useState(&apo ...

reactjsreact-hooks

What could be the reason for the malfunctioning of my React Native vector icons?

My react native vector icons are not working despite following all the steps mentioned in the documentation. I am unable to use a camera icon in my app. I tried importing { Entypo } from 'react-native-vector-icons'; and then using \<Entyp ...

javascriptreactjsreact-native

Modify css with php instead of using FTP

As I work on constructing a website, I wonder how WordPress allows its admin users to edit CSS styles through the website instead of accessing the css file directly via FTP. How exactly does WordPress load the CSS file? My assumption is that it somehow re ...

phpcssftpfwrite

Instead of constantly updating my stateful component, I prefer to create a new paragraph for each new state

Each time the Create Sales Order Button is clicked, an API call is made and the response is printed as a Stateful Component. Rather than updating the existing component, I want to generate a new paragraph for each response received so that if the user clic ...

javascriptreactjs

Generate a vertical line that spans the entire length of the webpage in a vertical direction

Looking for a way to add vertical borders that span the entire webpage to some text? Check out this HTML snippet: <div id="vLine"> <h1>text</h1> </div> Here's the accompanying CSS: #vLine { height: 100%; width: 5 ...

htmlcssheightline

Fixing W3 Validation Errors in your Genesis theme through CSS requires a few simple steps. Let's

As a newcomer to this forum, I kindly ask for understanding regarding my current issue. Upon checking my website vocaloid.de/Wordpress/ using the W3C CSS validator, I discovered several parsing and value errors. In an attempt to solve this, I disabled all ...

htmlcssvalidationgenesis

How can you incorporate a custom button into the controlBar on videoJS in responsive mode?

The video player I have created using videoJS includes custom buttons in the control bar. These buttons are not clickable when viewed on mobile or tablet devices without forcing them to work. let myButton = player?.controlBar.addChild('button'); ...

javascripthtmlcssnext.jsvideo.js

Tips for updating a component's state from another component in a React Native application

I have a map displaying a specific region based on the user's location. I am trying to implement a button in a separate file that will reset the map back to the user's current location while maintaining modularity. Can someone guide me on how to ...

reactjstypescriptreact-nativeinheritancestructure

Ways to streamline repetitive CSS rules within media queries

As I work on defining multiple media queries, I realize there is some redundant code within them: @media only screen and (max-width:768px), only screen and (min-width:769px) and (max-width:1040px) { .list__figure { margin-right: 20px; ...

cssmedia-queries

Tips for displaying a placeholder image within the Next.js image component

I am currently facing an issue with displaying images from API calls. To handle situations where there are no images or errors, I have implemented a code snippet which includes a placeholder image. However, the implementation seems to not be functioning as ...

javascriptreactjsnext.jsnextjs-image

Tips for organizing JSON information in ReactJS

Could someone lend a hand with sorting JSON data in ReactJs? I'm having trouble getting it to work properly. Also, if I want to sort by title, would it be the same process? Thanks! This is what I've tried so far: componentDidMount() { ...

javascriptjsonreactjssortingredux

Error 403 with Firefox on Font Loading for CodeIgniter Website

Utilizing font-face in CSS to integrate custom fonts onto a web application being developed with CodeIgniter. This is the CSS code: @font-face { font-family: 'UniversLT-UltraCondensed'; src: url('../Fonts/LTUnivers/universlt59ultrac ...

phpcsscodeigniterfirefoxhttp-status-code-403

Customize Meta tags in Next.js 13.4

I am facing an issue with overriding the meta tag in my RootLayout.js file. Whenever I try to add a new viewport meta tag, it ends up duplicating the existing one. Can anyone help me find a solution to this problem? RootLayout.js <html lang="en&q ...

javascriptreactjsnext.js13

Step-by-step guide on connecting to a MySQL database for Next.js using the .env file

const pool = mysql.createPool({ connectionLimit: 100, host: process.env.NEXT_PUBLIC_MYSQL_HOST, user: process.env.NEXT_PUBLIC_MYSQL_USER, password: process.env.NEXT_PUBLIC_MYSQL_PASSWORD, database: process.env.NEXT_PUBLIC_MYSQL_DATABASE ...

mysqlreactjsnode.jsnext.js

An error was encountered: Unforeseen token. To properly manage this file type, you might require a suitable loader. Is there an image for 'book'? If so, the code

Upon running the npm start command, an error is encountered: Failed to compile. ./src/layouts/BookCheckoutPage/BookCheckoutPage.tsx 131:10 Module parse failed: Unexpected token (131:10) You may need an appropriate loader to handle this file type. | ...

reactjsnpm

Can IE(7?) cause distortion of backgrounds from sprites?

This task is giving me a headache. We're almost finished with revamping our website. The last step involves consolidating all the glyphs and icons into a sprite. These images are transparent .png files, so we made sure the sprite maintains transparen ...

cssinternet-explorerbackground-imagesprite

Exploring the expansion of content within a React Material UI Card

Hey there, I'm currently working on incorporating three expandable cards into my website using React and Material UI. Unfortunately, I've hit a roadblock trying to figure out how to make each card expand independently. Right now, whenever I click ...

reactjsmaterial-uicard

React input value doesn't get updated on onChange event causing the input

Currently, I'm working on a React application that requires a table with inputs in each row. To achieve this, I am utilizing Material-UI and Formik. However, I've encountered a bug where input fields lose focus whenever I type something into them ...

javascriptreactjsmaterial-uiformik

Guide on customizing webpack to incorporate SCSS in a React application

After creating my React app using create-react-app (with React ver. 16.6.3), I decided to incorporate SCSS into my components. To begin, I ran the eject script and made necessary adjustments in webpack.config.dev.js: { test: cssRegex, exclude: cssMo ...

cssreactjswebpacksass

Implementing jQuery selector for CSS and properly handling special characters in the code

I've been attempting to use jQuery to change the background color of a radio button. I provided the CSS code below, but even after escaping special characters in jQuery as shown below, the solution still isn't working. #opt5 > [type="radio"]: ...

javascriptjquerycssjquery-selectorscss-selectors