README.md

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

Demo Application

See showcase/README.md for how to build and run it.

• live expo link
• mobile browser
• web emulator

Demo App/UI Library Components

• app => tests
  • controller => tests
  • screen => tests
  • state => tests
  • TaskController => tests
• Screens with API calls
  • actions => tests
  • controller => tests
  • screen => tests
• Reusable Custom UI Components
  • ChoiceGroup => tests

React Native Styling Examples

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

• Border Style => tests
• Border Radius => tests
• Margin => tests
• Padding => tests
• Position => tests
• TextStyle => tests
• ProfileCard (with Images) => tests

Facades

react-native

• Components:

  • ActivityIndicator => tests
  • Button => tests
  • FlatList => tests
  • Image => tests
    • StaticResource
  • KeyboardAvoidingView => tests
  • Modal => tests
  • ScrollView => tests
  • StatusBar => tests
  • Switch => tests
  • TextInput => tests
  • TouchableHighlight => tests
  • TouchableOpacity => tests

• APIs:

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

react-native-community

• @react-native-picker/picker
  • Picker => tests
• react-native-safe-area-context
  • SafeAreaProvider => tests
  • SafeAreaView => tests
• react-native-svg
  • SvgXml => tests
  • SvgCss => tests
• react-native-webview => tests
• react-native-htmlview => tests
• react-native-syntax-highlighter => tests

react-navigation (v6)

• Components

  • StackNavigator => tests
  • 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 for how to:
    • use high-level scommons-websql-io module 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