Wednesday, November 11, 2020

React Navigation Handle Header Button Click on Child Screen or Component

I have a react native application which I need to handle header button / action button click on the detail screen. And the journey to solve it was not a short one.

Problem

On the parent screen, I have defined a stack navigation and set the header button. Then I need to handle the header button click on the child screen. I read about passing the function as parameter but it's not easy. There are also options to useEffect or ref, but none of them are working for me.

Solution

In the end, the one that works for me and pretty clean too is by using React.useLayoutEffect and navigation.setOptions:

const ChildScreen = ({navigation, route}) => {
  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button onPress={() => ...} title="Right" />
      ),
    });
  }, [navigation]);
  
  return (...)
};

Reference:

https://reactnavigation.org/docs/header-buttons/#header-interaction-with-its-screen-component

MSBuild Copy Task AfterBuild VS2019

This time the issue is with MSBuild task that I set up in one of my project (in the project file). The task is to copy the dll to a different location after build is done. I copied the configuration over to a different project and guess what, it didn't work.

Problem

It worked flawlessly for a very long time with the following configuration:

<Target Name="AfterBuild">
  <Copy SourceFiles="..." DestinationFolder="..." />
</Target>

Solution

Two main differences between the two projects are the working on is a .NET Framework project and built in VS2017. The new one is a .NET Standard and built in VS2019. Apparently, there is a change for VS2019 that comes with updated MSBuild. It is no longer depends on the target name (it is a bad idea anyway) to determine when to execute the task. I update it to the following and then it works great.

<Target Name="AnyNameIsFine" AfterTargets="Build">
  <Copy SourceFiles="..." DestinationFolder="..." />
</Target>

For reference:

https://docs.microsoft.com/en-us/visualstudio/msbuild/copy-task?view=vs-2019

NuGet Package Reference NU6105 Publish Error

Some of my .NET Core applications are already using PackageReference which is a very nice idea. However, through a combination of packages, Visual Studio did not allow me to publish my project although it built fine.

Problem

During publish, it threw error on NU6105 warning. Along with that most of it comes with the following message:

Detected package downgrade

Solution

Some developers solve it by finding which package caused the issue and manually added them through NuGet, but I find them troublesome until I found the following article:

https://docs.microsoft.com/en-us/nuget/reference/errors-and-warnings/nu1605

In my case, all I need to do to solve it is to install the following NuGet package: 

Microsoft.NETCore.Targets

SNS HTTPS Fanout to API Gateway Error

 In one of my projects, I have an Amazon SNS subscription set up to fan out to HTTPS endpoint that is backed by Amazon API Gateway. The API Gateway has mapping template applied. 

Problem

It went smoothly during test with Postman and the API Gateway test, but when SNS sends the Notification message, it threw an error. On CloudWatch log, the error message is:

Execution failed: null

Solution

Apparently SNS sends request with Content-Type of text/plain although the request body contains json while I only had mapping set for application/json. So adding mapping template for text/plain solves my problem.