scalajs-react-interface / discuss Goto Github PK

Investigate if there's example code which could be incorporated into the navigations provided by #6.
Ideally, we want something exercising device capabilities, like GPS, accelerometer, etc.

I get the following error when following the instructions for the stack-navigation app. After the step "react-native run-ios". I also get the same error on the simulator. Any help appreciated.

error: bundling failed: "Cannot find entry file index.js in any of the roots: ["~/dev/projects/rnhangman"]"

Migrating sbt-sri-platform requires migration of several other projects.
For those it may interest:

• http://github.com/frgomes/sri
• http://github.com/frgomes/sbt-sri-platform
• http://github.com/frgomes/sri-mobile.g8
• http://github.com/frgomes/sri-core
• http://github.com/frgomes/sri-mobile
• http://github.com/frgomes/sri-universal
• http://github.com/frgomes/sri-vector-icons
• http://github.com/frgomes/sri-navigation
• http://github.com/frgomes/sri-platform-config-android
• http://github.com/frgomes/sri-platform-config-ios

In this code

class MyNavScreen extends NavigationAwareComponentP[String] {
  import MyNavScreen._
  def render() = {
    if (SriPlatform.isAndroid) StatusBarComponent.setBackgroundColor("#c62828")
    ScrollView(style = GlobalStyles.navScreenContainer)(
      View(style = styles.header)(
        TouchableOpacity(onPress = () => navigation.openDrawer(),
                         style = styles.menuIcon)(
          MaterialIcons(name = MaterialIconsList.MENU,
                        color = "white",
                        size = 30)
        )
      ),
      Text(style = GlobalStyles.sampleText)(props),
      Button(onPress = () => navigation.goBack(null), title = "Go Back")
    )
  }
...

... I've got the error message below:

[exp] fontFamily 'MaterialIcons' is not a system font and has not been loaded through Expo.Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Expo.Font.loadAsync.
- node_modules/expo/src/Font.js:36:10 in processFontFamily

In the Expo documentation, they suggest that custom fonts should be installed more or less like below:

class Appclass App extends React.Component {
  async componentDidMount() {
    await Font.loadAsync({
      'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
    });

    this.setState({ fontLoaded: true });
  }

  // ...
}

However, I'm reluctant to go thru this path without first understanding whether or not there's a better way of installing custom fonts using Sri.

Hello,
I'm trying to run an sri project, but I'm getting this error

npm - 5.6.0
sbt - 0.13.15
node - 8.9.4
react-native-cli - 2.0.1
react-native - 0.46.0
xcode - 9.2

Flow:

• sbt new scalajs-react-interface/mobile.g8
• cd projekt
• react-native init projekt
• npm install
• npm start
• sbt ~ios:dev
• react-native run-ios

I think it's because there is some code missing in index.ios.js file.

index.ios.js contains only:
require("./assets/js/scalajs-output-ios.js");

Can You Please give me an example index.ios.js file, or a hint how to fix this?
Thanks!!!

I have a PostList extending from RelayFragmentComponentP and I want to navigate to Post screen when user clicks on any of the Post item on the list screen but there is no navigate object in RelayFragmentComponent so I'm not sure what is the best way to navigate from PostList to Post screen.

Can someone help me please?

http://github.com/jokade/sbt-node

It appears that in JS land for Facebook's relay, ConcreteBatch has these fields.

/: ConcreteBatch/
{
"fragment": {…},
"id": null,
"kind": "Batch",
"metadata": {},
"name": "appQuery",
"query": {…},
"text": {…},
};

In particular, I needed to reference .text field of the Scala type ConcreteBatch to pull out the flattened representation of the Query from JS land.

I'll attach a simple PR.

Ideas :

1) Export root component to toplevel using JSExportTopLevel and then use it in App.js

Scala.JS Code :

package object components {
 @JSExportTopLevel("scalajs_root_component")
  val root = StackNavigator(
    registerStackScreen[HomeScreen](navigationOptions = NavigationStackScreenOptions(title = "Scala.js Home"))
  )
}

App.js

import React from 'react';
import * as sjs from './assets/scalajs-output-android.js';

export default class App extends React.Component {
  render() {
      console.log(sjs);
      console.log(sjs.scalajs_root_component);
      return (
      React.createElement(sjs.scalajs_root_component,{})
    );
  }
}

Result:

sjs.scalajs_root_component returning null! (Investigate more...)

Giter8 provides a scaffold functionality which we could be taking advantage of.
Documentation: http://www.foundweekends.org/giter8/scaffolding.html

Proposal

1. When you first generate a project using mobile.g8, it creates a simple app, which contains only a blank screen (almost!) with some text saying that you can scaffold among a number of options:

• stack_navigation
• tab_navigation
• drawer_navigation

... or even some small apps or examples, such as:

• capabilities (test device capabilities)
• other small/sample applications contributed by the community.

2. The developer can then decide for a certain navigation style, such as:

   sbt g8Scaffold myproject com.example drawer_navigation

3. In this case, an additional folder is created, containing the files necessary for implementation of such navigation style.

4. Some wiring is necessary in order to tell that the new navigation style must be used, and not the previous one being used.

Advantages

1. We can provide various navigation styles and even examples of simple applications;

2. The developer can choose whatever styles/examples better suit his/her purposes;

3. There's no mix or confusion regarding files involved in each style/example, since these files are necessarily separated on distinct folder for each purpose;

4. In case of overwriting some files, this is kept to a minimum, possibly only a configuration file containing just one line which says which is the desired style/example.

5. All items above imply on easier management of changes.

Can someone please provide an example of how to use the Drawer navigation component with conditional screens, for example I want to show a Logout menu item only when the user is logged in, the logged in check will be through a function that checks AsyncStorage for a flag.

Many thanks,
Tamer