├── .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 |
27 | )
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/Chapter03/3. expenses/03. addexpenses button/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/03. addexpenses button/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/03. addexpenses button/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/04. addexpensesmodal textinputs/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 |
--------------------------------------------------------------------------------
/Chapter03/3. expenses/04. addexpensesmodal textinputs/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/04. addexpensesmodal textinputs/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/05. AddExpensesModal DatePicker/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 |
--------------------------------------------------------------------------------
/Chapter03/3. expenses/05. AddExpensesModal DatePicker/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/05. AddExpensesModal DatePicker/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/06. AddExpensesModal ScrollView/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 |
--------------------------------------------------------------------------------
/Chapter03/3. expenses/06. AddExpensesModal ScrollView/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/06. AddExpensesModal ScrollView/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/07. AddExpensesModal Save and Close Buttons/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 |
--------------------------------------------------------------------------------
/Chapter03/3. expenses/07. AddExpensesModal Save and Close Buttons/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/07. AddExpensesModal Save and Close Buttons/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/08. CurrentMonthExpenses List/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 |
--------------------------------------------------------------------------------
/Chapter03/3. expenses/08. CurrentMonthExpenses List/app/components/ExpenseRow/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {
4 | Text,
5 | View
6 | } from 'react-native';
7 |
8 | import styles from './styles';
9 |
10 | export default (props) => {
11 | return (
12 |
13 |
14 | { props.description }
15 |
16 |
17 | { props.amount }
18 |
19 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/Chapter03/3. expenses/08. CurrentMonthExpenses List/app/components/ExpenseRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | amountText: {
5 | color: '#86B2CA',
6 | flex: 1,
7 | fontSize: 20,
8 | textAlign: 'right'
9 | },
10 | descriptionText: {
11 | color: '#7D878D',
12 | fontSize: 20,
13 | textAlign: 'left'
14 | },
15 | expenseRowContainer: {
16 | flexDirection: 'row',
17 | height: 50,
18 | padding: 10
19 | }
20 | });
21 |
22 | export default styles;
23 |
--------------------------------------------------------------------------------
/Chapter03/3. expenses/08. CurrentMonthExpenses List/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/08. CurrentMonthExpenses List/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/01. category picker/app/components/CurrentMonthExpenses/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | currentMonthExpensesContainer: {
5 | flex: 1,
6 | },
7 | currentMonthExpensesHeader: {
8 | height: 80,
9 | },
10 | headerText: {
11 | color: '#7D878D',
12 | fontSize: 24,
13 | marginBottom: 10,
14 | marginTop: 10,
15 | textAlign: 'center'
16 | },
17 | rowSeparator: {
18 | backgroundColor: '#7D878D',
19 | flex: 1,
20 | height: StyleSheet.hairlineWidth,
21 | marginLeft: 15,
22 | marginRight: 15
23 | },
24 | subText: {
25 | color: '#3D4A53',
26 | fontSize: 18,
27 | fontWeight: 'bold',
28 | textAlign: 'center'
29 | },
30 | });
31 |
32 | export default styles;
33 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/01. category picker/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/01. category picker/app/components/ExpenseRow/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {
4 | Text,
5 | View
6 | } from 'react-native';
7 |
8 | import styles from './styles';
9 |
10 | export default (props) => {
11 | return (
12 |
13 |
14 | { props.description }
15 |
16 |
17 | { props.amount }
18 |
19 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/01. category picker/app/components/ExpenseRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | amountText: {
5 | color: '#86B2CA',
6 | flex: 1,
7 | fontSize: 20,
8 | textAlign: 'right'
9 | },
10 | descriptionText: {
11 | color: '#7D878D',
12 | fontSize: 20,
13 | textAlign: 'left'
14 | },
15 | expenseRowContainer: {
16 | flexDirection: 'row',
17 | height: 50,
18 | padding: 10
19 | }
20 | });
21 |
22 | export default styles;
23 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/01. category picker/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/01. category picker/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/02. category in currentmonthlist and expensesrow/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/02. category in currentmonthlist and expensesrow/app/components/ExpenseRow/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {
4 | Text,
5 | View
6 | } from 'react-native';
7 |
8 | import * as iconMethods from '../../utils/iconMethods';
9 | import styles from './styles';
10 |
11 | export default (props) => {
12 | return (
13 |
14 |
15 | { iconMethods.getIconComponent(props.category) }
16 |
17 |
18 | { props.description }
19 |
20 |
21 | { props.amount }
22 |
23 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/02. category in currentmonthlist and expensesrow/app/components/ExpenseRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | amountText: {
5 | color: '#86B2CA',
6 | flex: 1,
7 | fontSize: 20,
8 | textAlign: 'right'
9 | },
10 | descriptionText: {
11 | color: '#7D878D',
12 | fontSize: 20,
13 | textAlign: 'left'
14 | },
15 | expenseRowContainer: {
16 | flexDirection: 'row',
17 | height: 50,
18 | padding: 10
19 | },
20 | icon: {
21 | flex: 1,
22 | marginLeft: 10
23 | }
24 | });
25 |
26 | export default styles;
27 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/02. category in currentmonthlist and expensesrow/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/02. category in currentmonthlist and expensesrow/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/03. progressviewios/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/03. progressviewios/app/components/ExpenseRow/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {
4 | Text,
5 | View
6 | } from 'react-native';
7 |
8 | import * as iconMethods from '../../utils/iconMethods';
9 | import styles from './styles';
10 |
11 | export default (props) => {
12 | return (
13 |
14 |
15 | { iconMethods.getIconComponent(props.category) }
16 |
17 |
18 | { props.description }
19 |
20 |
21 | { props.amount }
22 |
23 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/03. progressviewios/app/components/ExpenseRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | amountText: {
5 | alignSelf: 'center',
6 | color: '#86B2CA',
7 | flex: 1,
8 | fontSize: 16,
9 | marginRight: 10,
10 | textAlign: 'right'
11 | },
12 | descriptionText: {
13 | alignSelf: 'center',
14 | color: '#7D878D',
15 | fontSize: 16,
16 | textAlign: 'left'
17 | },
18 | expenseRowContainer: {
19 | flexDirection: 'row',
20 | height: 50,
21 | padding: 10
22 | },
23 | icon: {
24 | flex: 1,
25 | marginLeft: 10
26 | }
27 | });
28 |
29 | export default styles;
30 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/03. progressviewios/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/03. progressviewios/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/04. Updating Mock Data/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/04. Updating Mock Data/app/components/ExpenseRow/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {
4 | Text,
5 | View
6 | } from 'react-native';
7 |
8 | import * as iconMethods from '../../utils/iconMethods';
9 | import styles from './styles';
10 |
11 | export default (props) => {
12 | return (
13 |
14 |
15 | { iconMethods.getIconComponent(props.category) }
16 |
17 |
18 | { props.description }
19 |
20 |
21 | { props.amount }
22 |
23 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/04. Updating Mock Data/app/components/ExpenseRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | amountText: {
5 | alignSelf: 'center',
6 | color: '#86B2CA',
7 | flex: 1,
8 | fontSize: 16,
9 | marginRight: 10,
10 | textAlign: 'right'
11 | },
12 | descriptionText: {
13 | alignSelf: 'center',
14 | color: '#7D878D',
15 | fontSize: 16,
16 | textAlign: 'left'
17 | },
18 | expenseRowContainer: {
19 | flexDirection: 'row',
20 | height: 50,
21 | padding: 10
22 | },
23 | icon: {
24 | flex: 1,
25 | marginLeft: 10
26 | }
27 | });
28 |
29 | export default styles;
30 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/04. Updating Mock Data/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/04. Updating Mock Data/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/05. PreviousMonthsList/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/05. PreviousMonthsList/app/components/ExpenseRow/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {
4 | Text,
5 | View
6 | } from 'react-native';
7 |
8 | import * as iconMethods from '../../utils/iconMethods';
9 | import styles from './styles';
10 |
11 | export default (props) => {
12 | return (
13 |
14 |
15 | { iconMethods.getIconComponent(props.category) }
16 |
17 |
18 | { props.description }
19 |
20 |
21 | { props.amount }
22 |
23 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/05. PreviousMonthsList/app/components/ExpenseRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | amountText: {
5 | alignSelf: 'center',
6 | color: '#86B2CA',
7 | flex: 1,
8 | fontSize: 16,
9 | marginRight: 10,
10 | textAlign: 'right'
11 | },
12 | descriptionText: {
13 | alignSelf: 'center',
14 | color: '#7D878D',
15 | fontSize: 16,
16 | textAlign: 'left'
17 | },
18 | expenseRowContainer: {
19 | flexDirection: 'row',
20 | height: 50,
21 | padding: 10
22 | },
23 | icon: {
24 | flex: 1,
25 | marginLeft: 10
26 | }
27 | });
28 |
29 | export default styles;
30 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/05. PreviousMonthsList/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/05. PreviousMonthsList/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/06. TabBarIOS/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/06. TabBarIOS/app/components/ExpenseRow/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {
4 | Text,
5 | View
6 | } from 'react-native';
7 |
8 | import * as iconMethods from '../../utils/iconMethods';
9 | import styles from './styles';
10 |
11 | export default (props) => {
12 | return (
13 |
14 |
15 | { iconMethods.getIconComponent(props.category) }
16 |
17 |
18 | { props.description }
19 |
20 |
21 | { props.amount }
22 |
23 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/06. TabBarIOS/app/components/ExpenseRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | amountText: {
5 | alignSelf: 'center',
6 | color: '#86B2CA',
7 | flex: 1,
8 | fontSize: 16,
9 | marginRight: 10,
10 | textAlign: 'right'
11 | },
12 | descriptionText: {
13 | alignSelf: 'center',
14 | color: '#7D878D',
15 | fontSize: 16,
16 | textAlign: 'left'
17 | },
18 | expenseRowContainer: {
19 | flexDirection: 'row',
20 | height: 50,
21 | padding: 10
22 | },
23 | icon: {
24 | flex: 1,
25 | marginLeft: 10
26 | }
27 | });
28 |
29 | export default styles;
30 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/06. TabBarIOS/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 | marginBottom: 48
8 | },
9 | previousMonthsContainer: {
10 | flex: 1,
11 | marginBottom: 48
12 | }
13 | });
14 |
15 | export default styles;
16 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/06. TabBarIOS/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 |
21 | );
22 | }
23 | }
24 |
25 | const styles = StyleSheet.create({
26 | container: {
27 | flex: 1
28 | }
29 | });
30 |
31 | AppRegistry.registerComponent('Expenses', () => Expenses);
32 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/07. Deleting Expenses/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/07. Deleting Expenses/app/components/ExpenseRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | amountText: {
5 | alignSelf: 'center',
6 | color: '#86B2CA',
7 | flex: 1,
8 | fontSize: 16,
9 | marginRight: 10,
10 | textAlign: 'right'
11 | },
12 | descriptionText: {
13 | alignSelf: 'center',
14 | color: '#7D878D',
15 | fontSize: 16,
16 | textAlign: 'left'
17 | },
18 | expenseRowContainer: {
19 | flexDirection: 'row',
20 | height: 50,
21 | padding: 10
22 | },
23 | icon: {
24 | flex: 1,
25 | marginLeft: 10
26 | }
27 | });
28 |
29 | export default styles;
30 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/07. Deleting Expenses/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 | marginBottom: 48
8 | },
9 | previousMonthsContainer: {
10 | flex: 1,
11 | marginBottom: 48
12 | }
13 | });
14 |
15 | export default styles;
16 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/07. Deleting Expenses/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 |
21 | );
22 | }
23 | }
24 |
25 | const styles = StyleSheet.create({
26 | container: {
27 | flex: 1
28 | }
29 | });
30 |
31 | AppRegistry.registerComponent('Expenses', () => Expenses);
32 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/08. Android/app/components/Drawer/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1
6 | },
7 | separator: {
8 | height: StyleSheet.hairlineWidth,
9 | marginLeft: 10,
10 | marginRight: 10,
11 | backgroundColor: '#E5F2FD'
12 | }
13 | });
14 |
15 | export default styles;
16 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/08. Android/app/components/DrawerRow/index.android.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 DrawerRow extends Component {
11 |
12 | setNativeProps (props) {
13 | this._root.setNativeProps(props)
14 | }
15 |
16 | render () {
17 | return (
18 | this._root = component }
21 | { ...this.props }
22 | >
23 |
24 | { this.props.routeName }
25 |
26 |
27 | )
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/08. Android/app/components/DrawerRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | height: 40,
7 | padding: 10
8 | },
9 | rowTitle: {
10 | fontSize: 20,
11 | textAlign: 'left'
12 | }
13 | });
14 |
15 | export default styles;
16 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/08. Android/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 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/08. Android/app/components/ExpenseRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | amountText: {
5 | alignSelf: 'center',
6 | color: '#86B2CA',
7 | flex: 1,
8 | fontSize: 16,
9 | marginRight: 10,
10 | textAlign: 'right'
11 | },
12 | descriptionText: {
13 | alignSelf: 'center',
14 | color: '#7D878D',
15 | fontSize: 16,
16 | textAlign: 'left'
17 | },
18 | expenseRowContainer: {
19 | flexDirection: 'row',
20 | height: 50,
21 | padding: 10
22 | },
23 | icon: {
24 | flex: 1,
25 | marginLeft: 10
26 | }
27 | });
28 |
29 | export default styles;
30 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/08. Android/app/styles.js:
--------------------------------------------------------------------------------
1 | import { Navigator, StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | androidContainer: {
5 | flex: 1
6 | },
7 | appContainer: {
8 | flex: 1,
9 | marginTop: Navigator.NavigationBar.Styles.General.TotalNavHeight,
10 | marginBottom: 48
11 | },
12 | previousMonthsContainer: {
13 | flex: 1,
14 | marginBottom: 48
15 | }
16 | });
17 |
18 | export default styles;
19 |
--------------------------------------------------------------------------------
/Chapter04/4. advanced expenses/08. Android/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 |
21 | );
22 | }
23 | }
24 |
25 | const styles = StyleSheet.create({
26 | container: {
27 | flex: 1
28 | }
29 | });
30 |
31 | AppRegistry.registerComponent('Expenses', () => Expenses);
32 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/02. GraphMethods Utils and App Component/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/02. GraphMethods Utils and App Component/app/utils/graphMethods.js:
--------------------------------------------------------------------------------
1 | import {
2 | GraphRequest,
3 | GraphRequestManager
4 | } from 'react-native-fbsdk';
5 |
6 | const makeSingleGraphRequest = (request) => {
7 | return new GraphRequestManager().addRequest(request).start();
8 | }
9 |
10 | export const getFeed = (callback) => {
11 | const request = new GraphRequest('/me/feed', null, callback);
12 |
13 | makeSingleGraphRequest(request)
14 | }
15 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/02. GraphMethods Utils and App Component/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 Friends extends Component {
11 | render() {
12 | return (
13 |
20 | );
21 | }
22 | }
23 |
24 | const styles = StyleSheet.create({
25 | container: {
26 | flex: 1,
27 | backgroundColor: '#F5FCFF',
28 | }
29 | });
30 |
31 | AppRegistry.registerComponent('Friends', () => Friends);
32 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/03. loginpage component/app/components/LoginPage/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/03. loginpage component/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/03. loginpage component/app/utils/graphMethods.js:
--------------------------------------------------------------------------------
1 | import {
2 | GraphRequest,
3 | GraphRequestManager
4 | } from 'react-native-fbsdk';
5 |
6 | const makeSingleGraphRequest = (request) => {
7 | return new GraphRequestManager().addRequest(request).start();
8 | }
9 |
10 | export const getFeed = (callback) => {
11 | const request = new GraphRequest('/me/feed', null, callback);
12 |
13 | makeSingleGraphRequest(request)
14 | }
15 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/03. loginpage component/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 Friends extends Component {
11 | render() {
12 | return (
13 |
20 | );
21 | }
22 | }
23 |
24 | const styles = StyleSheet.create({
25 | container: {
26 | flex: 1,
27 | backgroundColor: '#F5FCFF',
28 | }
29 | });
30 |
31 | AppRegistry.registerComponent('Friends', () => Friends);
32 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/04. StorageMethods/app/components/LoginPage/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/04. StorageMethods/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/04. StorageMethods/app/utils/graphMethods.js:
--------------------------------------------------------------------------------
1 | import {
2 | GraphRequest,
3 | GraphRequestManager
4 | } from 'react-native-fbsdk';
5 |
6 | const makeSingleGraphRequest = (request) => {
7 | return new GraphRequestManager().addRequest(request).start();
8 | }
9 |
10 | export const getFeed = (callback) => {
11 | const request = new GraphRequest('/me/feed', null, callback);
12 |
13 | makeSingleGraphRequest(request)
14 | }
15 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/04. StorageMethods/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 Friends extends Component {
11 | render() {
12 | return (
13 |
20 | );
21 | }
22 | }
23 |
24 | const styles = StyleSheet.create({
25 | container: {
26 | flex: 1,
27 | backgroundColor: '#F5FCFF',
28 | }
29 | });
30 |
31 | AppRegistry.registerComponent('Friends', () => Friends);
32 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/05. activityindicator/app/components/FeedLisrtRow/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter05/5. friends/05. activityindicator/app/components/FeedLisrtRow/index.js
--------------------------------------------------------------------------------
/Chapter05/5. friends/05. activityindicator/app/components/FeedLisrtRow/styles.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter05/5. friends/05. activityindicator/app/components/FeedLisrtRow/styles.js
--------------------------------------------------------------------------------
/Chapter05/5. friends/05. activityindicator/app/components/FeedList/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter05/5. friends/05. activityindicator/app/components/FeedList/index.js
--------------------------------------------------------------------------------
/Chapter05/5. friends/05. activityindicator/app/components/FeedList/styles.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter05/5. friends/05. activityindicator/app/components/FeedList/styles.js
--------------------------------------------------------------------------------
/Chapter05/5. friends/05. activityindicator/app/components/LoginPage/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/05. activityindicator/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/05. activityindicator/app/utils/graphMethods.js:
--------------------------------------------------------------------------------
1 | import {
2 | GraphRequest,
3 | GraphRequestManager
4 | } from 'react-native-fbsdk';
5 |
6 | const makeSingleGraphRequest = (request) => {
7 | return new GraphRequestManager().addRequest(request).start();
8 | }
9 |
10 | export const getFeed = (callback) => {
11 | const request = new GraphRequest('/me/feed', null, callback);
12 |
13 | makeSingleGraphRequest(request)
14 | }
15 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/05. activityindicator/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 Friends extends Component {
11 | render() {
12 | return (
13 |
20 | );
21 | }
22 | }
23 |
24 | const styles = StyleSheet.create({
25 | container: {
26 | flex: 1,
27 | backgroundColor: '#F5FCFF',
28 | }
29 | });
30 |
31 | AppRegistry.registerComponent('Friends', () => Friends);
32 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/06. FeedList/app/components/FeedList/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | marginTop: 65
7 | },
8 | separator: {
9 | flex: 1,
10 | height: StyleSheet.hairlineWidth,
11 | marginLeft: 15,
12 | marginRight: 15,
13 | backgroundColor: '#1d2129'
14 | }
15 | });
16 |
17 | export default styles;
18 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/06. FeedList/app/components/FeedListRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | margin: 10
7 | },
8 | created: {
9 | color: '#365899',
10 | fontWeight: 'bold',
11 | marginBottom: 5
12 | },
13 | story: {
14 | marginBottom: 5,
15 | textDecorationLine: 'underline'
16 | }
17 | });
18 |
19 | export default styles;
20 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/06. FeedList/app/components/LoginPage/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/06. FeedList/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/06. FeedList/app/utils/dateMethods.js:
--------------------------------------------------------------------------------
1 | import moment from 'moment';
2 |
3 | export const getDateTimeString = (date) => {
4 | return moment(date).format('lll');
5 | }
6 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/06. FeedList/app/utils/graphMethods.js:
--------------------------------------------------------------------------------
1 | import {
2 | GraphRequest,
3 | GraphRequestManager
4 | } from 'react-native-fbsdk';
5 |
6 | const makeSingleGraphRequest = (request) => {
7 | return new GraphRequestManager().addRequest(request).start();
8 | }
9 |
10 | export const getFeed = (callback) => {
11 | const request = new GraphRequest('/me/feed', null, callback);
12 |
13 | makeSingleGraphRequest(request)
14 | }
15 |
--------------------------------------------------------------------------------
/Chapter05/5. friends/06. FeedList/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 Friends extends Component {
11 | render() {
12 | return (
13 |
20 | );
21 | }
22 | }
23 |
24 | const styles = StyleSheet.create({
25 | container: {
26 | flex: 1,
27 | backgroundColor: '#F5FCFF',
28 | }
29 | });
30 |
31 | AppRegistry.registerComponent('Friends', () => Friends);
32 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/01. postview/app/components/FeedList/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | marginTop: 65
7 | },
8 | separator: {
9 | flex: 1,
10 | height: StyleSheet.hairlineWidth,
11 | marginLeft: 15,
12 | marginRight: 15,
13 | backgroundColor: '#1d2129'
14 | }
15 | });
16 |
17 | export default styles;
18 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/01. postview/app/components/FeedListRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | margin: 10
7 | },
8 | created: {
9 | color: '#365899',
10 | fontWeight: 'bold',
11 | marginBottom: 5
12 | },
13 | story: {
14 | marginBottom: 5,
15 | textDecorationLine: 'underline'
16 | }
17 | });
18 |
19 | export default styles;
20 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/01. postview/app/components/LoginPage/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/01. postview/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/01. postview/app/utils/dateMethods.js:
--------------------------------------------------------------------------------
1 | import moment from 'moment';
2 |
3 | export const getDateTimeString = (originalDateString) => {
4 | var jsDateObject = new Date(originalDateString);
5 |
6 | return moment(jsDateObject).format('lll');
7 | }
8 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/01. postview/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 Friends extends Component {
11 | render() {
12 | return (
13 |
20 | );
21 | }
22 | }
23 |
24 | const styles = StyleSheet.create({
25 | container: {
26 | flex: 1,
27 | backgroundColor: '#F5FCFF',
28 | }
29 | });
30 |
31 | AppRegistry.registerComponent('Friends', () => Friends);
32 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/02. commentlist/app/components/CommentList/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1
6 | },
7 | separator: {
8 | flex: 1,
9 | height: StyleSheet.hairlineWidth,
10 | marginLeft: 15,
11 | marginRight: 15,
12 | backgroundColor: '#1d2129'
13 | }
14 | });
15 |
16 | export default styles;
17 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/02. commentlist/app/components/CommentListRow/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | Text,
4 | View
5 | } from 'react-native';
6 |
7 | import styles from './styles';
8 |
9 | export default (props) => {
10 | return (
11 |
12 |
13 |
14 | { props.name }
15 |
16 |
17 |
18 |
19 | { props.message }
20 |
21 |
22 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/02. commentlist/app/components/CommentListRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | body: {
5 | marginBottom: 20,
6 | marginLeft: 30,
7 | marginRight: 30,
8 | marginTop: 10,
9 | },
10 | comment: {
11 | color: '#1d2129'
12 | },
13 | container: {
14 | flex: 1
15 | },
16 | header: {
17 | marginTop: 5,
18 | marginLeft: 10,
19 | marginRight: 10
20 | },
21 | name: {
22 | color: '#1d2129',
23 | fontWeight: 'bold'
24 | }
25 | });
26 |
27 | export default styles;
28 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/02. commentlist/app/components/FeedList/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | marginTop: 65
7 | },
8 | separator: {
9 | flex: 1,
10 | height: StyleSheet.hairlineWidth,
11 | marginLeft: 15,
12 | marginRight: 15,
13 | backgroundColor: '#1d2129'
14 | }
15 | });
16 |
17 | export default styles;
18 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/02. commentlist/app/components/FeedListRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | margin: 10
7 | },
8 | created: {
9 | color: '#365899',
10 | fontWeight: 'bold',
11 | marginBottom: 5
12 | },
13 | story: {
14 | marginBottom: 5,
15 | textDecorationLine: 'underline'
16 | }
17 | });
18 |
19 | export default styles;
20 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/02. commentlist/app/components/LoginPage/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/02. commentlist/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/02. commentlist/app/utils/dateMethods.js:
--------------------------------------------------------------------------------
1 | import moment from 'moment';
2 |
3 | export const getDateTimeString = (originalDateString) => {
4 | var jsDateObject = new Date(originalDateString);
5 |
6 | return moment(jsDateObject).format('lll');
7 | }
8 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/02. commentlist/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 Friends extends Component {
11 | render() {
12 | return (
13 |
20 | );
21 | }
22 | }
23 |
24 | const styles = StyleSheet.create({
25 | container: {
26 | flex: 1,
27 | backgroundColor: '#F5FCFF',
28 | }
29 | });
30 |
31 | AppRegistry.registerComponent('Friends', () => Friends);
32 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/03. refreshcontrol/app/components/CommentList/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1
6 | },
7 | separator: {
8 | flex: 1,
9 | height: StyleSheet.hairlineWidth,
10 | marginLeft: 15,
11 | marginRight: 15,
12 | backgroundColor: '#1d2129'
13 | }
14 | });
15 |
16 | export default styles;
17 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/03. refreshcontrol/app/components/CommentListRow/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | Text,
4 | View
5 | } from 'react-native';
6 |
7 | import styles from './styles';
8 |
9 | export default (props) => {
10 | return (
11 |
12 |
13 |
14 | { props.name }
15 |
16 |
17 |
18 |
19 | { props.message }
20 |
21 |
22 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/03. refreshcontrol/app/components/CommentListRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | body: {
5 | marginBottom: 20,
6 | marginLeft: 30,
7 | marginRight: 30,
8 | marginTop: 10,
9 | },
10 | comment: {
11 | color: '#1d2129'
12 | },
13 | container: {
14 | flex: 1
15 | },
16 | header: {
17 | marginTop: 5,
18 | marginLeft: 10,
19 | marginRight: 10
20 | },
21 | name: {
22 | color: '#1d2129',
23 | fontWeight: 'bold'
24 | }
25 | });
26 |
27 | export default styles;
28 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/03. refreshcontrol/app/components/FeedList/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | marginTop: 65
7 | },
8 | separator: {
9 | flex: 1,
10 | height: StyleSheet.hairlineWidth,
11 | marginLeft: 15,
12 | marginRight: 15,
13 | backgroundColor: '#1d2129'
14 | }
15 | });
16 |
17 | export default styles;
18 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/03. refreshcontrol/app/components/FeedListRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | margin: 10
7 | },
8 | created: {
9 | color: '#365899',
10 | fontWeight: 'bold',
11 | marginBottom: 5
12 | },
13 | story: {
14 | marginBottom: 5,
15 | textDecorationLine: 'underline'
16 | }
17 | });
18 |
19 | export default styles;
20 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/03. refreshcontrol/app/components/LoginPage/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/03. refreshcontrol/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/03. refreshcontrol/app/utils/dateMethods.js:
--------------------------------------------------------------------------------
1 | import moment from 'moment';
2 |
3 | export const getDateTimeString = (date) => {
4 | return moment(date).format('lll');
5 | }
6 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/03. refreshcontrol/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 Friends extends Component {
11 | render() {
12 | return (
13 |
20 | );
21 | }
22 | }
23 |
24 | const styles = StyleSheet.create({
25 | container: {
26 | flex: 1,
27 | backgroundColor: '#F5FCFF',
28 | }
29 | });
30 |
31 | AppRegistry.registerComponent('Friends', () => Friends);
32 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/04. Image/app/components/CommentList/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1
6 | },
7 | separator: {
8 | flex: 1,
9 | height: StyleSheet.hairlineWidth,
10 | marginLeft: 15,
11 | marginRight: 15,
12 | backgroundColor: '#1d2129'
13 | }
14 | });
15 |
16 | export default styles;
17 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/04. Image/app/components/CommentListRow/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | Text,
4 | View
5 | } from 'react-native';
6 |
7 | import styles from './styles';
8 |
9 | export default (props) => {
10 | return (
11 |
12 |
13 |
14 | { props.name }
15 |
16 |
17 |
18 |
19 | { props.message }
20 |
21 |
22 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/04. Image/app/components/CommentListRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | body: {
5 | marginBottom: 20,
6 | marginLeft: 30,
7 | marginRight: 30,
8 | marginTop: 10,
9 | },
10 | comment: {
11 | color: '#1d2129'
12 | },
13 | container: {
14 | flex: 1
15 | },
16 | header: {
17 | marginTop: 5,
18 | marginLeft: 10,
19 | marginRight: 10
20 | },
21 | name: {
22 | color: '#1d2129',
23 | fontWeight: 'bold'
24 | }
25 | });
26 |
27 | export default styles;
28 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/04. Image/app/components/FeedList/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | marginTop: 65
7 | },
8 | separator: {
9 | flex: 1,
10 | height: StyleSheet.hairlineWidth,
11 | marginLeft: 15,
12 | marginRight: 15,
13 | backgroundColor: '#1d2129'
14 | }
15 | });
16 |
17 | export default styles;
18 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/04. Image/app/components/FeedListRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | margin: 10
7 | },
8 | created: {
9 | color: '#365899',
10 | fontWeight: 'bold',
11 | marginBottom: 5
12 | },
13 | story: {
14 | marginBottom: 5,
15 | textDecorationLine: 'underline'
16 | }
17 | });
18 |
19 | export default styles;
20 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/04. Image/app/components/LoginPage/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/04. Image/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/04. Image/app/utils/dateMethods.js:
--------------------------------------------------------------------------------
1 | import moment from 'moment';
2 |
3 | export const getDateTimeString = (date) => {
4 | return moment(date).format('lll');
5 | }
6 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/04. Image/app/utils/imageMethods.js:
--------------------------------------------------------------------------------
1 | import { Dimensions } from 'react-native';
2 |
3 | export const getHeightRatio = (height, width) => {
4 | return height * (getWidthOffset()/width);
5 | }
6 |
7 | export const getWidthOffset = () => {
8 | return Dimensions.get('window').width - 20;
9 | }
10 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/04. Image/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 Friends extends Component {
11 | render() {
12 | return (
13 |
20 | );
21 | }
22 | }
23 |
24 | const styles = StyleSheet.create({
25 | container: {
26 | flex: 1,
27 | backgroundColor: '#F5FCFF',
28 | }
29 | });
30 |
31 | AppRegistry.registerComponent('Friends', () => Friends);
32 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/05. WebView/app/components/CommentList/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1
6 | },
7 | separator: {
8 | flex: 1,
9 | height: StyleSheet.hairlineWidth,
10 | marginLeft: 15,
11 | marginRight: 15,
12 | backgroundColor: '#1d2129'
13 | }
14 | });
15 |
16 | export default styles;
17 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/05. WebView/app/components/CommentListRow/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | Text,
4 | View
5 | } from 'react-native';
6 |
7 | import styles from './styles';
8 |
9 | export default (props) => {
10 | return (
11 |
12 |
13 |
14 | { props.name }
15 |
16 |
17 |
18 |
19 | { props.message }
20 |
21 |
22 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/05. WebView/app/components/CommentListRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | body: {
5 | marginBottom: 20,
6 | marginLeft: 30,
7 | marginRight: 30,
8 | marginTop: 10,
9 | },
10 | comment: {
11 | color: '#1d2129'
12 | },
13 | container: {
14 | flex: 1
15 | },
16 | header: {
17 | marginTop: 5,
18 | marginLeft: 10,
19 | marginRight: 10
20 | },
21 | name: {
22 | color: '#1d2129',
23 | fontWeight: 'bold'
24 | }
25 | });
26 |
27 | export default styles;
28 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/05. WebView/app/components/FeedList/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | marginTop: 65
7 | },
8 | separator: {
9 | flex: 1,
10 | height: StyleSheet.hairlineWidth,
11 | marginLeft: 15,
12 | marginRight: 15,
13 | backgroundColor: '#1d2129'
14 | }
15 | });
16 |
17 | export default styles;
18 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/05. WebView/app/components/FeedListRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | margin: 10
7 | },
8 | created: {
9 | color: '#365899',
10 | fontWeight: 'bold',
11 | marginBottom: 5
12 | },
13 | story: {
14 | marginBottom: 5,
15 | textDecorationLine: 'underline'
16 | }
17 | });
18 |
19 | export default styles;
20 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/05. WebView/app/components/LoginPage/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/05. WebView/app/components/WebViewComponent/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import {
4 | WebView
5 | } from 'react-native';
6 |
7 | export default (props) => {
8 | return (
9 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/05. WebView/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/05. WebView/app/utils/dateMethods.js:
--------------------------------------------------------------------------------
1 | import moment from 'moment';
2 |
3 | export const getDateTimeString = (date) => {
4 | return moment(date).format('lll');
5 | }
6 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/05. WebView/app/utils/imageMethods.js:
--------------------------------------------------------------------------------
1 | import { Dimensions } from 'react-native';
2 |
3 | export const getHeightRatio = (height, width) => {
4 | return height * (getWidthOffset()/width);
5 | }
6 |
7 | export const getWidthOffset = () => {
8 | return Dimensions.get('window').width - 20;
9 | }
10 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/05. WebView/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 Friends extends Component {
11 | render() {
12 | return (
13 |
20 | );
21 | }
22 | }
23 |
24 | const styles = StyleSheet.create({
25 | container: {
26 | flex: 1,
27 | backgroundColor: '#F5FCFF',
28 | }
29 | });
30 |
31 | AppRegistry.registerComponent('Friends', () => Friends);
32 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/06. TabBarIOS/app/components/CommentList/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1
6 | },
7 | separator: {
8 | flex: 1,
9 | height: StyleSheet.hairlineWidth,
10 | marginLeft: 15,
11 | marginRight: 15,
12 | backgroundColor: '#1d2129'
13 | }
14 | });
15 |
16 | export default styles;
17 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/06. TabBarIOS/app/components/CommentListRow/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | Text,
4 | View
5 | } from 'react-native';
6 |
7 | import styles from './styles';
8 |
9 | export default (props) => {
10 | return (
11 |
12 |
13 |
14 | { props.name }
15 |
16 |
17 |
18 |
19 | { props.message }
20 |
21 |
22 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/06. TabBarIOS/app/components/CommentListRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | body: {
5 | marginBottom: 20,
6 | marginLeft: 30,
7 | marginRight: 30,
8 | marginTop: 10,
9 | },
10 | comment: {
11 | color: '#1d2129'
12 | },
13 | container: {
14 | flex: 1
15 | },
16 | header: {
17 | marginTop: 5,
18 | marginLeft: 10,
19 | marginRight: 10
20 | },
21 | name: {
22 | color: '#1d2129',
23 | fontWeight: 'bold'
24 | }
25 | });
26 |
27 | export default styles;
28 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/06. TabBarIOS/app/components/FeedList/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | marginTop: 65
7 | },
8 | separator: {
9 | flex: 1,
10 | height: StyleSheet.hairlineWidth,
11 | marginLeft: 15,
12 | marginRight: 15,
13 | backgroundColor: '#1d2129'
14 | }
15 | });
16 |
17 | export default styles;
18 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/06. TabBarIOS/app/components/FeedListRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | margin: 10
7 | },
8 | created: {
9 | color: '#365899',
10 | fontWeight: 'bold',
11 | marginBottom: 5
12 | },
13 | story: {
14 | marginBottom: 5,
15 | textDecorationLine: 'underline'
16 | }
17 | });
18 |
19 | export default styles;
20 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/06. TabBarIOS/app/components/LoginPage/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/06. TabBarIOS/app/components/WebViewComponent/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import {
4 | WebView
5 | } from 'react-native';
6 |
7 | export default (props) => {
8 | return (
9 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/06. TabBarIOS/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | backgroundColor: '#F5FCFF',
7 | }
8 | });
9 |
10 | export default styles;
11 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/06. TabBarIOS/app/utils/dateMethods.js:
--------------------------------------------------------------------------------
1 | import moment from 'moment';
2 |
3 | export const getDateTimeString = (date) => {
4 | return moment(date).format('lll');
5 | }
6 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/06. TabBarIOS/app/utils/imageMethods.js:
--------------------------------------------------------------------------------
1 | import { Dimensions } from 'react-native';
2 |
3 | export const getHeightRatio = (height, width) => {
4 | return height * (getWidthOffset()/width);
5 | }
6 |
7 | export const getWidthOffset = () => {
8 | return Dimensions.get('window').width - 20;
9 | }
10 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/06. TabBarIOS/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 Friends extends Component {
11 | render() {
12 | return (
13 |
20 | );
21 | }
22 | }
23 |
24 | const styles = StyleSheet.create({
25 | container: {
26 | flex: 1,
27 | backgroundColor: '#F5FCFF',
28 | }
29 | });
30 |
31 | AppRegistry.registerComponent('Friends', () => Friends);
32 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/07. Android/app/components/CommentList/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1
6 | },
7 | separator: {
8 | flex: 1,
9 | height: StyleSheet.hairlineWidth,
10 | marginLeft: 15,
11 | marginRight: 15,
12 | backgroundColor: '#1d2129'
13 | }
14 | });
15 |
16 | export default styles;
17 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/07. Android/app/components/CommentListRow/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {
3 | Text,
4 | View
5 | } from 'react-native';
6 |
7 | import styles from './styles';
8 |
9 | export default (props) => {
10 | return (
11 |
12 |
13 |
14 | { props.name }
15 |
16 |
17 |
18 |
19 | { props.message }
20 |
21 |
22 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/07. Android/app/components/CommentListRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | body: {
5 | marginBottom: 20,
6 | marginLeft: 30,
7 | marginRight: 30,
8 | marginTop: 10,
9 | },
10 | comment: {
11 | color: '#1d2129'
12 | },
13 | container: {
14 | flex: 1
15 | },
16 | header: {
17 | marginTop: 5,
18 | marginLeft: 10,
19 | marginRight: 10
20 | },
21 | name: {
22 | color: '#1d2129',
23 | fontWeight: 'bold'
24 | }
25 | });
26 |
27 | export default styles;
28 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/07. Android/app/components/Drawer/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1
6 | },
7 | separator: {
8 | height: StyleSheet.hairlineWidth,
9 | marginLeft: 10,
10 | marginRight: 10,
11 | backgroundColor: '#000000'
12 | }
13 | })
14 |
15 | export default styles;
16 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/07. Android/app/components/DrawerRow/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 DrawerRow extends Component {
11 | setNativeProps (props) {
12 | this._root.setNativeProps(props)
13 | }
14 |
15 | render () {
16 | return (
17 | this._root = component }
20 | { ...this.props }>
21 |
22 | { this.props.routeName }
23 |
24 |
25 | )
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/07. Android/app/components/DrawerRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | height: 40,
7 | padding: 10
8 | },
9 | rowTitle: {
10 | fontSize: 20,
11 | textAlign: 'left'
12 | }
13 | })
14 |
15 | export default styles;
16 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/07. Android/app/components/FeedList/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | androidContainer: {
5 | flex: 1
6 | },
7 | container: {
8 | flex: 1,
9 | marginTop: 65
10 | },
11 | separator: {
12 | flex: 1,
13 | height: StyleSheet.hairlineWidth,
14 | marginLeft: 15,
15 | marginRight: 15,
16 | backgroundColor: '#1d2129'
17 | }
18 | });
19 |
20 | export default styles;
21 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/07. Android/app/components/FeedListRow/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | margin: 10
7 | },
8 | created: {
9 | color: '#365899',
10 | fontWeight: 'bold',
11 | marginBottom: 5
12 | },
13 | story: {
14 | marginBottom: 5,
15 | textDecorationLine: 'underline'
16 | }
17 | });
18 |
19 | export default styles;
20 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/07. Android/app/components/LoginPage/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | justifyContent: 'center',
7 | alignItems: 'center',
8 | backgroundColor: '#F5FCFF',
9 | }
10 | });
11 |
12 | export default styles;
13 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/07. Android/app/components/WebViewComponent/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import {
4 | WebView
5 | } from 'react-native';
6 |
7 | export default (props) => {
8 | return (
9 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/07. Android/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | backgroundColor: '#F5FCFF',
7 | }
8 | });
9 |
10 | export default styles;
11 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/07. Android/app/utils/dateMethods.js:
--------------------------------------------------------------------------------
1 | import moment from 'moment';
2 |
3 | export const getDateTimeString = (date) => {
4 | return moment(date).format('lll');
5 | }
6 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/07. Android/app/utils/imageMethods.js:
--------------------------------------------------------------------------------
1 | import { Dimensions } from 'react-native';
2 |
3 | export const getHeightRatio = (height, width) => {
4 | return height * (getWidthOffset()/width);
5 | }
6 |
7 | export const getWidthOffset = () => {
8 | return Dimensions.get('window').width - 20;
9 | }
10 |
--------------------------------------------------------------------------------
/Chapter06/6. advanced friends/07. Android/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 Friends extends Component {
11 | render() {
12 | return (
13 |
20 | );
21 | }
22 | }
23 |
24 | const styles = StyleSheet.create({
25 | container: {
26 | flex: 1,
27 | backgroundColor: '#F5FCFF',
28 | }
29 | });
30 |
31 | AppRegistry.registerComponent('Friends', () => Friends);
32 |
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/01. basic taskslistcontainer/app/actions/index.js:
--------------------------------------------------------------------------------
1 | let currentIndex = 0;
2 |
3 | const ADD_TASK = 'ADD_TASK';
4 | const CHANGE_COMPLETION_STATUS = 'CHANGE_COMPLETION_STATUS';
5 | const CHANGE_INPUT_TEXT = 'CHANGE_INPUT_TEXT';
6 |
7 | export function addTask (text) {
8 | return {
9 | type: ADD_TASK,
10 | index: currentIndex++,
11 | text
12 | }
13 | }
14 |
15 | export function changeCompletionStatus (index) {
16 | return {
17 | type: CHANGE_COMPLETION_STATUS,
18 | index
19 | }
20 | }
21 | export function changeInputText (text) {
22 | return {
23 | type: CHANGE_INPUT_TEXT,
24 | text
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/01. basic taskslistcontainer/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 |
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/01. basic taskslistcontainer/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 |
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/01. basic taskslistcontainer/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 |
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/01. basic taskslistcontainer/app/containers/AppContainer.ios.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import {
4 | NavigatorIOS,
5 | StyleSheet
6 | } from 'react-native';
7 |
8 | import TasksListContainer from '../containers/TasksListContainer';
9 |
10 | export default class App extends Component {
11 | render () {
12 | return (
13 |
20 | )
21 | }
22 | }
23 |
24 | const styles = StyleSheet.create({
25 | container: {
26 | flex: 1,
27 | backgroundColor: '#F5FCFF'
28 | }
29 | });
30 |
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/01. basic taskslistcontainer/app/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import AppContainer from './containers/AppContainer';
3 | import { createStore, applyMiddleware } from 'redux';
4 | import { Provider } from 'react-redux';
5 | import thunk from 'redux-thunk';
6 | import listOfTasks from './reducers';
7 |
8 | let store = createStore(listOfTasks, applyMiddleware(thunk));
9 |
10 | export default function Tasks (props) {
11 | return (
12 |
13 |
14 |
15 | )
16 | }
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/01. basic taskslistcontainer/index.android.js:
--------------------------------------------------------------------------------
1 | import Tasks from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('Tasks', () => Tasks);
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/01. basic taskslistcontainer/index.ios.js:
--------------------------------------------------------------------------------
1 | import Tasks from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('Tasks', () => Tasks);
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/02. EditTasks/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 |
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/02. EditTasks/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 |
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/02. EditTasks/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 |
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/02. EditTasks/app/containers/AppContainer.ios.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import {
4 | NavigatorIOS,
5 | StyleSheet
6 | } from 'react-native';
7 |
8 | import TasksListContainer from '../containers/TasksListContainer';
9 |
10 | export default class App extends Component {
11 | render () {
12 | return (
13 |
20 | )
21 | }
22 | }
23 |
24 | const styles = StyleSheet.create({
25 | container: {
26 | flex: 1,
27 | backgroundColor: '#F5FCFF'
28 | }
29 | });
30 |
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/02. EditTasks/app/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import AppContainer from './containers/AppContainer';
3 | import { createStore, applyMiddleware } from 'redux';
4 | import { Provider } from 'react-redux';
5 | import thunk from 'redux-thunk';
6 | import listOfTasks from './reducers';
7 |
8 | let store = createStore(listOfTasks, applyMiddleware(thunk));
9 |
10 | export default function Tasks (props) {
11 | return (
12 |
13 |
14 |
15 | )
16 | }
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/02. EditTasks/index.android.js:
--------------------------------------------------------------------------------
1 | import Tasks from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('Tasks', () => Tasks);
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/02. EditTasks/index.ios.js:
--------------------------------------------------------------------------------
1 | import Tasks from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('Tasks', () => Tasks);
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/03. Redux-Thunk/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 |
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/03. Redux-Thunk/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 |
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/03. Redux-Thunk/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 |
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/03. Redux-Thunk/app/containers/AppContainer.ios.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import {
4 | NavigatorIOS,
5 | StyleSheet
6 | } from 'react-native';
7 |
8 | import TasksListContainer from '../containers/TasksListContainer';
9 |
10 | export default class App extends Component {
11 | render () {
12 | return (
13 |
20 | )
21 | }
22 | }
23 |
24 | const styles = StyleSheet.create({
25 | container: {
26 | flex: 1,
27 | backgroundColor: '#F5FCFF'
28 | }
29 | });
30 |
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/03. Redux-Thunk/app/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import AppContainer from './containers/AppContainer';
3 | import { createStore, applyMiddleware } from 'redux';
4 | import { Provider } from 'react-redux';
5 | import thunk from 'redux-thunk';
6 | import listOfTasks from './reducers';
7 | import { saveAsyncStorage } from './utils/storageMethods';
8 |
9 | let store = createStore(listOfTasks, applyMiddleware(thunk));
10 |
11 | store.subscribe(() => {
12 | saveAsyncStorage(store.getState().listOfTasks);
13 | });
14 |
15 | export default function Tasks (props) {
16 | return (
17 |
18 |
19 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/03. Redux-Thunk/app/utils/storageMethods.js:
--------------------------------------------------------------------------------
1 | import { AsyncStorage } from 'react-native';
2 |
3 | export const getAsyncStorage = async () => {
4 | let response = await AsyncStorage.getItem('listOfTasks');
5 | let parsedData = JSON.parse(response) || [];
6 |
7 | return parsedData;
8 | }
9 |
10 | export const saveAsyncStorage = async (listOfTasks) => {
11 | return AsyncStorage.setItem('listOfTasks', JSON.stringify(listOfTasks));
12 | }
13 |
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/03. Redux-Thunk/index.android.js:
--------------------------------------------------------------------------------
1 | import Tasks from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('Tasks', () => Tasks);
--------------------------------------------------------------------------------
/Chapter07/7. tasks redux/03. Redux-Thunk/index.ios.js:
--------------------------------------------------------------------------------
1 | import Tasks from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('Tasks', () => Tasks);
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-24 at 11.51.42 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-24 at 11.51.42 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-24 at 11.52.06 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-24 at 11.52.06 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-24 at 11.52.20 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-24 at 11.52.20 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-24 at 11.52.25 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-24 at 11.52.25 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-24 at 11.52.36 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-24 at 11.52.36 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-24 at 11.52.55 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-24 at 11.52.55 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-24 at 11.53.23 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-24 at 11.53.23 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-25 at 12.20.50 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-25 at 12.20.50 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-25 at 12.22.19 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-25 at 12.22.19 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-25 at 12.30.29 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-25 at 12.30.29 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-25 at 12.33.05 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-25 at 12.33.05 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-25 at 12.41.49 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-25 at 12.41.49 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-27 at 10.03.18 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-27 at 10.03.18 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-27 at 9.47.43 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-27 at 9.47.43 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-28 at 11.09.08 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-28 at 11.09.08 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-28 at 11.09.48 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-28 at 11.09.48 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-28 at 11.12.01 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-28 at 11.12.01 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-28 at 11.19.58 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-28 at 11.19.58 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-28 at 11.22.03 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-28 at 11.22.03 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-28 at 11.41.10 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-28 at 11.41.10 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-28 at 11.44.08 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-28 at 11.44.08 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-28 at 11.45.03 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-28 at 11.45.03 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 10.06.49 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 10.06.49 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.10.39 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.10.39 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.12.51 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.12.51 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.15.42 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.15.42 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.28.07 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.28.07 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.33.30 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.33.30 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.33.38 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.33.38 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.38.02 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.38.02 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.38.17 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.38.17 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.38.31 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.38.31 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.41.41 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.41.41 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.42.45 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.42.45 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.46.03 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.46.03 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.46.20 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 12.46.20 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 9.57.07 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2016-12-29 at 9.57.07 PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.27.41 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.27.41 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.36.39 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.36.39 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.40.58 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.40.58 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.41.23 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.41.23 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.41.51 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.41.51 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.42.14 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.42.14 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.42.24 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.42.24 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.56.48 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.56.48 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.59.05 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.59.05 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.59.08 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.59.08 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.59.40 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen Shot 2017-03-10 at 2.59.40 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen_Shot_2016-12-24_at_11_53_49_PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen_Shot_2016-12-24_at_11_53_49_PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen_Shot_2016-12-25_at_12_29_54_AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen_Shot_2016-12-25_at_12_29_54_AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen_Shot_2016-12-25_at_12_34_54_AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen_Shot_2016-12-25_at_12_34_54_AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen_Shot_2016-12-25_at_12_41_46_AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen_Shot_2016-12-25_at_12_41_46_AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen_Shot_2016-12-25_at_12_45_56_AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen_Shot_2016-12-25_at_12_45_56_AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen_Shot_2016-12-27_at_10_02_00_PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen_Shot_2016-12-27_at_10_02_00_PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen_Shot_2016-12-28_at_11_16_19_PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen_Shot_2016-12-28_at_11_16_19_PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen_Shot_2016-12-28_at_11_44_41_PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen_Shot_2016-12-28_at_11_44_41_PM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen_Shot_2017-03-10_at_2_26_41_AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen_Shot_2017-03-10_at_2_26_41_AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen_Shot_2017-03-10_at_2_32_30_AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen_Shot_2017-03-10_at_2_32_30_AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/Book Images/Screen_Shot_2017-03-10_at_2_40_09_AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/Book Images/Screen_Shot_2017-03-10_at_2_40_09_AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/android/Android Feature Graphic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/android/Android Feature Graphic.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/android/Screenshot_1483075351.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/android/Screenshot_1483075351.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/android/Screenshot_1483075357.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/android/Screenshot_1483075357.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/android/mipmap-hdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/android/mipmap-hdpi/ic_launcher.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/android/mipmap-mdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/android/mipmap-mdpi/ic_launcher.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/android/mipmap-xhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/android/mipmap-xhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/android/mipmap-xxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/android/mipmap-xxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/android/playstore-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/android/playstore-icon.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/iOS/Icon-App-20x20@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/iOS/Icon-App-20x20@2x.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/iOS/Icon-App-20x20@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/iOS/Icon-App-20x20@3x.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/iOS/Icon-App-29x29@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/iOS/Icon-App-29x29@2x.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/iOS/Icon-App-29x29@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/iOS/Icon-App-29x29@3x.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/iOS/Icon-App-40x40@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/iOS/Icon-App-40x40@2x.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/iOS/Icon-App-40x40@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/iOS/Icon-App-40x40@3x.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/iOS/Icon-App-60x60@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/iOS/Icon-App-60x60@2x.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/iOS/Icon-App-60x60@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/iOS/Icon-App-60x60@3x.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/iOS/Simulator Screen Shot Dec 29, 2016, 12.33.01 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/iOS/Simulator Screen Shot Dec 29, 2016, 12.33.01 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/iOS/Simulator Screen Shot Dec 29, 2016, 12.33.05 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/iOS/Simulator Screen Shot Dec 29, 2016, 12.33.05 AM.png
--------------------------------------------------------------------------------
/Chapter08/8. deploying apps/iOS/iTunesArtwork@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Chapter08/8. deploying apps/iOS/iTunesArtwork@2x.png
--------------------------------------------------------------------------------
/Chapter09/9. additional components/01. fetch/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | backgroundColor: '#fafafa'
7 | },
8 | text: {
9 | alignSelf: 'center',
10 | color: '#365899',
11 | marginTop: 50
12 | }
13 | });
14 |
15 | export default styles;
16 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/01. fetch/index.android.js:
--------------------------------------------------------------------------------
1 | import App from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('AdditionalComponents', () => App);
5 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/01. fetch/index.ios.js:
--------------------------------------------------------------------------------
1 | import App from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('AdditionalComponents', () => App);
5 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/02. Picker/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | backgroundColor: '#fafafa'
7 | },
8 | picker: {
9 | marginLeft: 10,
10 | marginRight: 10
11 | },
12 | pickerSelectionText: {
13 | alignSelf: 'center',
14 | color: '#365899'
15 | },
16 | text: {
17 | alignSelf: 'center',
18 | color: '#365899',
19 | marginTop: 50
20 | }
21 | });
22 |
23 | export default styles;
24 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/02. Picker/index.android.js:
--------------------------------------------------------------------------------
1 | import App from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('AdditionalComponents', () => App);
5 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/02. Picker/index.ios.js:
--------------------------------------------------------------------------------
1 | import App from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('AdditionalComponents', () => App);
5 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/03. Vibration/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | backgroundColor: '#fafafa'
7 | },
8 | picker: {
9 | marginLeft: 10,
10 | marginRight: 10
11 | },
12 | pickerSelectionText: {
13 | alignSelf: 'center',
14 | color: '#365899'
15 | },
16 | text: {
17 | alignSelf: 'center',
18 | color: '#365899',
19 | marginTop: 50
20 | }
21 | });
22 |
23 | export default styles;
24 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/03. Vibration/index.android.js:
--------------------------------------------------------------------------------
1 | import App from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('AdditionalComponents', () => App);
5 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/03. Vibration/index.ios.js:
--------------------------------------------------------------------------------
1 | import App from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('AdditionalComponents', () => App);
5 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/04. Linking/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | backgroundColor: '#fafafa'
7 | },
8 | picker: {
9 | marginLeft: 10,
10 | marginRight: 10
11 | },
12 | pickerSelectionText: {
13 | alignSelf: 'center',
14 | color: '#365899'
15 | },
16 | text: {
17 | alignSelf: 'center',
18 | color: '#365899',
19 | marginTop: 50
20 | }
21 | });
22 |
23 | export default styles;
24 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/04. Linking/index.android.js:
--------------------------------------------------------------------------------
1 | import App from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('AdditionalComponents', () => App);
5 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/04. Linking/index.ios.js:
--------------------------------------------------------------------------------
1 | import App from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('AdditionalComponents', () => App);
5 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/05. slider/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | backgroundColor: '#fafafa'
7 | },
8 | picker: {
9 | marginLeft: 10,
10 | marginRight: 10
11 | },
12 | pickerSelectionText: {
13 | alignSelf: 'center',
14 | color: '#365899'
15 | },
16 | sliderSelectionText: {
17 | alignSelf: 'center',
18 | color: '#365899',
19 | marginTop: 20
20 | },
21 | text: {
22 | alignSelf: 'center',
23 | color: '#365899',
24 | marginTop: 50
25 | }
26 | });
27 |
28 | export default styles;
29 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/05. slider/index.android.js:
--------------------------------------------------------------------------------
1 | import App from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('AdditionalComponents', () => App);
5 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/05. slider/index.ios.js:
--------------------------------------------------------------------------------
1 | import App from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('AdditionalComponents', () => App);
5 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/06. actionsheetios/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | backgroundColor: '#fafafa'
7 | },
8 | picker: {
9 | marginLeft: 10,
10 | marginRight: 10
11 | },
12 | pickerSelectionText: {
13 | alignSelf: 'center',
14 | color: '#365899'
15 | },
16 | sliderSelectionText: {
17 | alignSelf: 'center',
18 | color: '#365899',
19 | marginTop: 20
20 | },
21 | text: {
22 | alignSelf: 'center',
23 | color: '#365899',
24 | marginTop: 50
25 | }
26 | });
27 |
28 | export default styles;
29 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/06. actionsheetios/index.android.js:
--------------------------------------------------------------------------------
1 | import App from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('AdditionalComponents', () => App);
5 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/06. actionsheetios/index.ios.js:
--------------------------------------------------------------------------------
1 | import App from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('AdditionalComponents', () => App);
5 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/07. geolocation/app/styles.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from 'react-native';
2 |
3 | const styles = StyleSheet.create({
4 | container: {
5 | flex: 1,
6 | backgroundColor: '#fafafa'
7 | },
8 | latLongText: {
9 | alignSelf: 'center',
10 | color: '#80B546'
11 | },
12 | picker: {
13 | marginLeft: 10,
14 | marginRight: 10
15 | },
16 | pickerSelectionText: {
17 | alignSelf: 'center',
18 | color: '#365899'
19 | },
20 | sliderSelectionText: {
21 | alignSelf: 'center',
22 | color: '#365899',
23 | marginTop: 20
24 | },
25 | text: {
26 | alignSelf: 'center',
27 | color: '#365899',
28 | marginTop: 50
29 | }
30 | });
31 |
32 | export default styles;
33 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/07. geolocation/index.android.js:
--------------------------------------------------------------------------------
1 | import App from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('AdditionalComponents', () => App);
5 |
--------------------------------------------------------------------------------
/Chapter09/9. additional components/07. geolocation/index.ios.js:
--------------------------------------------------------------------------------
1 | import App from './app';
2 | import { AppRegistry } from 'react-native';
3 |
4 | AppRegistry.registerComponent('AdditionalComponents', () => App);
5 |
--------------------------------------------------------------------------------
/Richard Kho/1. Tasks/1. ListView/README.md:
--------------------------------------------------------------------------------
1 | # ListView
2 |
3 | A high level example of rendering a ListView component in React Native
--------------------------------------------------------------------------------
/Richard Kho/1. Tasks/1. ListView/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import {
4 | ListView,
5 | Text
6 | } from 'react-native';
7 |
8 | class TasksList extends Component {
9 | constructor (props) {
10 | const ds = new ListView.DataSource({
11 | rowHasChanged: (r1, r2) => r1 !== r2 });
12 |
13 | super (props);
14 |
15 | this.state = {
16 | dataSource: ds.cloneWithRows(['row 1', 'row 2'])
17 | };
18 | }
19 |
20 | render () {
21 | return (
22 |
25 | { rowData } }
26 | />
27 | );
28 | }
29 | }
30 |
31 | export default TasksList
32 |
--------------------------------------------------------------------------------
/Richard Kho/1. Tasks/2. ListView With Data/README.md:
--------------------------------------------------------------------------------
1 | # ListView
2 |
3 | Updated from the previous example to support a more detailed array of strings
--------------------------------------------------------------------------------
/Richard Kho/1. Tasks/3. ListView With Adding Data/README.md:
--------------------------------------------------------------------------------
1 | # ListView
2 |
3 | Support for adding tasks to an array saved in application state
--------------------------------------------------------------------------------
/Richard Kho/1. Tasks/4. ListView With AsyncStorage/README.md:
--------------------------------------------------------------------------------
1 | # ListView
2 |
3 | Added support for AsyncStorage
--------------------------------------------------------------------------------
/Richard Kho/1. Tasks/5. ListView With Scrollable Styling/README.md:
--------------------------------------------------------------------------------
1 | # ListView
2 | Added the `flex: 1` property to the View and ListView components to allow for scrolling of the list
--------------------------------------------------------------------------------
/Richard Kho/1. Tasks/6. ListView With Task Completion/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/1. Tasks/6. ListView With Task Completion/README.md
--------------------------------------------------------------------------------
/Richard Kho/1. Tasks/Screen Shot 2016-07-23 at 1.31.30 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/1. Tasks/Screen Shot 2016-07-23 at 1.31.30 PM.png
--------------------------------------------------------------------------------
/Richard Kho/1. Tasks/Screen Shot 2016-07-23 at 11.27.16 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/1. Tasks/Screen Shot 2016-07-23 at 11.27.16 PM.png
--------------------------------------------------------------------------------
/Richard Kho/1. Tasks/Screen Shot 2016-07-24 at 9.46.38 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/1. Tasks/Screen Shot 2016-07-24 at 9.46.38 PM.png
--------------------------------------------------------------------------------
/Richard Kho/1. Tasks/Screen Shot 2016-07-30 at 5.48.58 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/1. Tasks/Screen Shot 2016-07-30 at 5.48.58 PM.png
--------------------------------------------------------------------------------
/Richard Kho/2. Advanced Tasks/01. Basic NavigatorIOS/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/2. Advanced Tasks/01. Basic NavigatorIOS/index.js
--------------------------------------------------------------------------------
/Richard Kho/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 |
--------------------------------------------------------------------------------
/Richard Kho/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 |
--------------------------------------------------------------------------------
/Richard Kho/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 |
--------------------------------------------------------------------------------
/Richard Kho/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 |
--------------------------------------------------------------------------------
/Richard Kho/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 |
--------------------------------------------------------------------------------
/Richard Kho/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 |
--------------------------------------------------------------------------------
/Richard Kho/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 |
--------------------------------------------------------------------------------
/Richard Kho/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 |
--------------------------------------------------------------------------------
/Richard Kho/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 |
--------------------------------------------------------------------------------
/Richard Kho/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 |
--------------------------------------------------------------------------------
/Richard Kho/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 |
--------------------------------------------------------------------------------
/Richard Kho/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 |
--------------------------------------------------------------------------------
/Richard Kho/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 |
--------------------------------------------------------------------------------
/Richard Kho/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 |
--------------------------------------------------------------------------------
/Richard Kho/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.
--------------------------------------------------------------------------------
/Richard Kho/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 |
--------------------------------------------------------------------------------
/Richard Kho/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 |
--------------------------------------------------------------------------------
/Richard Kho/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/Richard Kho/2. Advanced Tasks/Images/Screen Shot 2016-08-21 at 6.37.12 PM.png
--------------------------------------------------------------------------------
/Richard Kho/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/Richard Kho/2. Advanced Tasks/Images/Screen Shot 2016-08-24 at 8.12.22 PM.png
--------------------------------------------------------------------------------
/Richard Kho/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/Richard Kho/2. Advanced Tasks/Images/Screen Shot 2016-08-24 at 8.15.54 PM.png
--------------------------------------------------------------------------------
/Richard Kho/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/Richard Kho/2. Advanced Tasks/Images/Screen Shot 2016-08-24 at 8.15.56 PM.png
--------------------------------------------------------------------------------
/Richard Kho/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/Richard Kho/2. Advanced Tasks/Images/Screen Shot 2016-08-28 at 9.42.57 PM.png
--------------------------------------------------------------------------------
/Richard Kho/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/Richard Kho/2. Advanced Tasks/Images/Screen Shot 2016-08-28 at 9.43.14 PM.png
--------------------------------------------------------------------------------
/Richard Kho/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/Richard Kho/2. Advanced Tasks/Images/Screen Shot 2016-08-30 at 9.38.12 PM.png
--------------------------------------------------------------------------------
/Richard Kho/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/Richard Kho/2. Advanced Tasks/Images/Screen Shot 2016-09-01 at 10.17.12 PM.png
--------------------------------------------------------------------------------
/Richard Kho/3. Expense/02. AddBudget Modal/app/App.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/3. Expense/02. AddBudget Modal/app/App.js
--------------------------------------------------------------------------------
/Richard Kho/3. Expense/Images/Screen Shot 2016-09-27 at 12.47.25 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/3. Expense/Images/Screen Shot 2016-09-27 at 12.47.25 AM.png
--------------------------------------------------------------------------------
/Richard Kho/3. Expense/Images/Screen Shot 2016-09-27 at 12.48.52 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/3. Expense/Images/Screen Shot 2016-09-27 at 12.48.52 AM.png
--------------------------------------------------------------------------------
/Richard Kho/3. Expense/Images/Screen Shot 2016-09-27 at 12.49.18 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/3. Expense/Images/Screen Shot 2016-09-27 at 12.49.18 AM.png
--------------------------------------------------------------------------------
/Richard Kho/3. Expense/Images/Screen Shot 2016-09-27 at 12.50.23 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/3. Expense/Images/Screen Shot 2016-09-27 at 12.50.23 AM.png
--------------------------------------------------------------------------------
/Richard Kho/3. Expense/Images/Screen Shot 2016-09-27 at 12.51.06 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/3. Expense/Images/Screen Shot 2016-09-27 at 12.51.06 AM.png
--------------------------------------------------------------------------------
/Richard Kho/3. Expense/Images/Screen Shot 2016-09-30 at 11.50.16 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/3. Expense/Images/Screen Shot 2016-09-30 at 11.50.16 PM.png
--------------------------------------------------------------------------------
/Richard Kho/3. Expense/Images/Screen Shot 2016-09-30 at 11.50.22 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/3. Expense/Images/Screen Shot 2016-09-30 at 11.50.22 PM.png
--------------------------------------------------------------------------------
/Richard Kho/3. Expense/Images/Screen Shot 2016-09-30 at 11.53.27 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/3. Expense/Images/Screen Shot 2016-09-30 at 11.53.27 PM.png
--------------------------------------------------------------------------------
/Richard Kho/3. Expense/Images/Screen Shot 2016-10-02 at 12.42.15 AM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/3. Expense/Images/Screen Shot 2016-10-02 at 12.42.15 AM.png
--------------------------------------------------------------------------------
/Richard Kho/4. Advanced Expense/04. PreviousMonthsList/utils/dateMethods.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/4. Advanced Expense/04. PreviousMonthsList/utils/dateMethods.js
--------------------------------------------------------------------------------
/Richard Kho/4. Advanced Expense/04. PreviousMonthsList/utils/storageMethods.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/4. Advanced Expense/04. PreviousMonthsList/utils/storageMethods.js
--------------------------------------------------------------------------------
/Richard Kho/4. Advanced Expense/Screen Shot 2016-10-04 at 11.01.03 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/4. Advanced Expense/Screen Shot 2016-10-04 at 11.01.03 PM.png
--------------------------------------------------------------------------------
/Richard Kho/4. Advanced Expense/Screen Shot 2016-10-04 at 11.02.19 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/4. Advanced Expense/Screen Shot 2016-10-04 at 11.02.19 PM.png
--------------------------------------------------------------------------------
/Richard Kho/4. Advanced Expense/Screen Shot 2016-10-05 at 11.17.55 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/4. Advanced Expense/Screen Shot 2016-10-05 at 11.17.55 PM.png
--------------------------------------------------------------------------------
/Richard Kho/4. Advanced Expense/Screen Shot 2016-10-06 at 11.15.46 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/4. Advanced Expense/Screen Shot 2016-10-06 at 11.15.46 PM.png
--------------------------------------------------------------------------------
/Richard Kho/4. Advanced Expense/Screen Shot 2016-10-07 at 9.14.42 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PacktPublishing/React-Native-By-Example/e3e3c4bc86c912079ab2583a8a46f72998fb9f7c/Richard Kho/4. Advanced Expense/Screen Shot 2016-10-07 at 9.14.42 PM.png
--------------------------------------------------------------------------------