mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Jakub Piasecki
1f08799560
Summary: On the new architecture on Android on the new arch, `textAlign` style was ignored (`Layout.Alignment.ALIGN_NORMAL` was always used) during the measurement of text. During this phase, the positions of attachments are also calculated, which results in inline views being always positioned as if alignment to the left was set. This PR updates the measurement logic to also take `textAlign` into account during measurement. Fixes https://github.com/facebook/react-native/issues/41008 ## Changelog: [ANDROID] [FIXED] - Fixed `textAlign` not being taken into account when positioning views inlined in text Pull Request resolved: https://github.com/facebook/react-native/pull/44146 Test Plan: <details> <summary>I've been testing on the following code</summary> ```jsx import { SafeAreaView, Text, View } from "react-native"; function InlineView(props) { return (<View style={{margin: 10}} > <Text style={{ textAlign: props.textAlign, backgroundColor: 'cyan' }}> Parent Text <Text style={{ fontWeight: 'bold' }}>Child Text</Text> <View style={{width: 50, height: 50, backgroundColor: 'red'}} /> <Text style={{ fontWeight: 'bold' }}>Child Text</Text> {props.long && <Text style={{ fontWeight: 'bold' }}>aaaa a aaaa aaaaaa aaa a a a aaaaa sdsds dsdSAD asd ASDasd ASDas</Text>} </Text> </View>) } export default function Test() { return ( <SafeAreaView style={{ flex: 1 }}> <Text style={{textAlign: 'center', fontSize: 20}}>BoringLayout</Text> <InlineView textAlign="left" /> <InlineView textAlign="center" /> <InlineView textAlign="right" /> <InlineView textAlign="justify" /> <Text style={{textAlign: 'center', fontSize: 20}}>StaticLayout</Text> <InlineView textAlign="left" long /> <InlineView textAlign="center" long /> <InlineView textAlign="right" long /> <InlineView textAlign="justify" long/> </SafeAreaView> ); } ``` </details> | Old architecture | New architecture | |------------------|------------------| | <img width="447" alt="Screenshot 2024-04-18 at 17 08 59" src="https://github.com/facebook/react-native/assets/21055725/b21848ff-3939-4dde-9f78-03ce50c9429a"> | <img width="447" alt="Screenshot 2024-04-18 at 17 04 46" src="https://github.com/facebook/react-native/assets/21055725/fb57a3c4-09e8-4db7-abc3-79747314529b"> | Reviewed By: NickGerleman, cipolleschi Differential Revision: D56361169 Pulled By: cortinico fbshipit-source-id: c3002f65541774e376e315c3076a6157aa330f8d
65 lines
2.0 KiB
JavaScript
65 lines
2.0 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
* @flow strict-local
|
|
*/
|
|
|
|
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
|
|
|
|
import * as React from 'react';
|
|
import {Text, View} from 'react-native';
|
|
|
|
function InlineView(props: {
|
|
textAlign: 'auto' | 'left' | 'right' | 'center' | 'justify',
|
|
long?: boolean,
|
|
}): React.Node {
|
|
return (
|
|
<View style={{margin: 4}}>
|
|
<Text style={{textAlign: props.textAlign, backgroundColor: 'cyan'}}>
|
|
Parent
|
|
<Text style={{fontWeight: 'bold'}}>Child</Text>
|
|
<View style={{width: 30, height: 30, backgroundColor: 'red'}} />
|
|
<Text style={{fontWeight: 'bold'}}>Child</Text>
|
|
{props !== null && props.long === true && (
|
|
<Text style={{fontWeight: 'bold'}}>
|
|
aaaa a aaaa aaaaaa aaa a a a aaaaa sdsds dsdSAD asd ASDasd ASDas
|
|
</Text>
|
|
)}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export function TextInlineViewsExample(props: {}): React.Node {
|
|
return (
|
|
<>
|
|
<View style={{flex: 1}} testID="view-test-inline-text-alignment">
|
|
<Text style={{textAlign: 'center', fontSize: 14}}>BoringLayout</Text>
|
|
<InlineView textAlign="left" />
|
|
<InlineView textAlign="center" />
|
|
<InlineView textAlign="right" />
|
|
<InlineView textAlign="justify" />
|
|
|
|
<Text style={{textAlign: 'center', fontSize: 14}}>StaticLayout</Text>
|
|
<InlineView textAlign="left" long />
|
|
<InlineView textAlign="center" long />
|
|
<InlineView textAlign="right" long />
|
|
<InlineView textAlign="justify" long />
|
|
</View>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ({
|
|
title: 'TextInlineViewsExample',
|
|
name: 'inlineViews',
|
|
description:
|
|
('Shows how inline views are rendered when text is subject to alignment.': string),
|
|
expect: 'The red box should align correctly with the rest of the text.',
|
|
render: (): React.Node => <TextInlineViewsExample />,
|
|
}: RNTesterModuleExample);
|