appandflow / appandflow/react-native-safe-area-context

useSafeAreaInsets emits too many results during device rotation

Open
#172 10 comments 13 reactions 0 assignees View on GitHub
help wanted
Dominant language
TypeScript
Stars
2.8k
Forks
258
Avg merge
3d 1h
Merged PRs (30d)
2

Description

Because of the device performance issue, the repeated emission of the same insets or useless emission from `useSafeAreaInsets` should be skipped.

When I rotated my device with `iPhone X`, the console printed out like the following.

## AS-IS

```
[Tue Jan 26 2021 11:40:03.498] LOG openFullScreen
[Tue Jan 26 2021 11:40:03.512] LOG {"bottom": 34, "left": 0, "right": 0, "top": 44}
[Tue Jan 26 2021 11:40:04.220] LOG {"bottom": 21, "left": 44, "right": 0, "top": 0}
[Tue Jan 26 2021 11:40:04.267] LOG {"bottom": 21, "left": 44, "right": 0, "top": 0}
[Tue Jan 26 2021 11:40:04.644] LOG {"bottom": 21, "left": 44, "right": 0, "top": 0}
[Tue Jan 26 2021 11:40:04.930] LOG {"bottom": 0, "left": 0, "right": 0, "top": 0}
[Tue Jan 26 2021 11:40:05.251] LOG {"bottom": 0, "left": 44, "right": 0, "top": 0}
[Tue Jan 26 2021 11:40:05.558] LOG {"bottom": 21, "left": 44, "right": 44, "top": 0}
[Tue Jan 26 2021 11:40:05.827] LOG {"bottom": 21, "left": 44, "right": 44, "top": 0}
```

```
[Tue Jan 26 2021 11:40:08.221] LOG closeFullScreen
[Tue Jan 26 2021 11:40:08.325] LOG {"bottom": 21, "left": 44, "right": 44, "top": 0}
[Tue Jan 26 2021 11:40:08.491] LOG {"bottom": 0, "left": 0, "right": 0, "top": 44}
[Tue Jan 26 2021 11:40:08.793] LOG {"bottom": 0, "left": 0, "right": 0, "top": 44}
[Tue Jan 26 2021 11:40:09.234] LOG {"bottom": 0, "left": 0, "right": 0, "top": 44}
[Tue Jan 26 2021 11:40:09.394] LOG {"bottom": 0, "left": 0, "right": 0, "top": 0}
[Tue Jan 26 2021 11:40:09.677] LOG {"bottom": 0, "left": 0, "right": 0, "top": 44}
[Tue Jan 26 2021 11:40:09.956] LOG {"bottom": 34, "left": 0, "right": 0, "top": 44}
[Tue Jan 26 2021 11:40:10.364] LOG {"bottom": 34, "left": 0, "right": 0, "top": 44}
```

The 6 emissions of the processing are useless and cause performance issues because every layout of components is re-calculated with each inset values.

## TO-BE

```
[Tue Jan 26 2021 11:40:03.498] LOG openFullScreen
[Tue Jan 26 2021 11:40:03.512] LOG {"bottom": 34, "left": 0, "right": 0, "top": 44}
[Tue Jan 26 2021 11:40:05.827] LOG {"bottom": 21, "left": 44, "right": 44, "top": 0}
```

```
[Tue Jan 26 2021 11:40:08.221] LOG closeFullScreen
[Tue Jan 26 2021 11:40:08.325] LOG {"bottom": 21, "left": 44, "right": 44, "top": 0}
[Tue Jan 26 2021 11:40:10.364] LOG {"bottom": 34, "left": 0, "right": 0, "top": 44}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.