SlideShare uma empresa Scribd 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

Mais conteúdo relacionado

Mais procurados

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
 

Mais procurados (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
 

Mais de 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
 
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
 

Mais de 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
 

Último

Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
fredae14
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 

Último (20)

Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 

Jump into React-Native (Class 4)