The difference between View and ScrollView in styling

Question

This is my component code and my style code:

function StartGameScreen() {
  return (
    <View style={styles.inputContainer}>
      <TextInput
        style={styles.numberInput}
        maxLength={2}
        keyboardType="number-pad"
        autoCapitalize="none"
        autoCorrect={false}
      />
      <PrimaryButton>Reset</PrimaryButton>
      <PrimaryButton>Confirm</PrimaryButton>
    </View>
  );
}
const styles = StyleSheet.create({
  inputContainer: {
    backgroundColor: "#ff6868",
    marginTop: 100,
    padding: 16,
    marginHorizontal: 24,
    borderRadius: 8,
    shadowColor: "black",
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 6,
    shadowOpacity: 0.25,
  },
  numberInput: {
    height: 50,
    width: 50,
    fontSize: 32,
    borderBottomColor: "yellow",
    borderBottomWidth: 2,
    color: "yellow",
    marginVertical: 8,
    fontWeight: "bold",
    textAlign: "center",
  },
});

And this picture is a result when I rendered:

But when I change View to ScrollView, it rendered to this (View component to ScrollView):

I'm curious that I used the same style elements but I got different result.

Answer 1

Wrapping your ScrollView inside SafeAreaView will fix this issue for you.

export default function App() {
  return (
    <SafeAreaView>
      <ScrollView style={styles.inputContainer}>
        <TextInput
          style={styles.numberInput}
          maxLength={2}
          keyboardType="number-pad"
          autoCapitalize="none"
          autoCorrect={false}
        />
        <PrimaryButton>Reset</PrimaryButton>
        <PrimaryButton>Confirm</PrimaryButton>
      </ScrollView>
    </SafeAreaView>
  );
}

It's happening because your ScrollView will take whatever height is available to it and by default it is 100%.

Another, solution could be to wrap your container View inside of a ScrollView.

export default function App() {
  return (
    <ScrollView>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.numberInput}
          maxLength={2}
          keyboardType="number-pad"
          autoCapitalize="none"
          autoCorrect={false}
        />
        <PrimaryButton>Reset</PrimaryButton>
        <PrimaryButton>Confirm</PrimaryButton>
      </View>
    </ScrollView>
  );
}

Answer 2

It appears that in your case, the unexpected layout that occurs after switching to ScrollView may be caused by the marginTop: 100 in the inputContainer style. If the content is not tall enough to fit the given area, the marginTop may push the content down, leaving empty space at the top.

Answer 3

ScrollView's style by default contains flexGrow:1 which will distribute the free space in the container that makes the view to fill up all the spaces.

In the ScrollView adding flexGrow:0 in the inputContainer style to have a similar result as View