Navigation to swipe cards screen

src/Router.js

@@ -4,6 +4,7 @@ import Categories from './components/Categories';
 import LessonCategories from './components/LessonCategories';
 import AnatomyCard from './components/AnatomyCard';
 import Lesson from './components/Lesson';
+import LessonItem from './components/LessonItem';
 
 const RouterComponent = () => {
   const { headerTextStyle } = styles;
@@ -38,6 +39,14 @@ const RouterComponent = () => {
           headerStyle={headerStyle('#7270a8')}
           headerTitleStyle={headerTextStyle}
         />
+
+        <Scene
+          key="lessonItem"
+          component={LessonItem}
+          title="Lesson item"
+          headerStyle={headerStyle('#7270a8')}
+          headerTitleStyle={headerTextStyle}
+        />
       </Stack>
     </Router>
   );

src/components/Lesson.js

@@ -1,13 +1,32 @@
 import React from 'react';
 import { View } from 'react-native';
+import { Actions } from 'react-native-router-flux';
 import Question from './Question';
 
 const Lesson = (props) => {
   const { categoriesContainerStyle, categoriesListStyle } = styles;
 
+  const onQuestionSelected = (questionText) => {
+    console.log(questionText);
+    Actions.lessonItem({
+      cards: [
+        { text: 'Nakon 3. ili 4. dana života dijete bi trebalo imati barem 6 mokrih pelena. Nakon što je sav mekonij izašao i stolica postala senfasta, sjemenasta i žuta, treba očekivati barem 3-4 pokakane pelene dnevno (veličine najmanje 2,5 cm). Nakon 6. tjedna života neka djeca kakaju znatno rjeđe, pa i pauziraju po nekoliko dana. To je također sasvim normalno. U slučaju da dijete nakon 5. dana starosti nema dovoljno mokrih i zaprljanih pelena, trebalo bi pogledati signale koji upućuju na probleme i odvesti dijete liječniku.', image: require('../../images/lesson-item-1.png') },
+        { text: 'Card2', image: require('../../images/lesson-item-1.png') },
+        { text: 'Card3', image: require('../../images/lesson-item-1.png') },
+        { text: 'Card4', image: require('../../images/lesson-item-1.png') },
+        { text: 'Card5', image: require('../../images/lesson-item-1.png') },
+        { text: 'Card6', image: require('../../images/lesson-item-1.png') },
+      ] }
+    );
+  };
+
   // Render questions
   const renderQuestions = () => props.questions.map((question) =>
-    (<Question questionText={question} key={question} />));
+    (<Question
+      questionText={question}
+      key={question}
+      onQuestionSelected={(questionText) => (onQuestionSelected(questionText))}
+    />));
 
   return (
     <View style={categoriesContainerStyle}>

src/components/Question.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Text, TouchableOpacity } from 'react-native';
 
-const Question = (props) => {
+const Question = ({ questionText, onQuestionSelected }) => {
   const { containerStyle, questionTextStyle } = styles;
   return (
     <TouchableOpacity
-onPress={() => console.log(props.questionText)}
+onPress={() => onQuestionSelected(questionText)}
       style={containerStyle}
     >
       <Text style={questionTextStyle}>
-        {props.questionText}
+        {questionText}
       </Text>
     </TouchableOpacity>
   );