diff --git a/index.android.js b/index.android.js index ba36f39..e2e58e5 100644 --- a/index.android.js +++ b/index.android.js @@ -4,13 +4,22 @@ import { View } from 'react-native'; +import Lesson from './src/components/Lesson'; import Categories from './src/components/Categories'; +import LessonCategories from './src/components/LessonCategories'; export default class meme extends Component { render() { return ( - - + + ); } diff --git a/src/components/Categories.js b/src/components/Categories.js index 97206ac..bee61a0 100644 --- a/src/components/Categories.js +++ b/src/components/Categories.js @@ -4,10 +4,10 @@ import ApplicationHeader from './ApplicationHeader'; import CategoryItem from './CategoryItem'; const Categories = () => { - const { categoriesListStyle } = styles; + const { categoriesContainerStyle, categoriesListStyle } = styles; return ( - + @@ -22,7 +22,11 @@ const Categories = () => { const styles = { categoriesListStyle: { flexDirection: 'column', - justifyContent: 'center' + flex: 1 + }, + + categoriesContainerStyle: { + flex: 1, flexDirection: 'column' } }; diff --git a/src/components/CategoryItem.js b/src/components/CategoryItem.js index 27610b5..bf7263b 100644 --- a/src/components/CategoryItem.js +++ b/src/components/CategoryItem.js @@ -1,14 +1,17 @@ import React from 'react'; -import { Text, View } from 'react-native'; +import { Text, TouchableOpacity } from 'react-native'; const CategoryItem = (props) => { const { categoryTextStyle } = styles; return ( - + console.log(props.categoryName)} + style={containerStyle(props.categoryBackgroudColor)} + > {props.categoryName} - + ); }; @@ -16,7 +19,8 @@ const containerStyle = function (containerBackgroudColor) { return { backgroundColor: containerBackgroudColor, justifyContent: 'center', - alignItems: 'center' + alignItems: 'center', + flex: 1 }; }; diff --git a/src/components/Lesson.js b/src/components/Lesson.js index e69de29..e345a10 100644 --- a/src/components/Lesson.js +++ b/src/components/Lesson.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { View } from 'react-native'; +import ApplicationHeader from './ApplicationHeader'; +import Question from './Question'; + +const Lesson = (props) => { + const { categoriesContainerStyle, categoriesListStyle } = styles; + + // Render questions + const renderQuestions = () => props.questions.map((question) => + ()); + + return ( + + + + {renderQuestions()} + + + ); +}; + +const styles = { + categoriesListStyle: { + flexDirection: 'column', + flex: 1 + }, + + categoriesContainerStyle: { + flex: 1, + flexDirection: 'column' + } +}; + +export default Lesson; diff --git a/src/components/LessonCategories.js b/src/components/LessonCategories.js index e69de29..a3da701 100644 --- a/src/components/LessonCategories.js +++ b/src/components/LessonCategories.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { View } from 'react-native'; +import ApplicationHeader from './ApplicationHeader'; +import CategoryItem from './CategoryItem'; + +const LessonCategories = () => { + const { categoriesContainerStyle, categoriesListStyle } = styles; + + return ( + + + + + + + + + + ); +}; + +const styles = { + categoriesListStyle: { + flexDirection: 'column', + flex: 1 + }, + + categoriesContainerStyle: { + flex: 1, flexDirection: 'column' + } +}; + +export default LessonCategories; diff --git a/src/components/Question.js b/src/components/Question.js new file mode 100644 index 0000000..cda3dc5 --- /dev/null +++ b/src/components/Question.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { Text, TouchableOpacity } from 'react-native'; + +const Question = (props) => { + const { containerStyle, questionTextStyle } = styles; + return ( + console.log(props.questionText)} + style={containerStyle} + > + + {props.questionText} + + + ); +}; + +const styles = { + questionTextStyle: { + fontSize: 25, + color: '#000', + padding: 20 + }, + + containerStyle: { + backgroundColor: '#fff', + justifyContent: 'center', + alignItems: 'center', + flex: 1 + } +}; + +export default Question;