react-native-tip icon indicating copy to clipboard operation
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

Open noway opened this issue 3 years ago • 1 comments

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')}
						/>

...
</>
)
}

noway avatar Aug 05 '21 02:08 noway

Seems like StatusBar.currentHeight is undefined. Hacky fix: App.tsx

StatusBar.currentHeight = StatusBar.currentHeight || 0

noway avatar Aug 05 '21 02:08 noway