scommons / scommons-react-native

Scala Commons React Native

Scala.js facades for core react-native utilities and components.

It uses excellent scalajs-reactjs binding/facade library.

How to add it to your project

val scommonsReactNativeVer = "1.0.0-SNAPSHOT"

libraryDependencies ++= Seq(
  "org.scommons.react-native" %%% "scommons-react-native-core" % scommonsReactNativeVer,
  "org.scommons.react-native" %%% "scommons-react-native-community" % scommonsReactNativeVer,
  "org.scommons.react-native" %%% "scommons-react-navigation" % scommonsReactNativeVer,
  "org.scommons.react-native" %%% "scommons-expo" % scommonsReactNativeVer,
  
  // ui module already includes all above modules
  "org.scommons.react-native" %%% "scommons-react-native-ui" % scommonsReactNativeVer,
  
  // mocks of native Components and APIs
  "org.scommons.react-native" %%% "scommons-react-native-test" % scommonsReactNativeVer % "test"
)

Latest SNAPSHOT version is published to Sonatype Repo, just make sure you added the proper dependency resolver to your build.sbt settings:

resolvers += "Sonatype Snapshots" at "https://oss.sonatype.org/content/repositories/snapshots/"

How to use it

Note: Many examples are from an excellent book React Native in Action by Nader Dabit

Demo Application

How to Build and Run

See showcase/README.md

• live expo link
• mobile browser
• web emulator

Demo Ui Components

• app => tests
• controller => tests
• screen => tests
• state => tests
• TaskController => tests
• Styles
  • controller => tests
  • screen => tests
  • Example Components:
    • Border Style => tests
    • Border Radius => tests
    • Margin => tests
    • Padding => tests
    • Position => tests
    • TextStyle => tests
    • ProfileCard (with Images) => tests
• API Tasks
  • actions => tests
  • controller => tests
  • screen => tests

react-native

• Components:

  • ActivityIndicator => tests
  • Button => tests
  • FlatList => tests
  • Image => tests
    • StaticResource
  • Modal => tests
  • Picker => tests
  • ScrollView => tests
  • TextInput => tests
  • TouchableHighlight => tests
  • TouchableOpacity => tests

• APIs:

  • Alert => tests
  • Platform => tests
  • Style => tests
  • TextStyle => tests
  • ViewStyle => tests

react-native-community

• react-native-svg
  • SvgXml => tests
  • SvgCss => tests

react-navigation (v5)

• Components

  • StackNavigator => tests
  • Tab Navigation
    • BottomTabNavigator => tests

• APIs

  • Navigation => tests

expo modules

expo docs

• expo-asset => tests
  • preloading-and-caching-assets => ShowcaseApp
• expo-font => tests
• @expo/vector-icons => tests
• expo-av
  • Video => tests
• expo-sqlite
  • SQLite => tests
  • See scommons-websql on how to:
    • use quill bindings with expo SQLite
    • use scommons-websql-migrations to automate your DB schema versioning

How to Build

To build and run all the tests use the following command:

sbt test

Documentation

You can find more documentation here

Examples

You can find more examples here