[Android] Text measured as 2 lines but drawn as 1 (empty line below) when width is a fractional pixel: floor() in AT_MOST vs ceil() in EXACTLY #59174

Activity

1. react-native-bot

   added

   Needs: Author Feedback

   Needs: ReproThis issue could be improved with a clear list of steps to reproduce the issue.This issue could be improved with a clear list of steps to reproduce the issue.

   on Oct 18, 2026
2. react-native-bot commented on Oct 18, 2026

   

   react-native-bot

   on Oct 18, 2026

   Collaborator

   More actions

   Warning

   Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:
   

   • For majority of bugs: send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.
   • If your bug is UI related: a Snack
   • If your bug is build/upgrade related: a project using our Reproducer Template

   
   You can read more about about it on our website: How to report a bug.
3. hcbylmz commented on Oct 21, 2026

   

   hcbylmz

   on Oct 21, 2026

   Contributor

   More actions

   I looked into this and tested a fix on an Android emulator. Sharing the results because the cause looks more complex than the floor/ceil difference alone.

   Setup: Medium Phone emulator (density 2.625), RNTester Playground. Each row is a flexDirection: 'row' container with a flex: 1 column holding a <Text> (fontSize 16, lineHeight 22) and a 10 dp trailing view. The column width is set to the text's single-line width (from onTextLayout) plus an offset from -0.5 to +0.5 dp in 0.04 dp steps. A row counts as broken when the <Text> box is taller than the lines it reports in onTextLayout. 416 rows in total.

   	column alignItems: 'stretch'	column alignItems: 'flex-start'
   main	17 broken	0 broken
   AT_MOST wraps at ceil(width), reported width clamped to width	17 broken	17 broken

   What I found:

   1. The stretch cases are a different problem. In all 17 rows the text really does not fit the column. Example: a 376.16 px text in a 375.9 px column. Measuring correctly gives 2 lines. Yoga then rounds the text box up to the pixel grid (377 px), and at that width the text is drawn on 1 line. The box keeps the 2-line height.
   2. Wrapping at ceil(width) in AT_MOST makes this worse. It reports a fractional width to Yoga, so the flex-start columns now hit the same rounding issue. On main, AT_MOST reports an integer width and stays consistent.
   3. I could not reproduce the exact case from the issue (measure with AT_MOST at floor(width), then draw with EXACTLY at ceil(width)). It probably needs the author's real layout. @YigitGok, could you share a minimal component with the font, or a Snack?

   So floor(width + 0.01f) may fix the 467.99997 px case from the issue. But it does not cover the general mismatch between the width the text is measured at and the rounded width it is drawn at. A full fix probably needs measurement and drawing to use the same rounded width.

   RNTesterPlayground.js used for the scan

   import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
   
   import * as React from 'react';
   import {PixelRatio, ScrollView, StyleSheet, Text, View} from 'react-native';
   
   const SENTENCE =
     'The quick brown fox jumps over the lazy dog while seven wizards quietly box';
   const STRINGS = Array.from({length: 8}, (_, i) =>
     SENTENCE.slice(0, 20 + i * 6).trim(),
   );
   const DELTAS = Array.from({length: 26}, (_, i) => -0.5 + i * 0.04);
   const LINE_HEIGHT = 22;
   
   function Row({
     text,
     width,
     atMost,
     onResult,
   }: {
     text: string,
     width: number,
     atMost: boolean,
     onResult: (broken: boolean) => void,
   }) {
     const [height, setHeight] = React.useState(0);
     const [lines, setLines] = React.useState(0);
     // Box is taller than the lines the text is drawn with.
     const broken = lines > 0 && height > lines * LINE_HEIGHT + LINE_HEIGHT / 2;
     React.useEffect(() => {
       if (lines > 0 && height > 0) {
         onResult(broken);
       }
     }, [broken, lines, height, onResult]);
     return (
       <View style={[styles.row, {width: width + 10}]}>
         <View style={[styles.column, atMost && styles.atMost]}>
           <Text
             style={[styles.text, broken && styles.broken]}
             onLayout={e => setHeight(e.nativeEvent.layout.height)}
             onTextLayout={e => setLines(e.nativeEvent.lines.length)}>
             {text}
           </Text>
         </View>
         <View style={styles.trailing} />
       </View>
     );
   }
   
   function Playground() {
     const [widths, setWidths] = React.useState<{[string]: number}>({});
     const [results, setResults] = React.useState<{[string]: boolean}>({});
     const ready = Object.keys(widths).length === STRINGS.length;
     const rows = [];
     if (ready) {
       for (const s of STRINGS) {
         for (const d of DELTAS) {
           for (const atMost of [false, true]) {
             rows.push({key: `${s}|${d}|${String(atMost)}`, text: s, width: widths[s] + d, atMost});
           }
         }
       }
     }
     const broken = rows.filter(r => results[r.key] === true);
     const brokenAtMost = broken.filter(r => r.atMost).length;
     const done = rows.filter(r => results[r.key] != null).length;
     return (
       <ScrollView contentContainerStyle={styles.container}>
         {/* Measure each string's single-line width. */}
         <View style={styles.measure} pointerEvents="none">
           {STRINGS.map(s => (
             <Text
               key={s}
               style={styles.text}
               onTextLayout={e => {
                 const w = e.nativeEvent.lines[0]?.width;
                 if (w != null) {
                   setWidths(prev => (prev[s] != null ? prev : {...prev, [s]: w}));
                 }
               }}>
               {s}
             </Text>
           ))}
         </View>
         <Text testID="summary" style={styles.summary}>
           {ready
             ? `density ${PixelRatio.get()} | checked ${done}/${rows.length} | extra empty line: stretch ${broken.length - brokenAtMost}, flex-start ${brokenAtMost}`
             : 'measuring...'}
         </Text>
         {/* Broken rows first, so they show up in the screenshot. */}
         {[...broken, ...rows.filter(r => results[r.key] !== true)].map(r => (
           <Row
             key={r.key}
             text={r.text}
             width={r.width}
             atMost={r.atMost}
             onResult={b =>
               setResults(prev => (prev[r.key] === b ? prev : {...prev, [r.key]: b}))
             }
           />
         ))}
       </ScrollView>
     );
   }
   
   const styles = StyleSheet.create({
     container: {padding: 10},
     measure: {position: 'absolute', left: -5000, width: 4000, opacity: 0},
     summary: {fontSize: 16, fontWeight: 'bold', marginBottom: 8},
     row: {flexDirection: 'row', marginBottom: 2},
     column: {flex: 1},
     atMost: {alignItems: 'flex-start'},
     trailing: {width: 10, backgroundColor: '#ccc'},
     text: {fontSize: 16, lineHeight: LINE_HEIGHT, backgroundColor: '#e0f0ff'},
     broken: {backgroundColor: '#ffb3b3'},
   });
   
   export default {
     title: 'Playground',
     name: 'playground',
     description: 'Test out new features and ideas.',
     render: (): React.Node => <Playground />,
   } as RNTesterModuleExample;