react / react/react-native

Transform rotate style property doesn't work properly on ios

Offen
#30,523 3 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Issue: Author Provided Repro Platform: iOS
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

Description

I use @react-native-community/slider and I needed to rotate the slider.

To do so I used the css property transform, and rotate. It works well on android, but not on ios.
The slider stay to it's original position.
When I change the rotate value while I'm visualizing the slider, it rotates after the automatic assets refresh. But when I leave the screen and go back to it, the slider isn't rotated anymore.

React Native Version

0.63.4, (also experienced this behavior on 0.63.3).

Infos :

System:
OS: macOS 10.15.7
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Memory: 60.75 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.19.0 - /var/folders/m1/qrp6lm356p5_802qt9vkc9tc0000gn/T/yarn--1606988176529-0.7023249601521031/node
Yarn: 1.22.10 - /var/folders/m1/qrp6lm356p5_802qt9vkc9tc0000gn/T/yarn--1606988176529-0.7023249601521031/yarn
npm: 6.14.8 - /usr/local/bin/npm
Watchman: 20200920.192359.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
Android SDK:
API Levels: 29, 30
Build Tools: 29.0.2, 30.0.2
System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.6858069
Xcode: 12.2/12B45b - /usr/bin/xcodebuild
Languages:
Java: javac 15 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.4 => 0.63.4
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Rotate an element with transform rotate style properties.

Expected result

The rotation is working on both android and ios.

Snack, code example, screenshot, or link to a repository:

The slider :
<Slider style={styles.fontSizeSlider} minimumValue={20} maximumValue={50} minimumTrackTintColor="#FFFFFF" maximumTrackTintColor="#000000" thumbTintColor="#FFFFFF" onValueChange={handleValueChange} value={textSize} />

Associated style :
fontSizeSlider: { flexBasis: '30%', width: 200, height: 40, transform: [{ rotate: '-90deg' }], },

The slider is under a flex container wich has the following css attributes :

inputContainer: { top: '50%', display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignContent: 'center', },

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Es wird keine Repository-Datei und kein Test genannt. Beginne damit, das bereitgestellte Slider-Beispiel mit der -90deg-Transformation unter iOS zu reproduzieren und es mit Android zu vergleichen; verfolge anschließend die Verarbeitung von transform-style in React Native unter iOS nach; die Aufgabe ist erledigt, wenn der Slider nach Navigation und Aktualisierung gedreht bleibt und eine Regressionstestabdeckung vorhanden ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
ios, react-native
Bereich
mobile
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
38/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.