react-native-tip
react-native-tip copied to clipboard
Invariant Violation: [2963,"RCTView",11,{"position":"absolute","width":102,"height":44,"top":"<<NaN>>","left":75,"transform":[{"translateX":-51},{"translateY":-22}],"justifyContent":"center","alignItems":"center"}] is not usable as a native method argument
Experiencing this error:
Invariant Violation: [2963,"RCTView",11,{"position":"absolute","width":102,"height":44,"top":"<<NaN>>","left":75,"transform":[{"translateX":-51},{"translateY":-22}],"justifyContent":"center","alignItems":"center"}] is not usable as a native method argument
This error is located at:
in RCTView (at TipProvider.js:416)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at Modal.js:250)
in RCTView (at Modal.js:271)
in RCTModalHostView (at Modal.js:258)
in Modal (at TipProvider.js:439)
in TipProvider (created by App)
in RCTSafeAreaView (at SafeAreaView.js:55)
in SafeAreaView (created by App)
in App (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)
fn
NativeModules.js:137:10
Component.prototype.setState
react.development.js:325:31
showTip
TipProvider.js:41:8
tryCatch
runtime.js:63:44
invoke
runtime.js:293:30
tryCatch
runtime.js:63:44
invoke
runtime.js:154:28
PromiseImpl.resolve.then$argument_0
runtime.js:164:19
tryCallOne
core.js:37:14
setImmediate$argument_0
core.js:123:25
react-native info:
yarn run react-native info *[ch8764/native-new-design]
yarn run v1.22.10
$ /Users/ilia/myapp/myapp/node_modules/.bin/react-native info
warn Your project is using deprecated "rnpm" config that will stop working from next release. Please use a "react-native.config.js" file to configure the React Native CLI. Migration guide: https://github.com/react-native-community/cli/blob/master/docs/configuration.md
warn The following packages use deprecated "rnpm" config that will stop working from next release:
- react-native-comparison-slider: https://npmjs.com/package/react-native-comparison-slider
- react-native-orientation: https://github.com/yamill/react-native-orientation#readme
- react-native-video: https://npmjs.com/package/react-native-video
- react-native-zip-archive: https://github.com/mockingbot/react-native-zip-archive
Please notify their maintainers about it. You can find more details at https://github.com/react-native-community/cli/blob/master/docs/configuration.md#migration-guide.
info Fetching system and libraries information...
System:
OS: macOS 11.3.1
CPU: (8) arm64 Apple M1
Memory: 269.39 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.5.0 - /var/folders/85/2xpmzxms1tsgzr9nqnhszzfw0000gn/T/yarn--1628129877401-0.3539187398275403/node
Yarn: 1.22.10 - /var/folders/85/2xpmzxms1tsgzr9nqnhszzfw0000gn/T/yarn--1628129877401-0.3539187398275403/yarn
npm: 7.19.1 - /opt/homebrew/bin/npm
Watchman: 2021.06.07.00 - /opt/homebrew/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
Android SDK:
API Levels: 23, 25, 27, 28, 29, 30
Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3
System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.7199119
Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5
✨ Done in 10.97s.
setup: App.tsx:
render(): JSX.Element {
return (
<SafeAreaView style={{flex:1}}>
<Provider store={store}>
<Main />
</Provider>
<TipProvider
/>
</SafeAreaView>
)
}
component:
render() {
return (
<>
<Tip
id="heart"
title="Title"
body="body"
>
<Text
style={{
padding: 10,
fontWeight: 'bold',
fontSize: 20
}}
>
Show tip
</Text>
</Tip>
...
<Button
title="Show heart tip"
onPress={() => showTip('heart')}
/>
...
</>
)
}
Seems like StatusBar.currentHeight is undefined. Hacky fix: App.tsx
StatusBar.currentHeight = StatusBar.currentHeight || 0