react-navigation module setup

[mcallisto]

Hello @oyvindberg

I am proposing that another demo worth adding is react-navigation.

It seems to be a very popular choice for writing good React Native mobile apps, see the official demo on Expo, providing a solid foundation of both routing and layout elements to build on.

Based on the above rationale, I am giving it a try in the dedicated navigation branch.

But, of course, I ran into problems from the very beginning...

Despite having allocated up to -Xmx16384M to sbt, when I try running the module I get the following error:

[error] PhaseRes.scala:87 StackOverflowError [thread => 165, project => react-navigation, ms => 18560, phase => typescript, id => react-native-reanimated]java.lang.StackOverflowError

Is it something you can reproduce? Any idea on possible solutions?

[oyvindberg]

This is probably a bug in the converter while converting react-native-reanimated , you can try to stIgnore it, perhaps it's not super important. Otherwise I'll have a look within a few days, it's probably an easy enough fix

So about react-navigation the react-native demo used it before, and it was a complete nightmare with a complete rewrite everytime they changed anything. Let's hope the new version is better 👍

[mcallisto]

This is probably a bug in the converter while converting react-native-reanimated , you can try to stIgnore it, perhaps it's not super important. Otherwise I'll have a look within a few days, it's probably an easy enough fix

Will try that and let you know, thank you.

So about react-navigation the react-native demo used it before, and it was a complete nightmare with a complete rewrite everytime they changed anything. Let's hope the new version is better +1

I remembered that, let's try a fresh take on version 5.x :crossed_fingers:. If it works, is definitely a demo I am willing to maintain.

[mcallisto]

Meanwhile, just to put toghether info, I found this library https://github.com/scommons/scommons-react-native using react-navigation v5.x via a custom facade with scalajs-react. A nice demo as well, see https://expo.io/@viktorpodzigun/showcase

[mcallisto]

Ok, ignoring react-native-reanimated works for now.

Struggling to get a grip on the basics... the aim is to reproduce the code in https://reactnavigation.org/docs/hello-react-navigation

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

See App.scala Following the typings I could create a NavigationContainer(NavigationContainerPropst().setChildren()) of type ReactElement | Null, but I don't see how to use it in a meaningful way. Plus I can create a Stack.Navigator but not a Stack.Screen.

[oyvindberg]

haha I had a look at the version 4 and it's just as bad as before, I'm not spending any more time on this. Just use a scala ADT and setState and you have none of the problems

[mcallisto]

haha I had a look at the version 4 and it's just as bad as before, I'm not spending any more time on this. Just use a scala ADT and setState and you have none of the problems

:smile: sure I can understand your frustration! (just as a side note, we are talking about version 5)

My problem is that I have been using react-router-native for routing and antd-native for the main layout, but I find shortcomings in both, precisely:

• difficulty with History and the Android back button
• not so sleek and updated overall graphic templates, drawer and dark theme for example

Making react-navigation work would mean moving to a different, hopefully better league.

[mcallisto]

Always with the purpose of adding extra info, see React Navigation -> Guides -> Type checking with TypeScript

[oyvindberg]

Right. I actually had both version 4 and 5, I hadn't noticed the package change. It doesn't change my view really though, because I mostly looked at the stack package.

The reason why this package will be hard to work with is that they do things like this:

  type RouteConfig[ParamList /* <: typings.reactNavigationRouters.typesMod.ParamListBase */, RouteName /* <: /* keyof ParamList */ java.lang.String */, State /* <: typings.reactNavigationRouters.typesMod.NavigationState */, ScreenOptions /* <: js.Object */, EventMap /* <: typings.reactNavigationCore.typesMod.EventMapBase */] = (typings.reactNavigationCore.anon.InitialParams[RouteName, ScreenOptions, ParamList, State, EventMap]) with (typings.reactNavigationCore.anon.Children | typings.reactNavigationCore.anon.Component | (typings.reactNavigationCore.anon.GetComponent[ParamList, RouteName]))

There is no way it'll be smooth in Scala.js

So I had a look at scommons, and they solve it by going completely untyped, I actually suggest you do the same and define your own thing, something like this:

val Stack = typings.reactNavigationStack.createStackNavigatorMod.default()
object StackScreen extends slinky.core.ExternalComponent {
  case class Props(... whatever you actually want to pass)
  val component = Stack.asInstanceOf[js.Dynamic].Screen.asInstanceOf[js.Object]
}

You can always copy/paste relevant props out of the mentioned types

[mcallisto]

@oyvindberg thank you for all the good suggestions.

I went back to some of the mentioned shortcomings. Fixed them otherwise and I transferred the lessons learnt into the demo at #30

So I am less tempted, but still a bit tempted, to give React Navigation a try. I will think about it, if not I will close this issue.

[mcallisto]

Not enough time to invest on this, I am closing the issue.