Breaking News: Grepper is joining You.com. Read the official announcement!

how to manage safearea in both iphone and android in react native

Shirshak Kandel answered on February 3, 2022 Popularity 1/10 Helpfulness 1/10

answer how to manage safearea in both iphone and android in react native

how to manage safearea in both iphone and android in react native

Comment

//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

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: android iphone javascript react-native safearea

Link to this answer
Share Copy Link

Contributed on Feb 03 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

how to manage safearea in both iphone and android in react native

Contents

More Related Answers

how to manage safearea in both iphone and android in react native

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.