I want to know how can I make it so that even when the TextInput boxes are clicked the screen stays on place, or so that it scrolls over to the box you want to fill.
Screen when there is something going on.
As you can see the screen goes all over the place, somethings go over the title and it becomes a mess.
Code:
<Text style={{fontSize:27, color:'white', top: 5, textAlign:'center'}}>Cálculo do Traço a partir das Medidas:</Text><View style={styles.container}><View style={styles.inputContainer}><Text style={styles.label}>Agressividade</Text><TextInput style={styles.input} placeholder="Insira aqui" keyboardType='decimal-pad' returnKeyType={ 'done' } onChangeText={(text) => calculo(text)} /></View><View style={styles.inputContainer}><Text style={styles.label}>Condição</Text><TextInput style={styles.input} placeholder="Insira aqui" keyboardType='decimal-pad' returnKeyType={ 'done' } onChangeText={(text) => calculo(text)} /></View><View style={styles.inputContainer}><Text style={styles.label}>Tipo de cimento</Text><TextInput style={styles.input} placeholder="Insira aqui" keyboardType='decimal-pad' returnKeyType={ 'done' } onChangeText={(text) => calculo(text)} /></View><View style={styles.inputContainer}><Text style={styles.label}>fck</Text><TextInput style={styles.input} placeholder="Insira aqui" keyboardType='decimal-pad' returnKeyType={ 'done' } onChangeText={(text) => calculo(text)} /></View><View style={styles.inputContainer}><Text style={styles.label}>Slump</Text><TextInput style={styles.input} placeholder="Insira aqui" keyboardType='decimal-pad' returnKeyType={ 'done' } onChangeText={(text) => calculo(text)} /></View><View style={styles.inputContainer}><Text style={styles.label}>Dimensão máxima</Text><TextInput style={styles.input} placeholder="Insira aqui" keyboardType='decimal-pad' returnKeyType={ 'done' } onChangeText={(text) => calculo(text)} /></View><View style={styles.inputContainer}><Text style={styles.label}>Idade</Text><TextInput style={styles.input} placeholder="Insira aqui" keyboardType='decimal-pad' returnKeyType={ 'done' } onChangeText={(text) => calculo(text)} /></View><View style={styles.inputContainer}><Text style={styles.label}>Método de dosagem</Text><Picker style={styles.input}><Picker.Item key={0} label='ABCP' value='ABCP' style={{fontSize:25}} /><Picker.Item key={1} label='IPT' value='IPT' style={{fontSize:25}} /></Picker></View></View>Styles used:
container: { flex: 1, justifyContent: 'center', alignItems:"center"},input:{ width:"48%", borderBottomColor:"#585858", borderBottomWidth:2, fontSize: 25, color:'white'},inputContainer:{ flexDirection:"row", justifyContent:"space-between", alignItems:"center", marginVertical:10},label: { width:"48%", fontSize:25, color: 'white'},