Fork me on GitHub
#reagent
<
2021-04-15
>
y.khmelevskii06:04:55

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

NoahTheDuke13:04:26

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

drewverlee18:04:30

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>
  );
}
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 
  (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."}]]]]))