Comments (11)
lol viewSafeAreaInsetsDidChange
is never called so indeed it solves the problem, but insets aren't sent anymore.
this solves the problem
if (safeAreaInsets.top < 1.0 || safeAreaInsets.bottom < 1.0 || ( _initialInsetsSent &&
UIEdgeInsetsEqualToEdgeInsetsWithThreshold(safeAreaInsets, _currentSafeAreaInsets, 1.0 / RCTScreenScale()) &&
CGRectEqualToRect(frame, _currentFrame))) {
return;
}
Maybe this should be improved
// This gets called before the view size is set by react-native so
// make sure to wait so we don't set wrong insets to JS.
if (CGSizeEqualToSize(self.frame.size, CGSizeZero)) {
return;
}
from react-native-safe-area-context.
Does it happen with just this library - or is it only with react navigation?
from react-native-safe-area-context.
@jacobp100
I've tried and happens just with react-native-safe-area-context
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
export default function App() {
return (
<SafeAreaProvider>
<Kid />
</SafeAreaProvider>
);
}
function Kid() {
const insets = useSafeAreaInsets();
console.log({ insets });
return null;
}
// Opening the app on iPad in portrait mode
[2] LOG {"insets": {"bottom": 20, "left": 0, "right": 0, "top": 74}}
// Changing orientation to landscape (switches to 0 and back to 20)
[2] LOG {"insets": {"bottom": 0, "left": 0, "right": 0, "top": 74}}
[2] LOG {"insets": {"bottom": 20, "left": 0, "right": 0, "top": 74}}
// End orientation change
// Changing orientation back to portrait
[2] LOG {"insets": {"bottom": 0, "left": 0, "right": 0, "top": 74}}
[2] LOG {"insets": {"bottom": 0, "left": 0, "right": 0, "top": 0}}
[2] LOG {"insets": {"bottom": 0, "left": 0, "right": 0, "top": 74}}
[2] LOG {"insets": {"bottom": 20, "left": 0, "right": 0, "top": 74}}
// End orientation change
As all iOS apps with a blurred header put <ScrollView contentContainerStyle={{paddingTop: insets.top}}
and all apps having a blurred bottom tab navigation have <ScrollView contentContainerStyle={{paddingBottom: insets.bottom}}
This causes the ScrollView to lag a lot when changing orientation
from react-native-safe-area-context.
For the lag, try setting contentInset
and scrollIndicatorInsets
rather than padding - you'll be able to skip a layout update. You could also put a SafeAreaView
with the insets inside the scrollview, as that component can shortcut a few processes, so can do the updates faster than your JS implementation can.
I'm not too sure why you get those insets - but presumably, iOS is giving them. If you're comfortable with Xcode, it would useful to know if those are coming from UIKit, and how far apart they are. I know react native can coalesce some events that are really close (like scroll events) - it's opt-in, but it might be a good workaround
from react-native-safe-area-context.
I've replaced
- (void)safeAreaInsetsDidChange
{
[self invalidateSafeAreaInsets];
}
by
- (void) viewSafeAreaInsetsDidChange
{
[self invalidateSafeAreaInsets];
}
in RNCSafeAeraProvider.mm
and that does the trick of not switching to 0 during orientation change.
I've also debugged the app more, and it turns out I have a useEffect
, depending on a useCallback
, depending on useBottomTabBarOffset
(react-navigation-bottom-tabs) depending on useSafeAreaInsets
// useBottomTabBarOffset in RN-bottom-tabs
const getPaddingBottom = (insets: EdgeInsets) =>
Math.max(insets.bottom - Platform.select({ ios: 4, default: 0 }), 0);
from react-native-safe-area-context.
You want to look in RNCSafeAreaProvider
- that receives the insets from iOS, and passes them down to all the safe area views - see this issue for more info #92
I think the check proposed isn't safe, because the insets can be zero in some circumstances. It would be useful to get information about the timing between the two events. Are they almost instantly after each other?
from react-native-safe-area-context.
@jacobp100 code I was referring to is indeed in RNCSafeAreaProvider
.
Yes, the events are coming instantly one after another during orientation transition
from react-native-safe-area-context.
- (void) viewSafeAreaInsetsDidChange
Is that called? That's a UIViewContoller method - and this is a UIView
from react-native-safe-area-context.
lol viewSafeAreaInsetsDidChange is never called so indeed it solves the problem, but insets aren't sent anymore.
UIViewContoller
indeed
from react-native-safe-area-context.
@jacobp100 What would be a good way to batch onInsetsChange
?
from react-native-safe-area-context.
Look in the main source:-
from react-native-safe-area-context.
Related Issues (20)
- SafeAreaView default style does not render HOT 1
- Doesn't work in the newest react-native version HOT 3
- The application is in small window mode and cannot obtain height. The device is a Xiaomi pad
- Broken on RN 0.74.1 and new arch (both with bridgeless and normal) HOT 7
- [!] The platform of the target `AwesomeMacOS-macOS` (macOS 10.15) is not compatible with `react-native-safe-area-context (4.10.4)`, which does not support `macOS`. HOT 1
- Top padding safeAreaView inside Stack presentation modal HOT 1
- When UIDocumentPickerViewController is displayed and hidden, useSafeAreaFrame returns an incorrect result HOT 7
- SafeAreaUtils should include `systemBars()` or `captionBar()` inset type in android HOT 4
- Conflicting recommendations in documentation HOT 5
- Build failed: Kotlin complaining type mismatch in SafeAreaContextModule.kt HOT 6
- No safe area value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app. HOT 1
- New Architecture issue: Trying to call native module before CatalystInstance has been set HOT 4
- Android insets 错误
- * What went wrong: Execution failed for task ':react-native-safe-area-context:compileDebugKotlin'. > A failure occurred while executing org.jetbrains.kotlin.compilerRunner.GradleCompilerRunnerWithWorkers$GradleKotlinCompilerWorkAction > HOT 8
- [iOS] SafeAreaView has incorrect dimensions in screen when deep linked
- Unresolved reference: getType HOT 2
- Error: Unsupported top level event type "topInsetsChange" dispatched HOT 3
- Getting android opacity (alpha) applied to random elements on react native 0.73.8
- [TS]: Error for withSafeAreaInsets due to @types/react forwardRef update HOT 4
- ERROR Invariant Violation: requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager. HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-safe-area-context.