Skip to content

Instantly share code, notes, and snippets.

View lunaleaps's full-sized avatar

Luna lunaleaps

  • Meta
  • Bay Area
  • 08:07 (UTC -07:00)
View GitHub Profile
@lunaleaps
lunaleaps / ManyTiles.js
Created February 29, 2024 22:35
Rendering tiles without transition
import * as React from 'react';
import {SafeAreaView, Text, View, ActivityIndicator} from 'react-native';
import Slider from '@react-native-community/slider';
function SliderHeader({
value,
onValueChange,
}: {
value: number;
@lunaleaps
lunaleaps / ManyTiles.js
Last active February 29, 2024 22:39
Rendering many tiles without startTransition
import * as React from 'react';
import {SafeAreaView, Text, View, ActivityIndicator} from 'react-native';
import Slider from '@react-native-community/slider';
function SliderHeader({
value,
onValueChange,
}: {
value: number;
@lunaleaps
lunaleaps / async-layout.js
Created February 23, 2024 07:25
Async Tooltip Rendering Example
import * as React from 'react';
import {Pressable, Text, View} from 'react-native';
function calculateX(toolTip, target, rootView) {
// Try and center the tooltip
let toolTipX = target.x + target.width / 2 - toolTip.width / 2;
// If the tooltip is outside of root, we need to move it
if (toolTipX < rootView.x) {
toolTipX = target.x;
@lunaleaps
lunaleaps / tooltip-useLayoutEffect.js
Created February 23, 2024 07:18
Synchronous measurement and layout updates
import * as React from 'react';
import {Pressable, Text, View} from 'react-native';
function calculateX(toolTip, target, rootView) {
// Try and center the tooltip
let toolTipX = target.x + target.width / 2 - toolTip.width / 2;
// If the tooltip is outside of root, we need to move it
if (toolTipX < rootView.x) {
toolTipX = target.x;
@lunaleaps
lunaleaps / many-tiles.js
Last active February 29, 2024 22:38
Automatic Batching Example
import * as React from 'react';
import {SafeAreaView, ScrollView, Text, View} from 'react-native';
// Slider is a native component
import Slider from '@react-native-community/slider';
export default function ManyTiles(props) {
const colors = ['red', 'green', 'blue', 'orange'];
const views = [];
const [value, setValue] = React.useState(1);
06-21 15:51:05.620 14983 15036 W unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.view.ReactViewManager
06-21 15:51:05.621 14983 15036 W unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.text.ReactVirtualTextViewManager
06-21 15:51:05.621 14983 15036 W unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.text.ReactVirtualTextShadowNode
06-21 15:51:05.622 14983 15036 W unknown:ViewManagerPropertyUpdater: Could not find generated setter for class com.facebook.react.views.unimplementedview.ReactUnimplementedViewManager
06-21 15:51:05.622 14983 14988 I zygote64: Do partial code cache collection, code=30KB, data=21KB
06-21 15:51:05.622 14983 14988 I zygote64: After code cache collection, code=30KB, data=21KB
06-21 15:51:05.622 14983 14988 I zygote64: Increasing code cache capacity to 128KB
06-21 15:51:05.622 14983 15036 W unknown:ReactContext: initializeMessag
❯ yarn test-e2e-local -t RNTester -p iOS --hermes true
yarn run v1.22.19
$ node ./scripts/test-e2e-local.js -t RNTester -p iOS --hermes true
We're going to test the Hermes version of RNTester iOS with the new Architecture enabled
bundler: failed to load command: pod (/Users/luwe/.rbenv/versions/2.7.4/bin/pod)
/Users/luwe/.rbenv/versions/2.7.4/lib/ruby/gems/2.7.0/gems/bundler-2.4.12/lib/bundler/resolver.rb:290:in `raise_not_found!': Could not find gem 'cocoapods (= 1.11.3)' in locally installed gems. (Bundler::GemNotFound)
The source contains the following gems matching 'cocoapods':
* cocoapods-1.12.1
from /Users/luwe/.rbenv/versions/2.7.4/lib/ruby/gems/2.7.0/gems/bundler-2.4.12/lib/bundler/resolver.rb:343:in `block in prepare_dependencies'
@lunaleaps
lunaleaps / gist:21f9b72f4a1e617a8fb04a27c00e527b
Created April 6, 2023 18:20
npx react-native run-android
~/BigIntTest via  v16.19.0 via 💎 v2.7.4
❯ npx react-native run-android
warn Multiple Podfiles were found: ios/Podfile,vendor/bundle/ruby/2.7.0/gems/cocoapods-core-1.12.0/lib/cocoapods-core/Podfile. Choosing ios/Podfile automatically. If you would like to select a different one, you can configure it via "project.ios.sourceDir". You can learn more about it here: https://github.com/react-native-community/cli/blob/master/docs/configuration.md
info Starting JS server...
info Installing the app...
5 actionable tasks: 1 executed, 4 up-to-date
FAILURE: Build failed with an exception.
* Where:
Error in react-native-sensor-manager
Error: Errors in typescript@5.0 for external dependencies:
../react-native/index.d.ts(193,9): error TS2451: Cannot redeclare block-scoped variable 'originalXMLHttpRequest'.
../react-native/index.d.ts(195,9): error TS2451: Cannot redeclare block-scoped variable '__BUNDLE_START_TIME__'.
../react-native/index.d.ts(196,9): error TS2451: Cannot redeclare block-scoped variable 'ErrorUtils'.
../react-native/index.d.ts(203,9): error TS2451: Cannot redeclare block-scoped variable '__DEV__'.
../react-native/index.d.ts(205,9): error TS2451: Cannot redeclare block-scoped variable 'HermesInternal'.
../react-native/modules/Codegen.d.ts(1,1): error TS6200: Definitions of the following identifiers conflict with those in another file: codegenNativeCommands, NativeComponentType, codegenNativeComponent, BubblingEventHandler, DirectEventHandler, Double, Float, Int32, UnsafeObject, DefaultTypes, WithDefault
@lunaleaps
lunaleaps / diff-react-native
Created September 14, 2021 01:03
diff -r RN66RC2/node_modules/react-native NPM662/node_modules/react-native > node_modules_recursive_react_native
Only in RN66RC2/node_modules/react-native/ReactAndroid/src/main/jni/first-party/fbjni: .gitignore
Only in NPM662/node_modules/react-native/ReactAndroid/src/main/jni/first-party/fbjni: .npmignore
Only in RN66RC2/node_modules/react-native/ReactCommon/hermes/inspector/tools/msggen: .gitignore
Only in NPM662/node_modules/react-native/ReactCommon/hermes/inspector/tools/msggen: .npmignore
Only in NPM662/node_modules/react-native/node_modules/.bin: which
Only in NPM662/node_modules/react-native/node_modules: @react-native-community
Only in NPM662/node_modules/react-native/node_modules: ansi-regex
Only in NPM662/node_modules/react-native/node_modules: ansi-styles
Only in NPM662/node_modules/react-native/node_modules: chalk
Only in NPM662/node_modules/react-native/node_modules: color-convert