Description

I'd like to see extrapolating for both sides, just like in v1.

Motivation

Currently we can only extrapolate left and right at the same time, but if I wanted to clamp left and extend identity for the right value, that wouldn't be possible. I'd have to use a workaround: Use no extrapolation and then use Math.min or Math.max for "clamping".

Code example

A solution for this would be:

const x = interpolate(scrollX, [0, HEADER_HEIGHT, contentSize.x], [0, 0, contentSize.x + HEADER_HEIGHT], { extrapolateLeft: 'clamp', extrapolateRight: 'identity' })

To make it backwards compatible (and also cleaner if you don't need different extrapolations) the interpolate function could take both types:

type ExtrapolateParameter = Extrapolate | { extrapolateLeft?: Extrapolate, extrapolateRight?: Extrapolate } | undefined 

Description

I'm interpolating on the ScrollView's scrollY SharedValue to move my absolute positioned header around, and it has a noticeable delay (lag) when the user scrolls.

Screenshots

Here is a video demo (can't upload here because file too large)

Steps To Reproduce

1. Create useAnimatedScrollHandler
2. Bind scrollY to event.contentOffset.y
3. Interpolate absolute positioned header's (above ScrollView) translateY to the negative scrollY value
4. Notice that the header doesn't move synchronized with the ScrollView, but rather lags behind

Expected behavior

I expect the header to move synchronously with the scroll view so it looks like one piece

Actual behavior

The header lags behind and looks like it has weight

Snack or minimal code example

const scrollY = useSharedValue(0);
const onScroll = useAnimatedScrollHandler({
	onScroll: (event) => {
		scrollY.value = event.contentOffset.y;
	},
});
// ...
const headerY = useDerivedValue(() => {
	return interpolate(scrollY.value, [0, HEADER_IMAGE_HEIGHT + 30], [0, -(HEADER_IMAGE_HEIGHT + 30)], Extrapolate.CLAMP);
});
const headerStyle = useAnimatedStyle(() => ({ transform: [{ translateY: headerY.value }] }));
// ...


return (
	<Reanimated.ScrollView
		scrollEventThrottle={1}
		onScroll={onScroll}
		...>
		{/* ... */}
	</Reanimated.ScrollView>

	<Reanimated.View style={[styles.imagesContainer, headerStyle]}>
		{/* children like image goes here */}
	</Reanimated.View>
	);
// ...
const styles = StyleSheet.create({
	imagesContainer: {
		position: 'absolute',
		top: 0,
		left: 0,
		height: HEADER_IMAGE_HEIGHT,
		width: SCREEN_WIDTH,
	}
});

Package versions

• React: 16.13.2
• React Native: 0.63.2
• React Native Reanimated: 2.0.0-alpha.6

Too bad reanimated doesn't publish snapshot versions to npm. I'm going to wait for alpha 7 in the meantime, thanks. 😄

@terrysahaidak My bad, didn't scroll through the closed issues 🤦

Description

I'm interpolating on the ScrollView's scrollY SharedValue to move my absolute positioned header around, and it has a noticeable delay (lag) when the user scrolls.

Screenshots

Here is a video demo (can't upload here because file too large)

Steps To Reproduce

1. Create useAnimatedScrollHandler
2. Bind scrollY to event.contentOffset.y
3. Interpolate absolute positioned header's (above ScrollView) translateY to the negative scrollY value
4. Notice that the header doesn't move synchronized with the ScrollView, but rather lags behind

Expected behavior

I expect the header to move synchronously with the scroll view so it looks like one piece

Actual behavior

The header lags behind and looks like it has weight

Snack or minimal code example

const scrollY = useSharedValue(0);
const onScroll = useAnimatedScrollHandler({
	onScroll: (event) => {
		scrollY.value = event.contentOffset.y;
	},
});
// ...
const headerStyle = useAnimatedStyle(() => ({ transform: [{ translateY: headerY.value }] }));
// ...


return (
	<Reanimated.ScrollView
		scrollEventThrottle={1}
		onScroll={onScroll}
		...>
		<!-- ... -->
	</Reanimated.ScrollView>

	<Reanimated.View style={[styles.imagesContainer, headerStyle]}>
		<!-- children like image goes here -->
	</Reanimated.View>
	);
// ...
const styles = StyleSheet.create({
	imagesContainer: {
		position: 'absolute',
		top: 0,
		left: 0,
		height: HEADER_IMAGE_HEIGHT,
		width: SCREEN_WIDTH,
	}
});

Package versions

• React: 16.13.2
• React Native: 0.63.2
• React Native Reanimated: 2.0.0-alpha.6

Description

The useAnimatedStyle hook only works when using purely animated values, so no additional static styles.

E.g.:

Doesn't work

const headerStyle = useAnimatedStyle(() => [styles.header, { transform: [{ translateY: headerY.value }] }]);
// ...
return <Reanimated.View style={headerStyle} ... />

Works

const headerStyle = useAnimatedStyle(() => ({ transform: [{ translateY: headerY.value }] }));
// ...
return <Reanimated.View style={[styles.header, headerStyle]} ... />

With "doesn't work" I mean that the transforms aren't applied at all. The styles.header values are correctly applied, but translateY just always stays 0. (Even though the function is executed multiple times, checked with console.log!)

Package versions

• React: 16.13.1
• React Native: 0.63.2
• React Native Reanimated: 2.0.0-alpha.6

Sorry for hijacking this thread for this, but @wcandillon do you not have helper functions such as snapPoint and diffClamp anymore? I've upgraded to reanimated v2 and have to rethink all of my animations... 😅

To also make Swift native modules work, the React-Core pod needs to export "DEFINES_MODULE" => "YES" in it's Pod config (see: https://github.com/mrousavy/react-native-blurhash/issues/58#issuecomment-695127168)

I've reverted the breaking change and published 1.0.26. That should work for now, if anyone experiences build errors similar to https://github.com/facebook/react-native/issues/29633 please let me know thanks 👍

Hi! Thanks for the patch @dburdan, hopefully this will land in RN soon.

As for the problem, I found out that when using Xcode 12 the build failed (see: https://github.com/facebook/react-native/issues/29633#issuecomment-694187116)

I've changed the dependencies, but that fix only worked for Objective-C and since rn-blurhash is a Swift module I probably have to revert https://github.com/mrousavy/react-native-blurhash/commit/76930054363dd185814aae90aa1a5932aef9c297 and https://github.com/mrousavy/react-native-blurhash/commit/adc1cf0c6f702c6d8c3099433678ae4f8fc7523d for now - at least until an official fix/support comes from the React-Core pod.

@terrysahaidak actually that doesn't make a difference, since I'm not clamping it anyways. I've noticed that I used interpolate here to flip the value, so now I'm using:

const y = Math.min(-scrollY.value, 0);

Okay I found out why that wasn't working. I cannot return the array including the styles.header static styles in my useAnimatedStyles hook. I had to only return the transform, and then merge the style together in my component.

So, this:

const headerStyle = useAnimatedStyle(() => {
	const y = Math.min(interpolate(scrollY.value, [0, 1], [1, 0]), 0);
	Logger.debug(`Header should be at ${y}`);
	return { ...styles.header, transform: [{ translateY: y }] };
});

return ( /* ... */
	<Reanimated.View style={headerStyle}>
		/ * ... */
	</Reanimated.View>
	);

becomes this:

const headerStyle = useAnimatedStyle(() => {
	const y = Math.min(interpolate(scrollY.value, [0, 1], [1, 0]), 0);
	Logger.debug(`Header should be at ${y}`);
	return { transform: [{ translateY: y }] };
});

return ( /* ... */
	<Reanimated.View style={[styles.header, headerStyle]}>
		/ * ... */
	</Reanimated.View>
	);

Is that intended behaviour? cc @kmagiera @jakub-gonet

Okay so apparently my Shared Value doesn't get applied to it's style.

Without useAnimatedStyle

const headerStyle = { ...styles.header, transform: [{ translateY: -140 }] };

return ( /* ... */
	<Reanimated.View style={headerStyle}>
		/ * ... */
	</Reanimated.View>
	);

As you can see, it correctly translates the Y coord to -140.

With useAnimatedStyle

const headerStyle = useAnimatedStyle(() => {
	const y = Math.min(interpolate(scrollY.value, [0, 1], [1, 0]), 0);
	Logger.debug(`Header should be at ${y}`);
	return { ...styles.header, transform: [{ translateY: y }] };
});

return ( /* ... */
	<Reanimated.View style={headerStyle}>
		/ * ... */
	</Reanimated.View>
	);

Now when it's not scrolled it should be at 0, which it is:

But when I scroll, nothing changes:

I scrolled the ScrollView which maps my scrollY shared value upwards, and in the console I can read Header should be at ... (... = some negative values, -86, etc...) but those changes aren't displayed in my view.

@terrysahaidak Makes sense, thanks for your explanation. Now I gotta debug why my value changes won't reflect UI changes... 🧐

@terrysahaidak Are you talking about the FlatList's scroll component prop?

@terrysahaidak I see, thanks. That also means that any assignment to shared values (.value =) with animations (withTiming, withSpring) will run on the UI thread, no matter where they are dispatched from?

@terrysahaidak Yes. Also the onScroll event does get fired, it's just the begin/end events that don't

Description

The events onBeginDrag, onEndDrag, onMomentumBegin, and onMomentumEnd don't fire for my FlatList (created with Reanimated.createAnimatedComponent(FlatList)). Only onScroll works.

Screenshots

Steps To Reproduce

1. Create animated FlatList using Reanimated.createAnimatedComponent(FlatList)
2. Create handler using useAnimatedScrollHandler:

const onScroll = useAnimatedScrollHandler<{ beginY?: number; endY?: number }>({
	onScroll: (event, context) => {
		Logger.debug(`[SCROLL] SCROLL! ${event.contentOffset.y}`);
		scrollY.value = event.contentOffset.y;
	},
	onBeginDrag: (event) => {
		Logger.debug(`[SCROLL] BEGIN DRAG! ${event.contentOffset.y}`);
	},
	onEndDrag: (event) => {
		Logger.debug(`[SCROLL] END DRAG! ${event.contentOffset.y}`);
	},
	onMomentumBegin: (event) => {
		Logger.debug(`[SCROLL] BEGIN MOMENTUM! ${event.contentOffset.y}`);
	},
	onMomentumEnd: (event) => {
		Logger.debug(`[SCROLL] END MOMENTUM! ${event.contentOffset.y}`);
	},
});

3. Add to FlatList: <ReanimatedFlatList onScroll={onScroll} ... />
4. See only SCROLL! in console, no begin/end events

Expected behavior

I expect the begin and end events to fire

Actual behavior

They don't fire

Snack or minimal code example

const onScroll = useAnimatedScrollHandler<{ beginY?: number; endY?: number }>({
	onScroll: (event, context) => {
		Logger.debug(`[SCROLL] SCROLL! ${event.contentOffset.y}`);
		scrollY.value = event.contentOffset.y;
	},
	onBeginDrag: (event) => {
		Logger.debug(`[SCROLL] BEGIN DRAG! ${event.contentOffset.y}`);
	},
	onEndDrag: (event) => {
		Logger.debug(`[SCROLL] END DRAG! ${event.contentOffset.y}`);
	},
	onMomentumBegin: (event) => {
		Logger.debug(`[SCROLL] BEGIN MOMENTUM! ${event.contentOffset.y}`);
	},
	onMomentumEnd: (event) => {
		Logger.debug(`[SCROLL] END MOMENTUM! ${event.contentOffset.y}`);
	},
});

And

return <ReanimatedFlatList onScroll={onScroll} ... />

Package versions

• React: 16.13.1
• React Native: 0.63.2
• React Native Reanimated: 2.0.0-alpha.6

Description

Hi! I haven't found a clear answer to this in the docs, but currently I'm imperatively animating an opacity of my component whenever a button is pressed. That means, I've ended up with the following code:

const onPostPress = useCallback(() => {
	onPress(post);
	isTextHidden.current = true;
	textContainerOpacity.value = withTiming(0, { duration: 300 });
}, [animateTextContainer, onPress, post]);

Now I've thought, does withTiming run the animation on the UI JS thread or did I just run an animation on my React JS Thread? Then I came up with the following code:

const animateTextContainer = useCallback(
	(hidden: boolean) => {
		'worklet';
		textContainerOpacity.value = withTiming(hidden ? 0 : 1, { duration: 300 });
	},
	[textContainerOpacity],
);
const onPostPress = useCallback(() => {
	onPress(post);
	isTextHidden.current = true;
	runOnUI(animateTextContainer)(true);
}, [animateTextContainer, onPress, post]);

But I've heard runOnUI shouldn't be used often and will likely be removed in future versions. What's the correct way to animate opacity on button press (JS event)?

Package versions

• React: 16.13.1
• React Native: 0.63.2
• React Native Reanimated: 2.0.0-alpha.6

thanks! 🎉

Awesome, nice solution!

• [x] I've read and understood the CONTRIBUTING guidelines and have done my best effort to follow.

Report

What did you do?

I've followed the suggested solution in https://github.com/facebook/react-native/issues/29633 and changed my module's Podspec to depend on React-Core instead of React since React is just an umbrella pod.

What did you expect to happen?

I expected it to work normally and be future proof once the React umbrella pod gets removed

What happened instead?

I get the error:

[!] The following Swift pods cannot yet be integrated as static libraries:

The Swift pod `react-native-blurhash` depends upon `React-Core`, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set `use_modular_headers!` globally in your Podfile, or specify `:modular_headers => true` for particular dependencies.

Workaround

After changing the Podspec, I've read that you need to enable modular headers for Swift projects to work statically linked. I've tried:

1. Setting d.pod_target_xcconfig = { "DEFINES_MODULE" => "YES" } in my podspec -> That didn't change anything
2. Setting use_modular_headers! in my app's Podfile -> That gave me this build error for glog: https://github.com/facebook/react-native/issues/26217

CocoaPods Environment

Stack

   CocoaPods : 1.9.3
        Ruby : ruby 2.6.3p62 (2019-04-16 revision 67580) [universal.x86_64-darwin19]
    RubyGems : 3.0.3
        Host : Mac OS X 10.15.6 (19G2021)
       Xcode : 12.0 (12A7209)
         Git : git version 2.24.3 (Apple Git-128)
Ruby lib dir : /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib
Repositories : master - git - https://github.com/CocoaPods/Specs.git @ a7f1ce526bfbf3d34cdec4f462e03c06cda2201e

               trunk - CDN - https://cdn.cocoapods.org/

Installation Source

Executable Path: /usr/local/bin/pod

Plugins

cocoapods-deintegrate : 1.0.4
cocoapods-plugins     : 1.0.0
cocoapods-search      : 1.0.0
cocoapods-stats       : 1.1.0
cocoapods-trunk       : 1.4.1
cocoapods-try         : 1.1.0

Podfile

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '11.0'

target 'Springsale' do
  config = use_native_modules!

  use_react_native!(:path => config["reactNativePath"])

  # React Native Admob Native Ads
  pod 'Google-Mobile-Ads-SDK'

  target 'SpringsaleTests' do
    inherit! :complete
    # Pods for testing
  end

  use_native_modules!

  # Enables Flipper.
  # Note that if you have use_frameworks! enabled, Flipper will not work and you should disable these next few lines.
  use_flipper!
  post_install do |installer|
    flipper_post_install(installer)
  end
end

Project that demonstrates the issue

This native module: https://github.com/mrousavy/react-native-blurhash installed in a react native 0.63.2 app and using Xcode 12.

Sounds like a good enough solution! I would also suggest to keep all FastImage related logic in dedicated animators so we don't end up with animators with if-else statements that handle two different views.

A polymorphic approach would probably be the best solution, similar to my proposed approach in https://github.com/wix/react-native-navigation/pull/6591. This opens up the possibility to extend the API at any point in the future (e.g. when a new image component gets released that supports looking into the 4th dimension's v̶̧͇̯̹͍̥̦̺̐̽̈́͐̈̏̀͊̓̈́̉̔͛͘͜͠o̶̬̞̜̹̥̯̗͗͌̀͗̂̔̃̃͒̓̈́̚̚̚͜͠í̴̖͇̲͔d̵̻͂͋͝)

Would this also mean the parent's scale/transforms get applied? (e.g. FastImage position like in https://github.com/wix/react-native-navigation/issues/6596#issuecomment-694099788)

Description

I'm getting TypeError: Object.values requires that input parameter not be null or undefined when using a useAnimatedStyle hook

Screenshots

Steps To Reproduce

1. Create useAnimatedStyle hook
2. Receive error

Expected behavior

I expect the animated style to work

Actual behavior

It throws an error

Snack or minimal code example

(working on a repro)

Package versions

• React: 16.13.1
• React Native: 0.63.2
• React Native Reanimated: 2.0.0-alpha.6

My bad! I've just double checked my babel config and noticed I only added reanimated plugin in production environment:

My babel config:

module.exports = {
	presets: ['module:metro-react-native-babel-preset'],
	env: {
		production: {
			plugins: ['transform-remove-console', 'react-native-reanimated/plugin'],
		},
	},
};

Fixed it by adding it in the default plugins list. Thanks!

So to summarize:

• Using React-Core instead of React as a dependency in the podspec requires modular headers to be true (for Swift native modules at least)
• Modular Headers cannot be set in the podspec (at least I couldn't manage to with using pod_target_xcconfig = { "DEFINES_MODULE" => "YES" }) but have to be set globally in your app's Podfile using use_modular_headers!
• By enabling use modular headers I am getting this build error: https://github.com/facebook/react-native/issues/26217

So right now this breaks my project. Anyone has an idea on how to fix this?

It's definitely the longer route, as the maintainer rarely maintains the project. It's a solution for the long run, I'll maybe create a PR over there later which natively supports the borderRadius prop.

• Glide borderRadius: https://bumptech.github.io/glide/doc/transformations.html#required-methods
• SDWebImage borderRadius: https://github.com/SDWebImage/SDWebImage/issues/2484#issuecomment-421237546

I agree with @guyca for the SET goal, but I'd also say it would be better for the fast-image library to not render the image under a parent View (it does that to support borderRadius by applying it to the View layer and disabling overflow, which is a dirty hack and should be solved by allowing native borderRadius support for FastImage (SDWebImage and Glide), just like the RCTImage does.)

@alloy Yes, I did update the package after making the change. Haven't tested if it also works if I manually add the pod using :modular_headers => true yet..

@alloy I have tried that, cleaned and rebuilt but I got the same error. It works when I add use_modular_headers! in my app's Podfile, but that somehow seems like it has side effects..

That's my workaround to get the type for now:

	type ThenArg<T> = T extends PromiseLike<infer U> ? U : T;
	export type AppleAuthRequestResponse = ThenArg<ReturnType<typeof appleAuth.performRequest>>;

🧙

Need to use them for my function parameters.

Also, @mikehardy I think the firebase app package version hasn't been updated:

[!] NPM package '@react-native-firebase/messaging' depends on '@react-native-firebase/app' v8.4.2 but found v8.4.3, this might cause build issues or runtime crashes.

[!] NPM package '@react-native-firebase/ml-vision' depends on '@react-native-firebase/app' v8.4.2 but found v8.4.3, this might cause build issues or runtime crashes.

[!] NPM package '@react-native-firebase/perf' depends on '@react-native-firebase/app' v8.4.2 but found v8.4.3, this might cause build issues or runtime crashes.

[!] NPM package '@react-native-firebase/storage' depends on '@react-native-firebase/app' v8.4.2 but found v8.4.3, this might cause build issues or runtime crashes.

[!] NPM package '@react-native-firebase/messaging' depends on '@react-native-firebase/app' v8.4.2 but found v8.4.3, this might cause build issues or runtime crashes.

[!] NPM package '@react-native-firebase/ml-vision' depends on '@react-native-firebase/app' v8.4.2 but found v8.4.3, this might cause build issues or runtime crashes.

[!] NPM package '@react-native-firebase/perf' depends on '@react-native-firebase/app' v8.4.2 but found v8.4.3, this might cause build issues or runtime crashes.

[!] NPM package '@react-native-firebase/storage' depends on '@react-native-firebase/app' v8.4.2 but found v8.4.3, this might cause build issues or runtime crashes.

[!] NPM package '@react-native-firebase/ml-vision' depends on '@react-native-firebase/app' v8.4.2 but found v8.4.3, this might cause build issues or runtime crashes.

[!] NPM package '@react-native-firebase/messaging' depends on '@react-native-firebase/app' v8.4.2 but found v8.4.3, this might cause build issues or runtime crashes.

[!] NPM package '@react-native-firebase/perf' depends on '@react-native-firebase/app' v8.4.2 but found v8.4.3, this might cause build issues or runtime crashes.

[!] NPM package '@react-native-firebase/storage' depends on '@react-native-firebase/app' v8.4.2 but found v8.4.3, this might cause build issues or runtime crashes.

I've used React-Core instead of React in my react-native-blurhash library and can't build it anymore!

[!] The following Swift pods cannot yet be integrated as static libraries:

The Swift pod `react-native-blurhash` depends upon `React-Core`, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set `use_modular_headers!` globally in your Podfile, or specify `:modular_headers => true` for particular dependencies.

Anyone knows why? Should I just follow the suggested workaround and add use_modular_headers!?

Ready to merge

Description

I'm getting TypeError: Object.values requires that input parameter not be null or undefined when using a useAnimatedStyle hook

Screenshots

Steps To Reproduce

1. Create useAnimatedStyle hook
2. Receive error

Expected behavior

I expect the animated style to work

Actual behavior

It throws an error

Snack or minimal code example

(working on a repro)

Package versions

• React: 16.13.1
• React Native: 0.63.2
• React Native Reanimated: 2.0.0-alpha.6

Please fill in this template.

• [x] Use a meaningful title for the pull request. Include the name of the package modified.

• [x] Test the change in your own code. (Compile and run.)

• [x] Add or edit tests to reflect the change. (Run with npm test YOUR_PACKAGE_NAME.)

• [x] Follow the advice from the readme.

• [x] Avoid common mistakes.

• [x] Run npm run lint package-name (or tsc if no tslint.json is present).

• [x] Provide a URL to documentation or source code which provides context for the suggested changes: https://github.com/oblador/react-native-vector-icons/blob/master/lib/create-icon-set.js#L110-L138

• [ ] If this PR brings the type definitions up to date with a new version of the JS library, update the version number in the header.

• [x] Include tests for your changes

• [ ] If you are making substantial changes, consider adding a tslint.json containing { "extends": "dtslint/dt.json" }. If for reason the any rule need to be disabled, disable it for that line using // tslint:disable-next-line [ruleName] and not for whole package so that the need for disabling can be reviewed.

See: https://github.com/oblador/react-native-vector-icons/pull/1138 and https://github.com/oblador/react-native-vector-icons/pull/1233#issuecomment-690642327

@mikehardy I couldn't reproduce the issue all the time, after a lot of cleaning and rebuilding I once had the error that a firebase package couldn't be built (that's why I've created the PR over there)

Description

On Xcode 12 some wild build errors occur when trying to build a React Native app. This is because the 'React' pod is only an umbrella pod. See: https://github.com/facebook/react-native/issues/29633

Related issues

See: https://github.com/facebook/react-native/issues/29633

Release Summary

• Uses 'React-Core' instead of 'React' pod in podspecs

Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
  • [x] Yes
• My change supports the following platforms;
  • [ ] Android
  • [x] iOS
• My change includes tests;
  • [ ] e2e tests added or updated in packages/\*\*/e2e
  • [ ] jest tests added or updated in packages/\*\*/__tests__
• [ ] I have updated TypeScript types that are affected by my change.
• This is a breaking change;
  • [x] Yes for React < 0.60 (because of autolinking)
  • [ ] No

From now on native modules should only depend on React-Core instead of React. See: https://github.com/facebook/react-native/issues/29633

Also; I will add functions such as elastic, back and bounce once we got #6591.

Source code for those: Easing.js from reanimated

Issue Description

Fabric and TurboModules are both new architectural changes to react-native that will be landing at some point in 2019, currently, there is code for both in the master repo. I have been experimenting with both and there is a number of architectural changes that will need to happen to this library in order to support them. I am opening this issue to gauge interest, and see if the maintainers are open to API changes in order to support these endeavors. Some of the most obvious changes are:

• Will need to expose the delegates used by CxxBridge in order to install TMs (maybe temp measure) but definitely needed to expose the lookup delegates, this is quite similar to how extraModules works today.

• Will need to move from RCTRootView. Fabric uses RCTSurface's for most things, there is a view proxy for RCTRootView in Fabric that works quite nicely. I am currently experimenting with this on a private branch of RNN.

Closed with https://github.com/wix/react-native-navigation/pull/6399 and https://github.com/wix/react-native-navigation/pull/5086

@guyca Sounds good to me. So native side should only accept object notation from now on, right?

Progress

• [x] iOS (RNNSpring)
• [x] Android (custom TimeInterpolator: SpringInterpolator.kt)
• [x] JS API
• [ ] Customizable parameters (mass, damping, stiffness)

Description

I've added the damped harmonic oscillator ("spring") function again, this time it has the same behaviour on Android and iOS.

Compared to the Overshoot interpolator, the Spring function is more customizeable and can bounce forward & backwards more than just once.

Currently the properties (mass, damping, stiffness) are static, (3, 500, 1000 respectively), so we should probably wait for https://github.com/wix/react-native-navigation/pull/6591 until this lands in master. Could someone lend me a hand over there? @guyca @yogevbd ...

Sources

Also, note that this function is not exactly the same as the one on Wikipedia. I've used this medium article as a source for my function (specifically this grapher file (download)).

I will compare this to the function on Wikipedia and see if there are any differences.

React Native

React Native (RCTAnimated) also has a spring function, which can be found in Libraries/NativeAnimation/Drivers/RCTSpringAnimation.m. I've tried using that, but couldn't figure out a way to make this work without copying their source code. I had the crazy idea to use their API instead of our custom one, so instead of using interpolation: 'spring', we could use interpolation: Easing.elastic(1) or interpolation: Easing.ease.

Stiffness and Damping

Also note that the stiffness is static, but can be calculated using:

CGFloat stiffness = mass * pow((2 * M_PI) / (T0), 2);

Same for damping:

CGFloat damping = 2 * (1 - springiness) * sqrt(stiffness * mass);

Small fix for the playground only (bug introduced in https://github.com/wix/react-native-navigation/commit/1d8e3b784ecedc7153fb0b0d900e42ab4a8b8f16)

Can confirm that on the current master branch this does not appear to be a problem anymore. However if you were to set resizeMode to 'repeat' then the app hard-crashes. That doesn't seem to be a valid use case though.

Issue Description

The Shared Element transition doesn't work with Images, as it first stretches the Image and then snaps it in place.

Steps to Reproduce / Code Snippets / Screenshots

1. Create 2 Screens
2. Set nativeID on both images, make sure they have the same resizeMode:

First:

<Image
	style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: HEADER_IMAGE_HEIGHT }}
	source={{ uri: post.images[0] }}
	resizeMode="cover"
	nativeID={'someId.to'}
/>

Second:

<Image
	nativeID={'someId.from'}
	resizeMode="cover"
	source={imageSource}
	style={{ width: '100%', height: '100%', borderRadius: 20 }}
/>

3. Navigate:

Navigation.push(props.componentId, {
	component: {
		name: 'PostDetailsScreen',
		options: {
			topBar: {
				visible: false,
			},
			animations: {
				push: {
					sharedElementTransitions: [
						{
							fromId: `someId.from`,
							toId: `someId.to`,
							interpolation: 'accelerateDecelerate',
							duration: 350,
						},
					],
				},
...

Environment

• React Native Navigation version: ^6.9.1
• React Native version: 0.63.0
• Platform(s) (iOS, Android, or both?): iOS (Android not tested)
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator and device, iOS 13.5.1, Debug

Closed because duplicate of https://github.com/wix/react-native-navigation/issues/6505

Does https://github.com/wix/react-native-navigation/commit/d50e4bf62990c12318f369e077eb8414cc3e52d4 solve this issue?

Sorry for commenting on a closed issue, but the warning you're getting is because there is a third getTurboModule function with 2 extra parameters: nativeInvoker and perfLogger. I've simply implemented the method and ignored those two parameters, so it returns the same as the other getTurboModule function:

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
                                                     jsInvoker:(std::shared_ptr<facebook::react::CallInvoker>)jsInvoker
{
 return facebook::react::REATurboModuleProvider(name, jsInvoker);
}

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
                                                      instance:(id<RCTTurboModule>)instance
                                                     jsInvoker:(std::shared_ptr<facebook::react::CallInvoker>)jsInvoker
{
 return facebook::react::REATurboModuleProvider(name, instance, jsInvoker);
}

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
                                                       instance:(id<RCTTurboModule>)instance
                                                      jsInvoker:(std::shared_ptr<facebook::react::CallInvoker>)jsInvoker
                                                  nativeInvoker:(std::shared_ptr<facebook::react::CallInvoker>)nativeInvoker
                                                     perfLogger:(id<RCTTurboModulePerformanceLogger>)perfLogger
{
  return [self getTurboModule:name instance:instance jsInvoker:jsInvoker];
}

Sorry for commenting on a closed issue, but I'm still experiencing this problem and nothing seems to help. I've tried changing my IPHONEOS_DEPLOYMENT_TARGET to 9.0, 10.0, 11.0 and 13.5, nothing works. I've tried @hengkx 's fix, didn't work. I've tried leaving only inherited in there, and removing it entirely, still didn't work. Can anyone help me out here?

Hi! I've come up with a potential solution:

That's how you animate a tabBar:

Before the push command (here) add the following:

    CGRect frame = self.tabBarController.tabBar.frame;
    CGFloat height = frame.size.height;
    CGFloat offsetY = [newTop hidesBottomBarWhenPushed] ? -height : height;

    CGFloat duration = (animated)? 0.3 : 0.0;

    [UIView animateWithDuration:duration animations:^{
        self.tabBarController.tabBar.frame = CGRectOffset(frame, 0, offsetY);
    }];

This will run the animation when the new viewcontroller's hidesBottomBarWhenPushed resolves to true. I've disabled that for every view controller to avoid the default animation, not sure if that's required or not. Anyway, this is obviously only a placeholder, so the real animation API parsing (from the JS StackAnimationOptions.bottomTabs object) should happen here and run the animation in parallel with the screen pushing. Same for popping.

One problem with this: As you can see, my TabBar has a button that overflows the top, that's why the code sample above doesn't really work for me, since then the tip of the purple button is still visible. I've multiplied the height times 1.1 as a dirty hack, so a solution for that would also be required... (Especially when we implement #6522)

Also note that the parent's transforms aren't applied. E.g.: When the parent view scales down to 90% of it's size, the Shared Element Transition should begin at that smaller size instead of jumping back to the origin. @yogevbd fixed that, but apparently I can still reproduce it with FastImages:

Issue Description

Currently the library (mostly the animations, like Shared Element Transitions) assumes that all images are presented in a RCTImageView (see this line). Unfortunately the default react Image component doesn't quite provide the features I need, therefore I switched to the FastImage component from react-native-fast-image.

While animations work somewhat as expected (even resizeMode transitions correctly, so it looks pretty smooth), I noticed that the borderRadius (cornerRadius) animation doesn't work.

RCTImageView

FFFastImageView

Solution

I've tried to also return ViewTypeImage for Fast Images, like in this diff, but that didn't magically affect cornerRadius :(

FastImage "natively supports borderRadius", but I couldn't figure out how to apply a cornerRadius to a FFFastImageView (which btw is only a SDWebImage on iOS)

Environment

• React Native Navigation version: 7.0.0-snapshot.1216
• React Native version: 0.63.2
• Platform(s) (iOS, Android, or both?): iOS, assuming it doesn't magically work on android either

Hi!

I couldn't find any documentation on how to add macOS support to an existing native module, so I'm sorry for asking this here.

I'm trying to add macOS support for my library react-native-blurhash, but I can't seem to figure out how to create the .xcodeproj file.

It always complains that the native module cannot be found:

TL;DR: I have no idea how to create my macos/Blurhash.xcodeproj to add the native module to my example app. My current source code is on this branch, and contains a wacky macos/Blurhash.xcodeproj which doesn't link correctly (as you can see).

Also, here's my output of pod install in the example/macos folder:

macos 🔥 pod install
Auto-linking React Native module for target `example-iOS`: react-native-blurhash
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native-macos/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `RCT-Folly` from `../node_modules/react-native-macos/third-party-podspecs/RCT-Folly.podspec`
Fetching podspec for `boost-for-react-native` from `../node_modules/react-native-macos/third-party-podspecs/boost-for-react-native.podspec`
Fetching podspec for `glog` from `../node_modules/react-native-macos/third-party-podspecs/glog.podspec`
Downloading dependencies
Installing CocoaAsyncSocket (7.6.4)
Installing CocoaLibEvent (1.0.0)
Installing DoubleConversion (1.1.6)
Installing FBLazyVector (0.62.2)
Installing FBReactNativeSpec (0.62.2)
Installing Flipper (0.33.1)
Installing Flipper-DoubleConversion (1.1.7)
Installing Flipper-Folly (2.2.0)
Installing Flipper-Glog (0.3.6)
Installing Flipper-PeerTalk (0.0.4)
Installing Flipper-RSocket (1.1.0)
Installing FlipperKit (0.33.1)
Installing OpenSSL-Universal (1.0.2.19)
Installing RCT-Folly (2018.10.22.00)
Installing RCTRequired (0.62.2)
Installing RCTTypeSafety (0.62.2)
Installing React (0.62.2)
Installing React-Core (0.62.2)
Installing React-CoreModules (0.62.2)
Installing React-RCTActionSheet (0.62.2)
Installing React-RCTAnimation (0.62.2)
Installing React-RCTBlob (0.62.2)
Installing React-RCTImage (0.62.2)
Installing React-RCTLinking (0.62.2)
Installing React-RCTNetwork (0.62.2)
Installing React-RCTSettings (0.62.2)
Installing React-RCTText (0.62.2)
Installing React-RCTVibration (0.62.2)
Installing React-cxxreact (0.62.2)
Installing React-jsi (0.62.2)
Installing React-jsiexecutor (0.62.2)
Installing React-jsinspector (0.62.2)
Installing ReactCommon (0.62.2)
Installing Yoga (1.14.0)
Installing YogaKit (1.18.1)
Installing boost-for-react-native (1.63.0)
Installing glog (0.3.5)
Installing react-native-blurhash (1.0.23)
Generating Pods project
Integrating client project
Pod installation complete! There are 49 dependencies from the Podfile and 38 total pods installed.

At the top it says Auto-linking React Native module for target 'example-iOS': react-native-blurhash, I suppose that's the problem here?

Add support to configure interpolation modes.

Instead of:

Navigation.push(this, {
  component: {
    name: Screens.CocktailDetailsScreen,
    options: {
      animations: {
        push: {
          sharedElementTransitions: [
            {
              fromId: `image${item.id}`,
              toId: `image${item.id}Dest`,
              duration: LONG_DURATION,
              interpolation: 'linear',
            },
          ],
        },
      },
    },
  },
});

You now use:

Navigation.push(this, {
  component: {
    name: Screens.CocktailDetailsScreen,
    options: {
      animations: {
        push: {
          sharedElementTransitions: [
            {
              fromId: `image${item.id}`,
              toId: `image${item.id}Dest`,
              duration: LONG_DURATION,
              interpolation: { mode: 'linear' },
            },
          ],
        },
      },
    },
  },
});

The benefit here is, that the 'overshoot' interpolation mode (and possible some future ones too) accept parameters. In the case of the overshoot mode, a tension property is accepted.

So now to customize the tension, I can use:

Navigation.push(this, {
  component: {
    name: Screens.CocktailDetailsScreen,
    options: {
      animations: {
        push: {
          sharedElementTransitions: [
            {
              fromId: `image${item.id}`,
              toId: `image${item.id}Dest`,
              duration: LONG_DURATION,
              interpolation: { mode: 'overshoot', tension: 5 },
            },
          ],
        },
      },
    },
  },
});

The types are defined as:

type Interpolation =
  | { mode: 'linear' }
  | { mode: 'accelerateDecelerate' }
  | { mode: 'decelerate' }
  | { mode: 'accelerate' }
  | { mode: 'decelerateAccelerate' }
  | { mode: 'overshoot'; tension: number };

Bumps eslint from 7.8.1 to 7.9.0. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/eslint/eslint/releases">eslint's releases</a>.</em></p> <blockquote> <h2>v7.9.0</h2> <ul> <li><a href="https://github.com/eslint/eslint/commit/3ca27004ece5016ba7aed775f01ad13bc9282296"><code>3ca2700</code></a> Fix: Corrected notice for invalid (:) plugin names (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13473">#13473</a>) (Josh Goldberg)</li> <li><a href="https://github.com/eslint/eslint/commit/fc5783d2ff9e3b0d7a1f9664928d49270b4a6c01"><code>fc5783d</code></a> Docs: Fix leaky anchors in v4 migration page (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13635">#13635</a>) (Timo Tijhof)</li> <li><a href="https://github.com/eslint/eslint/commit/f1d07f112be96c64dfdaa154aa9ac81985b16238"><code>f1d07f1</code></a> Docs: Provide install commands for Yarn (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13661">#13661</a>) (Nikita Baksalyar)</li> <li><a href="https://github.com/eslint/eslint/commit/29d1cdceedd6c056a39149723cf9ff2fbb260cbf"><code>29d1cdc</code></a> Fix: prefer-destructuring removes comments (refs <a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13678">#13678</a>) (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13682">#13682</a>) (Milos Djermanovic)</li> <li><a href="https://github.com/eslint/eslint/commit/b4da0a7ca7995435bdfc116fd374eb0649470131"><code>b4da0a7</code></a> Docs: fix typo in working with plugins docs (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13683">#13683</a>) (啸生)</li> <li><a href="https://github.com/eslint/eslint/commit/6f87db7c318225e48ccbbf0bec8b3758ea839b82"><code>6f87db7</code></a> Update: fix id-length false negatives on Object.prototype property names (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13670">#13670</a>) (Milos Djermanovic)</li> <li><a href="https://github.com/eslint/eslint/commit/361ac4d895c15086fb4351d4dca1405b2fdc4bd5"><code>361ac4d</code></a> Fix: NonOctalDecimalIntegerLiteral is decimal integer (fixes <a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13588">#13588</a>) (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13664">#13664</a>) (Milos Djermanovic)</li> <li><a href="https://github.com/eslint/eslint/commit/f260716695064e4b4193337107b60401bd4b3f20"><code>f260716</code></a> Docs: update outdated link (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13677">#13677</a>) (klkhan)</li> <li><a href="https://github.com/eslint/eslint/commit/5138c913c256e4266ffb68278783af45bf70af84"><code>5138c91</code></a> Docs: add missing eslint directive comments in no-await-in-loop (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13673">#13673</a>) (Milos Djermanovic)</li> <li><a href="https://github.com/eslint/eslint/commit/17b58b528df62bf96813d50c087cafdf83306810"><code>17b58b5</code></a> Docs: clarify correct example in no-return-await (fixes <a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13656">#13656</a>) (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13657">#13657</a>) (Milos Djermanovic)</li> <li><a href="https://github.com/eslint/eslint/commit/9171f0a99bb4d7c53f109b1c2b215004a7c27713"><code>9171f0a</code></a> Chore: fix typo (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13660">#13660</a>) (Nitin Kumar)</li> <li><a href="https://github.com/eslint/eslint/commit/6d9f8fbb7ed4361b475fb50d04e6d25744d5b1a2"><code>6d9f8fb</code></a> Sponsors: Sync README with website (ESLint Jenkins)</li> <li><a href="https://github.com/eslint/eslint/commit/97b0dd9a1af1ae4ae3857adcfe6eeac7837101ed"><code>97b0dd9</code></a> Sponsors: Sync README with website (ESLint Jenkins)</li> <li><a href="https://github.com/eslint/eslint/commit/deab125fc9220dab43baeb32c6cf78942ad25a83"><code>deab125</code></a> Sponsors: Sync README with website (ESLint Jenkins)</li> <li><a href="https://github.com/eslint/eslint/commit/bf2e367bf4f6fde9930af9de8b8d8bc3d8b5782f"><code>bf2e367</code></a> Sponsors: Sync README with website (ESLint Jenkins)</li> <li><a href="https://github.com/eslint/eslint/commit/89292084bf91ba5ae5bf966c6c56fa3da139ce57"><code>8929208</code></a> Sponsors: Sync README with website (ESLint Jenkins)</li> </ul> </blockquote> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/eslint/eslint/blob/master/CHANGELOG.md">eslint's changelog</a>.</em></p> <blockquote> <p>v7.9.0 - September 12, 2020</p> <ul> <li><a href="https://github.com/eslint/eslint/commit/3ca27004ece5016ba7aed775f01ad13bc9282296"><code>3ca2700</code></a> Fix: Corrected notice for invalid (:) plugin names (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13473">#13473</a>) (Josh Goldberg)</li> <li><a href="https://github.com/eslint/eslint/commit/fc5783d2ff9e3b0d7a1f9664928d49270b4a6c01"><code>fc5783d</code></a> Docs: Fix leaky anchors in v4 migration page (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13635">#13635</a>) (Timo Tijhof)</li> <li><a href="https://github.com/eslint/eslint/commit/f1d07f112be96c64dfdaa154aa9ac81985b16238"><code>f1d07f1</code></a> Docs: Provide install commands for Yarn (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13661">#13661</a>) (Nikita Baksalyar)</li> <li><a href="https://github.com/eslint/eslint/commit/29d1cdceedd6c056a39149723cf9ff2fbb260cbf"><code>29d1cdc</code></a> Fix: prefer-destructuring removes comments (refs <a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13678">#13678</a>) (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13682">#13682</a>) (Milos Djermanovic)</li> <li><a href="https://github.com/eslint/eslint/commit/b4da0a7ca7995435bdfc116fd374eb0649470131"><code>b4da0a7</code></a> Docs: fix typo in working with plugins docs (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13683">#13683</a>) (啸生)</li> <li><a href="https://github.com/eslint/eslint/commit/6f87db7c318225e48ccbbf0bec8b3758ea839b82"><code>6f87db7</code></a> Update: fix id-length false negatives on Object.prototype property names (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13670">#13670</a>) (Milos Djermanovic)</li> <li><a href="https://github.com/eslint/eslint/commit/361ac4d895c15086fb4351d4dca1405b2fdc4bd5"><code>361ac4d</code></a> Fix: NonOctalDecimalIntegerLiteral is decimal integer (fixes <a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13588">#13588</a>) (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13664">#13664</a>) (Milos Djermanovic)</li> <li><a href="https://github.com/eslint/eslint/commit/f260716695064e4b4193337107b60401bd4b3f20"><code>f260716</code></a> Docs: update outdated link (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13677">#13677</a>) (klkhan)</li> <li><a href="https://github.com/eslint/eslint/commit/5138c913c256e4266ffb68278783af45bf70af84"><code>5138c91</code></a> Docs: add missing eslint directive comments in no-await-in-loop (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13673">#13673</a>) (Milos Djermanovic)</li> <li><a href="https://github.com/eslint/eslint/commit/17b58b528df62bf96813d50c087cafdf83306810"><code>17b58b5</code></a> Docs: clarify correct example in no-return-await (fixes <a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13656">#13656</a>) (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13657">#13657</a>) (Milos Djermanovic)</li> <li><a href="https://github.com/eslint/eslint/commit/9171f0a99bb4d7c53f109b1c2b215004a7c27713"><code>9171f0a</code></a> Chore: fix typo (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13660">#13660</a>) (Nitin Kumar)</li> <li><a href="https://github.com/eslint/eslint/commit/6d9f8fbb7ed4361b475fb50d04e6d25744d5b1a2"><code>6d9f8fb</code></a> Sponsors: Sync README with website (ESLint Jenkins)</li> <li><a href="https://github.com/eslint/eslint/commit/97b0dd9a1af1ae4ae3857adcfe6eeac7837101ed"><code>97b0dd9</code></a> Sponsors: Sync README with website (ESLint Jenkins)</li> <li><a href="https://github.com/eslint/eslint/commit/deab125fc9220dab43baeb32c6cf78942ad25a83"><code>deab125</code></a> Sponsors: Sync README with website (ESLint Jenkins)</li> <li><a href="https://github.com/eslint/eslint/commit/bf2e367bf4f6fde9930af9de8b8d8bc3d8b5782f"><code>bf2e367</code></a> Sponsors: Sync README with website (ESLint Jenkins)</li> <li><a href="https://github.com/eslint/eslint/commit/89292084bf91ba5ae5bf966c6c56fa3da139ce57"><code>8929208</code></a> Sponsors: Sync README with website (ESLint Jenkins)</li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/eslint/eslint/commit/022257a71b7579cf88cf3b8b936a696e8d2a09ed"><code>022257a</code></a> 7.9.0</li> <li><a href="https://github.com/eslint/eslint/commit/1f0a4ac09560c2dc93551210f3907cb9f833b868"><code>1f0a4ac</code></a> Build: changelog update for 7.9.0</li> <li><a href="https://github.com/eslint/eslint/commit/3ca27004ece5016ba7aed775f01ad13bc9282296"><code>3ca2700</code></a> Fix: Corrected notice for invalid (:) plugin names (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13473">#13473</a>)</li> <li><a href="https://github.com/eslint/eslint/commit/fc5783d2ff9e3b0d7a1f9664928d49270b4a6c01"><code>fc5783d</code></a> Docs: Fix leaky anchors in v4 migration page (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13635">#13635</a>)</li> <li><a href="https://github.com/eslint/eslint/commit/f1d07f112be96c64dfdaa154aa9ac81985b16238"><code>f1d07f1</code></a> Docs: Provide install commands for Yarn (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13661">#13661</a>)</li> <li><a href="https://github.com/eslint/eslint/commit/29d1cdceedd6c056a39149723cf9ff2fbb260cbf"><code>29d1cdc</code></a> Fix: prefer-destructuring removes comments (refs <a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13678">#13678</a>) (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13682">#13682</a>)</li> <li><a href="https://github.com/eslint/eslint/commit/b4da0a7ca7995435bdfc116fd374eb0649470131"><code>b4da0a7</code></a> Docs: fix typo in working with plugins docs (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13683">#13683</a>)</li> <li><a href="https://github.com/eslint/eslint/commit/6f87db7c318225e48ccbbf0bec8b3758ea839b82"><code>6f87db7</code></a> Update: fix id-length false negatives on Object.prototype property names (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13">#13</a>...</li> <li><a href="https://github.com/eslint/eslint/commit/361ac4d895c15086fb4351d4dca1405b2fdc4bd5"><code>361ac4d</code></a> Fix: NonOctalDecimalIntegerLiteral is decimal integer (fixes <a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13588">#13588</a>) (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13664">#13664</a>)</li> <li><a href="https://github.com/eslint/eslint/commit/f260716695064e4b4193337107b60401bd4b3f20"><code>f260716</code></a> Docs: update outdated link (<a href="https://github-redirect.dependabot.com/eslint/eslint/issues/13677">#13677</a>)</li> <li>Additional commits viewable in <a href="https://github.com/eslint/eslint/compare/v7.8.1...v7.9.0">compare view</a></li> </ul> </details> <br />

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

Additionally, you can set the following in the .dependabot/config.yml file in this repo:

• Update frequency
• Out-of-range updates (receive only lockfile updates, if desired)
• Security updates (receive only security updates, if desired)

</details>

Bumps @types/react-native from 0.63.13 to 0.63.18. <details> <summary>Commits</summary> <ul> <li>See full diff in <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react-native">compare view</a></li> </ul> </details> <br />

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

Additionally, you can set the following in the .dependabot/config.yml file in this repo:

• Update frequency
• Out-of-range updates (receive only lockfile updates, if desired)
• Security updates (receive only security updates, if desired)

</details>

Have we considered supporting the search bar on Android as well? See: https://developer.android.com/guide/topics/search/search-dialog

Is there a reason to leave experimentalImportSupport disabled? I thought those two features were related?

• Hermes with Proxy support (will now support react-native-firebase)

What exactly does that mean?