/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 vote216 views1 answer
Backgroundcolor react
Javascript React
0 vote195 views1 answer
UseFetch custom hook for React
Javascript React
24 votes203 views5 answers
React map array
Javascript React
22 votes217 views4 answers
Npm react copy to clipboard
Javascript React
2 votes214 views4 answers
Date range picker react
Javascript React
0 vote210 views1 answer
Reading state react
Javascript React
0 vote169 views1 answer
Open xcode shorthand react native
Javascript React
9 votes237 views3 answers
React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Javascript React
0 vote208 views1 answer
Exit ios inspector in react native
Javascript React
0 vote201 views1 answer
@testing-library/react-native switch
Javascript React