Fork me on GitHub

Hey gentlemen, I would like to share that I have added reagent example to emotion-cljs for working with styled components Will be happy if it is useful for somebody


i've never heard of emotion, this is cool as heck


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 (
        <Stack.Screen name="Home" component={HomeScreen} />

function HomeScreen({ navigation }) {
  return (
    <View >
      <Button onPress={() => navigation.navigate('Details')}
However, when i press the Button on my phone i get null is not an object (evaluating 'navigation.navigate') which is telling me navigation is null. How do i correctly get a reference to the navigation object in reagent? Based on the docs, i understand this should be passed directly to my screen function, i had though as part of a map e.g {:navigation (some js object)...}
(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 
    [:> 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."}]]]]))