CODEWITHSUNDEEP
react-native
Jed
Jed

Reputation: 89

View is not full screen React-Native

I'm starting to work with React-Native recently, Just try some simple screen but I faced with a problem when my app shown on my device (Installing APK 'app-debug.apk' on 'Redmi 5 Plus - 7.1.2') that The UI has strange black in center between status bar and content.

Please see the image : App has strange black in center between status bar and content

import React, { Component } from 'react';
import {
  View, StyleSheet, StatusBar, Text
} from 'react-native';
import Main from './src/components/Main';


type Props = {};
export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      titleText: "Bird's Nest",
      bodyText: 'This is not really a bird nest.'
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.baseText}>
          <Text style={styles.titleText} onPress={this.onPressTitle}>
            {this.state.titleText}{'\n'}{'\n'}
          </Text>
          <Text numberOfLines={5}>
            {this.state.bodyText}
          </Text>
        </Text>
        {/* <Main /> */}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  baseText: {
    fontFamily: 'Cochin',
  },
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

I try to hide status bar but the strange "Black Header" still there. Result :Hiding StatusBar

`<View style={styles.container}>
  <StatusBar
  hidden={true}
    backgroundColor="blue"
    barStyle="light-content"
  />
  <Text style={styles.baseText}>
    <Text style={styles.titleText} onPress={this.onPressTitle}>
      {this.state.titleText}{'\n'}{'\n'}
    </Text>
    <Text numberOfLines={5}>
      {this.state.bodyText}
    </Text>
  </Text>
  {/* <Main /> */}
</View>`

Upvotes: 0

Views: 7468

Answers (1)

Jed
Jed

Reputation: 89

The problem is that my android phone screen was in special ratio (Xiaomi Redmi 5 plus), then I need to go to the setting area and grant Full screen permission to my app and it's working. Hope this can help the other.

Upvotes: 2

Related Questions