ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo
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 (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...
Maurizio Delmonte
?
Google Apps Script Overview
Google Apps Script OverviewGoogle Apps Script Overview
Google Apps Script Overview
tty 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 together
cis247
?
Lesson 05
Lesson 05Lesson 05
Lesson 05
Gene Babon
?
Gitbook FAQs
Gitbook FAQsGitbook FAQs
Gitbook FAQs
Rebecca Peltz
?
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
Miro Cupak
?
Visio p&id process designer introduction
Visio p&id process designer   introductionVisio p&id process designer   introduction
Visio p&id process designer introduction
Visio P&ID Process Designer
?
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
OutSystems
?
[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
Nuxeo
?
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
Krzysztof (Chris) Ozog
?
InVision - Portfolio Website Design
InVision - Portfolio Website DesignInVision - Portfolio Website Design
InVision - Portfolio Website Design
Abe Nito
?
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Gbolahan Alli
?
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 Overview
tty 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 together
cis247
?
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
Miro 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 Citizens
OutSystems
?
[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
Nuxeo
?
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
Krzysztof (Chris) Ozog
?
InVision - Portfolio Website Design
InVision - Portfolio Website DesignInVision - Portfolio Website Design
InVision - Portfolio Website Design
Abe Nito
?

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
Waqqas 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 Native
Waqqas Jabbar
?
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
Waqqas Jabbar
?
Redux Saga - Under the hood
Redux Saga - Under the hoodRedux Saga - Under the hood
Redux Saga - Under the hood
Waqqas 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 sagas
Waqqas Jabbar
?
Introduction To SVN
Introduction To SVNIntroduction To SVN
Introduction To SVN
Waqqas Jabbar
?
Makefile Generation From Autotools
Makefile Generation From AutotoolsMakefile Generation From Autotools
Makefile Generation From Autotools
Waqqas Jabbar
?
Introduction To Makefile
Introduction To MakefileIntroduction To Makefile
Introduction To Makefile
Waqqas Jabbar
?
Introduction To SVN
Introduction To SVNIntroduction To SVN
Introduction To SVN
Waqqas Jabbar
?
Introduction to react native @ TIC NUST
Introduction to react native @ TIC NUSTIntroduction to react native @ TIC NUST
Introduction to react native @ TIC NUST
Waqqas 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 Native
Waqqas Jabbar
?
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
Waqqas Jabbar
?
Redux Saga - Under the hood
Redux Saga - Under the hoodRedux Saga - Under the hood
Redux Saga - Under the hood
Waqqas 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 sagas
Waqqas Jabbar
?
Makefile Generation From Autotools
Makefile Generation From AutotoolsMakefile Generation From Autotools
Makefile Generation From Autotools
Waqqas Jabbar
?
Introduction To Makefile
Introduction To MakefileIntroduction To Makefile
Introduction To Makefile
Waqqas Jabbar
?

Recently uploaded (20)

Packaging your App for AppExchange ¨C Managed Vs Unmanaged.pptx
Packaging your App for AppExchange ¨C Managed Vs Unmanaged.pptxPackaging your App for AppExchange ¨C Managed Vs Unmanaged.pptx
Packaging your App for AppExchange ¨C Managed Vs Unmanaged.pptx
mohayyudin7826
?
The Rise of AI Agents-From Automation to Autonomous Technology
The Rise of AI Agents-From Automation to Autonomous TechnologyThe Rise of AI Agents-From Automation to Autonomous Technology
The Rise of AI Agents-From Automation to Autonomous Technology
Impelsys Inc.
?
UiPath Automation Developer Associate Training Series 2025 - Session 8
UiPath Automation Developer Associate Training Series 2025 - Session 8UiPath Automation Developer Associate Training Series 2025 - Session 8
UiPath Automation Developer Associate Training Series 2025 - Session 8
DianaGray10
?
AI-Driven Digital Transformation Using Agentic AI
AI-Driven Digital Transformation Using Agentic AIAI-Driven Digital Transformation Using Agentic AI
AI-Driven Digital Transformation Using Agentic AI
Kris Verlaenen
?
UiPath Agentic automation with Autopilot for everyone + new features/releases
UiPath Agentic  automation with Autopilot for everyone + new features/releasesUiPath Agentic  automation with Autopilot for everyone + new features/releases
UiPath Agentic automation with Autopilot for everyone + new features/releases
DianaGray10
?
Java on AWS Without the Headaches - Fast Builds, Cheap Deploys, No Kubernetes
Java on AWS Without the Headaches - Fast Builds, Cheap Deploys, No KubernetesJava on AWS Without the Headaches - Fast Builds, Cheap Deploys, No Kubernetes
Java on AWS Without the Headaches - Fast Builds, Cheap Deploys, No Kubernetes
VictorSzoltysek
?
HHUG-04-2025-Close-more-deals-from-your-existing-pipeline-FOR SLIDESHARE.pptx
HHUG-04-2025-Close-more-deals-from-your-existing-pipeline-FOR SLIDESHARE.pptxHHUG-04-2025-Close-more-deals-from-your-existing-pipeline-FOR SLIDESHARE.pptx
HHUG-04-2025-Close-more-deals-from-your-existing-pipeline-FOR SLIDESHARE.pptx
HampshireHUG
?
The Road to SAP S4HANA Cloud with SAP Activate.pptx
The Road to SAP S4HANA Cloud with SAP Activate.pptxThe Road to SAP S4HANA Cloud with SAP Activate.pptx
The Road to SAP S4HANA Cloud with SAP Activate.pptx
zsbaranyai
?
Dev Dives: Unleash the power of macOS Automation with UiPath
Dev Dives: Unleash the power of macOS Automation with UiPathDev Dives: Unleash the power of macOS Automation with UiPath
Dev Dives: Unleash the power of macOS Automation with UiPath
UiPathCommunity
?
UiPath NY AI Series: Session 3: UiPath Autopilot for Everyone with Clipboard AI
UiPath NY AI Series: Session 3:  UiPath Autopilot for Everyone with Clipboard AIUiPath NY AI Series: Session 3:  UiPath Autopilot for Everyone with Clipboard AI
UiPath NY AI Series: Session 3: UiPath Autopilot for Everyone with Clipboard AI
DianaGray10
?
The Future is Here ¨C Learn How to Get Started! Ionic App Development
The Future is Here ¨C Learn How to Get Started! Ionic App DevelopmentThe Future is Here ¨C Learn How to Get Started! Ionic App Development
The Future is Here ¨C Learn How to Get Started! Ionic App Development
7Pillars
?
Benefits of Moving Ellucian Banner to Oracle Cloud
Benefits of Moving Ellucian Banner to Oracle CloudBenefits of Moving Ellucian Banner to Oracle Cloud
Benefits of Moving Ellucian Banner to Oracle Cloud
AstuteBusiness
?
Testing Tools for Accessibility Enhancement Part II.pptx
Testing Tools for Accessibility Enhancement Part II.pptxTesting Tools for Accessibility Enhancement Part II.pptx
Testing Tools for Accessibility Enhancement Part II.pptx
Julia Undeutsch
?
selection of competencies requiring ICT integration.pptx
selection of competencies requiring ICT integration.pptxselection of competencies requiring ICT integration.pptx
selection of competencies requiring ICT integration.pptx
escuyoscherrymae
?
STARLINK-JIO-AIRTEL Security issues to Ponder
STARLINK-JIO-AIRTEL Security issues to PonderSTARLINK-JIO-AIRTEL Security issues to Ponder
STARLINK-JIO-AIRTEL Security issues to Ponder
anupriti
?
A General introduction to Ad ranking algorithms
A General introduction to Ad ranking algorithmsA General introduction to Ad ranking algorithms
A General introduction to Ad ranking algorithms
Buhwan Jeong
?
Building High-Impact Teams Beyond the Product Triad.pdf
Building High-Impact Teams Beyond the Product Triad.pdfBuilding High-Impact Teams Beyond the Product Triad.pdf
Building High-Impact Teams Beyond the Product Triad.pdf
Rafael Burity
?
202408_JAWSPANKRATION_Introduction_of_Minaden.pdf
202408_JAWSPANKRATION_Introduction_of_Minaden.pdf202408_JAWSPANKRATION_Introduction_of_Minaden.pdf
202408_JAWSPANKRATION_Introduction_of_Minaden.pdf
NTTDOCOMO-ServiceInnovation
?
Automated Engineering of Domain-Specific Metamorphic Testing Environments
Automated Engineering of Domain-Specific Metamorphic Testing EnvironmentsAutomated Engineering of Domain-Specific Metamorphic Testing Environments
Automated Engineering of Domain-Specific Metamorphic Testing Environments
Pablo G¨®mez Abajo
?
ºÝºÝߣs from Perth MuleSoft Meetup March 2025
ºÝºÝߣs from Perth MuleSoft Meetup March 2025ºÝºÝߣs from Perth MuleSoft Meetup March 2025
ºÝºÝߣs from Perth MuleSoft Meetup March 2025
Michael Price
?
Packaging your App for AppExchange ¨C Managed Vs Unmanaged.pptx
Packaging your App for AppExchange ¨C Managed Vs Unmanaged.pptxPackaging your App for AppExchange ¨C Managed Vs Unmanaged.pptx
Packaging your App for AppExchange ¨C Managed Vs Unmanaged.pptx
mohayyudin7826
?
The Rise of AI Agents-From Automation to Autonomous Technology
The Rise of AI Agents-From Automation to Autonomous TechnologyThe Rise of AI Agents-From Automation to Autonomous Technology
The Rise of AI Agents-From Automation to Autonomous Technology
Impelsys Inc.
?
UiPath Automation Developer Associate Training Series 2025 - Session 8
UiPath Automation Developer Associate Training Series 2025 - Session 8UiPath Automation Developer Associate Training Series 2025 - Session 8
UiPath Automation Developer Associate Training Series 2025 - Session 8
DianaGray10
?
AI-Driven Digital Transformation Using Agentic AI
AI-Driven Digital Transformation Using Agentic AIAI-Driven Digital Transformation Using Agentic AI
AI-Driven Digital Transformation Using Agentic AI
Kris Verlaenen
?
UiPath Agentic automation with Autopilot for everyone + new features/releases
UiPath Agentic  automation with Autopilot for everyone + new features/releasesUiPath Agentic  automation with Autopilot for everyone + new features/releases
UiPath Agentic automation with Autopilot for everyone + new features/releases
DianaGray10
?
Java on AWS Without the Headaches - Fast Builds, Cheap Deploys, No Kubernetes
Java on AWS Without the Headaches - Fast Builds, Cheap Deploys, No KubernetesJava on AWS Without the Headaches - Fast Builds, Cheap Deploys, No Kubernetes
Java on AWS Without the Headaches - Fast Builds, Cheap Deploys, No Kubernetes
VictorSzoltysek
?
HHUG-04-2025-Close-more-deals-from-your-existing-pipeline-FOR SLIDESHARE.pptx
HHUG-04-2025-Close-more-deals-from-your-existing-pipeline-FOR SLIDESHARE.pptxHHUG-04-2025-Close-more-deals-from-your-existing-pipeline-FOR SLIDESHARE.pptx
HHUG-04-2025-Close-more-deals-from-your-existing-pipeline-FOR SLIDESHARE.pptx
HampshireHUG
?
The Road to SAP S4HANA Cloud with SAP Activate.pptx
The Road to SAP S4HANA Cloud with SAP Activate.pptxThe Road to SAP S4HANA Cloud with SAP Activate.pptx
The Road to SAP S4HANA Cloud with SAP Activate.pptx
zsbaranyai
?
Dev Dives: Unleash the power of macOS Automation with UiPath
Dev Dives: Unleash the power of macOS Automation with UiPathDev Dives: Unleash the power of macOS Automation with UiPath
Dev Dives: Unleash the power of macOS Automation with UiPath
UiPathCommunity
?
UiPath NY AI Series: Session 3: UiPath Autopilot for Everyone with Clipboard AI
UiPath NY AI Series: Session 3:  UiPath Autopilot for Everyone with Clipboard AIUiPath NY AI Series: Session 3:  UiPath Autopilot for Everyone with Clipboard AI
UiPath NY AI Series: Session 3: UiPath Autopilot for Everyone with Clipboard AI
DianaGray10
?
The Future is Here ¨C Learn How to Get Started! Ionic App Development
The Future is Here ¨C Learn How to Get Started! Ionic App DevelopmentThe Future is Here ¨C Learn How to Get Started! Ionic App Development
The Future is Here ¨C Learn How to Get Started! Ionic App Development
7Pillars
?
Benefits of Moving Ellucian Banner to Oracle Cloud
Benefits of Moving Ellucian Banner to Oracle CloudBenefits of Moving Ellucian Banner to Oracle Cloud
Benefits of Moving Ellucian Banner to Oracle Cloud
AstuteBusiness
?
Testing Tools for Accessibility Enhancement Part II.pptx
Testing Tools for Accessibility Enhancement Part II.pptxTesting Tools for Accessibility Enhancement Part II.pptx
Testing Tools for Accessibility Enhancement Part II.pptx
Julia Undeutsch
?
selection of competencies requiring ICT integration.pptx
selection of competencies requiring ICT integration.pptxselection of competencies requiring ICT integration.pptx
selection of competencies requiring ICT integration.pptx
escuyoscherrymae
?
STARLINK-JIO-AIRTEL Security issues to Ponder
STARLINK-JIO-AIRTEL Security issues to PonderSTARLINK-JIO-AIRTEL Security issues to Ponder
STARLINK-JIO-AIRTEL Security issues to Ponder
anupriti
?
A General introduction to Ad ranking algorithms
A General introduction to Ad ranking algorithmsA General introduction to Ad ranking algorithms
A General introduction to Ad ranking algorithms
Buhwan Jeong
?
Building High-Impact Teams Beyond the Product Triad.pdf
Building High-Impact Teams Beyond the Product Triad.pdfBuilding High-Impact Teams Beyond the Product Triad.pdf
Building High-Impact Teams Beyond the Product Triad.pdf
Rafael Burity
?
Automated Engineering of Domain-Specific Metamorphic Testing Environments
Automated Engineering of Domain-Specific Metamorphic Testing EnvironmentsAutomated Engineering of Domain-Specific Metamorphic Testing Environments
Automated Engineering of Domain-Specific Metamorphic Testing Environments
Pablo G¨®mez Abajo
?
ºÝºÝߣs from Perth MuleSoft Meetup March 2025
ºÝºÝߣs from Perth MuleSoft Meetup March 2025ºÝºÝߣs from Perth MuleSoft Meetup March 2025
ºÝºÝߣs from Perth MuleSoft Meetup March 2025
Michael Price
?

Jump into React-Native (Class 4)