Files
react-native/packages/rn-tester/js/components/RNTesterTextInput.js
Nick Gerleman 3f88821167 Avoid TextInput example styles causing non-deterministic rendering on iOS (#43599)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43599

iOS E2E tests non-deterministic rendering happens around examples with a border set to `StyleSheet.hairlineWidth`. That value has special subpixel math, that doesn't seem to render consistently on iOS (this is its own bug).

To unblock adding some new E2E iOS TextInput tests, this removes usage of `hairlineWidth` in styles, and more generally, tries to unify TextInput styles in the examples.

This will break a whole bunch of RNTester Jest E2E baselines on different apps, which I will update from land-time runs or after continuous builds are available for different endpoints.

Changelog: [Internal]

Reviewed By: fkgozali

Differential Revision: D55213090

fbshipit-source-id: 6d81b9355adc538a3ade6f50ef93c3ca08782ae7
2024-03-29 02:41:26 -07:00

55 lines
1.2 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
*/
'use strict';
import type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';
const React = require('react');
const {Pressable, StyleSheet, Text} = require('react-native');
type Props = $ReadOnly<{|
testID?: string,
textTestID?: string,
children?: React.Node,
onPress?: ?(event: PressEvent) => mixed,
|}>;
class RNTesterButton extends React.Component<Props> {
render(): React.Node {
return (
<Pressable
testID={this.props.testID}
onPress={this.props.onPress}
style={({pressed}) => [styles.button, pressed && styles.pressed]}>
<Text testID={this.props.textTestID}>{this.props.children}</Text>
</Pressable>
);
}
}
const styles = StyleSheet.create({
button: {
borderColor: '#696969',
borderRadius: 8,
borderWidth: 1,
padding: 10,
margin: 5,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#d3d3d3',
},
pressed: {
backgroundColor: '#a9a9a9',
},
});
module.exports = RNTesterButton;