Giter VIP home page Giter VIP logo

react-native-safe-area-view's Introduction

React Navigation 7

Build Status Code Coverage MIT License

Routing and navigation for your React Native apps.

Documentation can be found at reactnavigation.org.

This branch contains the code for the pre-release version of React Navigation 7. You can find the code for the latest stable version in the 6.x branch.

Package Versions

Name Latest Version
@react-navigation/bottom-tabs badge
@react-navigation/core badge
@react-navigation/devtools badge
@react-navigation/drawer badge
@react-navigation/elements badge
@react-navigation/material-top-tabs badge
@react-navigation/native-stack badge
@react-navigation/native badge
@react-navigation/routers badge
@react-navigation/stack badge
react-native-tab-view badge

Contributing

Please read through our contribution guide to get started!

Installing from a fork on GitHub

Since we use a monorepo, it's not possible to install a package from the repository URL. If you need to install a forked version from Git, you can use gitpkg.

First install gitpkg:

yarn global add gitpkg

Then follow these steps to publish and install a forked package:

  1. Fork this repo to your account and clone the forked repo to your local machine
  2. Open a Terminal and cd to the location of the cloned repo
  3. Run yarn to install any dependencies
  4. If you want to make any changes, make them and commit
  5. Run yarn lerna run prepack to perform the build steps
  6. Now cd to the package directory that you want to use (e.g. cd packages/stack for @react-navigation/stack)
  7. Run gitpkg publish to publish the package to your repo

After publishing, you should see something like this:

Package uploaded to [email protected]:<user>/<repo>.git with the name <name>

You can now install the dependency in your project:

yarn add <user>/<repo>.git#<name>

Remember to replace <user>, <repo> and <name> with right values.

react-native-safe-area-view's People

Contributors

arrayzoneyour avatar ashoat avatar brentvatne avatar brunolemos avatar cesargdm avatar charpeni avatar chrfalch avatar curiousdustin avatar davepack avatar davidgovea avatar dependabot[bot] avatar dijonkitchen avatar emilefleming avatar evanbacon avatar gabgagnon avatar gurglet avatar janicduplessis avatar karlosq avatar messense avatar mgtitimoli avatar minishlink avatar misogl avatar nicholascm avatar pampang avatar retyui avatar satya164 avatar shashkovdanil avatar swansontec avatar uutarou10 avatar vonovak avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-native-safe-area-view's Issues

ListView seems to remove the padding

Having a ListView inside of a SafeAreaView seems to break the component.

Something as simple as

<SafeAreaView> <ListView dataSource={ dataSource } renderRow={ (rowData) => <Text>{rowData.name}</Text> } /> </SafeAreaView>

Does not work as expected.

setStatusBarHeight does not exists on type

Bug

I am trying to use setStatusBarHeight on SafeAreaView and I am getting the following TypeScript error

Environment info

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo/samples": "~3.0.3",
    "@expo/vector-icons": "^10.0.3",
    "@react-navigation/web": "^1.0.0-alpha.9",
    "axios": "^0.19.0",
    "expo": "^34.0.1",
    "expo-asset": "^6.0.0",
    "expo-constants": "6.0.0",
    "expo-font": "~6.0.0",
    "expo-web-browser": "6.0.0",
    "jwt-decode": "^2.2.0",
    "moment": "^2.24.0",
    "native-base": "^2.13.5",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-moment": "^0.9.2",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-calendars": "^1.209.0",
    "react-native-circular-progress": "^1.3.0",
    "react-native-dropdownalert": "^4.1.1",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-svg": "^9.7.0",
    "react-native-swipeout": "^2.3.6",
    "react-native-web": "^0.11.4",
    "react-navigation": "^3.11.0",
    "react-redux": "^7.1.0",
    "redux": "^4.0.4",
    "redux-promise-middleware": "^6.1.1",
    "redux-thunk": "^2.3.0",
    "validate.js": "^0.13.1"
  },
  "devDependencies": {
    "@types/react": "^16.8.23",
    "@types/react-native": "^0.57.65",
    "babel-preset-expo": "^6.0.0",
    "redux-logger": "^3.0.6",
    "typescript": "^3.4.5"
  },
  "private": true
}

React native info output:

Property 'setStatusBarHeight' does not exist on type 'ComponentClass<SafeAreaViewProps, any>'.

image1

This is an image on iPhone but I only did that because I can easily transfer screenshots from my iPhone to iMac computer. This is the same error I see on android (s9). however, It is a problem on both platforms

Library version: "0.14.7"

Steps To Reproduce

I am trying to use the following logic

{ Platform.OS === 'android' && SafeView.setStatusBarHeight(0) }

I expect that this would not cause an error in TypeScript and I would be able to set the height

Add support for Android?

When i set my status bar in android app gets rendered under the status bar.
Also now a days we are getting android phones with notches and all that.

So does it make sense to add support for android?
it could be the matter of just returning StatusBar.currentHeight instead of 0

Does it sound like a good idea?

iPad Pro 11-Inch (2018) Not Supported

The new iPad Pro 11-Inch has rounded corners and no physical home button similar to the new iPhones.

When using this safe area view, the status bar is accounted for as expected, but the bottom area with the virtual home button is NOT.

Not work on iOS 10

Is there any way to make SafeAreaView works on iOS 10 ?

import React from 'react';
import { AppRegistry, SafeAreaView, View, Text } from 'react-native';
class Application extends React.Component {
	render() {
		return (
			<SafeAreaView>
				<View style={{height:"100%", backgroundColor:"red"}}>
					<Text>SafeAreaView is not works</Text>
				</View>
			</SafeAreaView>
		)
	}
}
AppRegistry.registerComponent('gas', _ => Application);

Image

Export the inner insets

Hi, I am doing a job that is to make a TextInput keep moving with the keyboard.

I've finished the job on no-iPhone X devices, it works perfect, but when I switched to the iPhone X with SafeAreaView I found a problem.

1

Here is what it looked like when the keyboard collapsed, it was not the problem.

2

Here is what it looked like when the keyboard displayed, you can see the inset of the SafeArewView was still existing in the text area.

I've tried not to use forceInsets to the SafeAreaView, unfortunately, it didn't work.

So my solution is subtracting the offset by the bottom inset of the SafeAreaView which equals to 34 on the iPhone X, however, it's too tricky to subtract it by 34 directly, alternatively, I want the SafeAreaView to tell me how many the inset is, this is why I want SafeAreaView to export the calculated inner insets.

I know in the most of cases, the exporting is not necessary and should not be abused, but I really need these insets in this situation and I believe there must few situations that can only be resolved with the insets directly, please care about my suggestion. Thank you!

.git file made it's way into release on NPM

"/path/to/my/project/node_modules/react-native-safe-area-view: Appears to be a git repo or submodule."

I'm getting this message whenever I try to run an NPM install.

It looks like a .git file made it into the release on NPM and is causing this issue.

If I delete the file, it shows back up on subsequent npm installs.

Unable to resolve “./withSafeArea” from “node_modules\react-native-safe-area-view\index.js”

I've just updated my React native version to 0.57 from 0.55.

I'm getting bunch of errors starting from Barbel, fixing errors one by one.

Now I'm encountering

"Unable to resolve "./withSafeArea" from "node_modules\react-native-safe-area-view\index.js"

Error, and that's all information the console gives. I tried googling it, seems like I'm the first one encountering this error. What is the error here?

So far I've tried:

delete node_modules folder and do npm install again.

npm install react-native-safe-area-view.

Both no luck :(

Require cycle in withSafeArea.js line 4

Require cycle: node_modules/react-native-safe-area-view/index.js -> node_modules/react-native-safe-area-view/withSafeArea.js -> node_modules/react-native-safe-area-view/index.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.

Why no hook? 🎣

Feature Request

Now that everybody knows that hooks are so awesome! Why not use one to get the safe area paddings?

Why it is needed

Simpler with less magic and more flexible than the SafeAreaView

Possible implementation

import React, { useEffect, useState } from 'react';
import { Dimensions } from 'react-native';
import { getInset } from 'react-native-safe-area-view';

export default () => {

    const screen = Dimensions.get('screen');
    const landScape = screen.width > screen.height;
    const [safeArea, setSafeArea] = useState({
        left: getInset('left', landScape),
        right: getInset('right', landScape),
        top: getInset('top', landScape),
        bottom: getInset('bottom', landScape),
    });

    const onChange = ({ screen }) => {
        const landScape = screen.width > screen.height;
        setSafeArea({
            left: getInset('left', landScape),
            right: getInset('right', landScape),
            top: getInset('top', landScape),
            bottom: getInset('bottom', landScape),
        });
    };

    useEffect(() => {
        Dimensions.addEventListener('change', onChange);
        return () => Dimensions.removeEventListener('change', onChange);
    }, []);

    return safeArea;
};

Code sample

export default function UseSafeAreaHookUsage() {

    const safeArea = useSafeArea();

    return (
        <View style={{
            flex: 1,
            backgroundColor: '#9e4e4e',
            paddingLeft: safeArea.left,
            paddingRight: safeArea.right,
            paddingTop: safeArea.top,
            paddingBottom: safeArea.bottom,
        }}>
            <View style={{
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: '#55aa55'
            }}>
                <Text style={{ color: 'white', fontSize: 36 }}>Safe Area</Text>
                <Text style={{ color: 'white' }}>{JSON.stringify(safeArea)}</Text>
            </View>

    </View>
    );
}

Screenshots

Simulator Screen Shot - iPhone X - 2019-07-02 at 12 15 42
Simulator Screen Shot - iPhone X - 2019-07-02 at 12 15 55

Opening fullScreen video causes bottomPadding to disappear on iphoneX devices

I have a problem with safe-area-view when I have the device in landscape and then presentFullscreenPlayer. When exiting the fullscreen player paddingBottom provided by safe-area-view is set to 0. Before entering fullscreen the padding was 34.
I think I have seen this also when using Modal from react-native.

if you open this screen implementation with the iphone x device in landscape you will see the padding is gone. I wrapped the presentFullscreenPlayer in a timeout so I could see the difference before the video is presented.

`import React, { Component } from "react";
import { StyleSheet, Platform, TouchableOpacity, View, Image } from "react-native";
import { SafeAreaView } from "react-navigation";
import { WINDOW_WIDTH, WINDOW_HEIGHT } from "services/constants";
import { Video } from "expo";

export interface TestScreenProps {}

export interface TestScreenState {
selectedVideo: string | null;
}
interface FullscreenUpdateEvent {
fullscreenUpdate: number;
}

class TestScreen extends Component<TestScreenProps, TestScreenState> {
videoPlayer: Video | null;
state = {
selectedVideo:
"https://s3-eu-central-1.amazonaws.com/xps-ger/6156376847515164452/chatfiles/-7196241898081865239.m4v"
};

static navigationOptions = {
header: null,
gesturesEnabled: false,
tabBarVisible: false
};

renderVideo = () => {
if (this.state.selectedVideo) {
return (
<Video
ref={ref => (this.videoPlayer = ref)}
source={{ uri: this.state.selectedVideo }}
shouldPlay={true}
resizeMode={Video.RESIZE_MODE_CONTAIN}
onFullscreenUpdate={(fs: FullscreenUpdateEvent) => this.onFullscreenUpdate(fs)}
useNativeControls={true}
onLoad={ns => this.onVideoLoad(ns)}
/>
);
}
};

onFullscreenUpdate(fs: FullscreenUpdateEvent) {
if (fs.fullscreenUpdate == 3) {
this.setState({ selectedVideo: null });
}
}
async onVideoLoad(ns) {

setTimeout(async () => {
  if (this.videoPlayer) {
    await this.videoPlayer.presentFullscreenPlayer();

    console.log("FULL SCREEEN !");
  }
}, 20000);

}
render() {
return (

{this.state.selectedVideo && this.renderVideo()}
<View style={{ flex: 1 }}>
<TouchableOpacity
onPress={() => {
this.setState({ selectedVideo: "https://www4.sidelinesports.com/thumbs/1100571932817616089.png" });
}}
>
<Image
source={{ uri: "https://www4.sidelinesports.com/thumbs/1100571932817616089.png" }}
style={styles.image}
resizeMode="cover"
/>



);
}
}

const styles = StyleSheet.create({
container: {
alignItems: "stretch",
backgroundColor: "white",
flex: 1,
flexDirection: "column"
},
safeArea: {
flex: 1,
backgroundColor: "white",
paddingTop: Platform.OS === "android" ? 25 : 0
},
activityIndicator: {
width: WINDOW_WIDTH,
height: WINDOW_HEIGHT
},
gallery: {
width: "100%",
height: "100%"
},
image: {
width: 150,
height: 100,
margin: 10,
justifyContent: "center",
alignItems: "center"
}
});

export default TestScreen;`

Need to only force custom inset when iPhone X/XS, not for all devices

It would be much more useful to me if the forceInset overrides were only utilized when the phone is iPhone X/XS, not simply applied regardless of the device. In my case, I want to override the insets with custom values, but only for iPhone X/XS. All other devices shouldn't add any padding. Either the forceInset logic should be skipped when not iPhone X/XS, or a parallel prop of forceInsetOnlyX could be used to apply the inset overrides conditionally without breaking the existing behavior of forceInset.

I can do the conditional when specifying my forceInsert values, but I will have to replicate detection of iPhoneX/XS because your component doesn't expose that detection result (would be nice if you did).

support for expo 34

in docs mentioned that it will support EXPO SDK 35, but officially EXPO SDK 34 only. when I'm using in EXPO 34 getting linking error.is there any way without detaching I can use react-native-safe-area-view Lib.

Invariant Violation: requireNativeComponent: "RNCSafeAreaView" was not found in the UIManager.

Conflict with react-navigation and headerMode: 'none'

Hi, I'm experiencing a weird behavior using safeAreaView and react-navigation.
Without safe area, when my StackNavigator is headerMode: 'none', everything goes fine, but when I use safeAreaView, the StackNavigator doesn't works perfectly and don't hide the header completely, I know that probably is not a react-safe-area-view problem, but... maybe you guys can help with some tip.

Thats the illustration:
simulator screen shot - iphone x - 2018-01-22 at 00 27 26

Unstable behaviour with react-native-navigation tabs

Bug

When used with react navigation tab bars (inside the tab views), sometimes when switching tabs back and forth, the safe area inset disappears. Easy to reproduce with Fast Refresh enabled:

  1. Have two tabs, both with safeareaview inside their views.
  2. Test on iOS simulator, iPhone X (notch) or iPhone 6 (status bar)
  3. Open main tab and observe safearea view padding
  4. save js file of other tab in editor and observe code being reloaded
  5. Switch to the other tab that has been reloaded
  6. observe that the top inset is missing

Note that when using react-native-safe-area-context and logging the insets using useSafeArea hook, the values are reported correctly even though rendered without insets in SafeAreaView from react-native-safe-area-view. And since this module is using react-native-safe-area-context, I'm thinking there is something wrong with the code in this module. Using SafeAreaView exported from react-native-safe-area-context does not exhibit this problem.

Environment info

System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Memory: 564.35 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.11.1 - ~/tools/node-v12.11.1-darwin-x64/bin/node
    Yarn: 1.19.0 - ~/tools/node-v12.11.1-darwin-x64/bin/yarn
    npm: 6.11.3 - ~/tools/node-v12.11.1-darwin-x64/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 16, 26, 28
      Build Tools: 26.0.3, 28.0.2, 28.0.3
  IDEs:
    Android Studio: 3.3 AI-182.5107.16.33.5314842
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: ^16.10.2 => 16.10.2 
    react-native: 0.61.2 => 0.61.2 
  npmGlobalPackages:
    create-react-native-app: 2.0.2
    react-native: 0.61.2

Library version: 1.0.0
context version 0.4.1
"react-navigation-tabs": "^2.5.5",
"react-navigation": "^4.0.10",

Reproducible sample code

Can add code soon

run error: two 'react-native' modules after installing

I install react-native-safe-area-view, but it will causes error, and I don't know how to install this component to my project, and I hope the document can be more specific, cause I don't know exactly how to use it.

Here is what I do:

  • npm install react-native-safe-area-view --save
  • run iPhone X simulator
  • then error occurred

Here is the error:

error: bundling failed: ambiguous resolution: module /Users/dongfanggouwu-xiong/WebstormProjects/untitled/index.js tries to require react-native, but there are several files providing this module. You can delete or fix them:

  • /Users/dongfanggouwu-xiong/WebstormProjects/untitled/node_modules/react-native-safe-area-view/node_modules/react-native/package.json

  • /Users/dongfanggouwu-xiong/WebstormProjects/untitled/node_modules/react-native/package.json

react-native-web does not provide DeviceInfo, and this package depends on it being there.

react-native-web aliases import ... from 'react-native' into import ... from 'react-native-web'.

The maintainer of react-native-web does not support undocumented react native components, and DeviceInfo is one of them. So if you want to use this package under react-native-web, you'll get errors.

I want to fix this, so I'm only creating this issue, so I can provide a PR against it.

Doesn't work in landscape?

It looks like this component doesn't add any padding in landscape, but this is going to allow elements to be rendered below the status bar.

Am I missing something maybe?

[iOS] SafeAreaView not working in App Extensions

When embedding an app extension (https://facebook.github.io/react-native/docs/app-extensions) in a React Native app, the SafeAreaView will not work as expected.

The problem is that the library is using Dimensions.get("window") which always returns (0, 0, 0, 0) in app extensions on iOS. This can be seen in the React Native iOS source where we find the RCTRunningInAppExtension test when trying to resolve the current window.

Reproduction is a little bit hard, as you need to set up and build a project containing an app extension using one or more SafeAreaView components.

How to remove Shadow

Thanks for this great useful library,

I need to remove the shadow of SafeAreaView.
screenshot 2019-01-30 at 2 50 43 pm

What are the differences between this lib and build-in version of SafeAreaView?

I thought originally this was a js only way for those who has not decided to update to RN50. However when PR #1 was accepted, the peerDeps has been changed to

 "peerDependencies": {
    "react": "16.0.0",
    "react-native": "^0.50.1"
 }

Then why keeping these two codebases instead of making react-navigation to depend on this lib? Would it cause additional work, issues/confusions for bidirectional sync?
e.g. the commit forceInset only apply to iPhone X is not synchronised to react-navigation build-in version...

Intermittently SafeAreaView not working with in-call extra height on iOS

When I'm already in a call and then open an app using expo, sometimes SafeAreaView doesn't apply the extra height needed. It does the same with or without using the package expo/status-bar-height. I'm using react-navigation (version 1.5.11) SafeAreaView and here is a screenshot of it in the expo app using version 27.0.1.

image

_reactNative.Dimensions.addEventListener is not a function

I'm onreact-native 0.34.1 and trying to use react-native-safe-area-view 0.7.0 for iPhone X. Getting the following error

_reactNative.Dimensions.addEventListener is not a function (In '_reactNative.Dimensions.addEventListener('change', this.handleOrientationChange)', '_reactNative.Dimensions.addEventListener' is undefined)

What does this module give that react-native-safe-area-context hasn't?

Question

Since this module uses react-native-safe-area-context to get insets, and react-native-safe-area-context also has a SafeAreaView, why should I use this one when this one has more complicated (and error prone) logic built on top? Maybe we can add some clarification in README?

first render flickers if overriding the inset

Currently touchesTop defaults to true. If a component is not actually touching the top there is a rendering artifact where the component is rendered with padding until a measurement can be done in componentDidMount + InteractionManager.runAfterInteractions + _onLayout which then discovers the component is not touching the top and adjusts to the correct position after the setState call from _onLayout. This effect is highly noticeable though and is not present in react-native's native SafeAreaView impl.

I do not see a way to fix this because of the chicken-and-egg issue of needing to render the component to determine if it's touching but maybe it could be done with an invisible view or something to avoid such a bad content shift.

Flow error

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native-safe-area-view/index.js.flow:24:50

Cannot resolve name WrappedComponent.

     21│
     22│ declare export function withSafeArea(
     23│   forceInset?: ?ForceInset
     24│ ): (WrappedComponent: React$ComponentType<*>) => WrappedComponent;
     25│

[iOS] Hidden status bar not respected.

This SafeAreaView does not respect hidden status bar in iOS as it should.

Even, when status bar is hidden, there is a top inset. You can use forceInsets to override this, however, it will then ALSO override the inset on iPhones with a notch. (iPhone X, etc)

In some circumstances, you want the safe area to inset for the notch, even if the status bar info is hidden.

The SafeAreaView built in to react-native DOES treat it correctly.

When status bar is hidden, there is still an inset on iPhone X, but not on normal iPhones.

Here are some examples:

react-native-safe-area-view SafeAreaView

import React from 'react';
import { View, StatusBar, Text } from 'react-native';
import SafeAreaView from 'react-native-safe-area-view';

export default class App extends React.Component {
  render() {
    return (
      <SafeAreaView style={{ backgroundColor: 'red', flex: 1 }}>
        <StatusBar hidden={true} />
        <View
          style={{
            backgroundColor: 'white',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
          }}
        >
          <Text>SafeAreaView</Text>
          <Text>react-native-safe-area-view</Text>
        </View>
      </SafeAreaView>
    );
  }
}

image

react-native SafeAreaView

import React from 'react';
import { View, StatusBar, Text, SafeAreaView } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <SafeAreaView style={{ backgroundColor: 'red', flex: 1 }}>
        <StatusBar hidden={true} />
        <View
          style={{
            backgroundColor: 'white',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
          }}
        >
          <Text>SafeAreaView</Text>
          <Text>react-native</Text>
        </View>
      </SafeAreaView>
    );
  }
}

image

Warning: Can't call setState (or forceUpdate) on an unmounted component..

This is related to the issue react-navigation/react-navigation#3992 raised at React Navigation repository, which I tracked down to SafeView Component in this repository. The problem is happening when the measureInWindow is being called at time the component has already dismounted. To fix this all we need to check the existence of view before proceeding further. So please add the following code at line number 153.
if (!this.view) return;

Expo SDK 33 support

Bug

Using the latest version 0.14.5 with Expo SDK 33 results in an error:

The following APIs have moved to separate packages and importing them from the "expo" package is deprecated: Constants.

1. Add correct versions of these packages to your project using:

   expo install expo-constants

   If "install" is not recognized as an expo command, update your expo-cli installation.

2. Change your imports so they use specific packages instead of the "expo" package:

 - import { Constants } from 'expo' -> import Constants from 'expo-constants'

Can't change StatusBar backgroundColor

Applying the backgroundColor prop to StatusBar component doesn't get applied. I need to set the background colour of SafeAreaView to get the effect i want, which is not desired because on iPhone X it will have that same colour at the bottom of the screen where the "notch" is

npm ERR! code EISGIT, Appears to be a git repo or submodule

I get this when I do npm install. I'm happy to provide more info if needed.

npm ERR! code EISGIT
npm ERR! git /Users/fredrikve/Stagecast/goteborgsvarvapp/node_modules/react-native-safe-area-view: Appears to be a git repo or submodule.
npm ERR! git     /Users/fredrikve/Stagecast/goteborgsvarvapp/node_modules/react-native-safe-area-view
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.

EDIT: this happens on a fresh npm install

Support forwarding a ref in the "ref" prop + setNativeProps

Bug

The base API from SafeAreaView should be the same from react-native, I noticed it's diverging on the ref. React Native supports passing a ref={ref} and calling ref.current.setNativeProps(), while react-native-safe-area-view has a private field _view for that.

Environment info

Library version: 1.0.0-alpha.0

`getInset` flow type not defined

Bug

One cannot use getInset separately when using Flow.

Environment info

React native info output:

  React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
      Memory: 1.12 GB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 11.12.0 - /usr/local/bin/node
      Yarn: 1.15.2 - /usr/local/bin/yarn
      npm: 6.7.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 24, 27, 28
        Build Tools: 28.0.3
        System Images: android-28 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5199772
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3
      react-native: 0.57.8 => 0.57.8
    npmGlobalPackages:
      react-native-cli: 2.0.1

Library version: 0.14.4

Steps To Reproduce

The following code will generate a Flow error:

// @flow

import {getInset} from 'react-native-safe-area-view';

Flow error: Cannot import getInset because there is no getInset export in react-native-safe-area-view. Flow(InferError)

Should react and react-native be peerDependencies?

When I install this as an npm package in my project, I get "Ambiguous resolution: module [path in my project] tries to require 'react-native', but there are several files providing this module. You can delete or fix them.

I think if react and react-native were listed as peerDependencies in your package.json, it would use the react/ react-native included in my project and it would work.

SafeAreaView behavior unexpected on non iPhone X devices

Hi, I have an app where the iPhoneX status bar overlaps some of my top menu content. To add padding to the area, I added a SafeAreaView component to the bar. It looks perfect on an iPhone X in simulator, but when I run this on a simulated device that is not an iPhone X, the padding remains, and now I have too much space between my menu items and the status bar.

I was thinking that the component would detect if it was on iPhone X or not, and properly adjust the height, so that it looks perfect on all devices. Is this not the case? I am using the SafeAreaView library v0.9.0

Here's what my code looks like:

import SafeAreaView from 'react-native-safe-area-view';
...
<SafeAreaView>
    <NavigationBar
        title={this._title()}
        leftButton={this._leftButton()}
        rightButton={this._rightButton()}
        style={styles.navBar}
    />
</SafeAreaView>

Let me know, thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.