/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 vote147 views1 answer
Invariant Violation: [React Intl] An `id` must be provided to format a message.
Javascript React
23 votes136 views3 answers
Copy text to clipboard javascript react
Javascript React
1 vote138 views1 answer
React case switch not working
Javascript React
1 vote149 views1 answer
Unexpected token. did you mean `{'>'}` or `>`? react
Javascript React
0 vote172 views1 answer
How to change height of bottom material tab navigator from react-naviagtion
Javascript React
0 vote328 views1 answer
React yup password with number string and uppercase
Javascript React
-1 vote138 views2 answers
Minified react error #200
Javascript React
8 votes142 views4 answers
Get current url react router
Javascript React
0 vote152 views1 answer
Usb react native device not found
Javascript React
20 votes137 views4 answers
Conditional Rendering in React js
Javascript React