/Javascript/React/React native make safe view in mobile

React native make safe view in mobile

//import libraries to create components
import React from 'react'
import { Text, StyleSheet, View, SafeAreaView, StatusBar } from 'react-native'

//create a component that return some jsx/simple function
//======following code use SafeAreaView and statusBar.currentHeight to 
//    solve this problem===============================
const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.textStyle}>hello world</Text>
    </SafeAreaView>
  )
}

//Create a StyleSheet object to style the component
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
})

//export the component, so it can be used in other parts of the app
export default App

Similar codes

0 vote124 views1 answer
React tooltip doesn't work
Javascript React
6 votes150 views1 answer
React native rotate
Javascript React
0 vote145 views1 answer
Stop playing music when page is closed react
Javascript React
11 votes128 views4 answers
Eslint disable react
Javascript React
13 votes113 views1 answer
Reactjs useState() hook
Javascript React
0 vote125 views1 answer
Render first index active tabs in reactjs
Javascript React
3 votes159 views1 answer
React.children.only expected to receive a single react element child
Javascript React
0 vote125 views1 answer
How to write unit test cases in react js
Javascript React
0 vote140 views1 answer
Upload file react onclick
Javascript React
4 votes155 views4 answers
Responsive font size react native
Javascript React