[FIXED] React Native screen cut off at top Android

Issue

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

href="https://i.stack.imgur.com/dr41p.png" rel="nofollow noreferrer">

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)",
    }
  });

Solution

Try using StatusBar.currentHeight which gives the Status Bar height in Android.

import React, { Component } from 'react';
import {View, TextInput, StyleSheet, Dimensions, StatusBar } 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: {
      alignItems: 'center',
      justifyContent: 'center',
      height: StatusBar.currentHeight,
      backgroundColor: '#ecf0f1',
    },
    button:{
      borderRadius: 4,
      borderWidth: 2,
      width: 100,
      height: 40,
      borderColor: 'red',
      backgroundColor: "rgb(72, 120, 166)",
    }
  });

Answered By - Ashwin Mothilal
Answer Checked By - Pedro (JavaFixing Volunteer)