ScrollView isn't appering

I was messing with my code and suddenly the ScrollView decided to disappear.

For some reason, the ScrollView works "properly" inside the Character bar View but when it is inside of the base View it just isn't there.

export default class CharacterSheet extends Component {

  render() {
    return ( 
      <View style={{flex:1}}>
        <View style={styles.TopBar}>
            <View>              
            </View>        
          </View>
        <View style={{flex:1}}>          
          <View style={styles.CharacterBar}>
          </View><View style={styles.Base}>
            <ScrollView style={styles.scroll}>              
              <View style={{paddingTop:72}}>

                <View style={styles.spellsBox}>
                  <Text>Hi</Text>
                </View>
                <View style={styles.spellsBox}>
                  <Text>e</Text>
                </View>
                <View style={styles.spellsBox}>
                  <Text>a</Text>
                </View>
                <View style={styles.spellsBox}>
                  <Text>Hi</Text>
                </View>
                <View style={styles.spellsBox}>
                  <Text>Hi</Text>
                </View>
                <View style={styles.spellsBox}>
                  <Text>Hi</Text>
                </View>
              </View>            
            </ScrollView>
          </View>          
          <Animated.View style={styles.CharacterStatsBar}>
          </Animated.View>          
        </View>   
      </View>
    );
  }
}

const styles = StyleSheet.create({
  CharacterBar:{
    height:72,
    backgroundColor:'#242527'
  },
  CharacterStatsBar:{
    position:'absolute',
    top: 72,
    left: 0,
    right: 0,
    height:72,
    backgroundColor:'#404040',
    borderBottomWidth:2,
    borderBottomColor:'#c53131',
    borderTopWidth:1,
    borderTopColor:'#838383',
  },
  Base:{
    flex:1,
    backgroundColor:'#fff',
  },
  scroll:{
    width:'95%',
    alignSelf:'center'
  },
  spellsBox:{
    height:80,  
    marginTop:10,  
    paddingVertical:10,
    borderColor:'#777',
    borderWidth:3,
    justifyContent:'center'
  }
});

I'm trying to run this in an android device

this problem is pretty annoying and is stressing me a little bit.

Try Like this , don't wrap ScrollView inside multiple Views.

<View style={{flex:1}}>
    <View style={styles.TopBar}>
        <View>              
        </View>        
      </View>      
        <ScrollView style={styles.scroll}>              
          <View style={{paddingTop:72}}>

            <View style={styles.spellsBox}>
              <Text>Hi</Text>
            </View>
            <View style={styles.spellsBox}>
              <Text>e</Text>
            </View>
            <View style={styles.spellsBox}>
              <Text>a</Text>
            </View>
            <View style={styles.spellsBox}>
              <Text>Hi</Text>
            </View>
            <View style={styles.spellsBox}>
              <Text>Hi</Text>
            </View>
            <View style={styles.spellsBox}>
              <Text>byee</Text>
            </View>
          </View>            
        </ScrollView>         
  </View>