Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 29428

React Native screen cut off at top Android

$
0
0

I have an input that is cutt off at the top. Is it possible to have it aligned directly under the black bar without writing specific margins/padding for it? If I take off the padding the element completely dissapears from the screen

Image of input being cut off

import React, { Component } from 'react';
import {View, TextInput, StyleSheet, Dimensions } from 'react-native';

export default function IndoorFOrm() {
  const [value, onChangeText] = React.useState('Useless Placeholder');

  return (
    <View style={styles.container}>
        <TextInput
            style={styles.button}
            onChangeText={text => onChangeText(text)}
            value={value}
        />        
    </View>

  );
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      paddingTop: 35,
      backgroundColor: '#ecf0f1',
    },
    button:{
      borderRadius: 4,
      borderWidth: 2,
      width: 100,
      height: 40,
      borderColor: 'red',
      backgroundColor: "rgb(72, 120, 166)",
    }
  });

Viewing all articles
Browse latest Browse all 29428

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>