javascript - Fit content to height of View in React Native (iOS)

Question

I'm trying to fit dynamic content into a View of fixed height, in this case the height of the screen, without leaking over (so that vertical scrolling isn't required).

This is the opposite of other questions like this, where they want the height of the View determined by the content.

What I have so far:

  <SafeAreaView style={styles.container}>
    <ScrollView scrollEnabled={false}>
        <View style={styles.displayContainer}>
            {splitWords.map(word => (
              <Text
              style={styles.textDisplay}
              adjustsFontSizeToFit={true}
              numberOfLines={1}
              style={{fontSize: 200}}
              >
                {word}
              </Text>
            ))}
        </View>
      )}
    </ScrollView>
  </SafeAreaView>

I've tried various combinations of flex, flexShrink, flexWrap, etc and cant seem to get it. Here's the stylesheet:

const styles = StyleSheet.create({
container: {
  flex: 1,
},
textDisplay: {
  // Not sure what to try here next
},
displayContainer: {
  padding: 2,
  height: height - 130, // Height is obtained by Dimensions.get('window').height;
  width: width, // Width is obtained by Dimensions.get('window').weight;
  //alignSelf: 'stretch'
  //flex: 0,
  //flexWrap: 'nowrap',
  //flexDirection: 'column',
  //flexShrink: 1,
 },
});

I'd appreciate any help.

question from:https://stackoverflow.com/questions/66056153/fit-content-to-height-of-view-in-react-native-ios

Answer 1

Have a try by adding the below props in your ScrollView Component.

<ScrollView flex={{ flex: 1 }} contentContainerStyle={{ minHeight: "100%" }}>
   ...
</ScrollView>