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

After spending way too much time figuring out how to upload stuff (like videos and photos) to S3 in React Native with modules written by others (like react-native-uploader or react-native-fs), I decided to fall back to the good old XMLHttpRequest.

Also this is not strictly related to React Native as it can be used anywhere, but it’s where I used recently.

I am using a couple of variables here:

presignedUrl is the destination URL I get from our API (it is a really long string that looks something like the URL I’m putting at the bottom)
filePath is the full path to the file (including file://).
fileType is the mime type of the file (like video/mp4, or image/jpeg).
fileName is the file name with extension (something.jpg).

And then, drumroll, the super simple code snippet:

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // Successfully uploaded the file.
    } else {
      // The file could not be uploaded.
    }
  }
}
xhr.open('PUT', presignedUrl)
xhr.setRequestHeader('X-Amz-ACL', 'public-read')
xhr.setRequestHeader('Content-Type', fileType)
xhr.send({ uri: filePath, type: fileType, name: fileName })

Presigned URL and simple request explanation inside.

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.

Every real Hipster must have a Hipster Cat, so I had to get mine.

She is also a Hacker Cat and hacks the best codez. This is her brainstorming while hacking some iOS codez.

27411821472_581b2bf256_c

Hipster Cat also teaches me how to hack. I am not as good as Hipster Cat yet. This is her looking away from my ugly codez.

27234256310_cd35a6a111_c

And yet so little on this blog.

Quick update just so I don’t forget stuff.

I’ve been to San Francisco from February to March and I have to say that it is the best city in the world – at least that’s the impression it left on me after a month of living there. I surfed, met and lived with super cool people (Bellabeat, codeanywhere, Povio Labs), enjoyed delicious foods from all around the world (thanks to Rok) and beers (thanks to Uros). I also visited Palo Alto and Stanford with Jaka and Tomaz. I did tons of other stuff as well – it was such an amazing experience, pinky promise!

I’ve seen The War of the Worlds by Jeff Wayne in London in February, which was totally amazing!

I quit my job at Dinit in February.

I went to the TechCrunch Disrupt hackathon in London with my buddy Vito. Even though we didn’t win (we got the consolation prize though – two tickets for the TC event there, which weren’t cheap), we got to see that despite there being around 700 participants, not a lot of them were devs (and not a lot of them seemed to know what they were doing.) Slovenians won of course, because we always win.

If I wrote more it wouldn’t be a quick update so I’m just going to stop for now 🙂

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