Clojurians Log v2

Hey gentlemen, I would like to share that I have added reagent example to emotion-cljs for working with styled components https://github.com/khmelevskii/emotion-cljs/tree/master/examples/reagent-emotion Will be happy if it is useful for somebody

I'm trying to call a function navigate on a prop navigation passed to my reactive native component screen from it's parent component Stack. Navigator . The Js equivelent:

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

function HomeScreen({ navigation }) {
  return (
    <View >
      <Button onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

(defn root []
  [:> paper/Provider {:theme paper/DarkTheme}
   [:> nav/NavigationContainer
    [:> (. stack -Navigator) {:header-mode "none"}
     [:> (. stack -Screen) {:name      "Screen1"
                            :component screen-main}]]]])

(defn screen-main [{:keys [navigation]}] <---- This is clearly not correct, but i'm not sure what would be 
  (r/as-element
    [:> rn/View {:style (tw "flex flex-1")}
     [:> paper/Surface {:style (tw "flex flex-1 justify-center")}
      [:> rn/Button {:title "foo" :onPress #(. navigation navigate "Screen2")}]
      [:> paper/Card
       [:> paper/Card.Title {:title    "screen 1"
                             :subtitle "push up through your hands to get better extension."}]]]]))

maybe it's the case that I have to pass the navigation js object explicitly?

You need to use reagent/as-element to wrap the Hiccup that (. stack -Screen) ends up consuming.

Reagent repo contains both documentation and multiple examples.

I'm not following, the clojure function screen-main returns a react element because it is warped in reagents as-element function to me, that is the hiccup that (. stack -Screen) consumes.

Ah, I'm a bit blind today, apologies. The args should be a regular JS object, so you should be able to use interop to get navigation from there.

that was it, thanks. hmmm, I really thought their was some magic that allowed me to use cljs destructuring. that is, i thought i was getting a clojure hash-map not a js object. I see i can wrap my function in rectify-component if i want to use destructing in the function.

part of the issue is that this is my first adventure into react native land so none of my usual inspection methods are easily at hand (or so it seems)

Though i'm worried i'll need to assign every reactified-component to a var, as if i use it inline it might be doing extra work each time. hmmm