SlideShare a Scribd company logo
1 of 8
Jump into React-
Native 4/6
Waqqas Jabbar
2nd July 2018
What you learned previously
1. Navigating between screens
2. Styling Components
a. react-native-elements
3. Adding Icons
a. react-native-vector-icons
4. More about Redux and Flow
1. Redux-Form
2. Styling
What you will learn today
What you will do today
● Convert Add-Task screen to use Redux-Form
○ Setting initial values
○ Field Validations
○ Add “done” field
Shortcoming
● Save button not disabled
Styling
http://flexboxfroggy.com/
Reading
Redux-Form
● https://redux-form.com/7.4.2/docs/api/field.md/
React-Native
Reference
● http://flexboxfroggy.com/
● https://facebook.github.io/react-native/docs/textinput.html
● https://facebook.github.io/react-native/docs/switch.html

More Related Content

What's hot

Contents' quality for plone editors: how to improve Plone out-of-the-box capa...
Contents' quality for plone editors: how to improve Plone out-of-the-box capa...Contents' quality for plone editors: how to improve Plone out-of-the-box capa...
Contents' quality for plone editors: how to improve Plone out-of-the-box capa...Maurizio Delmonte
 
Google Apps Script Overview
Google Apps Script OverviewGoogle Apps Script Overview
Google Apps Script Overviewtty fky
 
Cis247 i lab 7 of 7 putting it all together
Cis247 i lab 7 of 7 putting it all togetherCis247 i lab 7 of 7 putting it all together
Cis247 i lab 7 of 7 putting it all togethercis247
 
Undo, Redo and Collaboration in Web Applications
Undo, Redo and Collaboration in Web ApplicationsUndo, Redo and Collaboration in Web Applications
Undo, Redo and Collaboration in Web ApplicationsMiro Cupak
 
Speed up Development by Turning Web Blocks Into First-Class Citizens
Speed up Development by Turning Web Blocks Into First-Class CitizensSpeed up Development by Turning Web Blocks Into First-Class Citizens
Speed up Development by Turning Web Blocks Into First-Class CitizensOutSystems
 
[Nuxeo World 2013] Roadmap 2014 - Product part
[Nuxeo World 2013] Roadmap 2014 - Product part[Nuxeo World 2013] Roadmap 2014 - Product part
[Nuxeo World 2013] Roadmap 2014 - Product partNuxeo
 
Parallel development of Web Apps | Codesushi - Gliwice 2017
Parallel development of Web Apps | Codesushi - Gliwice  2017Parallel development of Web Apps | Codesushi - Gliwice  2017
Parallel development of Web Apps | Codesushi - Gliwice 2017Krzysztof (Chris) Ozog
 
InVision - Portfolio Website Design
InVision - Portfolio Website DesignInVision - Portfolio Website Design
InVision - Portfolio Website DesignAbe Nito
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web AppsGbolahan Alli
 

What's hot (12)

Contents' quality for plone editors: how to improve Plone out-of-the-box capa...
Contents' quality for plone editors: how to improve Plone out-of-the-box capa...Contents' quality for plone editors: how to improve Plone out-of-the-box capa...
Contents' quality for plone editors: how to improve Plone out-of-the-box capa...
 
Google Apps Script Overview
Google Apps Script OverviewGoogle Apps Script Overview
Google Apps Script Overview
 
Cis247 i lab 7 of 7 putting it all together
Cis247 i lab 7 of 7 putting it all togetherCis247 i lab 7 of 7 putting it all together
Cis247 i lab 7 of 7 putting it all together
 
Lesson 05
Lesson 05Lesson 05
Lesson 05
 
Gitbook FAQs
Gitbook FAQsGitbook FAQs
Gitbook FAQs
 
Undo, Redo and Collaboration in Web Applications
Undo, Redo and Collaboration in Web ApplicationsUndo, Redo and Collaboration in Web Applications
Undo, Redo and Collaboration in Web Applications
 
Visio p&id process designer introduction
Visio p&id process designer   introductionVisio p&id process designer   introduction
Visio p&id process designer introduction
 
Speed up Development by Turning Web Blocks Into First-Class Citizens
Speed up Development by Turning Web Blocks Into First-Class CitizensSpeed up Development by Turning Web Blocks Into First-Class Citizens
Speed up Development by Turning Web Blocks Into First-Class Citizens
 
[Nuxeo World 2013] Roadmap 2014 - Product part
[Nuxeo World 2013] Roadmap 2014 - Product part[Nuxeo World 2013] Roadmap 2014 - Product part
[Nuxeo World 2013] Roadmap 2014 - Product part
 
Parallel development of Web Apps | Codesushi - Gliwice 2017
Parallel development of Web Apps | Codesushi - Gliwice  2017Parallel development of Web Apps | Codesushi - Gliwice  2017
Parallel development of Web Apps | Codesushi - Gliwice 2017
 
InVision - Portfolio Website Design
InVision - Portfolio Website DesignInVision - Portfolio Website Design
InVision - Portfolio Website Design
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 

More from Waqqas Jabbar

Introduction to react native @ TIC NUST
Introduction to react native @ TIC NUSTIntroduction to react native @ TIC NUST
Introduction to react native @ TIC NUSTWaqqas Jabbar
 
Jump into React-Native (Class 6)
Jump into React-Native  (Class 6)Jump into React-Native  (Class 6)
Jump into React-Native (Class 6)Waqqas Jabbar
 
Jump into React-Native (Class 5)
Jump into React-Native  (Class 5)Jump into React-Native  (Class 5)
Jump into React-Native (Class 5)Waqqas Jabbar
 
Jump into React Native (Class 3)
Jump into React Native  (Class 3)Jump into React Native  (Class 3)
Jump into React Native (Class 3)Waqqas Jabbar
 
Jump into React-Native (Class 2/6)
Jump into React-Native  (Class 2/6)Jump into React-Native  (Class 2/6)
Jump into React-Native (Class 2/6)Waqqas Jabbar
 
Jump into React-Native (Class 1)
Jump into React-Native (Class 1)Jump into React-Native (Class 1)
Jump into React-Native (Class 1)Waqqas Jabbar
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React NativeWaqqas Jabbar
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React NativeWaqqas Jabbar
 
Redux Saga - Under the hood
Redux Saga - Under the hoodRedux Saga - Under the hood
Redux Saga - Under the hoodWaqqas Jabbar
 
Crud application using react native, redux and redux sagas
Crud application using react native, redux and redux sagasCrud application using react native, redux and redux sagas
Crud application using react native, redux and redux sagasWaqqas Jabbar
 
Makefile Generation From Autotools
Makefile Generation From AutotoolsMakefile Generation From Autotools
Makefile Generation From AutotoolsWaqqas Jabbar
 
Introduction To Makefile
Introduction To MakefileIntroduction To Makefile
Introduction To MakefileWaqqas Jabbar
 

More from Waqqas Jabbar (14)

Introduction to react native @ TIC NUST
Introduction to react native @ TIC NUSTIntroduction to react native @ TIC NUST
Introduction to react native @ TIC NUST
 
Jump into React-Native (Class 6)
Jump into React-Native  (Class 6)Jump into React-Native  (Class 6)
Jump into React-Native (Class 6)
 
Jump into React-Native (Class 5)
Jump into React-Native  (Class 5)Jump into React-Native  (Class 5)
Jump into React-Native (Class 5)
 
Jump into React Native (Class 3)
Jump into React Native  (Class 3)Jump into React Native  (Class 3)
Jump into React Native (Class 3)
 
Jump into React-Native (Class 2/6)
Jump into React-Native  (Class 2/6)Jump into React-Native  (Class 2/6)
Jump into React-Native (Class 2/6)
 
Jump into React-Native (Class 1)
Jump into React-Native (Class 1)Jump into React-Native (Class 1)
Jump into React-Native (Class 1)
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
 
Redux Saga - Under the hood
Redux Saga - Under the hoodRedux Saga - Under the hood
Redux Saga - Under the hood
 
Crud application using react native, redux and redux sagas
Crud application using react native, redux and redux sagasCrud application using react native, redux and redux sagas
Crud application using react native, redux and redux sagas
 
Introduction To SVN
Introduction To SVNIntroduction To SVN
Introduction To SVN
 
Makefile Generation From Autotools
Makefile Generation From AutotoolsMakefile Generation From Autotools
Makefile Generation From Autotools
 
Introduction To Makefile
Introduction To MakefileIntroduction To Makefile
Introduction To Makefile
 
Introduction To SVN
Introduction To SVNIntroduction To SVN
Introduction To SVN
 

Recently uploaded

SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphNeo4j
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraArtificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraDeakin University
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Neo4j
 
Bluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdfBluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdfngoud9212
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 

Recently uploaded (20)

SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
 
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptxVulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraArtificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning era
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024
 
Bluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdfBluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdf
 
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 

Jump into React-Native (Class 4)