Transform rotate style property doesn't work properly on ios
Personne n'a encore pris cette issue.
- Langage dominant
- C++
- Étoiles
- 127k
- Forks
- 25.3k
- Merge moyen
- 1 j 23 h
- PR mergées (30 j)
- 4
Description
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',
},
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Aucun fichier du dépôt ni aucun test n’est nommé. Commencez par reproduire l’exemple Slider fourni avec la transformation -90deg sur iOS et comparez-le à Android, puis retracez la gestion de transform-style de React Native sur iOS ; la tâche est terminée lorsque le slider reste pivoté après la navigation et l’actualisation, avec une couverture de non-régression.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- ios, react-native
- Domaine
- mobile
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 38/100