riskiidice/scalajs-react-native

build native mobile applications using scala.js and react-native - please check https://github.com/chandu0101/sri where future work is going to take place :)

Please check https://github.com/chandu0101/sri (this is where future work is going to take place)

#scalajs-react-native ScalaJS wrapper for react-native .This project depends on scalajs-react , so you must be familiar with scalajs-react in order to use this library.

#Index

• Setup
• Styles
• Examples
• Project Template

#Setup

add this to your sbt build file

libraryDependencies += "com.github.chandu0101.scalajs-react-native" %%% "core" % "0.2.0"

imports

import chandu0101.scalajs.rn._ // to import core builderReactNativeComponentB etc 
import chandu0101.scalajs.rn.components._ // for all native components
import chandu0101.scalajs.rn.apis._ // for native API calls

scalajs-react-native comes with ReactNativeComponentB (its clone of scalajs-react ReactComponentB with native dependencies and extra helper methods ).

Defining Components :

to define components just follow ReactComponentB guide lines

example :

 val HelloNative = ReactNativeComponentB[Unit]("HelloNative")
    .render(P => {
    View(style = styles.container)(
       Text(style = styles.text)("Welcome to Scala-JS ReactNative"),
       Text(style = styles.text)("To get started, edit HelloNative.scala ")
    )
  }).buildU

Defining Root Component :

to define root component use buildNative method from builder .

example :

  val ScalaJSReactNative = ReactNativeComponentB[Unit]("ScalaJSReactNative")
      .render((P) => {
        HelloNative()
    }).buildNative //If your component is going to be render by other third party component then use buildNative

    ReactNative.AppRegistry.registerComponent("ScalaJSReactNative", () => ScalaJSReactNative)
    

#Styles

React Native doesn't implement CSS but instead relies on JavaScript to let you style your application. You can define styles in dynamic/typesafe way

Dynamic Way :

Use js.Dynamic.literal to define js styles

Example :

 import scala.scalajs.js.Dynamic.{literal => json}
  val styles = ReactNative.StyleSheet.create(
    json(
      container = json(flex = 1,
        backgroundColor = "#F5FCFF"),
      textCenter = json(textAlign = "center",marginTop = 10)
    )
  )
  
  //access styles 
   View(style = styles.container)(..)

TypeSafe Way :

In order to define styles in type safe manner you need styles module

libraryDependencies += "com.github.chandu0101.scalajs-react-native" %%% "styles" % "0.2.0"

extend trait NativeStyleSheet to define style sheets . NativeStyleSheet comes with two methods style (which takes attr value pairs)and styleE (this is used to extend already defined styles).

Example :

  object styles extends NativeStyleSheet {
    val centering = style(
      alignItems.center,
      justifyContent.center
    )
    val gray = style(backgroundColor := "#cccccc")
    val horizontal = style(flexDirection.row, justifyContent.center)
    val default = styleE(centering, gray)(height := 40)
  }
  

#Examples

Number of examples can be found in examples module

How to run examples :

 sbt ~fullOptIOS
 
 // open new terminal tab/window
 cd examples
 npm install
 npm run start // start react-native package
 
 Open ScalaJSReactNative.xcodeproj using latest xcode
 
 Cmd+R - to run project
 
 Cmd+D - to debug project
 
 Cmd+B - to build
 
 Cmd+Shift+K - to cleanup

#Template

A basic scalajs-react-native skeleton app can be found here

https://github.com/chandu0101/scalajs-react-native-template