├── .gitignore ├── Chapter01 └── 1. tasks │ ├── 01. Basic ListView Rendering │ ├── app │ │ └── components │ │ │ └── TasksList │ │ │ └── index.js │ └── index.ios.js │ ├── 02. ListView With TextInput │ ├── app │ │ └── components │ │ │ └── TasksList │ │ │ ├── index.js │ │ │ └── styles.js │ └── index.ios.js │ ├── 03. asyncstorage │ ├── app │ │ └── components │ │ │ └── TasksList │ │ │ ├── index.js │ │ │ └── styles.js │ └── index.ios.js │ └── 04. Completing Tasks and TasksListCell │ ├── app │ └── components │ │ ├── TasksList │ │ ├── index.js │ │ └── styles.js │ │ └── TasksListCell │ │ └── index.js │ └── index.ios.js ├── Chapter02 └── 2. advanced tasks │ ├── 01. Basic NavigatorIOS │ └── index.js │ ├── 01. NavigatorIOS and Basic EditTask │ ├── app │ │ └── components │ │ │ ├── EditTask │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ ├── TasksList │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ └── TasksListCell │ │ │ └── index.js │ └── index.ios.js │ ├── 02. Basic DatePicker │ ├── app │ │ └── components │ │ │ ├── EditTask │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ ├── TasksList │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ └── TasksListCell │ │ │ └── index.js │ └── index.ios.js │ ├── 02. Basic EditTask │ ├── index.js │ └── styles.js │ ├── 03. Basic ExpandableCell │ ├── app │ │ └── components │ │ │ ├── EditTask │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ ├── ExpandableCell │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ ├── TasksList │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ └── TasksListCell │ │ │ └── index.js │ └── index.ios.js │ ├── 03. TasksList Onpress │ ├── index.js │ └── styles.js │ ├── 04. EditTask DatePickerIOS │ ├── index.js │ └── styles.js │ ├── 04. ExpandableCell With DatePickerIOS │ ├── app │ │ └── components │ │ │ ├── EditTask │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ ├── ExpandableCell │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ ├── TasksList │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ └── TasksListCell │ │ │ └── index.js │ └── index.ios.js │ ├── 05. ExpandableCall Prop Validation │ └── index.js │ ├── 05. ExpandableCell With Clear Date Functionality │ ├── app │ │ └── components │ │ │ ├── EditTask │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ ├── ExpandableCell │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ ├── TasksList │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ └── TasksListCell │ │ │ └── index.js │ └── index.ios.js │ ├── 06. Switch │ ├── app │ │ └── components │ │ │ ├── EditTask │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ ├── ExpandableCell │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ ├── TasksList │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ └── TasksListCell │ │ │ └── index.js │ └── index.ios.js │ ├── 06. expandablecell functioning │ ├── EditTask │ │ └── index.js │ └── ExpandableCell │ │ ├── index.js │ │ └── styles.js │ ├── 07. ExpandableCell With Conditional Text │ ├── EditTask │ │ ├── index.js │ │ └── styles.js │ └── ExpandableCell │ │ ├── index.js │ │ └── styles.js │ ├── 07. Saving Tasks │ ├── app │ │ └── components │ │ │ ├── EditTask │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ ├── ExpandableCell │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ ├── TasksList │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ └── TasksListCell │ │ │ └── index.js │ └── index.ios.js │ ├── 08. EditTask with ClearDate Button │ ├── EditTask │ │ ├── index.js │ │ └── styles.js │ └── ExpandableCell │ │ ├── index.js │ │ └── styles.js │ ├── 08. TasksListCell Due Date Text │ ├── app │ │ └── components │ │ │ ├── EditTask │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ ├── ExpandableCell │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ ├── TasksList │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ └── TasksListCell │ │ │ ├── index.js │ │ │ └── styles.js │ └── index.ios.js │ ├── 09. Android Port │ ├── app │ │ └── components │ │ │ ├── EditTask │ │ │ ├── index.android.js │ │ │ ├── index.ios.js │ │ │ └── styles.js │ │ │ ├── ExpandableCell │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ ├── TasksList │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ └── TasksListCell │ │ │ ├── index.js │ │ │ └── styles.js │ ├── index.android.js │ └── index.ios.js │ ├── 09. Basic Switch │ └── index.js │ ├── 10. Saving Edited Tasks │ ├── DatePickerDialogue │ │ ├── index.js │ │ └── styles.js │ ├── EditTask │ │ ├── index.js │ │ └── styles.js │ ├── ExpandableCell │ │ ├── index.js │ │ └── styles.js │ ├── README.md │ ├── TasksList │ │ ├── index.js │ │ └── styles.js │ └── TasksListCell │ │ ├── index.js │ │ └── styles.js │ ├── 11. Sample Navigator │ └── index.js │ ├── 12. Android │ ├── app │ │ └── components │ │ │ ├── DatePickerDialogue │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ ├── EditTask │ │ │ ├── index.android.js │ │ │ ├── index.ios.js │ │ │ └── styles.js │ │ │ ├── ExpandableCell │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ ├── TasksList │ │ │ ├── index.js │ │ │ └── styles.js │ │ │ └── TasksListCell │ │ │ ├── index.js │ │ │ └── styles.js │ └── index.android.js │ └── Images │ ├── Screen Shot 2016-08-21 at 6.37.12 PM.png │ ├── Screen Shot 2016-08-24 at 8.12.22 PM.png │ ├── Screen Shot 2016-08-24 at 8.15.54 PM.png │ ├── Screen Shot 2016-08-24 at 8.15.56 PM.png │ ├── Screen Shot 2016-08-28 at 9.42.57 PM.png │ ├── Screen Shot 2016-08-28 at 9.43.14 PM.png │ ├── Screen Shot 2016-08-30 at 9.38.12 PM.png │ └── Screen Shot 2016-09-01 at 10.17.12 PM.png ├── Chapter03 └── 3. expenses │ ├── 01. simple app.js entry │ ├── app │ │ ├── App.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 02. enterbudget screen │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ └── EnterBudget │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 03. addexpenses button │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── AddExpenses │ │ │ │ └── index.js │ │ │ └── EnterBudget │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 04. addexpensesmodal textinputs │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── AddExpenses │ │ │ │ └── index.js │ │ │ ├── AddExpensesModal │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── EnterBudget │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── ExpandableCell │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 05. AddExpensesModal DatePicker │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── AddExpenses │ │ │ │ └── index.js │ │ │ ├── AddExpensesModal │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── EnterBudget │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── ExpandableCell │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 06. AddExpensesModal ScrollView │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── AddExpenses │ │ │ │ └── index.js │ │ │ ├── AddExpensesModal │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── EnterBudget │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── ExpandableCell │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 07. AddExpensesModal Save and Close Buttons │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── AddExpenses │ │ │ │ └── index.js │ │ │ ├── AddExpensesModal │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── EnterBudget │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── ExpandableCell │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ └── 08. CurrentMonthExpenses List │ ├── app │ ├── App.js │ ├── components │ │ ├── AddExpenses │ │ │ └── index.js │ │ ├── AddExpensesModal │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── CurrentMonthExpenses │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── EnterBudget │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── ExpandableCell │ │ │ ├── index.js │ │ │ └── styles.js │ │ └── ExpenseRow │ │ │ ├── index.js │ │ │ └── styles.js │ ├── styles.js │ └── utils │ │ ├── dateMethods.js │ │ └── storageMethods.js │ └── index.ios.js ├── Chapter04 └── 4. advanced expenses │ ├── 01. category picker │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── AddExpenses │ │ │ │ └── index.js │ │ │ ├── AddExpensesModal │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── CurrentMonthExpenses │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── EnterBudget │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── ExpandableCell │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── ExpenseRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ ├── iconMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 02. category in currentmonthlist and expensesrow │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── AddExpenses │ │ │ │ └── index.js │ │ │ ├── AddExpensesModal │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── CurrentMonthExpenses │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── EnterBudget │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── ExpandableCell │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── ExpenseRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ ├── iconMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 03. progressviewios │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── AddExpenses │ │ │ │ └── index.js │ │ │ ├── AddExpensesModal │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── CurrentMonthExpenses │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── EnterBudget │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── ExpandableCell │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── ExpenseRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ ├── iconMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 04. Updating Mock Data │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── AddExpenses │ │ │ │ └── index.js │ │ │ ├── AddExpensesModal │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── CurrentMonthExpenses │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── EnterBudget │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── ExpandableCell │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── ExpenseRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ ├── iconMethods.js │ │ │ ├── mockDataMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 05. PreviousMonthsList │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── AddExpenses │ │ │ │ └── index.js │ │ │ ├── AddExpensesModal │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── CurrentMonthExpenses │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── EnterBudget │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── ExpandableCell │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── ExpenseRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── PreviousMonthsList │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ ├── iconMethods.js │ │ │ ├── mockDataMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 06. TabBarIOS │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── AddExpenses │ │ │ │ └── index.js │ │ │ ├── AddExpensesModal │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── CurrentMonthExpenses │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── EnterBudget │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── ExpandableCell │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── ExpenseRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── PreviousMonthsList │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ ├── iconMethods.js │ │ │ ├── mockDataMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 07. Deleting Expenses │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── AddExpenses │ │ │ │ └── index.js │ │ │ ├── AddExpensesModal │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── CurrentMonthExpenses │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── EnterBudget │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── ExpandableCell │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── ExpenseRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── PreviousMonthsList │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ ├── iconMethods.js │ │ │ ├── mockDataMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ └── 08. Android │ ├── app │ ├── App.android.js │ ├── App.ios.js │ ├── components │ │ ├── AddExpenses │ │ │ └── index.js │ │ ├── AddExpensesModal │ │ │ ├── index.android.js │ │ │ ├── index.ios.js │ │ │ └── styles.js │ │ ├── CurrentMonthExpenses │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── Drawer │ │ │ ├── index.android.js │ │ │ └── styles.js │ │ ├── DrawerRow │ │ │ ├── index.android.js │ │ │ └── styles.js │ │ ├── EnterBudget │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── ExpandableCell │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── ExpenseRow │ │ │ ├── index.js │ │ │ └── styles.js │ │ └── PreviousMonthsList │ │ │ ├── index.js │ │ │ └── styles.js │ ├── styles.js │ └── utils │ │ ├── dateMethods.js │ │ ├── iconMethods.js │ │ ├── mockDataMethods.js │ │ └── storageMethods.js │ ├── index.android.js │ └── index.ios.js ├── Chapter05 └── 5. friends │ ├── 01. Basic Login │ └── index.ios.js │ ├── 02. GraphMethods Utils and App Component │ ├── app │ │ ├── App.js │ │ ├── styles.js │ │ └── utils │ │ │ └── graphMethods.js │ └── index.ios.js │ ├── 03. loginpage component │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ └── LoginPage │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── graphMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 04. StorageMethods │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ └── LoginPage │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── graphMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 05. activityindicator │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── FeedLisrtRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── FeedList │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── LoginPage │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── graphMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ └── 06. FeedList │ ├── app │ ├── App.js │ ├── components │ │ ├── FeedList │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── FeedListRow │ │ │ ├── index.js │ │ │ └── styles.js │ │ └── LoginPage │ │ │ ├── index.js │ │ │ └── styles.js │ ├── styles.js │ └── utils │ │ ├── dateMethods.js │ │ ├── graphMethods.js │ │ └── storageMethods.js │ └── index.ios.js ├── Chapter06 └── 6. advanced friends │ ├── 01. postview │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── FeedList │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── FeedListRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── LoginPage │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── PostView │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ ├── graphMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 02. commentlist │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── CommentList │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── CommentListRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── FeedList │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── FeedListRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── LoginPage │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── PostView │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ ├── graphMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 03. refreshcontrol │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── CommentList │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── CommentListRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── FeedList │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── FeedListRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── LoginPage │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── PostView │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ ├── graphMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 04. Image │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── CommentList │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── CommentListRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── FeedList │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── FeedListRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── LoginPage │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── PostView │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ ├── graphMethods.js │ │ │ ├── imageMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 05. WebView │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── CommentList │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── CommentListRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── FeedList │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── FeedListRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── LoginPage │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── PostView │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── WebViewComponent │ │ │ │ └── index.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ ├── graphMethods.js │ │ │ ├── imageMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ ├── 06. TabBarIOS │ ├── app │ │ ├── App.js │ │ ├── components │ │ │ ├── CommentList │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── CommentListRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── FeedList │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── FeedListRow │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── LoginPage │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── PostView │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── WebViewComponent │ │ │ │ └── index.js │ │ ├── styles.js │ │ └── utils │ │ │ ├── dateMethods.js │ │ │ ├── graphMethods.js │ │ │ ├── imageMethods.js │ │ │ └── storageMethods.js │ └── index.ios.js │ └── 07. Android │ ├── app │ ├── App.android.js │ ├── App.ios.js │ ├── components │ │ ├── CommentList │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── CommentListRow │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── Drawer │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── DrawerRow │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── FeedList │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── FeedListRow │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── LoginPage │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── PostView │ │ │ ├── index.js │ │ │ └── styles.js │ │ └── WebViewComponent │ │ │ └── index.js │ ├── styles.js │ └── utils │ │ ├── dateMethods.js │ │ ├── graphMethods.js │ │ ├── imageMethods.js │ │ └── storageMethods.js │ ├── index.android.js │ └── index.ios.js ├── Chapter07 └── 7. tasks redux │ ├── 01. basic taskslistcontainer │ ├── app │ │ ├── actions │ │ │ └── index.js │ │ ├── components │ │ │ ├── EditTask │ │ │ │ ├── index.android.js │ │ │ │ ├── index.ios.js │ │ │ │ └── styles.js │ │ │ ├── ExpandableCell │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── TasksList │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── TasksListCell │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── containers │ │ │ ├── AppContainer.android.js │ │ │ ├── AppContainer.ios.js │ │ │ └── TasksListContainer │ │ │ │ └── index.js │ │ ├── index.js │ │ └── reducers │ │ │ └── index.js │ ├── index.android.js │ └── index.ios.js │ ├── 02. EditTasks │ ├── app │ │ ├── actions │ │ │ └── index.js │ │ ├── components │ │ │ ├── EditTask │ │ │ │ ├── index.android.js │ │ │ │ ├── index.ios.js │ │ │ │ └── styles.js │ │ │ ├── ExpandableCell │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── TasksList │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── TasksListCell │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── containers │ │ │ ├── AppContainer.android.js │ │ │ ├── AppContainer.ios.js │ │ │ ├── EditTaskContainer │ │ │ │ └── index.js │ │ │ └── TasksListContainer │ │ │ │ └── index.js │ │ ├── index.js │ │ └── reducers │ │ │ └── index.js │ ├── index.android.js │ └── index.ios.js │ └── 03. Redux-Thunk │ ├── app │ ├── actions │ │ └── index.js │ ├── components │ │ ├── EditTask │ │ │ ├── index.android.js │ │ │ ├── index.ios.js │ │ │ └── styles.js │ │ ├── ExpandableCell │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── TasksList │ │ │ ├── index.js │ │ │ └── styles.js │ │ └── TasksListCell │ │ │ ├── index.js │ │ │ └── styles.js │ ├── containers │ │ ├── AppContainer.android.js │ │ ├── AppContainer.ios.js │ │ ├── EditTaskContainer │ │ │ └── index.js │ │ └── TasksListContainer │ │ │ └── index.js │ ├── index.js │ ├── reducers │ │ └── index.js │ └── utils │ │ └── storageMethods.js │ ├── index.android.js │ └── index.ios.js ├── Chapter08 └── 8. deploying apps │ ├── Book Images │ ├── Screen Shot 2016-12-24 at 11.51.42 PM.png │ ├── Screen Shot 2016-12-24 at 11.52.06 PM.png │ ├── Screen Shot 2016-12-24 at 11.52.20 PM.png │ ├── Screen Shot 2016-12-24 at 11.52.25 PM.png │ ├── Screen Shot 2016-12-24 at 11.52.36 PM.png │ ├── Screen Shot 2016-12-24 at 11.52.55 PM.png │ ├── Screen Shot 2016-12-24 at 11.53.23 PM.png │ ├── Screen Shot 2016-12-25 at 12.20.50 AM.png │ ├── Screen Shot 2016-12-25 at 12.22.19 AM.png │ ├── Screen Shot 2016-12-25 at 12.30.29 AM.png │ ├── Screen Shot 2016-12-25 at 12.33.05 AM.png │ ├── Screen Shot 2016-12-25 at 12.41.49 AM.png │ ├── Screen Shot 2016-12-27 at 10.03.18 PM.png │ ├── Screen Shot 2016-12-27 at 9.47.43 PM.png │ ├── Screen Shot 2016-12-28 at 11.09.08 PM.png │ ├── Screen Shot 2016-12-28 at 11.09.48 PM.png │ ├── Screen Shot 2016-12-28 at 11.12.01 PM.png │ ├── Screen Shot 2016-12-28 at 11.19.58 PM.png │ ├── Screen Shot 2016-12-28 at 11.22.03 PM.png │ ├── Screen Shot 2016-12-28 at 11.41.10 PM.png │ ├── Screen Shot 2016-12-28 at 11.44.08 PM.png │ ├── Screen Shot 2016-12-28 at 11.45.03 PM.png │ ├── Screen Shot 2016-12-29 at 10.06.49 PM.png │ ├── Screen Shot 2016-12-29 at 12.10.39 AM.png │ ├── Screen Shot 2016-12-29 at 12.12.51 AM.png │ ├── Screen Shot 2016-12-29 at 12.15.42 AM.png │ ├── Screen Shot 2016-12-29 at 12.28.07 AM.png │ ├── Screen Shot 2016-12-29 at 12.33.30 AM.png │ ├── Screen Shot 2016-12-29 at 12.33.38 AM.png │ ├── Screen Shot 2016-12-29 at 12.38.02 AM.png │ ├── Screen Shot 2016-12-29 at 12.38.17 AM.png │ ├── Screen Shot 2016-12-29 at 12.38.31 AM.png │ ├── Screen Shot 2016-12-29 at 12.41.41 AM.png │ ├── Screen Shot 2016-12-29 at 12.42.45 AM.png │ ├── Screen Shot 2016-12-29 at 12.46.03 AM.png │ ├── Screen Shot 2016-12-29 at 12.46.20 AM.png │ ├── Screen Shot 2016-12-29 at 9.57.07 PM.png │ ├── Screen Shot 2017-03-10 at 2.27.41 AM.png │ ├── Screen Shot 2017-03-10 at 2.36.39 AM.png │ ├── Screen Shot 2017-03-10 at 2.40.58 AM.png │ ├── Screen Shot 2017-03-10 at 2.41.23 AM.png │ ├── Screen Shot 2017-03-10 at 2.41.51 AM.png │ ├── Screen Shot 2017-03-10 at 2.42.14 AM.png │ ├── Screen Shot 2017-03-10 at 2.42.24 AM.png │ ├── Screen Shot 2017-03-10 at 2.56.48 AM.png │ ├── Screen Shot 2017-03-10 at 2.59.05 AM.png │ ├── Screen Shot 2017-03-10 at 2.59.08 AM.png │ ├── Screen Shot 2017-03-10 at 2.59.40 AM.png │ ├── Screen_Shot_2016-12-24_at_11_53_49_PM.png │ ├── Screen_Shot_2016-12-25_at_12_29_54_AM.png │ ├── Screen_Shot_2016-12-25_at_12_34_54_AM.png │ ├── Screen_Shot_2016-12-25_at_12_41_46_AM.png │ ├── Screen_Shot_2016-12-25_at_12_45_56_AM.png │ ├── Screen_Shot_2016-12-27_at_10_02_00_PM.png │ ├── Screen_Shot_2016-12-28_at_11_16_19_PM.png │ ├── Screen_Shot_2016-12-28_at_11_44_41_PM.png │ ├── Screen_Shot_2017-03-10_at_2_26_41_AM.png │ ├── Screen_Shot_2017-03-10_at_2_32_30_AM.png │ └── Screen_Shot_2017-03-10_at_2_40_09_AM.png │ ├── android │ ├── Android Feature Graphic.png │ ├── Screenshot_1483075351.png │ ├── Screenshot_1483075357.png │ ├── mipmap-hdpi │ │ └── ic_launcher.png │ ├── mipmap-mdpi │ │ └── ic_launcher.png │ ├── mipmap-xhdpi │ │ └── ic_launcher.png │ ├── mipmap-xxhdpi │ │ └── ic_launcher.png │ └── playstore-icon.png │ └── iOS │ ├── Icon-App-20x20@2x.png │ ├── Icon-App-20x20@3x.png │ ├── Icon-App-29x29@2x.png │ ├── Icon-App-29x29@3x.png │ ├── Icon-App-40x40@2x.png │ ├── Icon-App-40x40@3x.png │ ├── Icon-App-60x60@2x.png │ ├── Icon-App-60x60@3x.png │ ├── Simulator Screen Shot Dec 29, 2016, 12.33.01 AM.png │ ├── Simulator Screen Shot Dec 29, 2016, 12.33.05 AM.png │ └── iTunesArtwork@2x.png ├── Chapter09 └── 9. additional components │ ├── 01. fetch │ ├── app │ │ ├── index.js │ │ └── styles.js │ ├── index.android.js │ └── index.ios.js │ ├── 02. Picker │ ├── app │ │ ├── index.js │ │ └── styles.js │ ├── index.android.js │ └── index.ios.js │ ├── 03. Vibration │ ├── app │ │ ├── index.js │ │ └── styles.js │ ├── index.android.js │ └── index.ios.js │ ├── 04. Linking │ ├── app │ │ ├── index.js │ │ └── styles.js │ ├── index.android.js │ └── index.ios.js │ ├── 05. slider │ ├── app │ │ ├── index.js │ │ └── styles.js │ ├── index.android.js │ └── index.ios.js │ ├── 06. actionsheetios │ ├── app │ │ ├── index.js │ │ └── styles.js │ ├── index.android.js │ └── index.ios.js │ └── 07. geolocation │ ├── app │ ├── index.js │ └── styles.js │ ├── index.android.js │ └── index.ios.js ├── LICENSE ├── README.md └── Richard Kho ├── 1. Tasks ├── 1. ListView │ ├── README.md │ └── index.js ├── 2. ListView With Data │ ├── README.md │ └── index.js ├── 3. ListView With Adding Data │ ├── README.md │ └── index.js ├── 4. ListView With AsyncStorage │ ├── README.md │ └── index.js ├── 5. ListView With Scrollable Styling │ ├── README.md │ └── index.js ├── 6. ListView With Task Completion │ ├── README.md │ ├── TasksList │ │ └── index.js │ └── TasksListCell │ │ └── index.js ├── Screen Shot 2016-07-23 at 1.31.30 PM.png ├── Screen Shot 2016-07-23 at 11.27.16 PM.png ├── Screen Shot 2016-07-24 at 9.46.38 PM.png └── Screen Shot 2016-07-30 at 5.48.58 PM.png ├── 2. Advanced Tasks ├── 01. Basic NavigatorIOS │ └── index.js ├── 02. Basic EditTask │ ├── index.js │ └── styles.js ├── 03. TasksList Onpress │ ├── index.js │ └── styles.js ├── 04. EditTask DatePickerIOS │ ├── index.js │ └── styles.js ├── 05. ExpandableCall Prop Validation │ └── index.js ├── 06. ExpandableCell Functioning │ ├── EditTask │ │ └── index.js │ └── ExpandableCell │ │ ├── index.js │ │ └── styles.js ├── 07. ExpandableCell With Conditional Text │ ├── EditTask │ │ ├── index.js │ │ └── styles.js │ └── ExpandableCell │ │ ├── index.js │ │ └── styles.js ├── 08. EditTask with ClearDate Button │ ├── EditTask │ │ ├── index.js │ │ └── styles.js │ └── ExpandableCell │ │ ├── index.js │ │ └── styles.js ├── 09. Basic Switch │ └── index.js ├── 10. Saving Edited Tasks │ ├── DatePickerDialogue │ │ ├── index.js │ │ └── styles.js │ ├── EditTask │ │ ├── index.js │ │ └── styles.js │ ├── ExpandableCell │ │ ├── index.js │ │ └── styles.js │ ├── README.md │ ├── TasksList │ │ ├── index.js │ │ └── styles.js │ └── TasksListCell │ │ ├── index.js │ │ └── styles.js ├── 11. Sample Navigator │ └── index.js └── Images │ ├── Screen Shot 2016-08-21 at 6.37.12 PM.png │ ├── Screen Shot 2016-08-24 at 8.12.22 PM.png │ ├── Screen Shot 2016-08-24 at 8.15.54 PM.png │ ├── Screen Shot 2016-08-24 at 8.15.56 PM.png │ ├── Screen Shot 2016-08-28 at 9.42.57 PM.png │ ├── Screen Shot 2016-08-28 at 9.43.14 PM.png │ ├── Screen Shot 2016-08-30 at 9.38.12 PM.png │ └── Screen Shot 2016-09-01 at 10.17.12 PM.png ├── 3. Expense ├── 01. Basic Enter Budget │ └── app │ │ ├── App.js │ │ ├── utils │ │ ├── dateMethods.js │ │ └── storageMethods.js │ │ └── views │ │ └── EnterBudget │ │ └── index.js ├── 02. AddBudget Modal │ └── app │ │ ├── App.js │ │ └── views │ │ └── AddExpense │ │ └── index.js ├── 03. CurrentMonthList │ └── app │ │ ├── App.js │ │ └── views │ │ ├── CurrentMonthList │ │ └── index.js │ │ └── ExpenseRow │ │ └── index.js └── Images │ ├── Screen Shot 2016-09-27 at 12.47.25 AM.png │ ├── Screen Shot 2016-09-27 at 12.48.52 AM.png │ ├── Screen Shot 2016-09-27 at 12.49.18 AM.png │ ├── Screen Shot 2016-09-27 at 12.50.23 AM.png │ ├── Screen Shot 2016-09-27 at 12.51.06 AM.png │ ├── Screen Shot 2016-09-30 at 11.50.16 PM.png │ ├── Screen Shot 2016-09-30 at 11.50.22 PM.png │ ├── Screen Shot 2016-09-30 at 11.53.27 PM.png │ └── Screen Shot 2016-10-02 at 12.42.15 AM.png └── 4. Advanced Expense ├── 01. Icon Methods └── iconMethods.js ├── 02. AddExpense With SelectCategory ├── AddExpense │ └── index.js ├── AddExpenseModal │ └── index.js └── SelectCategory │ └── index.js ├── 03. CurrentMonthList Updated With Category Icons ├── CurrentMonthList │ └── index.js └── ExpenseRow │ └── index.js ├── 04. PreviousMonthsList ├── App.js ├── utils │ ├── dateMethods.js │ ├── iconMethods.js │ └── storageMethods.js └── views │ ├── AddExpense │ └── index.js │ ├── AddExpenseModal │ └── index.js │ ├── CurrentMonthList │ └── index.js │ ├── EnterBudget │ └── index.js │ ├── ExpenseRow │ └── index.js │ ├── PreviousMonthsList │ └── index.js │ ├── SelectCategory │ └── index.js │ └── SelectedMonthList │ └── index.js ├── 05. TabBarIOS Implementation ├── App.js ├── utils │ ├── app │ │ ├── App.js │ │ ├── utils │ │ │ ├── dateMethods.js │ │ │ ├── iconMethods.js │ │ │ └── storageMethods.js │ │ └── views │ │ │ ├── AddExpense │ │ │ └── index.js │ │ │ ├── AddExpenseModal │ │ │ └── index.js │ │ │ ├── CurrentMonthList │ │ │ └── index.js │ │ │ ├── EnterBudget │ │ │ └── index.js │ │ │ ├── ExpenseRow │ │ │ └── index.js │ │ │ ├── PreviousMonthsList │ │ │ └── index.js │ │ │ ├── SelectCategory │ │ │ └── index.js │ │ │ └── SelectedMonthList │ │ │ └── index.js │ ├── dateMethods.js │ ├── iconMethods.js │ └── storageMethods.js └── views │ ├── AddExpense │ └── index.js │ ├── AddExpenseModal │ └── index.js │ ├── CurrentMonthList │ └── index.js │ ├── EnterBudget │ └── index.js │ ├── ExpenseRow │ └── index.js │ ├── PreviousMonthsList │ └── index.js │ ├── SelectCategory │ └── index.js │ └── SelectedMonthList │ └── index.js ├── Screen Shot 2016-10-04 at 11.01.03 PM.png ├── Screen Shot 2016-10-04 at 11.02.19 PM.png ├── Screen Shot 2016-10-05 at 11.17.55 PM.png ├── Screen Shot 2016-10-06 at 11.15.46 PM.png └── Screen Shot 2016-10-07 at 9.14.42 PM.png /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /Chapter01/1. tasks/01. Basic ListView Rendering/index.ios.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | AppRegistry, 4 | View 5 | } from 'react-native'; 6 | 7 | import TasksList from './app/components/TasksList'; 8 | 9 | export default class Tasks extends Component { 10 | render() { 11 | return ( 12 | 13 | 14 | 15 | ); 16 | } 17 | } 18 | 19 | const styles = StyleSheet.create({ 20 | container: { 21 | flex: 1, 22 | justifyContent: 'center', 23 | alignItems: 'center', 24 | backgroundColor: '#F5FCFF', 25 | } 26 | }); 27 | 28 | AppRegistry.registerComponent('Tasks', () => Tasks); 29 | -------------------------------------------------------------------------------- /Chapter01/1. tasks/02. ListView With TextInput/app/components/TasksList/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1 6 | }, 7 | textInput: { 8 | borderColor: 'gray', 9 | borderWidth: 1, 10 | height: 40 11 | } 12 | }); 13 | 14 | export default styles; 15 | -------------------------------------------------------------------------------- /Chapter01/1. tasks/02. ListView With TextInput/index.ios.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | AppRegistry, 4 | View 5 | } from 'react-native'; 6 | 7 | import TasksList from './app/components/TasksList'; 8 | 9 | export default class Tasks extends Component { 10 | render() { 11 | return ( 12 | 13 | 14 | 15 | ); 16 | } 17 | } 18 | 19 | AppRegistry.registerComponent('Tasks', () => Tasks); 20 | -------------------------------------------------------------------------------- /Chapter01/1. tasks/03. asyncstorage/app/components/TasksList/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1 6 | }, 7 | textInput: { 8 | borderColor: 'gray', 9 | borderWidth: 1, 10 | height: 40 11 | } 12 | }); 13 | 14 | export default styles; 15 | -------------------------------------------------------------------------------- /Chapter01/1. tasks/03. asyncstorage/index.ios.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | AppRegistry, 4 | View 5 | } from 'react-native'; 6 | 7 | import TasksList from './app/components/TasksList'; 8 | 9 | export default class Tasks extends Component { 10 | render() { 11 | return ( 12 | 13 | 14 | 15 | ); 16 | } 17 | } 18 | 19 | AppRegistry.registerComponent('Tasks', () => Tasks); 20 | -------------------------------------------------------------------------------- /Chapter01/1. tasks/04. Completing Tasks and TasksListCell/app/components/TasksList/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1 6 | }, 7 | textInput: { 8 | borderColor: 'gray', 9 | borderWidth: 1, 10 | height: 40 11 | } 12 | }); 13 | 14 | export default styles; 15 | -------------------------------------------------------------------------------- /Chapter01/1. tasks/04. Completing Tasks and TasksListCell/index.ios.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | AppRegistry, 4 | View 5 | } from 'react-native'; 6 | 7 | import TasksList from './app/components/TasksList'; 8 | 9 | export default class Tasks extends Component { 10 | render() { 11 | return ( 12 | 13 | 14 | 15 | ); 16 | } 17 | } 18 | 19 | AppRegistry.registerComponent('Tasks', () => Tasks); 20 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/01. Basic NavigatorIOS/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter02/2. advanced tasks/01. Basic NavigatorIOS/index.js -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/01. NavigatorIOS and Basic EditTask/app/components/EditTask/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | import { 4 | Text, 5 | View 6 | } from 'react-native'; 7 | 8 | import styles from './styles'; 9 | 10 | export default class EditTask extends Component { 11 | render () { 12 | return ( 13 | 14 | Editing Task 15 | 16 | ); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/01. NavigatorIOS and Basic EditTask/app/components/EditTask/styles.js: -------------------------------------------------------------------------------- 1 | import { Navigator, StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | editTaskContainer: { 5 | flex: 1, 6 | paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 7 | }, 8 | editTaskText: { 9 | fontSize: 36 10 | } 11 | }) 12 | 13 | export default styles; 14 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/01. NavigatorIOS and Basic EditTask/app/components/TasksList/styles.js: -------------------------------------------------------------------------------- 1 | import { Navigator, StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 7 | }, 8 | listView: { 9 | margin: 10, 10 | padding: 10 11 | }, 12 | textInput: { 13 | borderColor: 'gray', 14 | borderWidth: 1, 15 | height: 40, 16 | margin: 10, 17 | padding: 10 18 | } 19 | }); 20 | 21 | export default styles; 22 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/01. NavigatorIOS and Basic EditTask/index.ios.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | AppRegistry, 4 | NavigatorIOS, 5 | StyleSheet, 6 | View 7 | } from 'react-native'; 8 | 9 | import TasksList from './app/components/TasksList'; 10 | 11 | export default class Tasks extends Component { 12 | render() { 13 | return ( 14 | 21 | ); 22 | } 23 | } 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | flex: 1 28 | } 29 | }) 30 | 31 | AppRegistry.registerComponent('Tasks', () => Tasks); 32 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/02. Basic DatePicker/app/components/EditTask/styles.js: -------------------------------------------------------------------------------- 1 | import { Navigator, StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | editTaskContainer: { 5 | flex: 1, 6 | paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 7 | } 8 | }) 9 | 10 | export default styles; 11 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/02. Basic DatePicker/app/components/TasksList/styles.js: -------------------------------------------------------------------------------- 1 | import { Navigator, StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 7 | }, 8 | listView: { 9 | margin: 10, 10 | padding: 10 11 | }, 12 | textInput: { 13 | borderColor: 'gray', 14 | borderWidth: 1, 15 | height: 40, 16 | margin: 10, 17 | padding: 10 18 | } 19 | }); 20 | 21 | export default styles; 22 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/02. Basic DatePicker/index.ios.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | AppRegistry, 4 | NavigatorIOS, 5 | StyleSheet, 6 | View 7 | } from 'react-native'; 8 | 9 | import TasksList from './app/components/TasksList'; 10 | 11 | export default class Tasks extends Component { 12 | render() { 13 | return ( 14 | 21 | ); 22 | } 23 | } 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | flex: 1 28 | } 29 | }) 30 | 31 | AppRegistry.registerComponent('Tasks', () => Tasks); 32 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/02. Basic EditTask/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | import { 4 | Text, 5 | View 6 | } from 'react-native'; 7 | 8 | import styles from './styles'; 9 | 10 | class EditTask extends Component { 11 | render () { 12 | return ( 13 | 14 | EditTask List 15 | 16 | ) 17 | } 18 | } 19 | 20 | export default EditTask; 21 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/02. Basic EditTask/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | editTaskContainer: { 5 | flex: 1 6 | }, 7 | editTaskText: { 8 | fontSize: 36, 9 | paddingTop: 65 10 | } 11 | }) 12 | 13 | export default styles; 14 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/03. Basic ExpandableCell/app/components/EditTask/styles.js: -------------------------------------------------------------------------------- 1 | import { Navigator, StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | editTaskContainer: { 5 | flex: 1, 6 | paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 7 | } 8 | }) 9 | 10 | export default styles; 11 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/03. Basic ExpandableCell/app/components/ExpandableCell/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | expandableCellContainer: { 5 | flex: 1, 6 | padding: 10, 7 | paddingTop: 0 8 | }, 9 | hiddenContent: { 10 | overflow: 'hidden' 11 | }, 12 | visibleContent: { 13 | fontSize: 16 14 | } 15 | }) 16 | 17 | export default styles; 18 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/03. Basic ExpandableCell/app/components/TasksList/styles.js: -------------------------------------------------------------------------------- 1 | import { Navigator, StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 7 | }, 8 | listView: { 9 | margin: 10, 10 | padding: 10 11 | }, 12 | textInput: { 13 | borderColor: 'gray', 14 | borderWidth: 1, 15 | height: 40, 16 | margin: 10, 17 | padding: 10 18 | } 19 | }); 20 | 21 | export default styles; 22 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/03. Basic ExpandableCell/index.ios.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | AppRegistry, 4 | NavigatorIOS, 5 | StyleSheet, 6 | View 7 | } from 'react-native'; 8 | 9 | import TasksList from './app/components/TasksList'; 10 | 11 | export default class Tasks extends Component { 12 | render() { 13 | return ( 14 | 21 | ); 22 | } 23 | } 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | flex: 1 28 | } 29 | }) 30 | 31 | AppRegistry.registerComponent('Tasks', () => Tasks); 32 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/03. TasksList Onpress/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | editTaskContainer: { 5 | flex: 1 6 | }, 7 | editTaskText: { 8 | fontSize: 36, 9 | paddingTop: 65 10 | } 11 | }) 12 | 13 | export default styles; 14 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/04. EditTask DatePickerIOS/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | editTaskContainer: { 5 | flex: 1, 6 | paddingTop: 64 7 | }, 8 | editTextInput: { 9 | height: 40, 10 | borderColor: 'gray', 11 | borderWidth: 1, 12 | margin: 10 13 | } 14 | }) 15 | 16 | export default styles; 17 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/04. ExpandableCell With DatePickerIOS/app/components/EditTask/styles.js: -------------------------------------------------------------------------------- 1 | import { Navigator, StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | editTaskContainer: { 5 | flex: 1, 6 | paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 7 | } 8 | }) 9 | 10 | export default styles; 11 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/04. ExpandableCell With DatePickerIOS/app/components/ExpandableCell/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | expandableCellContainer: { 5 | flex: 1, 6 | padding: 10 7 | }, 8 | hiddenContent: { 9 | overflow: 'hidden' 10 | }, 11 | visibleContent: { 12 | fontSize: 16 13 | } 14 | }) 15 | 16 | export default styles; 17 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/04. ExpandableCell With DatePickerIOS/app/components/TasksList/styles.js: -------------------------------------------------------------------------------- 1 | import { Navigator, StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 7 | }, 8 | listView: { 9 | margin: 10, 10 | padding: 10 11 | }, 12 | textInput: { 13 | borderColor: 'gray', 14 | borderWidth: 1, 15 | height: 40, 16 | margin: 10, 17 | padding: 10 18 | } 19 | }); 20 | 21 | export default styles; 22 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/04. ExpandableCell With DatePickerIOS/index.ios.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | AppRegistry, 4 | NavigatorIOS, 5 | StyleSheet, 6 | View 7 | } from 'react-native'; 8 | 9 | import TasksList from './app/components/TasksList'; 10 | 11 | export default class Tasks extends Component { 12 | render() { 13 | return ( 14 | 21 | ); 22 | } 23 | } 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | flex: 1 28 | } 29 | }) 30 | 31 | AppRegistry.registerComponent('Tasks', () => Tasks); 32 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/05. ExpandableCall Prop Validation/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | 3 | import { 4 | Text, 5 | TouchableHighlight, 6 | View 7 | } from 'react-native'; 8 | 9 | class SampleComponent extends Component { 10 | static propTypes = { 11 | collapsedComponent: PropTypes.any.isRequired, 12 | order: PropTypes.number, 13 | title: PropTypes.string.isRequired 14 | } 15 | 16 | constructor (props) { 17 | super (props); 18 | 19 | this.state = { 20 | expanded: false 21 | } 22 | } 23 | 24 | render () { 25 | return ( 26 | 27 | Expandable Cell: { this.props.title } 28 | 29 | ) 30 | } 31 | } 32 | 33 | export default SampleComponent; 34 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/05. ExpandableCell With Clear Date Functionality/app/components/EditTask/styles.js: -------------------------------------------------------------------------------- 1 | import { Navigator, StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | editTaskContainer: { 5 | flex: 1, 6 | paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 7 | }, 8 | expandableCellContainer: { 9 | flex: 1, 10 | overflow: 'hidden' 11 | }, 12 | clearDateButtonContainer: { 13 | flex: 1 14 | } 15 | }) 16 | 17 | export default styles; 18 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/05. ExpandableCell With Clear Date Functionality/app/components/ExpandableCell/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | expandableCellContainer: { 5 | flex: 1, 6 | padding: 10 7 | }, 8 | hiddenContent: { 9 | overflow: 'hidden' 10 | }, 11 | visibleContent: { 12 | fontSize: 16 13 | } 14 | }) 15 | 16 | export default styles; 17 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/05. ExpandableCell With Clear Date Functionality/app/components/TasksList/styles.js: -------------------------------------------------------------------------------- 1 | import { Navigator, StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 7 | }, 8 | listView: { 9 | margin: 10, 10 | padding: 10 11 | }, 12 | textInput: { 13 | borderColor: 'gray', 14 | borderWidth: 1, 15 | height: 40, 16 | margin: 10, 17 | padding: 10 18 | } 19 | }); 20 | 21 | export default styles; 22 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/05. ExpandableCell With Clear Date Functionality/index.ios.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | AppRegistry, 4 | NavigatorIOS, 5 | StyleSheet, 6 | View 7 | } from 'react-native'; 8 | 9 | import TasksList from './app/components/TasksList'; 10 | 11 | export default class Tasks extends Component { 12 | render() { 13 | return ( 14 | 21 | ); 22 | } 23 | } 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | flex: 1 28 | } 29 | }) 30 | 31 | AppRegistry.registerComponent('Tasks', () => Tasks); 32 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/06. Switch/app/components/EditTask/styles.js: -------------------------------------------------------------------------------- 1 | import { Navigator, StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | editTaskContainer: { 5 | flex: 1, 6 | paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight, 7 | }, 8 | expandableCellContainer: { 9 | flex: 1 10 | }, 11 | clearDateButtonContainer: { 12 | flex: 1 13 | }, 14 | switchContainer: { 15 | flex: 1, 16 | flexDirection: 'row', 17 | justifyContent: 'space-between', 18 | maxHeight: 50, 19 | padding: 10 20 | }, 21 | switchText: { 22 | fontSize: 16 23 | }, 24 | textInput: { 25 | borderColor: 'gray', 26 | borderWidth: 1, 27 | height: 40, 28 | margin: 10, 29 | padding: 10 30 | } 31 | }) 32 | 33 | export default styles; 34 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/06. Switch/app/components/ExpandableCell/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | expandableCellContainer: { 5 | flex: 1, 6 | padding: 10 7 | }, 8 | hiddenContent: { 9 | overflow: 'hidden' 10 | }, 11 | visibleContent: { 12 | fontSize: 16 13 | } 14 | }) 15 | 16 | export default styles; 17 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/06. Switch/app/components/TasksList/styles.js: -------------------------------------------------------------------------------- 1 | import { Navigator, StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 7 | }, 8 | listView: { 9 | margin: 10, 10 | padding: 10 11 | }, 12 | textInput: { 13 | borderColor: 'gray', 14 | borderWidth: 1, 15 | height: 40, 16 | margin: 10, 17 | padding: 10 18 | } 19 | }); 20 | 21 | export default styles; 22 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/06. Switch/index.ios.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | AppRegistry, 4 | NavigatorIOS, 5 | StyleSheet, 6 | View 7 | } from 'react-native'; 8 | 9 | import TasksList from './app/components/TasksList'; 10 | 11 | export default class Tasks extends Component { 12 | render() { 13 | return ( 14 | 21 | ); 22 | } 23 | } 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | flex: 1 28 | } 29 | }) 30 | 31 | AppRegistry.registerComponent('Tasks', () => Tasks); 32 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/06. expandablecell functioning/ExpandableCell/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | padding: 10, 7 | paddingTop: 0, 8 | }, 9 | visibleContent: { 10 | fontSize: 24 11 | }, 12 | collapsibleContent: { 13 | flex: 1, 14 | overflow: 'hidden', 15 | } 16 | }); 17 | 18 | export default styles; 19 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/07. ExpandableCell With Conditional Text/EditTask/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | editTaskContainer: { 5 | flex: 1, 6 | paddingTop: 64 7 | }, 8 | editTaskText: { 9 | fontSize: 36, 10 | paddingTop: 65 11 | }, 12 | editTextInput: { 13 | height: 40, 14 | borderColor: 'gray', 15 | borderWidth: 1, 16 | margin: 10 17 | }, 18 | datePicker: { 19 | height: 0 20 | } 21 | }) 22 | 23 | export default styles; 24 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/07. ExpandableCell With Conditional Text/ExpandableCell/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | padding: 10, 7 | paddingTop: 20, 8 | }, 9 | collapsibleContent: { 10 | flex: 1, 11 | overflow: 'hidden', 12 | }, 13 | secondaryDetails: { 14 | flex: 1, 15 | textAlign: 'right' 16 | }, 17 | textRow: { 18 | flex: 1, 19 | flexDirection: 'row', 20 | height: 30 21 | }, 22 | visibleContent: { 23 | flex: 1, 24 | textAlign: 'left' 25 | } 26 | }); 27 | 28 | export default styles; 29 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/07. Saving Tasks/app/components/ExpandableCell/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | expandableCellContainer: { 5 | flex: 1, 6 | padding: 10 7 | }, 8 | hiddenContent: { 9 | overflow: 'hidden' 10 | }, 11 | visibleContent: { 12 | fontSize: 16 13 | } 14 | }) 15 | 16 | export default styles; 17 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/07. Saving Tasks/app/components/TasksList/styles.js: -------------------------------------------------------------------------------- 1 | import { Navigator, StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 7 | }, 8 | listView: { 9 | margin: 10, 10 | padding: 10 11 | }, 12 | textInput: { 13 | borderColor: 'gray', 14 | borderWidth: 1, 15 | height: 40, 16 | margin: 10, 17 | padding: 10 18 | } 19 | }); 20 | 21 | export default styles; 22 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/07. Saving Tasks/index.ios.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | AppRegistry, 4 | NavigatorIOS, 5 | StyleSheet, 6 | View 7 | } from 'react-native'; 8 | 9 | import TasksList from './app/components/TasksList'; 10 | 11 | export default class Tasks extends Component { 12 | render() { 13 | return ( 14 | 21 | ); 22 | } 23 | } 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | flex: 1 28 | } 29 | }) 30 | 31 | AppRegistry.registerComponent('Tasks', () => Tasks); 32 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/08. EditTask with ClearDate Button/EditTask/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | clearDateRow: { 5 | flex: 1, 6 | padding: 10 7 | }, 8 | container: { 9 | flex: 1 10 | }, 11 | datePicker: { 12 | height: 0 13 | }, 14 | editTaskContainer: { 15 | flex: 1, 16 | paddingTop: 64 17 | }, 18 | }) 19 | 20 | export default styles; 21 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/08. EditTask with ClearDate Button/ExpandableCell/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | clearDateRow: { 5 | flex: 1, 6 | padding: 10 7 | }, 8 | container: { 9 | flex: 1 10 | }, 11 | datePicker: { 12 | height: 0 13 | }, 14 | editTaskContainer: { 15 | flex: 1, 16 | paddingTop: 64 17 | }, 18 | }) 19 | 20 | export default styles; 21 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/08. TasksListCell Due Date Text/app/components/ExpandableCell/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | expandableCellContainer: { 5 | flex: 1, 6 | padding: 10 7 | }, 8 | hiddenContent: { 9 | overflow: 'hidden' 10 | }, 11 | visibleContent: { 12 | fontSize: 16 13 | } 14 | }) 15 | 16 | export default styles; 17 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/08. TasksListCell Due Date Text/app/components/TasksList/styles.js: -------------------------------------------------------------------------------- 1 | import { Navigator, StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 7 | }, 8 | listView: { 9 | margin: 10, 10 | padding: 10 11 | }, 12 | textInput: { 13 | borderColor: 'gray', 14 | borderWidth: 1, 15 | height: 40, 16 | margin: 10, 17 | padding: 10 18 | } 19 | }); 20 | 21 | export default styles; 22 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/08. TasksListCell Due Date Text/app/components/TasksListCell/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | dueDateText: { 5 | color: 'red', 6 | flex: 1, 7 | fontSize: 12, 8 | paddingTop: 0, 9 | textAlign: 'right' 10 | }, 11 | taskNameText: { 12 | fontSize: 20 13 | }, 14 | tasksListCellContainer: { 15 | flex: 1 16 | }, 17 | tasksListCellTextRow: { 18 | flex: 1 19 | } 20 | }); 21 | 22 | export default styles; 23 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/08. TasksListCell Due Date Text/index.ios.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | AppRegistry, 4 | NavigatorIOS, 5 | StyleSheet, 6 | View 7 | } from 'react-native'; 8 | 9 | import TasksList from './app/components/TasksList'; 10 | 11 | export default class Tasks extends Component { 12 | render() { 13 | return ( 14 | 21 | ); 22 | } 23 | } 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | flex: 1 28 | } 29 | }) 30 | 31 | AppRegistry.registerComponent('Tasks', () => Tasks); 32 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/09. Android Port/app/components/ExpandableCell/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | expandableCellContainer: { 5 | flex: 1, 6 | padding: 10 7 | }, 8 | hiddenContent: { 9 | overflow: 'hidden' 10 | }, 11 | visibleContent: { 12 | fontSize: 16 13 | } 14 | }) 15 | 16 | export default styles; 17 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/09. Android Port/app/components/TasksList/styles.js: -------------------------------------------------------------------------------- 1 | import { Navigator, StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | androidTextInput: { 5 | height: 40, 6 | margin: 10, 7 | padding: 10 8 | }, 9 | container: { 10 | flex: 1, 11 | paddingTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 12 | }, 13 | listView: { 14 | margin: 10, 15 | padding: 10 16 | }, 17 | textInput: { 18 | borderColor: 'gray', 19 | borderWidth: 1, 20 | height: 40, 21 | margin: 10, 22 | padding: 10 23 | } 24 | }); 25 | 26 | export default styles; 27 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/09. Android Port/app/components/TasksListCell/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | dueDateText: { 5 | color: 'red', 6 | flex: 1, 7 | fontSize: 12, 8 | paddingTop: 0, 9 | textAlign: 'right' 10 | }, 11 | taskNameText: { 12 | fontSize: 20 13 | }, 14 | tasksListCellContainer: { 15 | flex: 1 16 | }, 17 | tasksListCellTextRow: { 18 | flex: 1 19 | } 20 | }); 21 | 22 | export default styles; 23 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/09. Android Port/index.ios.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | AppRegistry, 4 | NavigatorIOS, 5 | StyleSheet, 6 | View 7 | } from 'react-native'; 8 | 9 | import TasksList from './app/components/TasksList'; 10 | 11 | export default class Tasks extends Component { 12 | render() { 13 | return ( 14 | 21 | ); 22 | } 23 | } 24 | 25 | const styles = StyleSheet.create({ 26 | container: { 27 | flex: 1 28 | } 29 | }) 30 | 31 | AppRegistry.registerComponent('Tasks', () => Tasks); 32 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/09. Basic Switch/index.js: -------------------------------------------------------------------------------- 1 | class SwitchTest extends Component { 2 | constructor (props) { 3 | super (props); 4 | 5 | this.state = { 6 | toggled: false 7 | } 8 | } 9 | 10 | render () { 11 | return ( 12 | 13 | { this._onValueChange(value) }} 15 | value={ this.state.toggled } /> 16 | 17 | ) 18 | } 19 | 20 | _onValueChange (value) { 21 | this.setState({ 22 | toggled: value 23 | }) 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/10. Saving Edited Tasks/DatePickerDialogue/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | secondaryDetails: { 5 | flex: 1, 6 | textAlign: 'right' 7 | }, 8 | textRow: { 9 | flex: 1, 10 | flexDirection: 'row', 11 | height: 30 12 | }, 13 | visibleContent: { 14 | flex: 1, 15 | textAlign: 'left' 16 | } 17 | }); 18 | 19 | export default styles; 20 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/10. Saving Edited Tasks/EditTask/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | clearDateRow: { 5 | flex: 1, 6 | padding: 10 7 | }, 8 | clearDateText: { 9 | color: 'red' 10 | }, 11 | container: { 12 | flex: 1, 13 | }, 14 | datePicker: { 15 | height: 0 16 | }, 17 | editTaskContainer: { 18 | flex: 1, 19 | paddingTop: 64, 20 | }, 21 | switchContainer: { 22 | flex: 1, 23 | flexDirection: 'row', 24 | justifyContent: 'space-between', 25 | padding: 10 26 | }, 27 | textInput: { 28 | height: 40, 29 | borderColor: 'gray', 30 | borderWidth: 1, 31 | margin: 10, 32 | padding: 5 33 | } 34 | }) 35 | 36 | export default styles; 37 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/10. Saving Edited Tasks/ExpandableCell/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | padding: 10, 7 | paddingTop: 20, 8 | }, 9 | collapsibleContent: { 10 | flex: 1, 11 | overflow: 'hidden', 12 | } 13 | }); 14 | 15 | export default styles; 16 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/10. Saving Edited Tasks/README.md: -------------------------------------------------------------------------------- 1 | # Notes about this section 2 | 3 | This is a bit different from what I have in the book right now. I refactored a few things. -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/10. Saving Edited Tasks/TasksList/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | tasksListContainer: { 5 | flex: 1, 6 | paddingTop: 64 7 | }, 8 | tasksListTextInput: { 9 | height: 40, 10 | borderColor: 'gray', 11 | borderWidth: 1, 12 | margin: 10, 13 | padding: 10 14 | }, 15 | tasksListView: { 16 | flex: 1 17 | } 18 | }); 19 | 20 | export default styles; 21 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/10. Saving Edited Tasks/TasksListCell/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | }, 7 | textContainer: { 8 | flex: 1, 9 | flexDirection: 'row', 10 | padding: 10 11 | }, 12 | rowText: { 13 | flex: 1, 14 | fontSize: 20, 15 | textAlign: 'left' 16 | }, 17 | dueDateText: { 18 | flex: 1, 19 | fontSize: 12, 20 | color: 'red', 21 | textAlign: 'right', 22 | paddingTop: 10 23 | } 24 | }); 25 | 26 | export default styles; 27 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/12. Android/app/components/DatePickerDialogue/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | secondaryDetails: { 5 | flex: 1, 6 | textAlign: 'right' 7 | }, 8 | textRow: { 9 | flex: 1, 10 | flexDirection: 'row', 11 | height: 30 12 | }, 13 | visibleContent: { 14 | flex: 1, 15 | textAlign: 'left' 16 | } 17 | }); 18 | 19 | export default styles; 20 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/12. Android/app/components/EditTask/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | clearDateRow: { 5 | flex: 1, 6 | padding: 10 7 | }, 8 | clearDateText: { 9 | color: 'red' 10 | }, 11 | container: { 12 | flex: 1, 13 | }, 14 | datePicker: { 15 | height: 0 16 | }, 17 | editTaskContainer: { 18 | flex: 1, 19 | paddingTop: 64, 20 | }, 21 | switchContainer: { 22 | flex: 1, 23 | flexDirection: 'row', 24 | justifyContent: 'space-between', 25 | padding: 10 26 | }, 27 | textInput: { 28 | height: 40, 29 | borderColor: 'gray', 30 | borderWidth: 1, 31 | margin: 10, 32 | padding: 5 33 | } 34 | }) 35 | 36 | export default styles; 37 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/12. Android/app/components/ExpandableCell/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | padding: 10, 7 | paddingTop: 20, 8 | }, 9 | collapsibleContent: { 10 | flex: 1, 11 | overflow: 'hidden', 12 | } 13 | }); 14 | 15 | export default styles; 16 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/12. Android/app/components/TasksList/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | tasksListContainer: { 5 | flex: 1, 6 | paddingTop: 64 7 | }, 8 | tasksListTextInput: { 9 | height: 40, 10 | borderColor: 'gray', 11 | borderWidth: 1, 12 | margin: 10, 13 | padding: 10 14 | }, 15 | tasksListView: { 16 | flex: 1 17 | } 18 | }); 19 | 20 | export default styles; 21 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/12. Android/app/components/TasksListCell/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | }, 7 | textContainer: { 8 | flex: 1, 9 | flexDirection: 'row', 10 | padding: 10 11 | }, 12 | rowText: { 13 | flex: 1, 14 | fontSize: 20, 15 | textAlign: 'left' 16 | }, 17 | dueDateText: { 18 | flex: 1, 19 | fontSize: 12, 20 | color: 'red', 21 | textAlign: 'right', 22 | paddingTop: 10 23 | } 24 | }); 25 | 26 | export default styles; 27 | -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/Images/Screen Shot 2016-08-21 at 6.37.12 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter02/2. advanced tasks/Images/Screen Shot 2016-08-21 at 6.37.12 PM.png -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/Images/Screen Shot 2016-08-24 at 8.12.22 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter02/2. advanced tasks/Images/Screen Shot 2016-08-24 at 8.12.22 PM.png -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/Images/Screen Shot 2016-08-24 at 8.15.54 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter02/2. advanced tasks/Images/Screen Shot 2016-08-24 at 8.15.54 PM.png -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/Images/Screen Shot 2016-08-24 at 8.15.56 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter02/2. advanced tasks/Images/Screen Shot 2016-08-24 at 8.15.56 PM.png -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/Images/Screen Shot 2016-08-28 at 9.42.57 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter02/2. advanced tasks/Images/Screen Shot 2016-08-28 at 9.42.57 PM.png -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/Images/Screen Shot 2016-08-28 at 9.43.14 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter02/2. advanced tasks/Images/Screen Shot 2016-08-28 at 9.43.14 PM.png -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/Images/Screen Shot 2016-08-30 at 9.38.12 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter02/2. advanced tasks/Images/Screen Shot 2016-08-30 at 9.38.12 PM.png -------------------------------------------------------------------------------- /Chapter02/2. advanced tasks/Images/Screen Shot 2016-09-01 at 10.17.12 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter02/2. advanced tasks/Images/Screen Shot 2016-09-01 at 10.17.12 PM.png -------------------------------------------------------------------------------- /Chapter03/3. expenses/01. simple app.js entry/app/styles.js: -------------------------------------------------------------------------------- 1 | import { Navigator, StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | appContainer: { 5 | flex: 1, 6 | marginTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 7 | } 8 | }); 9 | 10 | export default styles; 11 | -------------------------------------------------------------------------------- /Chapter03/3. expenses/01. simple app.js entry/index.ios.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | AppRegistry, 4 | NavigatorIOS, 5 | StyleSheet 6 | } from 'react-native'; 7 | 8 | import App from './app/App'; 9 | 10 | export default class Expenses extends Component { 11 | render() { 12 | return ( 13 | 20 | ); 21 | } 22 | } 23 | 24 | const styles = StyleSheet.create({ 25 | container: { 26 | flex: 1, 27 | } 28 | }); 29 | 30 | AppRegistry.registerComponent('Expenses', () => Expenses); 31 | -------------------------------------------------------------------------------- /Chapter03/3. expenses/02. enterbudget screen/app/components/EnterBudget/styles.js: -------------------------------------------------------------------------------- 1 | import { Navigator, StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | enterBudgetContainer: { 5 | flex: 1, 6 | marginTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 7 | }, 8 | enterBudgetHeader: { 9 | color: '#3D4A53', 10 | fontSize: 24, 11 | margin: 10, 12 | textAlign: 'center' 13 | }, 14 | enterBudgetText: { 15 | color: '#3D4A53', 16 | fontSize: 16, 17 | margin: 10, 18 | textAlign: 'center' 19 | }, 20 | textInput: { 21 | height: 40, 22 | borderColor: '#86B2CA', 23 | borderWidth: 1, 24 | color: '#3D4A53', 25 | margin: 10, 26 | padding: 10, 27 | textAlign: 'center' 28 | } 29 | }); 30 | 31 | export default styles; 32 | -------------------------------------------------------------------------------- /Chapter03/3. expenses/02. enterbudget screen/app/styles.js: -------------------------------------------------------------------------------- 1 | import { Navigator, StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | appContainer: { 5 | flex: 1, 6 | marginTop: Navigator.NavigationBar.Styles.General.TotalNavHeight 7 | } 8 | }); 9 | 10 | export default styles; 11 | -------------------------------------------------------------------------------- /Chapter03/3. expenses/02. enterbudget screen/index.ios.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | AppRegistry, 4 | NavigatorIOS, 5 | StyleSheet 6 | } from 'react-native'; 7 | 8 | import App from './app/App'; 9 | 10 | export default class Expenses extends Component { 11 | render() { 12 | return ( 13 | 20 | ); 21 | } 22 | } 23 | 24 | const styles = StyleSheet.create({ 25 | container: { 26 | flex: 1, 27 | } 28 | }); 29 | 30 | AppRegistry.registerComponent('Expenses', () => Expenses); 31 | -------------------------------------------------------------------------------- /Chapter03/3. expenses/03. addexpenses button/app/components/AddExpenses/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | 3 | import { 4 | Button, 5 | View 6 | } from 'react-native'; 7 | 8 | export default class AddExpenses extends Component { 9 | static propTypes = { 10 | month: PropTypes.string.isRequired, 11 | year: PropTypes.string.isRequired 12 | } 13 | 14 | constructor (props) { 15 | super (props); 16 | } 17 | 18 | render () { 19 | return ( 20 | 21 |