text:
Drawer animation is slow in ios

Drawer animation is very slow in ios devices.
System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
    Memory: 687.41 MB / 8.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.12.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    Android SDK:
      API Levels: 23, 25, 26, 27, 28
      Build Tools: 23.0.1, 23.0.3, 25.0.2, 25.0.3, 26.0.1, 26.0.3, 27.0.3, 28.0.2, 28.0.3
      System Images: android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5692245
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6
    react-native: 0.60.5 => 0.60.5
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-git-upgrade: 0.2.7

I can confirm this is not true on such low end phone as 6s and kinda heavy application. In fact it has gotten even better with reanimated migration and running even more smoothly.

Sorry... It was my mistake. I enabled slow animation in emulator.
On Tue, Sep 17, 2019, 11:51 AM Soner Köksal notifications@github.com
wrote:

I can confirm this is not true on such low end phone as 6s and kinda heavy
application. In fact it has gotten even better with reanimated migration
and running even more smoothly.
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/react-navigation/drawer/issues/104?email_source=notifications&email_token=ABT5Y5K5POU6J6I4F2KTAI3QKBZOVA5CNFSM4IW35ZJ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD63N2EI#issuecomment-532077841,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABT5Y5OKLV5744QNZNAFUQLQKBZOVANCNFSM4IW35ZJQ
.

repo: react-navigation/drawer


text:
Not working correctly on iPhone 12 Series phones

Current Behavior
SafeAreaView is not working correctly on iPhone 12 Series phones
I created simple app to reproduce it
import React from 'react';
import { Text, View } from 'react-native';
import SafeAreaView from 'react-native-safe-area-view'

const App = () => (
  <SafeAreaView style={{ flex: 1, backgroundColor: 'red' }}>
    <View style={{ flex: 1, backgroundColor: 'yellow' }}>
      <Text>Home Screen</Text>
    </View>
  </SafeAreaView>
)

export default App

but I realized that it's even not working with example from README:

I even tried to add forceInset bottom: 'always' but without any change
  <SafeAreaView
    style={{ flex: 1, backgroundColor: 'red' }}
    forceInset={{
      bottom: 'always'
    }}
  >

and with forceInset vertical: 'always' it changes it a little bit but still not correct

My Environment

software
version

iOS

react-native-safe-area-context
^3.1.8

react-native-safe-area-view
^0.14.9

react-native
0.63.3

node
v13.8.0

yarn
1.22.0

I checked newest react-native-safe-area-view 2.0.0 version and it's working fine so I'm closing the issue

2.0.0 does not seem to be properly released on npm?

also having this problem

Why don't I have 0.14.9 versions?
~/tomorrow/asgard(feat-rush*) » npm i --registery=https://registry.npm.taobao.org react-native-safe-area-view@0.14.9           tianmingxu@MacBook-Pro-5
npm ERR! code ETARGET
npm ERR! notarget No matching version found for react-native-safe-area-view@0.14.9
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/tianmingxu/.npm/_logs/2020-10-29T09_32_58_322Z-debug.log
------------------------------------------------------------
~/tomorrow/asgard(feat-rush*) » npm i --registery=https://registry.npm.taobao.org react-native-safe-area-view                  tianmingxu@MacBook-Pro-5
npm WARN @xhs/asgard@3.40.0-1 requires a peer of @xhs/rex-style@^3.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN @xhs/asgard@3.40.0-1 requires a peer of @xhs/protobuf-apm-tracker@^2.6.0 but none is installed. You must install peer dependencies yourself.
npm WARN @react-native-community/cli@1.6.0-fork9 requires a peer of react-native@^0.59.0 but none is installed. You must install peer dependencies yourself.
npm WARN @xhs/react-native-sentry@0.42.1 requires a peer of react-native@>=0.56.0 but none is installed. You must install peer dependencies yourself.
npm WARN babel-jest@21.2.0 requires a peer of babel-core@^6.0.0 || ^7.0.0-alpha || ^7.0.0-beta || ^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-navigation-transitions@1.0.12 requires a peer of react-navigation@* but none is installed. You must install peer dependencies yourself.
npm WARN react-test-renderer@16.13.1 requires a peer of react@^16.13.1 but none is installed. You must install peer dependencies yourself.
npm WARN @xhs/asgard@3.40.0-1 No license field.

+ react-native-safe-area-view@0.13.3
updated 1 package in 6.366s

Also having the same problem here. on iPhone 12 series.

I'm still facing issues with the header...

I'm still facing some issues with the header...
I've updated the package react-native-safe-area-view and added into the package.json as
"resolutions": {
"react-native-safe-area-view": "^2.0.0"
},
Plz let me know if I'm doing something wrong
Thanks

source: gharchive/issue

authors: Abhishek-Sankey Farhan7786 comvenger-brandon ethanyuwang marcinkornek xutm

license: MIT

license_type: permissive

license_source: github-api


text:
Question: Dragging whilst scrolling

Hey,
Thanks for open sourcing this library!
I have a question probably best explained with an image.

I have a container with height greater than that of the window. It is scrollable.
Within that container elements are elements absolutely positioned at a given distance from the top.

In my case this distance is based upon time. The container represents a 24 hour period and events are positioned at the given time.

When a user drags the yellow item the top position is updated and then on the last update the time is updated + saved.

This works fine whilst the user drags within the window, but as soon as the scroll kicks in the numbers start resetting (I believe because y is relative to the window rather than my container). I was wandering if there was a way to resolve this?
This basic sandbox demonstrates my problem - drag the grey container till the window scrolls and then observe the funkiness.
https://codesandbox.io/s/funny-tereshkova-y1e3w
Thanks in advance!

Hey, I'm not sure I understand what's wrong with your sandbox. There's no reason why the window would scroll (unless you want to address a mobile-specific problem).
Btw y is not relative to the window nor the container, it is relative to the origin of the gesture.

Thanks for the prompt reply.. I think this may be my misunderstanding..
In this gif I was expecting y to include the distance that was scrolled.

Ok what you’re experimenting here is user selection. This shouldn’t happen like this outside of codesandbox preview window but it might be something you’d want to avoid anyway.
Have a look at this sandbox and let me know if it helps.
https://codesandbox.io/s/epic-feistel-z93vm

Ahh Perfect!
That makes sense - Thanks! Adding user-select: none; whilst draggins fixes my problem 👍

@Geeman201 just in case you're using the code in the sandbox I sent, there's actually a cleaner way to toggle classes using native javascript using toggle which accepts a force optional secondary argument:
document.body.classList.toggle('dragged', down)

See the docs here.

repo: react-spring/react-use-gesture


text:
Redirect for reauth should not present login form

Issue Description
Currently, when the storefront recieves a Status 401 from the backend over GraphQL, it will redirect to the /signin route. This will then redirect to the meteor backend to get a new authentication token. The assumption here seems to be, that the Meteor User still is logged in. If the User is logged out on the Backend, this will just present a login form. Skipping the auth redirect won't solve anything, as the page will just stay at its current point and display a Status 500 then.
example-storefront/src/lib/apollo/initApollo.js
The desired behaviour should be: If GraphQL gives a 401, get an actual indication if there is a logged in backend user.  If there is, do the redirect to get a new token. If not, ditch the current token and reload (Although I'd be unhappy with a real reload, maybe Apollo Client could just try to connect a second time )
Steps to Reproduce
Please provide starting context, i.e. logged in as a user, configure a particular payment method.

Log in to the storefront
Wait until the token expires
2.5 Im not sure when actually the backend logout happens
Visit the storefront again, and see that it will redirect to the backend login form.

Possible Solution
I'm unsure if that can be fixed in the backend on the route that also provides the silent reauth, or has to be done in the storefront.
We currently don't separate actual logins from silent reauths in the /loginendpoint on the Backend:
https://github.com/reactioncommerce/reaction/blob/746f5acf8eb2a9e877d7ede93f46a595b8013348/imports/plugins/core/hydra-oauth/server/oauthEndpoints.js#L18
We could instead provide both a /login and /refresh (or /reauth as it isn't really a refresh in oauth terminology) endpoint. While the behaviour for both would be the same when getLoginRequestRes.skip is set, for the other case /login could still redirect to the login form as usual, while /refresh would redirect back to the storefront instead. I The storefront would have dropped the session cookie by then so it won't try the reauth again.
I think it would be even better if the unsuccessful redirect could be completely avoided, as it would happen quite often for logged in users. But the storefront would need to know beforehand if there is an authenticated backend user, and I'm not sure if that could work, as I think the Meteor Client bundle will always need to load once and grab the token from localStorage to which no other page has access. A hidden iframe solution could maybe work, that would only trigger a redirect if silent re-authentication is possible.
Im still need to figure out why exactly this issue occurs where the backend doesn't have valid authentication anymore while the frontend still thinks it is logged in.
Versions
2.1.0

@janus-reith Moved the issue to this repo, thanks.
This is great investigation work. It seems to mostly align with what I was thinking.

Your implementation sounds correct to me, so a PR would be great.
Getting a new refresh token with every refresh is how it always works in oauth as far as I remember. It should be updated and used along with the auth token. That way you will remain logged in (by default) for 30 days from last refresh, rather than 30 days from first login.
If you need to test more quickly, you can set TTL_ACCESS_TOKEN and TTL_REFRESH_TOKEN env on Hydra service to smaller values. I believe these are both set in number of seconds.
Without a page refresh, I think it would get a new access token on the client, but the server would have the old one, which could lead to weirdness on the next user-initiated refresh. Maybe not, but it's something to check.
Make sure whatever you do works correctly when ENABLE_SPA_ROUTING env is set to true and also when set to false. With SPA routing, most route changes are intercepted on the client. Without it, all route changes do a full page refresh.

@aldeed Thanks, will keep on testing and prepare a PR.
Had this in use in a dev environment for the past week and didn‘t encounter any errors yet.
Regarding the refresh token: I think it should only issue a new one when necessary. The (semi-)critical part I see here also is not the issuing of a new refresh token, but the invalidation of the previous one. If I’m logged in with client a and client b and both share the same login, as soon as client a would refresh, the token of client b would be considered invalid and client b would be logged out on the next visit after being redirected to my refresh endpoint.
Client B might have an outdated Access Token, but the refresh token should still be valid to allow for a token refresh.
However, I don’t consider this a blocker and would still favor this over the current implementation, also I think that issue is not related to the changes supposed here, as the token endpoint I call in my implementation seems to be the correct one, for reference: https://www.oauth.com/oauth2-servers/access-tokens/refreshing-access-tokens/
Still something to keep in mind and research.

@janus-reith Is this still on your "make a PR when I get a chance" list?

@aldeed Hi, sorry, yes it is, altough I focused on the storefront reimplementation and fixed it there in one go.
I`m done with most of the stuff there and could quickly do a PR for the token refresh here if this still is relevant,

It would be nice to fix here if it’s not a lot of work.

Will prepare something

Just to give an update, I basically finished this,
but faced a weird error here that I couldn't resolve yet properly:
https://github.com/reactioncommerce/example-storefront/blob/trunk/src/lib/apollo/initApollo.js#L68-L72
I had to remove options.req.logout(), as now the /refresh route will determine wether a refresh was successful, or the user should be logged out to prevent an infinite loop.
The weird thing: If that predecending logout call on req is not present, and I call options.res.writeHead, the app will crash, stating "Cannot set headers after they are sent to the client". This is however expected to only execute if process.browser is false.
This is not related to my implementation, but also is present on the default one when you remove the options.req.logout() part. The expectation would then be, that the app may take an infinite loop of trying to log in, but instead it will crash right away with that error.
I think this is somehow related to the fact that multiple Apollo Queries are executing in parallel, and this leads me to believe that this redirecting in there should never have worked in the first place. I'm really curious why that call on req migitates that error, I don't think it is because the actual logout.
I tried several things to fix this, but without success, the closest I could get was the wrap this in a try-catch block so only the first executes properly, but I don't really consider this a solution.
In my own usecase for the new storefront I dont handle any authenticated queries on SSR Render anymore and therefore didn't have that happening for me before, as only the Router.pushRoute clientside routing is left and I also believe that to be the way to go.
What I'm trying now is to get rid of the redirect alltogether and make this a completely silent refresh implementation, by doing a fetch call to the refresh endpoint inside the onError Link, that endpoint would now return the new acessToken as JSON instead of a redirect, rest is the same, new tokens including refresh token are storen encrypted in the cookie.
But that turned out to be really complex: The default example in the apollo docs doesn't seem to mimic a real usecase, as this only works as a sync call, which wouldn't work for fetching tokens.
What I need to do is to stall the query in there, try a token refresh, then execute it, either with a new token or unauthenicated without one.
I also found a solution for that - But the next issue is that by default, the storefront will have around 3-4 Queries executing in a short time frame, and I don't want each of them to trigger another token refresh plus the added delay of another fetch, in case the previous call doing that didn't finish yet.
So I have to batch all pending Queries, wait for the token refresh, then execute them, and I still have some issues at this point.
I still think it is worth to figure this out, as the new storefront would also benefit from the silent refresh instead of a clientside redirect.
I'm really baffled BTW that I couldn't find any official or complete example on how to handle the refresh properly in Apollo Client.

@janus-reith Seems like you've put a lot of work into this, so thank you for that. Some of your issues bring to mind the same roadblocks we hit in the initial implementation.
I haven't looked at it closely, but there might be some techniques in this package that could help: https://www.npmjs.com/package/apollo-link-token-refresh
The logout call does nothing except clear the auth cookie. I would need to debug a lot more to fully understand how the multiple requests are clashing with each other, but it makes sense that would happen. Attempting to track the expiration time and reauth before the token expires (i.e., not in onError) might be an option, but it might miss some situations.
You might try posting an issue with some of this info in the Apollo Client repo. I'm sure they'd love to have good docs on how to do this with a standard OAuth flow, which they don't currently have. Maybe some minimal changes to the core packages would simplify what you're trying to do. It also seems like a situation where creating a minimal reproduction app would be helpful. An app that just has a single page that looks different depending on user and tries to fulfill all the requirements of the storefront.

@aldeed Thanks, I also noticed that package, and I think it basically does the same thing, which is to queue upcoming queries until the fetch is resolved.
I will compare implementations, because that's where I got stuck and didn't have time left last time. Also I did't want to just plug that in, as I didn't want to introduce another unknown here and instead want to be able to actually keep track of what happens at what point in the chain.

authors: aldeed janus-reith

repo: reactioncommerce/example-storefront


text:
Reactor gRPC examples.

Why use Reactor
Whether gRPC , dubbo, rsocket or webflux, their API design follows the Reactive Streams specification, and they all provide their own implementation.
Reactor is the current standard for Reactive libraries .Use the Reactor library can be better to perform reactive programming.
From the perspective of interface-oriented programming, if Reactive Streams is a design specification, then Reactor is the interface, and grpc, etc. provide specific implementation.
What is Reactor
Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactive Extensions inspired API and efficient event streaming support.
Introducing reactive-grpc
Reactive gRPC is a suite of libraries for using gRPC with Reactive Streams programming libraries. Using a protocol buffers compiler plugin, Reactive gRPC generates alternative gRPC bindings for each reactive technology. The reactive bindings support unary and streaming operations in both directions. Reactive gRPC also builds on top of gRPC's back-pressure support, to deliver end-to-end back-pressure-based flow control in line with Reactive Streams back-pressure model.

Provide PR #6

repo: reactivegroup/grpc-example


text:
ReactCookieProps type definition might be incorrect?

Hi, I've been using this package for a while now and it's been great. Thanks for working on it 👍
Just tried to upgrade to the latest version (from 2.2.0) and seeing a Typescript compilation error.
TS2322: Type '{ children: Element; }' is not assignable to type 'Readonly<ReactCookieProps>'.
  Property 'cookies' is missing in type '{ children: Element; }'

I'm using the <CookiesProvider> in a React component that is rendered on the client and my understanding was that the the cookies prop wasn't required in that context.
If modify types.d.ts and make cookies optional it looks like my code doesn't break. Just wanted to check whether this was a change to the API or an error in the type definition.
Thanks!

My mistake, I'm not used to TypeScript for HOC. This will be fixed in the next version.

Great, thanks 🎉

@apfrancis Can you confirm your issue has been fixed in v3.0.4? Thank you!

@eXon yes that fixes the compilation errors, thanks!

authors: apfrancis eXon

repo: reactivestack/cookies

license: mit

license_source: bigquery


text:
ToProperty does not work on an object that implements IReactiveObject but is not a ReactiveObject

I'm been using ReactiveUI 6.5 for a while with MvvmCross by implementing a ToPropertyMvx helper that works on IMvxNotifyPropertyChanged instead of ReactiveObject.  This worked until I upgraded to 7.0 and implemented the IReactiveObject interface on my base view model class like so:
    public  class ReactiveMvxViewModel : MvxViewModel, IReactiveObject
    {
        public event PropertyChangingEventHandler PropertyChanging;
        void IReactiveObject.RaisePropertyChanging(PropertyChangingEventArgs args)
        {
            PropertyChanging?.Invoke(this, args);
        }
    }

which should just work as MvxViewModel inherits from INotifyPropertyChanged.
Now WhenAnyValue + ToProperty only execute once initially and never again though the view model is firing PropertyChanged notifications.

@kjeremy I'd like to understand the behaviour a bit better before continuing, so here's some questions I have:

what platform are you running this RxUI code on?
does the same behaviour occur with just a plain .Subscribe() instead of .ToProperty()?
if so, with a .Subcribe() attached, do you ever see it complete?

This is on Android and the same thing happens with Subscribe.  I will try to get a sample app up this week.

@shiftkey I've added a minimal reproduction to https://github.com/kjeremy/MvvmCrossRxUI7
The project uses MvvmCross and ReactiveUI.  In the main activity there is an input string and a boolean that tells you whether or not the string is non-empty (true) or empty (false).  The value never goes to false.
Look at FirstViewModel.cs.  If the Hello string is empty the _isValid ObservableAsPropertyHelper never gets updated.

After some more digging around it looks like RaiseAndSetIfChanged works because WhenAnyValue gets triggered in ExtensionState.notifyObservable which is independent from raising the PropertyChanged event.
See: https://github.com/reactiveui/ReactiveUI/blob/b418df64918da0c78a378af1b846afbab0f4e5ae/src/ReactiveUI/IReactiveObject.cs#L276

Relevant: https://github.com/reactiveui/ReactiveUI/pull/875

Hey everyone, I see activity off and on the past couple years here, but I was wondering if there was any change in terms of it being easier/harder to get the two ViewModel paradigms working together?
I was hoping to mix/match the two great libraries together in an identical way as @kjeremy was above (MvxViewModel with IReactiveObject). I'm spinning my wheels to understand how to make that happen though. I'm still green in C# and Xamarin so that might be the hangup but I'd love to get some experience to chime in and let me know if its possible or not.
Thanks!

Give me a couple days and I'll come up with a example.

Hey @glennawatson sorry to be a bother, I've got a little more experience under my belt not but still can't quite get the two model playing well together. Were you able to get an example together that I might be able to reference? No worries if not : )

Though an old issue, I've just run into this as well. My set-up is Xamarin Forms 4.8.0.1687 without any additional frameworks, except for ReactiveUI 12.1.5. That is, the issue is not related to MvvmCross. Rather, I've run into it while implementing a group managed by DynamicData, and specifically with the object-type I'm using to maintain the group:
public class ItemGroup : ObservableCollectionExtended<ItemViewModel>, IReactiveObject
{
	private string groupHeader;

	public event PropertyChangingEventHandler PropertyChanging;

	public string GroupHeader
	{
		get => groupHeader;
		set => this.RaiseAndSetIfChanged(ref groupHeader, value);
	}

	public ItemGroup(IGroup<ItemViewModel, Guid, int> grouping, IScheduler mainThreadScheduler, IScheduler taskpoolScheduler)
	{

		var items =
			grouping
				.Cache
				.Connect()
				.Publish();

		items
			.Count()
			.Select(count => $"Group with {count} items")
			.ObserveOn(mainThreadScheduler)
			.BindTo(this, model => model.GroupHeader);

		items
			.ObserveOn(mainThreadScheduler)
			.Bind(this)
			.DisposeMany()
			.Subscribe();

		items
			.Connect();
	}

	public void RaisePropertyChanged(PropertyChangedEventArgs args)
		=> OnPropertyChanged(args);

	public void RaisePropertyChanging(PropertyChangingEventArgs args)
		=> PropertyChanging?.Invoke(this, args);
}

As you can see, my class implements the IReactiveObject-interface - which made me think I could use either BindTo in combination with RaiseAndSetIfChanged, or simply use an ObservableAsPropertyHelper in combination with ToProperty to set my GroupHeader. The GroupHeader is then bound in a Xamarin Forms ListView's GroupHeaderTemplate. However, though the group header text is recalculates as the group contents change, the changed text is never reflected on screen.
Moving from ToProperty to BindTo or even a Subscribe didn't change this situation. So, after verifying my header text was being recalculated, my first check was to see whether GroupHeader was being properly updated:
	public string GroupHeader
	{
		get => groupHeader;
		set
		{
			this.RaiseAndSetIfChanged(ref groupHeader, value);
			var a = groupHeader == value;
		}
	}

As it turns out, a was always true when I expected it to be. Next I overrid the ObservableCollectionExtended's OnPropertyChanged(PropertyChangedEventArgs e)-method to see if it was ever called for the GroupHeader-property. It wasn't. So I checked whether RaisePropertyChanged was ever called for it, and that wasn't either. So, I changed my property to read
public string GroupHeader
{
	get => groupHeader;
	private set
	{
		if (groupHeader == value)
		{
			return;
		}

		groupHeader = value;
		RaisePropertyChanged(new PropertyChangedEventArgs(nameof(GroupHeader)));
	}
}

This did work (and is the work-around I'm currently using), which explains quite well why I wasn't seeing updates on the screen. However, it did make me think something might be broken inside ReactiveUI for it not to be able to find the IReactiveObject.RaisePropertyChanged-method itself...

A fix for this is incoming next major version.

Cool! Thanks for the quick response, @glennawatson! Will be looking forward to it 👍

Hello, I'm using the latest Reactiveui 13 but the issue is still present. I have the same problem as that stated by @J-Swift above (Trying to mix mvvmcross and IReactiveObject).

A fix for this is incoming next major version.

@glennawatson this issue was never fixed 😥

@ChrisPulman is looking into this one, since we both thought he fixed it.

public class HomeViewModel : BaseViewModel
    {
        private string _hello = "";

        private readonly ObservableAsPropertyHelper<bool> _isValid;

        public HomeViewModel()
        {
            this.WhenAnyValue(x => x.Hello, str => !string.IsNullOrWhiteSpace(str))
                .ToProperty(this, x => x.IsValid, out _isValid);
        }

        public string Hello
        {
            get => _hello;
            set => this.RaiseAndSetIfChanged(ref _hello, value);
        }

        public bool IsValid => _isValid.Value;
    }

public abstract class BaseViewModel : MvxViewModel, IReactiveObject
    {
        private readonly Lazy<Unit> _propertyChangingEventsSubscribed;
        private readonly Lazy<Unit> _propertyChangedEventsSubscribed;

        public BaseViewModel()
        {
            _propertyChangingEventsSubscribed = new Lazy<Unit>(
                                                        () =>
                                                        {
                                                            this.SubscribePropertyChangingEvents();
                                                            return Unit.Default;
                                                        },
                                                        LazyThreadSafetyMode.PublicationOnly);
            _propertyChangedEventsSubscribed = new Lazy<Unit>(
                                                        () =>
                                                        {
                                                            this.SubscribePropertyChangedEvents();
                                                            return Unit.Default;
                                                        },
                                                        LazyThreadSafetyMode.PublicationOnly);
        }

        /// <inheritdoc/>
        public new event PropertyChangingEventHandler PropertyChanging
        {
            add
            {
                _ = _propertyChangingEventsSubscribed.Value;
                PropertyChangingHandler += value;
            }
            remove => PropertyChangingHandler -= value;
        }

        /// <inheritdoc/>
        public new event PropertyChangedEventHandler PropertyChanged
        {
            add
            {
                _ = _propertyChangedEventsSubscribed.Value;
                PropertyChangedHandler += value;
            }
            remove => PropertyChangedHandler -= value;
        }

        private event PropertyChangingEventHandler PropertyChangingHandler;

        private event PropertyChangedEventHandler PropertyChangedHandler;

        /// <inheritdoc/>
        void IReactiveObject.RaisePropertyChanging(PropertyChangingEventArgs args) =>
            PropertyChangingHandler?.Invoke(this, args);

        /// <inheritdoc/>
        void IReactiveObject.RaisePropertyChanged(PropertyChangedEventArgs args) =>
            PropertyChangedHandler?.Invoke(this, args);
    }

[XamlCompilation(XamlCompilationOptions.Compile)]
    [MvxContentPagePresentation(WrapInNavigationPage = true)]
    public partial class HomePage : MvxContentPage<HomeViewModel>, IViewFor<HomeViewModel>
    {
        public HomePage()
        {
            InitializeComponent();
            this.WhenActivated(d =>
            {
                this.Bind(ViewModel, vm => vm.Hello, v => v.RxUITextTest.Text).DisposeWith(d);
                this.OneWayBind(ViewModel, vm => vm.IsValid, v => v.CbxIsValid.IsChecked).DisposeWith(d);
            });

        }

        protected override void OnAppearing()
        {
            base.OnAppearing();

            if (Application.Current.MainPage is NavigationPage navigationPage)
            {
                navigationPage.BarTextColor = Color.White;
                navigationPage.BarBackgroundColor = (Color)Application.Current.Resources["PrimaryColor"];
            }
        }

        object IViewFor.ViewModel
        {
            get => ViewModel;
            set => ViewModel = (HomeViewModel)value;
        }
    }

<?xml version="1.0" encoding="utf-8" ?>
<views:MvxContentPage x:TypeArguments="viewModels:HomeViewModel"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
    xmlns:mvx="clr-namespace:MvvmCross.Forms.Bindings;assembly=MvvmCross.Forms"
    xmlns:local="clr-namespace:MvvmXRxUi.UI.Pages"
    x:Class="MvvmXRxUi.UI.Pages.HomePage"
    xmlns:viewModels="clr-namespace:MvvmXRxUi.Core.ViewModels.Home;assembly=MvvmXRxUi.Core"
                      Title="Main page">
    <ContentPage.Content>
        <StackLayout>
            <CheckBox x:Name="CbxIsValid" />
            <Entry x:Name="RxUITextTest"
                Text="Welcome!!
App scaffolded with MvxScaffolding"
                VerticalOptions="CenterAndExpand"
                WidthRequest="200"
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</views:MvxContentPage>

ViewModel, IReactiveObject implimentaion and View demonstrating that ReactiveUI and MvvmCross work with ToProperty and IReactiveObject, The current release does not support ToPropertyEx with IReactiveObject.
If there is something more that I have missed please post a Repo demonstrating the issue

Probably I'm missing something, this is my sample:
public class PropertyChangedBase : INotifyPropertyChanged, INotifyPropertyChanging, IReactiveObject
{
    #region INotifyPropertyChanged

    public virtual event PropertyChangedEventHandler? PropertyChanged;
    public virtual void RaisePropertyChanged([CallerMemberName] string? propertyName = null) => this.RaisePropertyChanged(new PropertyChangedEventArgs(propertyName));

    #endregion

    #region INotifyPropertyChanging

    public event PropertyChangingEventHandler? PropertyChanging;
    public virtual void RaisePropertyChanging([CallerMemberName] string? propertyName = null) => this.RaisePropertyChanging(new PropertyChangingEventArgs(propertyName));

    #endregion

    #region IReactiveObject

    public void RaisePropertyChanged(PropertyChangedEventArgs args) => PropertyChanged?.Invoke(this, args);
    public void RaisePropertyChanging(PropertyChangingEventArgs args) => PropertyChanging?.Invoke(this, args);

    #endregion
}

public class MainWindowViewModel : PropertyChangedBase
{
    public MainWindowViewModel()
    {
        this._hasMessageOAPH = this._messageBheavior
            .Select(x => !string.IsNullOrWhiteSpace(x))
            .Do(x => Debug.WriteLine($"Has Message changed: {x}"))
            .ObserveOn(RxApp.MainThreadScheduler)
            .ToProperty(this, nameof(this.HasMessage));
    }

    private readonly BehaviorSubject<string?> _messageBheavior = new(null);
    public string? Message
    {
        get { return this._messageBheavior.Value; }
        set { this._messageBheavior.OnNext(value); }
    }

    private readonly ObservableAsPropertyHelper<bool> _hasMessageOAPH;
    public bool HasMessage => this._hasMessageOAPH.Value;
}

public partial class MainWindow : Window
{
    public MainWindow()
    {
        this.DataContext = new MainWindowViewModel();
        this.InitializeComponent();
    }
}

<Window x:Class="WpfApp2.MainWindow"
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
		xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
		d:DataContext="{d:DesignInstance Type=local:MainWindowViewModel, IsDesignTimeCreatable=False}"
		xmlns:local="clr-namespace:WpfApp2"
		mc:Ignorable="d"
		Title="MainWindow" Height="Auto" Width="300">
	<Grid>
		<Grid.RowDefinitions>
			<RowDefinition Height="*" MinHeight="8"/>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="8"/>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="8"/>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="*" MinHeight="8"/>
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="8"/>
			<ColumnDefinition Width="*"/>
			<ColumnDefinition Width="8"/>
		</Grid.ColumnDefinitions>
		<TextBox Text="{Binding Message, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1" Grid.Row="1"></TextBox>
		<TextBlock Text="{Binding Message, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1" Grid.Row="3"></TextBlock>
		<TextBlock Text="{Binding HasMessage, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Grid.Column="1" Grid.Row="5"></TextBlock>
	</Grid>
</Window>

I tried this too but still can't get it
public class MainWindowViewModel : PropertyChangedBase
{
    public MainWindowViewModel()
    {
        this._hasMessageOAPH = this.WhenAnyValue(x => x.Message)
            .Select(x => !string.IsNullOrWhiteSpace(x))
            .Do(x => Debug.WriteLine($"Has Message changed: {x}"))
            .ToProperty(this, nameof(this.HasMessage));
    }

    private readonly BehaviorSubject<string?> _messageBheavior = new(null);
    private string? _message = null;
    public string? Message
    {
        get { return this._message; }
        set
        {
            this.RaisePropertyChanging();
            this._message = value;
            this.RaisePropertyChanged();
        }
    }

    private readonly ObservableAsPropertyHelper<bool> _hasMessageOAPH;
    public bool HasMessage => this._hasMessageOAPH.Value;
}

@ChrisPulman sample repo: https://github.com/snalesso/IReactiveObjectTest

Misinterpreted this comment (didn't pay attention and thought it was an MVVM Cross specific solution). Actually it is the universal solution.
Thank you Chris for your time.

authors: AlexanderMelchers ChrisPulman DamienDoumer J-Swift glennawatson kentcb kjeremy shiftkey snalesso

repo: reactiveui/ReactiveUI


text:
[BUG] Memory leak without disposing 'WhenActivated' returned value

Describe the bug
Hi, I found a memory leak by using WhenActivated in a view.
If we don't dispose the disposable returned by WhenActivated, it seems that the view and their elements are kept in memory.
With memory leak
public BookView()
{
  InitializeComponent();
  this.WhenActivated(d =>  {  ... });
}

Without
public BookView()
{
  InitializeComponent();
  IDisposable l_disp = Disposable.Empty;;
  this.WhenActivated(d =>
  {
    ...
    d(l_disp);
  });
}

Steps To Reproduce

Run my simple application WPAFApplication.exe
click a lot of time on "add" button to add objects in the list.
2.1 Left list is the base case with a memory leak
2.2 Right list is the 'fixed way' by disposing WhenActivated  return
then click on clear button
make a snapshot with dot memory

Expected behaviour
We shouldn't have any view model retained by their views.
Screenshots

Environment

OS:       W10
ReactiveUI Version:    16.2.6 and 16.2.1

Additional context
Have a good day :)
WpfApplication.zip

I have exactly the same problem.
I thought it was problem with my code, but when I applied this workaround, my leaks were gone.
Is this something that will be fixed?

Ok, I did some further testing:
10.5.30-14.1.1: no memory leaks

= 14.2.1: memory leaks

Maybe it has something to do with https://github.com/reactiveui/ReactiveUI/pull/2793.

Thanks for the detective work will have to look into it on the weekend.

I have a quite similar problem. I use finalizer during debug to show an info line when garbage collection takes place for an object. The last version finalizers were called was 13.3.2.

I noticed this when upgrading WPF ReactiveUI a couple of months ago. I tested with 14.1.1 it works and it doesn't with 14.2.1, so it's narrowed to changes between those two specific versions. I created this demo sample to check it out after talking about this in Slack channel. Last month I was busy with family issues so I couldn't follow up on this.
https://github.com/gerardo-lijs/ReactiveUI.Demo_DisposableLeak
. There was an specific PR between 14.1.1 and 14.2.1 that I think might be the cause, but I'm not familiar with ReactiveUI internal code so can't be sure.  https://github.com/reactiveui/ReactiveUI/pull/2793
Maybe @ChrisPulman can help here.

@glennawatson thanks for working on this! I updated to ReactiveUI 16.3.10 and now it's not leaking on the main window but still leaks in the DetailViewModels. You can take a look, difference between main branch (13.2.2), reaciveui-14-3-1 branch and the new one reactiveui-16.3.10 branch.
Let me know if you need more details and happy to help in any way. Also, maybe other users who reported this (like @hutterm or @parisq) can confirm part of the leak is still there.

authors: TSSoftware gerardo-lijs glennawatson lippling parisq


text:
docs: title component translation

Closes  #690
Description
Translate the <title> page.
Page URL: https://id.react.dev/reference/react-dom/components/title

One minor change, please check! @aroyan

updated, thanks

for this link title, should this updated to "kanal" too?

@aroyan yes.

source: gharchive/pull-request


text:
Mounting container to any state's property

Hi,
I've got a container that is mapped to some state:
const Container = connect(state => ({prop: state.someProp}))(Component);

And I've got some state that is defined by combineReducers structure:
const reducer = combineReducers({
  propA: someReducer,
  propB: someReducer,
});

I want to mount two instances of Container, that are mapped to two different properties of state (propA and propB) without rewriting Container.
After some experiments I and my colleague come to some implementation like this:
const ContainerA = MountComponentTo(Container, 'propA');
const ContainerB = MountComponentTo(Container, 'propB');

const App = () => (
  <Provider store={store}>
    <ContainerA/>
    <ContainerB/>
  <Provider>
);

function MountComponentTo(Component, propName) {
  class MountedComponent extends React.Component {
    constructor(props, context) {
      super(props, context);
      this.store = context.store;
    }

    getChildContext() {
      let store = this.store;
      const getState = this.store.getState.bind(this.store);

      store = Object.assign({}, store, {
        getState: () => getState()[propName]
      });

      return {store};
    }

    render() {
      return Children.only(this.props.children);
    }
  }

  MountedComponent.contextTypes = {
    store: React.PropTypes.object
  };

  MountedComponent.childContextTypes = {
    store: React.PropTypes.object
  };

  return MountedComponent;
}

Is it a proper implementation? Is there any better way to do this with react-redux?

Yeah, the "multiple independent instances of a connected component" scenario can get a bit complex.  There's been a lot of discussion on the topic, and there's a bunch of different libraries people have built to try to help with it.  Let me point you to some references.
I have a bunch of articles on Redux and encapsulation in my links list, at https://github.com/markerikson/react-redux-links/blob/master/redux-architecture.md#encapsulation-and-reusability .  In particular, there's a repo with discussions on various solutions to the "arbitrary list of counters" sample problem at https://github.com/slorber/scalable-frontend-with-elm-or-redux .  Also, my Redux addons catalog has a page listing various "per-component state"/"encapsulation"-type libraries at https://github.com/markerikson/redux-ecosystem-links/blob/master/component-state.md .
I haven't specifically used any of the libraries in that list myself, but just to pick three that seem interesting-ish, you might want to look at https://github.com/threepointone/redux-react-local , https://github.com/epeli/lean-redux , and https://github.com/eloytoro/react-redux-uuid .

I'm not a fan of shadowing the store to only expose a fragment of the store. I feel like that gets you in trouble as soon as Container starts using a component that also connects to the store but expects the full store state.  I'd prefer to do something like:
const App = () => (
  <Provider store={store}>
    <Container propName="propA" />
    <Container propName="propB"/>
  <Provider>
);

and then make Container's mapStateToProps use propName to pluck from state.

@jimbolla If you have some complex containers, that connect some components on different levels of result tree, the scenario with <Container propName="propB"/> suggests passing propName from outer component to inner component. Provider component is really great thing because it passes store in tree context. I think that passing propName is a step back in this circumstances.
@markerikson Isn't it a good decision to add some component to react-redux (just like Provider) that makes this context and store manipulations?

@verkholantsev : there's too many different potential use cases out there to try to implement things here in react-redux.  That's part of why there's so many different third-party libraries.  There was actually a good article just today on a related topic, entitled "Libraries shouldn't support everything".
That's not to say that it's impossible to implement some kind of "isolation" approach in react-redux, or that it's an "absolute never" that such a thing would be implemented, but I definitely don't see us adding anything like that in the near future.

authors: jimbolla markerikson verkholantsev

repo: reactjs/react-redux


text:
Add minimum required Node version to create-react-app docs

This issue was originally reported by @kyamaguchi81 via facebook/react/issues/10324
Text of original issue
Please list [You’ll need to have Node >= 6 on your machine.]
before the description in [npm install -g create-react-app],
In [Creating a New Application] of the document https://facebook.github.io/react/docs/installation.html.
Because you want to know the required version before running the command

I will work on this issue.

This issue is all yours! 😄
I've added an "in-progress" label so that others will know not to start work on the issue. If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.
Cheers!

Thank you @bvaughn
Struggling to set up the environment but it's part of the fun~

Please feel free to leave feedback about where you struggled in case it helps us improve the contributing docs.

I will create an issue and work on it later on (regarding node-gyp failing to build)

I was finally able to get it up and running but had a lot of trouble on Windows.
Below is the steps required to get the environment running on Windows 10.

Get node-gyp working using this documentation.
Installed following commands globally

yarn global add prettier
yarn global add flow-bin

yarn check-all doesn't work on windows. So I had to run each command separately one by one.

prettier --config .prettierrc --write "{flow-typed,plugins,src}/**/*.js"
yarn lint
yarn flow

yarn check-all failed because of the single quotes used in the prettier command.
Instead of
prettier --config .prettierrc --write '{flow-typed,plugins,src}/**/*.js'
I had used double quotes around {flow-typed,plugins,src}/**/*.js
prettier --config .prettierrc --write "{flow-typed,plugins,src}/**/*.js"

i def think Windows setup is something that should be part of the docs for contributors. too easy for devs to just assume everyone has macs

i def think Windows setup is something that should be part of the docs for contributors. too easy for devs to just assume everyone has macs

There were no such assumptions. I just have a Mac myself and I wrote the docs so...I wrote what I know. We certainly welcome contributions to the contributing docs to improve the instructions for Windows users! ❤
If you'd be willing to commit the changes you needed to make via a PR, @dance2die, and tag me on it- I'd be happy to merge it.

Thank you @bvaughn
I will add a tag you and add the link to your comment in PR comment.

Closed via #89

I've created a detailed blog entry on how to setup the environment on Windows 10.
https://www.slightedgecoder.com/2017/10/15/setting-reactjs-org-environment-open-source-contribution/

@dance2die Your write-up says:

Now install following two NPM packages globally.
yarn global add prettier
yarn global add flow-bin

Why is this necessary? Both prettier and flow-bin are declared as project dependencies in package.json and so should be installed within the project.
Also, you should be able to update the "Problem2" section now since your PR has been merged. (Thanks!)

@bvaughn

Now install following two NPM packages globally.

Why is this necessary?

You are right. I've just tried it after globally removing prettier & flow-bin.
Both commands were not found for some reason on computer at home but works fine on different machine.
Thank you, Brian. I will update the blog~

Sweet! Ping me once it's updated and I'll tweet a link to it.

@bvaughn
Thank you, Brian.
I've updated the blog and renamed Problem 2 -... to Verify that the site works

Cool.  Thanks!

authors: bvaughn dance2die sw-yx