rsync -av /from/a/dir1/ /to/some/other/dir2/ --no-perms --no-owner --no-group --no-times --exclude=/from/a/dir1/excludeDir/

Use -avn to perform a dry run — it will only show the files that would have been transferred, and won’t actually copy anything.

Notice that if you use dir1/ and dir2/ (with the trailing slash) all of the files inside dir1 will be copied inside dir2. If you leave the slash out, you will also copy the dir1 directory itself.

References:
Copy new files only – is this possible? Basically want to merge two folders
rsync ignore owner, group, time, and perms

Undocumented props. Why?

Anyway.

onMomentumScrollEnd will fire when the animation of the ScrollView stops.

For example, you can use the following snippet, to get the Y position of a <ScrollView ref="scrollView" />:

const RCTUIManager = require('NativeModules').UIManager
const sv = this.refs['scrollView'] as any
RCTUIManager.measure(sv.getInnerViewNode(), (...data) => {
  console.log(data[5])
})

And this is the order in which events of a ScrollView fire, in case you ever find yourself looking for answers that can’t be found in the official docs.

onTouchStart={() => console.log('onTouchStart')}
onTouchMove={() => console.log('onTouchMove')}
onTouchEnd={() => console.log('onTouchEnd')}
onScrollBeginDrag={() => console.log('onScrollBeginDrag')}
onScrollEndDrag={() => console.log('onScrollEndDrag')}
onMomentumScrollBegin={() => console.log('onMomentumScrollBegin')}
onMomentumScrollEnd={() => console.log('onMomentumScrollEnd')}

Reference:

http://stackoverflow.com/a/33924777/2621748

This is a hacky way to do it, while we wait for a native bridge (I found it in a React Native issue on GitHub.

https://github.com/facebook/react-native/issues/586#issuecomment-90826117

Basically you trigger an event in your parent component by listening to a navigation change in the WebView, and pass the name of a method (or whatever) via the document.title field.

Longer post coming (maybe, I find myself adding stuff on the go 😰)

You will also have to read the following to correctly send all the data you want from the WebView to the parent component.

http://stackoverflow.com/a/26603875/2621748

When we have an input field on the bottom of the screen and we focus it, the keyboard covers the field and we will not know what we are typing inside.

My solution is a mix of two StackOverflow answers, which I will reference at the bottom. Also, apparently the React Native team tackled this issue in the 0.30.0 release. I tried it and it didn’t work the way I wanted, but maybe it was me doing something wrong.

Oh and of course this might not be the best way to do it at all, but it works for me and doesn’t look awful.

Click to see the code.

Just leaving this here for when I have a little bit more time to make it a little nicer.

Using react-native-drawer to render the drawer.

The whole code of the two components I am using is below or in this gist.

Let’s start with a basic <Drawer> with a <ScrollView> with a <ListView> inside. Since we don’t know the width of the drawer (because of devices with different resolutions) we can’t just set a fixed width to the images (or whatever) inside the grid. Also with flexbox, I didn’t manage to get the desired result, because I needed squares.

So, to create a grid that has let’s say images that have a 50% width, you have to hack a bit.

Cutting here so it’s not messy, click to see the code and read more.

It’s just a simple “trick” I came across while working at my latest project.

What we are sometimes faced with when working with an API hosted on another server is something named CORS.

A really simple solution is to configure a reverse proxy (NGINX / Apache) if you have a web server (if you don’t you can easily set up a local WAMP / LAMP server for dev purposes).

And setting up a reverse proxy in NGINX is much easier than doing it in Apache as it only takes a couple of lines.

I added this to server { } in my default config (/etc/nginx/sites-available/default):

location /api/ {
    proxy_set_header Authorization "Basic ZGV2OmRldg==";
    proxy_pass http://url.to.the.api/api/;
}

The simplest proxy wouldn’t need the proxy_set_header part but in my case I needed it because there was HTTP authentication in place. “ZGV2OmRldg==” is “username:password” Base64 encoded (without quotes).

Now, accessing localhost/api/ would be the same as accessing url.to.the.api/api/, which means that if you issue a GET request to localhost you are going to get one back from localhost instead of from across the internet – bye bye CORS!

Happy developing!

Had to add an attachment functionality to the project I am currently working on at work.

The snippets below use a simple web service (which I didn’t include) that saves the files uploaded to a database and returns the columns read.

You need at least three columns in the table: ID (PK, int), FILENAME (varchar) and CONTENT (BLOB).

// Attach this method to an upload button.
private void UploadFile(object sender, RoutedEventArgs e)
{
   OpenFileDialog fileDialog = new OpenFileDialog();
   // In case you want filtering.
   fileDialog.DefaultExt = ".txt";
   fileDialog.Filter = "Text documents (.txt)|*.txt";

   bool? result = fileDialog.ShowDialog();

   if (result == true)
   {
       using (FileStream fs = new FileStream(fileDialog.FileName, FileMode.Open, FileAccess.Read))
       {
           Byte[] b = new Byte[fs.Length];
           fs.Read(b, 0, b.Length);
           fs.Close();

           try
           {
               // Save the byte array (b) to the BLOB column in the database.
               // I am using a web service.
               WebService.SaveAttachment(Path.GetFileName(fileDialog.FileName), b);
               MessageBox.Show("File uploaded!");
           }
           catch (Exception ex)
           {
               MessageBox.Show(ex.ToString());
           }
       }
   }
}

Click for the open and download functionalities

This presumes you want to create a transparent overlay layer over all of your elements and center a loading text to the middle of the application.
In my case I had a grid with three rows, hence the Grid.RowSpan="3".


   
      

If you change the Canvas name be sure to modify the ElementName in the DockPanel attributes.

Reference:
http://stackoverflow.com/questions/13621041/stretch-items-to-fill-canvas

This works with PhoneGap / Cordova applications. It should happen automatically when you configure the application to run in fullscreen mode but it doesn’t for now.

Instead of this sufficing:

<preference name="fullscreen" value="true" />

You have to include the following plugin in the config.xml file:

<gap:plugin name="org.apache.cordova.statusbar" />

And add this snippet to your index (or JavaScript) file:

document.addEventListener("deviceready", startEvents, false);
function startEvents() {
    StatusBar.hide();
}

Hope it helps!

References:
Plugin: https://github.com/apache/cordova-plugin-statusbar
PhoneGap issue (GitHub): https://github.com/phonegap/build/issues/267

If you, like me, own the best mobile phone in the universe, the Nokia Lumia 920, and design websites, you might have noticed that responsive sites are not responsive on this device.

This is a IE10 bug. To fix this, you should include the following snippet in the head (or wherever really) of your index file.

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement("style");
    msViewportStyle.appendChild(
        document.createTextNode(
            "@-ms-viewport{width:auto!important}"
        )
    );
    document.getElementsByTagName("head")[0].
        appendChild(msViewportStyle);
}

I don’t remember where I got this one, so no credits or reference, but it works!

To display a custom page template you usually rewrite the default WordPress query that is used to read the post / page content and display it: $wp_query.

By doing so, you end up somehow breaking it’s flow and don’t let it finish correctly (this is not what happens, you really break it though).

This, for instance, prevents the query to correctly set the current-menu-item and other css classes to the menu items that should be marked as selected when visiting a page with a custom template inside.

Let’s see where it goes wrong.

Continue reading