callstack / callstack/react-native-paper

React Native 0.73 supports `transformOrigin` which can potentially fix TextInput issues

Open
#4,341 2 comments 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

See related source code:
https://github.com/callstack/react-native-paper/blob/813cdd47a90ee3bb693c6ec143af73092cd3edae/src/components/TextInput/Label/InputLabel.tsx#L62

See React Native 0.73 docs mentioning `transformOrigin` https://reactnative.dev/docs/0.73/transforms#transform-origin

It means we do not need to move TextInput label with [translateX](https://github.com/callstack/react-native-paper/blob/813cdd47a90ee3bb693c6ec143af73092cd3edae/src/components/TextInput/Label/InputLabel.tsx#L63) to adjust label position after [scaling](https://github.com/callstack/react-native-paper/blob/813cdd47a90ee3bb693c6ec143af73092cd3edae/src/components/TextInput/Label/InputLabel.tsx#L102). Most likely `translateX` was needed b/c transform origin was always related to `center` before v0.73. Now we can set it `left` and remove `translateX` position adjustments.

Related issues:
https://github.com/callstack/react-native-paper/issues/4245
https://github.com/callstack/react-native-paper/issues/4299
https://github.com/callstack/react-native-paper/issues/4340
and possibly more related issues reporting TextInput label flickering..

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.