react / react/react-native

Components inside the Text wont follow the width of the Text when screen Orientation is changed

Offen
#31,171 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

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

Beschreibung

Description

So I implement AdMobBanner and then decided to place is inside the Text component.
Why I did that, Well I have AdMobBanner inside TouchableOpacity component and if I do not place it inside the Text, the user wont be able to click on it.

Now this is not the problem, the problem is that when the screen Orientation is changed the component inside the Text wont follow for some reason.

React Native version:

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-3820 CPU @ 3.60GHz
    Memory: 1.13 GB / 7.92 GB
  Binaries:
    Node: 15.6.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.11 - D:\Projects\NovelManager\node_modules\.bin\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 26, 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.3
      System Images: android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Visual Studio: 16.7.30517.126 (Visual Studio Enterprise 2019)
  Languages:
    Java: 11.0.10 - C:\Program Files\AdoptOpenJDK\jdk-11.0.10.9-hotspot\bin\javac.EXE
    Python: 3.9.1 - C:\Python39\python.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: ~16.13.1 => 16.13.1
    react-native: ^0.63.4 => 0.63.4
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

I have create a demo that represent the problem here on snack
To test this you will have to view it on your phone.

This is the code you should look into when you navigate snack

               <Text key={attr["index"]} style={{maxWidth:"100%",minWidth:"100%", backgroundColor:"red", justifyContent:"center"}} onPress={e=> {e.preventDefault() }}>
                      <Banner bannerSize="smartBannerPortrait"
                      />
                    </Text>

Expected Results

The Text component should behave like View and when the screen Orientation is changed its children should also follow the Text component style

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

https://snack.expo.io/@alentoma/banner

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

Öffne den verlinkten Snack und reproduziere das Problem auf einem Telefon, indem du die Ausrichtung änderst. Beginne mit der Komponente Text, die den Banner enthält, und vergleiche ihre Breite mit dem erwarteten Verhalten; abgeschlossen ist die Aufgabe, wenn der eingebettete Banner nach Änderungen der Ausrichtung der Breite von Text folgt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
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
30/100

Neue Issues direkt in Ihr Postfach

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