Use opal 0.7.0

.gitignore

@@ -111,3 +111,6 @@ build/Release
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
+
+# mac os files
+.DS_Store

Gemfile

@@ -1,6 +1,9 @@
 source 'https://rubygems.org'
 
-gem 'react.rb', github: 'zetachang/react.rb', branch: 'react-native-support'
+# original source:
+# gem 'react.rb', github: 'zetachang/react.rb', branch: 'react-native-support'
+# to use opal 0.7.0
+gem 'react.rb', github: 'rainchen/react.rb', branch: 'react-native-support', ref: '86dd78f55419286f4bf10ea23e6bf1960fa0de07'
 gem 'websocket-rack'
 gem 'sinatra'
 gem 'thin'

Gemfile.lock

@@ -1,11 +1,12 @@
 GIT
-  remote: git://github.com/zetachang/react.rb.git
-  revision: 454412a9e63cb14e303ba6d03bbca385aeb2b980
+  remote: git://github.com/rainchen/react.rb.git
+  revision: 86dd78f55419286f4bf10ea23e6bf1960fa0de07
+  ref: 86dd78f55419286f4bf10ea23e6bf1960fa0de07
   branch: react-native-support
   specs:
     react.rb (0.2.0)
-      opal (~> 0.6.0)
-      opal-activesupport (~> 0)
+      opal (~> 0.7.0)
+      opal-activesupport
       sprockets-es6 (~> 0)
       therubyracer (~> 0)
 
@@ -19,7 +20,7 @@ GEM
       thread_safe (~> 0.3, >= 0.3.4)
       tzinfo (~> 1.1)
     addressable (2.3.8)
-    babel-source (5.0.8)
+    babel-source (5.8.19)
     babel-transpiler (0.7.0)
       babel-source (>= 4.0, < 6)
       execjs (~> 2.0)
@@ -56,45 +57,47 @@ GEM
       eventmachine (>= 0.12.9)
     escape (0.0.4)
     eventmachine (1.0.7)
-    execjs (2.4.0)
+    execjs (2.6.0)
     fuzzy_match (2.0.4)
+    hike (1.2.3)
     i18n (0.7.0)
     json (1.8.2)
-    libv8 (3.16.14.7)
+    libv8 (3.16.14.11)
     minitest (5.5.1)
     molinillo (0.2.3)
     nap (0.8.0)
     netrc (0.7.8)
-    opal (0.6.3)
-      source_map
-      sprockets
+    opal (0.7.1)
+      hike (~> 1.2)
+      sourcemap (~> 0.1.0)
+      sprockets (>= 2.2.3, < 4.0.0)
+      tilt (~> 1.4)
     opal-activesupport (0.1.0)
       opal (>= 0.5.0, < 1.0.0)
     open4 (1.3.4)
     rack (1.6.0)
     rack-protection (1.5.3)
       rack
-    ref (1.0.5)
+    ref (2.0.0)
     sinatra (1.4.6)
       rack (~> 1.4)
       rack-protection (~> 1.4)
       tilt (>= 1.3, < 3)
-    source_map (3.0.1)
-      json
-    sprockets (3.0.0.rc.1)
+    sourcemap (0.1.1)
+    sprockets (3.3.3)
       rack (~> 1.0)
-    sprockets-es6 (0.6.0)
+    sprockets-es6 (0.7.0)
       babel-transpiler
-      sprockets (~> 3.0.0.beta)
-    therubyracer (0.12.1)
+      sprockets (>= 3.0.0)
+    therubyracer (0.12.2)
       libv8 (~> 3.16.14.0)
       ref
     thin (1.6.3)
       daemons (~> 1.0, >= 1.0.9)
       eventmachine (~> 1.0)
       rack (~> 1.0)
     thread_safe (0.3.5)
-    tilt (2.0.1)
+    tilt (1.4.1)
     tzinfo (1.2.2)
       thread_safe (~> 0.1)
     websocket-rack (0.4.0)

Podfile

@@ -2,4 +2,5 @@ source 'https://github.com/CocoaPods/Specs.git'
 
 pod 'React/Core'
 pod 'React/RCTText'
+pod 'React/RCTImage'
 pod 'React/RCTWebSocketDebugger'

Podfile.lock

@@ -1,12 +1,15 @@
 PODS:
   - React/Core (0.2.1)
+  - React/RCTImage (0.2.1):
+    - React/Core
   - React/RCTText (0.2.1):
     - React/Core
   - React/RCTWebSocketDebugger (0.2.1):
     - React/Core
 
 DEPENDENCIES:
   - React/Core
+  - React/RCTImage
   - React/RCTText
   - React/RCTWebSocketDebugger
 

app/application.rb

@@ -1,4 +1,5 @@
 require "opal"
+require "opal/version"
 require "react"
 require "react/native"
 
@@ -7,7 +8,8 @@ class App
   include React::NativeComponent
 
   before_mount do
-    puts "Hello!"
+    puts "This app is coded using ReactNative(#{React::VERSION}) with Opal(#{Opal::VERSION}) on Ruby(#{RUBY_VERSION})"
+    # `console.log(Opal)` # demo for how to access the `Opal` stuff for debugging
   end
 
   def render
@@ -28,14 +30,21 @@ def render
         color: '#333333',
         marginBottom: 5,
       },
+      image: {
+        width: 100,
+        height: 100,
+        borderWidth: 1
+      }
     })
 
     present(View, {style: styles.container}) do
        present(Text, {style: styles.welcome}) { "Welcome to React Native!💖" }
+       present(Text, {style: styles.instructions}) { "This app is coded using ReactNative(#{React::VERSION}) with Opal(#{Opal::VERSION}) on Ruby(#{RUBY_VERSION})" }
        present(Text, {style: styles.instructions}) { "To get started, edit app/application.rb" }
        present(Text, {style: styles.instructions}) do
          "Press Cmd+R to reload,\nCmd+Control+Z for dev menu"
        end
+       present(Image, {style: styles.image, source: {uri: 'http://facebook.github.io/react/img/logo_og.png'}.to_n})
     end
   end
 end

opal/react/native.rb

@@ -2,6 +2,7 @@ module React
   module NativeComponent
     View = `React.View`
     Text = `React.Text`
+    Image = `React.Image`
 
     def self.included(base)
       base.include(React::Component)