I'm making a page with a menu of 6 elements, divided 2 per line.
And this is all right the way I want it on most screens, but when testing on a 3.2 'screen emulator it cuts the end buttons, so I modified the% of% global by% with% than by which I researched will make the scroll bar appear when needed.
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',
},
});
However, when I reloaded the emulator, I presented this error that I do not understand: