You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jan 19, 2025. It is now read-only.
{% include blog-lazy-image.html description="The react native bridge delegate still uses the localhost url to load the bundled JS" width="1500" height="891" src="/assets/images/posts/react-native-bridge-delegate-localhost.jpg" %}
44
44
45
45
If we try to build this app on an iPhone, and we open one of the React Native screen we will receive the following error (obviously based on the fact that we are trying to access localhost from the iPhone, and our React Native node server is running on the MacBook Pro where we are building the app).
46
46
47
-
{% include blog-lazy-image.html description="react native error on device failed bundle" width="350" height="641" src="/assets/images/posts/react-native-error-on-device-failed-bundle.jpg" %}
47
+
{% include blog-lazy-image.html description="If you run the app with the localhost url above, you will receive an error" width="350" height="641" src="/assets/images/posts/react-native-error-on-device-failed-bundle.jpg" %}
48
48
49
-
How can we build on a real device? First of all we need to add a new build phase to our project that let us run the `React Native Xcode Bundler` before the real build. The `React Native Xcode Bundler` is a shell script with name `react-native-xcode.sh` that you can find inside your react native npm package under `<you app root folder.>/node_modules/react-native/scripts/`. This script must take as input our React Native index.js.
49
+
How can we build on a real device? First of all we need to add a new build phase to our project that let us run the `React Native Xcode Bundler` before the real build. The `React Native Xcode Bundler` is a shell script with name `react-native-xcode.sh` that you can find inside your react native npm package under `<you app root folder.>/node_modules/react-native/scripts/`. This script must take as input our React Native index.js.
{% include blog-lazy-image.html description="Add the release bundler script as an Xcode phase" width="1500" height="891" src="/assets/images/posts/react-native-setup-bundler.jpg" %}
52
52
53
53
Now we can change our `ReactNativeBridgeDelegate` implementation. Instead of returning an hard coded url, we use the `RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index", fallbackResource: nil)` method. We need to pass `"index"` as bundle root parameter (the name of the main js file).
{% include blog-lazy-image.html description="The ReactNativeBridgeDelegate gets the JS url from RCTBundleURLProvider" width="1500" height="891" src="/assets/images/posts/react-native-bundle-url-provider-setup.jpg" %}
56
56
57
57
Now we can try to build an run again the app on a real device. As you can see now everything works as expected.
58
58
59
-
{% include blog-lazy-image.html description="react native app working on device" width="350" height="641" src="/assets/images/posts/react-native-app-working-on-device.jpg" %}
59
+
{% include blog-lazy-image.html description="Now the app works correctly on a real device" width="350" height="641" src="/assets/images/posts/react-native-app-working-on-device.jpg" %}
60
60
61
-
What's happening under the hood? Which kind of "magic" are we using here :smirk:? If we start to debug from the call
62
-
to `RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index", fallbackResource: nil)` and we go inside the React Native source code at some point we will see a call to a method named `guessPackagerHost`. In this method there's a piece of code that tries to open and read the content of a file named `ip.txt` (this file is supposed to be in the main bundle of the app). The string returned by this method is used as hostname in the url used by React Native to call the packager we are running on our mac.
61
+
What's happening under the hood? Which kind of "magic" are we using here :smirk:? If we start to debug from the call to `RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index", fallbackResource: nil)` and we go inside the React Native source code at some point we will see a call to a method named `guessPackagerHost`. In this method there's a piece of code that tries to open and read the content of a file named `ip.txt` (this file is supposed to be in the main bundle of the app). The string returned by this method is used as hostname in the url used by React Native to call the packager we are running on our mac.
63
62
Who did create this `ip.txt` file? Previously we added the execution of the `React Native Bundler` script as build phase. If we look at the source code of this script you will find the following piece of code:
64
63
65
-
{% include blog-lazy-image.html description="react native ip txt generation" width="1500" height="1454" src="/assets/images/posts/react-native-ip-txt-generation.jpg" %}
What?!?!?!?!?!? :satisfied: This piece of code basically creates a file named `ip.txt` that contains the IP address of your computer, extracted using an `ifconfig` command, concatenated with the domain `xip.io`. So the file will contain a string like the following one: `<your computer IP address>.xip.io`. This is the string returned by the `guessPackagerHost` method. In the screenshot below you can find the source code of this method and the string that it returns.
68
67
69
-
{% include blog-lazy-image.html description="react native my local ip" width="1500" height="891" src="/assets/images/posts/react-native-my-local-ip.jpg" %}
68
+
{% include blog-lazy-image.html description="The react native source that reads the ip from the ip.txt file" width="1500" height="891" src="/assets/images/posts/react-native-my-local-ip.jpg" %}
70
69
71
70
What is the `xip.io` string added after the IP address? [xip.io](http://xip.io/"xip.io") is a public free DNS server created at [basecamp](https://basecamp.com"basecamp"). Below you can find a quote from the homepage of the service:
72
71
@@ -75,10 +74,10 @@ What is the `xip.io` string added after the IP address? [xip.io](http://xip.io/
75
74
> for any IP address. Say your LAN IP address is 10.0.0.1.
76
75
> Using xip.io,
77
76
>
78
-
>10.0.0.1.xip.io resolves to 10.0.0.1
79
-
>www.10.0.0.1.xip.io resolves to 10.0.0.1
80
-
>mysite.10.0.0.1.xip.io resolves to 10.0.0.1
81
-
>foo.bar.10.0.0.1.xip.io resolves to 10.0.0.1
77
+
>10.0.0.1.xip.io resolves to 10.0.0.1
78
+
>www.10.0.0.1.xip.io resolves to 10.0.0.1
79
+
>mysite.10.0.0.1.xip.io resolves to 10.0.0.1
80
+
>foo.bar.10.0.0.1.xip.io resolves to 10.0.0.1
82
81
>
83
82
>...and so on. You can use these domains to access virtual
84
83
>hosts on your development web server from devices on your
@@ -87,8 +86,7 @@ What is the `xip.io` string added after the IP address? [xip.io](http://xip.io/
87
86
>
88
87
>How does it work? xip.io runs a custom DNS server on the public Internet. When your computer looks up a xip.io domain, the xip.io DNS server extracts the IP address from the domain and sends it back in the response.
89
88
90
-
{% include blog-lazy-image.html description="react native xip.io" width="1500" height="1181" src="/assets/images/posts/react-native-xipio.jpg" %}
89
+
{% include blog-lazy-image.html description="xip.io service" width="1500" height="1181" src="/assets/images/posts/react-native-xipio.jpg" %}
91
90
92
-
This basically means that xip.io is a domain name we can use to access our local packager environment on our mac from
93
-
our iPhone and iPad, based on the fact that the devices are all on the same network.
91
+
This basically means that xip.io is a domain name we can use to access our local packager environment on our mac from our iPhone and iPad, based on the fact that the devices are all on the same network.
94
92
That's all, and as you can see everything works "like magic" :relaxed:.
To **translate objects**, we can use the transform tools. We can find them under *Tools -> Transform*. As a
42
-
consequence of the fact that we are trying to translate an object in 3D space using the mouse pointer that works in 2D space, it is
43
-
difficult to understand in which direction we are doing our translation. We can **constraint the move** to just
44
-
one axis by pressing:
19
+
In the [first post of the "Blender tutorial" series](/2018/01/31/blender-tutorial-1-user-interface.html"Blender tutorial: user interface") we learned how the user interface is composed and the most important commands to navigate inside a scene. This time we will be focus on selecting and moving objects inside the 3D view.
20
+
We can **select an object** by using the *right button of your mouse*. If you're on the MacBook like me, the right mouse is emulated in some ways (my personal preferences is to use two fingers to emulate a right click). To *select multiple objects* we can hold the *shift button and select with a right click the objects* we want. The objects that we will select will be marked in the outliner editor, with a little circle, and in the 3D view with a little border. The color of the border will change based on the theme you selected. In the screenshot below we can see that I selected 2 of the 3 objects in the scene. If we have multiple objects selected, the last one will have a different border. In my case the cube is the last object selected.
21
+
22
+
{% include blog-lazy-image.html description="Object selection in Blender" width="1500" height="956" src="/assets/images/posts/blender-selecting-objects-1.jpg" %}
23
+
24
+
To deselect an object we can just right click on it again. We can also **select all the objects** in a scene, including cameras and lights, by pressing the *"a" key*.
25
+
There's also a select menu that gives us more control over the selections we can do. In particular, we have the **Circle select**, that lets us select objects based on a circle pattern of selection, and the **Border select**, that lets us select objects based on a squared pattern of selection. There are also other option to select random objects or invert the current selection.
26
+
27
+
{% include blog-lazy-image.html description="Selection menu in Blender" width="1500" height="956" src="/assets/images/posts/blender-selecting-objects-2.jpg" %}
28
+
29
+
To **translate objects**, we can use the transform tools. We can find them under *Tools -> Transform*. As a consequence of the fact that we are trying to translate an object in 3D space using the mouse pointer that works in 2D space, it is difficult to understand in which direction we are doing our translation. We can **constraint the move** to just one axis by pressing:
{% include blog-lazy-image.html description="Translation of objects in Blender" width="1500" height="956" src="/assets/images/posts/blender-translating-objects-1.jpg" %}
51
36
52
-
There's also the possibility to move an object with discrete values by using its location properties panel under the
53
-
properties editor or using the object properties panel in the 3D window. Finally we can move objects using also the
54
-
3D manipulator widget in the 3D window. We can activate it by pressing on its icon. After that when you select and
55
-
object you will see three axes. Drag one of them to translate the object in that direction.
37
+
There's also the possibility to move an object with discrete values by using its location properties panel under the properties editor or using the object properties panel in the 3D window. Finally we can move objects using also the 3D manipulator widget in the 3D window. We can activate it by pressing on its icon. After that when you select and object you will see three axes. Drag one of them to translate the object in that direction.
{% include blog-lazy-image.html description="Moving objects in Blender" width="1500" height="956" src="/assets/images/posts/blender-translating-objects-2.jpg" %}
58
40
59
41
We can rotate and scaling an object using the same tools we used for the translation:
60
42
@@ -63,7 +45,7 @@ We can rotate and scaling an object using the same tools we used for the transla
63
45
64
46
One important thing to consider when we are working with transformation is the transform orientation. This option defines the orientation of the transform operation. This is very important because it influences the final result of the transform operation. You can change the transform orientation in the 3D manipulator widget.
{% include blog-lazy-image.html description="3D manipulator widget" width="1500" height="956" src="/assets/images/posts/blender-translating-objects-3.jpg" %}
67
49
68
50
The 3D manipulator widget will place the start of the **transform based on the origin of an objects**. We can **change it** by selecting one of the option under Object -> Transform in object mode:
69
51
@@ -73,13 +55,10 @@ The 3D manipulator widget will place the start of the **transform based on the o
{% include blog-lazy-image.html description="Object transform" width="1500" height="956" src="/assets/images/posts/blender-change-origin-objects-1.jpg" %}
77
59
78
-
When we want to transform a group of objects at once we have a number of options to change the pivot point of the
79
-
selection. We can choose it by selecting one of the option available from the list near the 3D transform manipulator
80
-
widget.
60
+
When we want to transform a group of objects at once we have a number of options to change the pivot point of the selection. We can choose it by selecting one of the option available from the list near the 3D transform manipulator widget.
0 commit comments