Error while switching View to Scrollview

Question

I am making a page with a menu of 6 elements, divided 2 per line.

And this presents everything right the way I want on most screens, but when testing in the emulator of a screen 3,2' this cuts the final buttons, so I modified the View global for ScrollView that by what I researched will make appear the scroll bar when necessary.

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  StatusBar,
  Alert,
  ScrollView
} from 'react-native';
import Button from 'react-native-button';

import { Actions } from 'react-native-router-flux';

export default class TipoManifestacao extends Component {
  render() {
    return (
      <ScrollView style={styles.geral}>

        <StatusBar 
          //hidden
          backgroundColor='#005288'
        />
        <View style={styles.containerTitulo}>
          <Text style={styles.titulo}>Escolha o tipo da manifestação</Text>
        </View>

        <View style={styles.containerMenu}>

          <View style={styles.menuGrupo}>

            <Button
              onPress={() => { alert("Teste"); }}
              containerStyle={ styles.containerBotao }
              style={ styles.botao }>
              Denúncia
            </Button>

            <Button
              onPress={() => { alert("Teste"); }}
              containerStyle={ styles.containerBotao }
              style={ styles.botao }>
              Denúncia
            </Button>

          </View>

          <View style={styles.menuGrupo}>

            <Button
              onPress={() => { alert("Teste"); }}
              containerStyle={ styles.containerBotao }
              style={ styles.botao }>
              Denúncia
            </Button>

            <Button
              onPress={() => { alert("Teste"); }}
              containerStyle={ styles.containerBotao }
              style={ styles.botao }>
              Denúncia
            </Button>

          </View>

          <View style={styles.menuGrupo}>

            <Button
              onPress={() => { alert("Teste"); }}
              containerStyle={ styles.containerBotao }
              style={ styles.botao }>
              Denúncia
            </Button>

            <Button
              onPress={() => { alert("Teste"); }}
              containerStyle={ styles.containerBotao }
              style={ styles.botao }>
              Denúncia
            </Button>

          </View>

        </View>

      </ScrollView>

    );
  }
}

const styles = StyleSheet.create({
  geral: {
    flex: 1,
    //justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#005288',
  },
  containerTitulo:{
    position: 'absolute',
  },
  titulo: {
    top: 10,
    fontSize: 22,
    fontWeight: 'bold',
    color: '#000',
    //justifyContent: 'flex-start',
  },
  containerMenu: {
    top: 60,
  },
  botao: {
    fontSize: 20, 
    color: '#000',
  },
  containerBotao: {
    marginBottom: 20,
    marginLeft: 10,
    marginRight: 10,
    height:130,
    width:130,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFB504',
    elevation: 10,
  },
  menuGrupo: {
    flexDirection: 'row',
  },
});

But when doing the Reload in the emulator started to show this error that I’m not understanding:

Answer 1

Well, I managed to make the mistake disappear, even though the Scroll doesn’t work.

In place of:

<ScrollView style={styles.geral}>

Placed:

<ScrollView contentContainerStyle={styles.geral}>