Why my button overlapping my input Text?

My button is overwriting my text, not respecting my flex.

The button should be at the bottom after the text, below the input texts.

Can you help me with this?

enter image description here

import React from 'react';
import { View, Text, TextInput, Button } from 'react-native';

export default props => (
    <View style={{ flex: 1, padding: 10 }}>
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center',marginTop: 30 }}>
            <Text style={{ fontSize: 25 }}>Teste</Text>
        </View>
        <View style={{ flex: 2}}>
            <TextInput style={{ fontSize: 20, height: 45 }} placeholder='E-mail' />
            <TextInput style={{ fontSize: 20, height: 45 }} placeholder='Senha' />
            <Text style={{ fontSize: 20 }}>Ainda não tem cadastro? Cadastre-se</Text>
        </View>
        <View style={{ flex: 2}}>
            <Button title="Acessar" color='#115E54' onPress={() => false} />
        </View>
    </View>
);

2 answers

  • answered 2018-02-13 04:01 JAINESH DOSHI

    I think your code will be like:

    <View style={{ flex: 1, padding: 10 }}>
        <Text style={{ fontSize: 25, alignSelf : 'center', marginTop: 30 }}>Teste</Text>
        <TextInput style={{ fontSize: 20, height: 45, marginTop: 20 }} placeholder='E-mail' />
        <TextInput style={{ fontSize: 20, height: 45 }} placeholder='Senha' />
        <Text style={{ fontSize: 20, marginTop: 20 }}>Ainda não tem cadastro? Cadastre-se</Text>
        <View style={{marginTop: 20}}>
            <Button title="Acessar" color='#115E54' onPress={() => false} />
        </View>
    </View>
    

    I hope this code will be helpful.

  • answered 2018-02-13 05:38 getumangon

    I have Tested In Android Platform It's Working Fine. render() { return ( <View style={{ flex: 1, padding: 10 }}> <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 30 }}> <Text style={{ fontSize: 25 }}>Teste</Text> </View> <View style={{ flex: 2 }}> <TextInput style={{ fontSize: 20, height: 45 }} placeholder='E-mail' /> <TextInput style={{ fontSize: 20, height: 45 }} placeholder='Senha' /> <Text style={{ fontSize: 20 }}>Ainda não tem cadastro? Cadastre-se</Text> </View> <View style={{ flex: 2 }}> <Button title="Acessar" color='#115E54' onPress={() => false} /> </View> </View> ); }