SlideShare uma empresa Scribd logo
1 de 6
Jump into React-
Native 3/6
Waqqas Jabbar
29th June 2018
What you learned previously
1. Organise your project source-code
2. React Navigation
3. Redux
1. Navigating between screens
2. Styling Components
3. Adding Icons
4. More about Redux and Flow
5. React-Native Elements
What you will learn today
What you will do today
● Refactor task row in a separate component
● Moved Task List screen in another navigator
● Add react-native-vector-icons
● Add + button in Navigation bar
● Add AddTaskScreen
● Add title field in AddTaskScreen
● Add functionality to update task using AddTaskScreen
Reading
React Navigation
● https://reactnavigation.org/docs/en/stack-navigator.html
Flexbox
● http://flexboxfroggy.com/
Reference
● https://github.com/oblador/react-native-vector-icons
● https://oblador.github.io/react-native-vector-icons/
● https://www.styled-components.com/
● https://react-native-training.github.io/react-native-elements/docs/getting_started.html

Mais conteúdo relacionado

Mais procurados

Google Integration in Android Apps - Mooscon 2013 Cebit
Google Integration in Android Apps - Mooscon 2013 CebitGoogle Integration in Android Apps - Mooscon 2013 Cebit
Google Integration in Android Apps - Mooscon 2013 Cebit
Friedger Müffke
 

Mais procurados (18)

Efficient Code Management
Efficient Code ManagementEfficient Code Management
Efficient Code Management
 
7 maven vsgradle
7 maven vsgradle7 maven vsgradle
7 maven vsgradle
 
Google App Engine Developer - Day1
Google App Engine Developer - Day1Google App Engine Developer - Day1
Google App Engine Developer - Day1
 
Vaadin7 - coding ui components
Vaadin7 -  coding ui componentsVaadin7 -  coding ui components
Vaadin7 - coding ui components
 
Gradle
GradleGradle
Gradle
 
Better Google Drive Client - Project Concept & Plan
Better Google Drive Client - Project Concept & PlanBetter Google Drive Client - Project Concept & Plan
Better Google Drive Client - Project Concept & Plan
 
TeamForge Overview Webinar (9/21)
TeamForge Overview Webinar (9/21)TeamForge Overview Webinar (9/21)
TeamForge Overview Webinar (9/21)
 
Gradle build capabilities
Gradle build capabilities Gradle build capabilities
Gradle build capabilities
 
Architecting with Google Kubernetes Engine
Architecting with Google Kubernetes EngineArchitecting with Google Kubernetes Engine
Architecting with Google Kubernetes Engine
 
G Suite & Google APIs coding workshop
G Suite & Google APIs coding workshopG Suite & Google APIs coding workshop
G Suite & Google APIs coding workshop
 
React tech talk @ CMU
React tech talk @ CMUReact tech talk @ CMU
React tech talk @ CMU
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Power your apps with Gmail, Google Drive, Calendar, Sheets, Slides, Apps Scri...
Power your apps with Gmail, Google Drive, Calendar, Sheets, Slides, Apps Scri...Power your apps with Gmail, Google Drive, Calendar, Sheets, Slides, Apps Scri...
Power your apps with Gmail, Google Drive, Calendar, Sheets, Slides, Apps Scri...
 
Grunt
GruntGrunt
Grunt
 
TeamForge Overview Webinar (10/5/16)
TeamForge Overview Webinar (10/5/16)TeamForge Overview Webinar (10/5/16)
TeamForge Overview Webinar (10/5/16)
 
Google Integration in Android Apps - Mooscon 2013 Cebit
Google Integration in Android Apps - Mooscon 2013 CebitGoogle Integration in Android Apps - Mooscon 2013 Cebit
Google Integration in Android Apps - Mooscon 2013 Cebit
 
Frontend microservices: architectures and solutions
Frontend microservices: architectures and solutionsFrontend microservices: architectures and solutions
Frontend microservices: architectures and solutions
 
Google Apps Script: Accessing G Suite & other Google services with JavaScript
Google Apps Script: Accessing G Suite & other Google services with JavaScriptGoogle Apps Script: Accessing G Suite & other Google services with JavaScript
Google Apps Script: Accessing G Suite & other Google services with JavaScript
 

Semelhante a Jump into React Native (Class 3)

project_proposal_osrf
project_proposal_osrfproject_proposal_osrf
project_proposal_osrf
om1234567890
 
WordPress Plugin Development 201
WordPress Plugin Development 201WordPress Plugin Development 201
WordPress Plugin Development 201
ylefebvre
 

Semelhante a Jump into React Native (Class 3) (20)

Jump into React-Native (Class 1)
Jump into React-Native (Class 1)Jump into React-Native (Class 1)
Jump into React-Native (Class 1)
 
slides.pptx
slides.pptxslides.pptx
slides.pptx
 
slides.pptx
slides.pptxslides.pptx
slides.pptx
 
How to navigate programmatically using react router
How to navigate programmatically using react routerHow to navigate programmatically using react router
How to navigate programmatically using react router
 
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
 
Liferay UG Meetup #8 - Portal 7.3 + portlets com nodeJS - 2020-03-04
Liferay UG Meetup #8 - Portal 7.3 + portlets com nodeJS - 2020-03-04Liferay UG Meetup #8 - Portal 7.3 + portlets com nodeJS - 2020-03-04
Liferay UG Meetup #8 - Portal 7.3 + portlets com nodeJS - 2020-03-04
 
How to Webpack your Django!
How to Webpack your Django!How to Webpack your Django!
How to Webpack your Django!
 
Introduzione a React Native - Facebook Developer Circle Rome
Introduzione a React Native - Facebook Developer Circle RomeIntroduzione a React Native - Facebook Developer Circle Rome
Introduzione a React Native - Facebook Developer Circle Rome
 
project_proposal_osrf
project_proposal_osrfproject_proposal_osrf
project_proposal_osrf
 
Reactjs
ReactjsReactjs
Reactjs
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
 
TestNet 2016 - Improving Your Selenium WebDriver Tests
TestNet 2016 - Improving Your Selenium WebDriver TestsTestNet 2016 - Improving Your Selenium WebDriver Tests
TestNet 2016 - Improving Your Selenium WebDriver Tests
 
ReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparisonReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparison
 
How to implement multiple layouts using React router V4.pptx
How to implement multiple layouts using React router V4.pptxHow to implement multiple layouts using React router V4.pptx
How to implement multiple layouts using React router V4.pptx
 
WordPress Plugin Development 201
WordPress Plugin Development 201WordPress Plugin Development 201
WordPress Plugin Development 201
 
Installing Webpack with React JS from Scratch.pdf
Installing Webpack with React JS from Scratch.pdfInstalling Webpack with React JS from Scratch.pdf
Installing Webpack with React JS from Scratch.pdf
 
How create react app help in creating a new react applications
How create react app help in creating a new react applications How create react app help in creating a new react applications
How create react app help in creating a new react applications
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
 
Building our Component Library
Building our Component LibraryBuilding our Component Library
Building our Component Library
 
September SDG - Lightning
September SDG - LightningSeptember SDG - Lightning
September SDG - Lightning
 

Mais de Waqqas Jabbar

Mais de Waqqas Jabbar (12)

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 4)
Jump into React-Native  (Class 4)Jump into React-Native  (Class 4)
Jump into React-Native (Class 4)
 
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

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 

Jump into React Native (Class 3)