Monthly Archives: September 2021

Change the colour of the status bar on Android (in Xamarin Forms)

In your Android project, values folder styles.xml file you’ll find something like

<style name="MainTheme" parent="MainTheme.Base">
   <!-- -->
</style>

and/or

<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
   <!-- -->
</style>

Use the following element and attribute in the MainTheme.Base if that exists or the MainTheme (it will depend on the template you used at to whether one or both of these exist)

<!-- Top status bar area on Android -->
<item name="android:statusBarColor">#FF0C1436</item>

You may wish to also change the colour of the bar background at the top of the NavigationPage (if you’re using the NavigationPage such as with Prism) by adding the following to the App.xaml

<Application.Resources>
  <ResourceDictionary>
    <Style TargetType="NavigationPage">
      <Setter Property="BarBackgroundColor" Value="Color.Red"/>
      <Setter Property="BarTextColor" Value="Color.White"/>
    </Style>
  </ResourceDictionary>
</Application.Resources>

in non-Prism you can change the Primary colour, for example again in App.xaml

<Application.Resources>
  <ResourceDictionary>
    <Color x:Key="Primary">#FF3399FF</Color>
  </ResourceDictionary>
</Application.Resources>

Adding certificates to the Java cacerts (or fixing PKIX path issue)

I’m back on some Java coding after a fair time away and was getting the old PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException error.

Basically Java is complaining that it didn’t recognise the HTTPS SSL certificate of the maven repository (in this case one hosted in Artifactory). Here’s the steps to resolve this….

Note: Instructions are on Windows using Chrome, but should be similar in different browsers.

  • Open the HTTPS repository in Chrome (or preferred web browser)
  • Use the dev tools (ctrl+shift+i) and select the Security tab
  • Click on the View certificate button
  • Select the Details tab
  • Click the Copy to file… button
  • Click Next until you see the format selector, I used DER format
  • Click Next etc. and save the exported cert to your hard drive

Let’s assume we saved the file as mycert.cer, now we need to import this into the cacert using the keytool…

  • Go to the location of the JDK/JRE you’re using, for example C:\Program Files\Java\jdk1.8.0_101\jre\lib\security
  • Open a command prompt and type 
    keytool -import -alias mycert -keystore "C:\Program Files\Java\jdk1.8.0_101\jre\lib\security\cacerts" -file mycert.cer

    Replace the first occurence of mycert with a unique name (key) for your certificate and then obviously the mycert.cer is replaced with the name of the certificate file you saved.

  • You’ll be asked for a password, the default is changeit obviously if this has been changed then use that
  • Type yes when prompted if you want to proceed

That’s it – the certificate should now be available to Java.

React router dom direct URL or refresh results in 404

When using React, we’re writing a SPA and when using the React Router we actually need all pages/URL’s to go through App.tsx and the React Router. If everything is not set up correctly you’ll find when you navigate to a page off of the route and refresh the page, or just try to navigate via a direct URL you may end up with a 404 in production, even though everything worked in dev.

Note: Obviously we do not have an App.tsx when transpiled, but I’ll refer to that page as it makes things more obvious what’s going on.

To be more specific to my situation where I discovered these issues – I’ve created a subdomain (on a folder off of the root) for a React site I’m developing that will hosted from that subdomain.

As stated, all works great using serve or the start script. When deployed to production the root page works fine and links from that page via React Router also work fine but refreshing one of those links or trying to navigate directly to a link off of the root results in a 404. So what’s going on?

This issue is that the web server being used is not routing those relative URL’s via the App.tsx router page now and so the React Router is not actually doing anything, it only works when we route things via the App.tsx code.

To solve this, within your React public folder or the root of where you eventually deploy the React web site to, add a .htaccess file (if one is not already there and if your webserver supports this file). Add the following to that file

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

And that’s it, now the web server will route via our App.tsx (index.html).

See the following references which supplied all this information and thanks to these posts I was able to get my React direct links working

404: React Page Not Found
Simple Steps on how to Deploy or Host your ReactJS App in cPanel
Routing single page application on Apache with .htaccess