Percentage in styles causing Text components not to render

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info: System: OS: macOS High Sierra 10.13.6 CPU: x64 Intel® Core™ i7-4960HQ CPU @ 2.60GHz Memory: 3.82 GB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 8.9.1 - /usr/local/bin/node Yarn: 1.10.1 - /usr/local/bin/yarn npm: 6.4.1 - /usr/local/bin/npm SDKs: iOS SDK: Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0 IDEs: Android Studio: 3.1 AI-173.4670197 Xcode: 10.0/10A255 - /usr/bin/xcodebuild npmPackages: react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728 react-native: 0.57.4 => 0.57.4 npmGlobalPackages: react-native-cli: 0.1.10 react-native-git-upgrade: 0.2.7

Description

For some reason, one of the Views I wrote that has a padding value of a percentage, 10%, any Text components inside the View is not shown. For some reason, only TouchableOpacity is rendered here:

edit: When I removed the padding value from that style, everything rendered as expected.

Reproducible Demo

<View style={{ backgroundColor: '#32bfca', padding: '10%'  }}>
  <Text style={{ marginVertical: 14 }}>Embark on a 30-day journey called {journey.JourneyName} that includes:</Text>
    {journey.games.map(gameId => (
      <Text key={gameId} style={{ fontFamily: 'Saira-SemiBold', marginBottom: 4 }}>• {Helper.assessObject(props.games.data, 'gameId', gameId).name}</Text>
    ))}
  <Text style={{ textAlign: 'center', marginTop: 12, marginBottom: 34 }}>All in just 15 mins a day!</Text>
  <TouchableOpacity onPress={() => {
    const type = props.journeys.currentJourney ? props.journeys.currentJourney.type : journey.type;
    props.goToJourney(type, props.navigator);
  }}>
    <View style={{ alignSelf: 'center', alignItems: 'center', justifyContent: 'center', width: 222, height: 40, borderRadius: 18, backgroundColor: 'white' }}>
      <Text>{props.journeys.currentJourney !== null ? 'CONTINUE JOURNEY' : 'START JOURNEY'}</Text>
    </View>
  </TouchableOpacity>
</View>

[hasnabbas]

@dozel I used EStyleSheet instead. Regression seemed a little risky for me, given the stage of my project. It is closest solution you can to using percentage.

[JKCooper2]

Hmm… I tried to reproduce with that code but no luck: https://snack.expo.io/@jkcooper/rn-view-percent. Can you try reverting to v0.57.0 to see if its a regression?