Can't find variable SafeArea periodically
pribeh opened this issue · 4 comments
Thanks for this superb lib. I think I might have something setup wrong or perhaps there's a bug but I'm receiving a "can't find ... variable" error periodically when loading the app in development mode.
Below is how I'm integrating safearea in my components/screens. Let me know if there's something wrong with it.
import { SafeArea } from 'react-native-safe-area';
class SomethingScreen extends React.Component {
async getSafeAreaInsets() {
const safeAreaInsets = await SafeArea.getSafeAreaInsetsForRootView()
topSafeArea = Platform.OS === 'ios' ? safeAreaInsets.top : 0
bottomSafeArea = Platform.OS === 'ios' ? safeAreaInsets.bottom + 13 : 0
}
}
I believe I had this incorrectly defined in a screen that was being called periodically.
It's happening again with the above code. Additional notes, I'm running RN 0.57 and Mobx 5.9.0.
Any help would be much appreciated. It appears as if some sort of race condition is impacting whether we can get a defined value. This is also impacting dynamic layouts such as when using libraries such as recyclerlistview that needs to know heights when rendering or re-rendering. In some of those instances we're getting varied values of undefined values consistently sometimes and others periodically.
@pribeh I'm not sure about Mobx because I don't use it.
If you want to apply safe area insets' changes to your view automatically, please try withSafeArea.
Another option, you can handle safeAreaInsetsForRootViewDidChange
event manually like this:
export class YourView extends React.Component<Props, State> {
onSafeAreaInsetsDidChange = this.onSafeAreaInsetsDidChange.bind(this)
componentWillMount(): void {
SafeArea.getSafeAreaInsetsForRootView()
.then(result => this.onSafeAreaInsetsDidChange(result))
}
componentDidMount(): void {
SafeArea.addEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsDidChange)
}
componentWillUnmount(): void {
SafeArea.removeEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsDidChange)
}
onSafeAreaInsetsDidChange(result: { safeAreaInsets: SafeAreaInsets }): void {
// Update state here
}
}