SlideShare a Scribd company logo
Front End Workshops
React Native Part II:
Components
Raul Delgado
Marc Torrent
rdelgado@visual-engin.com
mtorrent@visual-engin.com
React Native short Recap
React Native: is a library to generate
native apps for iOS and Android mobile devices capable,
programmed in javascript.
React Native uses the actual native components of each
platform (currently iOS and Android).
Useful Native APIs
React Native Part I
Navigation in React Native Apps
Navigator: Intro
Navigator handles the transition
between different scenes in your app.
It is implemented in JavaScript and is
available on both iOS and Android.
renderScene: It is the prop that got a
function that is responsible for,
according to the name or index of the
route, we will render a view or
another.
Navigator: Intro
Navigator handles the transition
between different scenes in your app.
It is implemented in JavaScript and is
available on both iOS and Android.
renderScene: It is the prop that got a
function that is responsible for,
according to the name or index of the
route, we will render a view or
another.
renderScene(route, navigator) {
switch (route.name) {
case 'Login':
return (
<Login {...route.props}
navigator={navigator} route={route} />
);
case 'Dashboard':
return (
<Dashboard {...route.props}
navigator={navigator} route={route} />
);
default:
return null;
}
}
How navigate:
const route = {
title: 'Title,
name: 'NameComponent',
passProps: {propsToPass: true}
}
this.props.navigator.replace(route);
this.props.navigator.push(route);
this.props.navigator.pop( );
Navigator: Transitions
We can configure the navigation bar
properties, through the routeMapper
configureScene :
Optional function where you can
configure scene animations and
gestures.
Available scene configutation options
are:
Navigator.SceneConfigs.PushFromRight (default)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRigh
t
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump
<Navigator
configureScene={(route) => {
return
Navigator.SceneConfigs.FloatFromBottom;
}}
navigationBar={
<Navigator.NavigationBar
routeMapper={NavigatorBarRouterMapper} />
}
/>
Navigator: Transitions
We can configure the navigation bar
properties, through the routeMapper
configureScene :
Optional function where you can
configure scene animations and
gestures.
Available scene configutation options
are:
Navigator.SceneConfigs.PushFromRight (default)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRigh
t
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump
<Navigator
configureScene={(route) => {
return
Navigator.SceneConfigs.FloatFromBottom;
}}
navigationBar={
<Navigator.NavigationBar
routeMapper={NavigatorBarRouterMapper} />
}
/>
const NavigatorBarRouterMapper = {
LeftButton: (route, navigator, index) => {
return (
<TouchableHighlight onPress={() => {
navigator.pop();
} }>
<Text>Back</Text>
</TouchableHighlight>
);
},
RightButton: (route, navigator, index) => {
return null;
},
Title: (route, navigator, index) => {
return (
<Text >{route.name}</Text>
);
},
};
Tabs & Other Architectural
Components
TabBarIOS & TabBarIOS.Item
<TabBarIOS style={{backgroundColor: '#ffffff'}} >
<TabBarIOS.Item
title="Tab Bar 1"
selected={this.state.selectedTab === 'TabBar1'}
icon={{uri: iconGame1, scale:4 }}
onPress={() => {
this.setState({ selectedTab: TabBar1' });
}}
>
<DashboardView navigator={this.props.navigator} />
</TabBarIOS.Item>
<TabBarIOS.Item
title="Tab Bar 2"
selected={this.state.selectedTab === 'TabBar2'}
icon={{uri: iconGame1, scale:4 }}
onPress={() => {
this.setState({ selectedTab: 'TabBar2' });
}}
>
<DashboardView navigator={this.props.navigator} />
</TabBarIOS.Item>
</TabBarIOS>
ViewPagerAndroid
<ViewPagerAndroid
style={{flex: 1}}
initialPage={0}>
<View >
<Component1 navigator={this.props.navigator} />
</View>
<View>
<Component2 />
</View>
<View style={{backgroundColor: 'rgba(0,0,0,.8)', flex: 1}}>
<Text>ola</Text>
</View>
</ViewPagerAndroid>
One of the many alternatives to android tabs:
ViewPagerAndroid:
ScrollableTabView - Universal
$ npm install react-native-scrollable-tab-view
Tabbed navigation that you can swipe between, each tab
can have its own ScrollView and maintain its own scroll
position between swipes.
<ScrollableTabView>
<Componente1 tabLabel="comp1" />
<Componente2 tabLabel="comp2" />
<Componente3 tabLabel="comp3" />
</ScrollableTabView>
Lists & Other Presentational
Components
ListView
Use ListView to render a list of components.
Use a ListViewDataSource as the source of your ListView.
The ListViewDataSource has two main methods:
- rowHasChanged: function that handles if a row has to be re-rendered
- cloneWithRows: the datasource used by ListView is inmutable. So,
ListViewDataSource provides this method in order to clone the pre-existing
or new data list.
The ListView has the renderRow and renderSectionHeader props that are functions
that we provide to the ListView in order to render the cells.
renderRow (rowData, sectionID, rowID, highlightRow)
rowData → The data we will use to render our component inside this cell
sectionID, rowID → if we need to change our component from positioning
ListView - example
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
})
};
}
fetchData(_newData) {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(_newData)
});
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={(data, sectionID, rowID) => <MyCustomView {...data} />}
style={styles.listview} />
);
}
...
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={(data, sectionID, rowID) => <MyCustomView {...data} />}
renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
style={styles.listview} />
);
}
ListView - renderScrollComponent
renderScrollComponentallows setting wich component will render the scrolling
part of our list. By default ListView uses ScrollView.
For performance it’s better to use RecyclerViewBackedScrollView.
Also, you’ll find a lot of scrollable components such as InfiniteScrollView,
InvertibleScrollView, ScrollableMixin, ScrollableDecorator
OpenSource Important Components:
https://js.coach/react-native
https://react.parts/native
UI Components
Swiper: npm i react-native-swiper --save
Drawer: npm install --save react-native-drawer
Swipeout Buttons: npm install --save react-native-swipeout
Button: npm install react-native-button --save
Video: npm install react-native-video
Camera: npm install react-native-camera
Vector Icons: npm install react-native-vector-icons --save
Native Navigation: npm install react-native-navigation --save
Utilities & Architectural Components
Reactotron: npm install reactotron --save-dev
Internationalizatoin: npm install react-native-i18n --save
FileSytem: npm install react-native-fs --save
Push Notifications: npm install react-native-push-notification
Code Push: npm install --save react-native-code-push
CSS/SASS: npm install react-native-css -g
Device Info : npm install react-native-device-info --save
Redux Persist: npm i --save redux-persist
Thanks for your time!
Give your questions on the comments section
Workshop 25: React Native - Components

More Related Content

What's hot

Workshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte IIIWorkshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte III
Visual Engineering
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
Visual Engineering
 
Workshop 20: ReactJS Part II Flux Pattern & Redux
Workshop 20: ReactJS Part II Flux Pattern & ReduxWorkshop 20: ReactJS Part II Flux Pattern & Redux
Workshop 20: ReactJS Part II Flux Pattern & Redux
Visual Engineering
 
Workshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design PatternsWorkshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design Patterns
Visual Engineering
 
Workshop 19: ReactJS Introduction
Workshop 19: ReactJS IntroductionWorkshop 19: ReactJS Introduction
Workshop 19: ReactJS Introduction
Visual Engineering
 
Workshop 8: Templating: Handlebars, DustJS
Workshop 8: Templating: Handlebars, DustJSWorkshop 8: Templating: Handlebars, DustJS
Workshop 8: Templating: Handlebars, DustJS
Visual Engineering
 
Academy PRO: React native - navigation
Academy PRO: React native - navigationAcademy PRO: React native - navigation
Academy PRO: React native - navigation
Binary Studio
 
Angular 2.0 Routing and Navigation
Angular 2.0 Routing and NavigationAngular 2.0 Routing and Navigation
Angular 2.0 Routing and Navigation
Eyal Vardi
 
Workshop 3: JavaScript build tools
Workshop 3: JavaScript build toolsWorkshop 3: JavaScript build tools
Workshop 3: JavaScript build tools
Visual Engineering
 
IndexedDB - Querying and Performance
IndexedDB - Querying and PerformanceIndexedDB - Querying and Performance
IndexedDB - Querying and Performance
Parashuram N
 
Protocol Oriented MVVM - Auckland iOS Meetup
Protocol Oriented MVVM - Auckland iOS MeetupProtocol Oriented MVVM - Auckland iOS Meetup
Protocol Oriented MVVM - Auckland iOS Meetup
Natasha Murashev
 
The road to Ember.js 2.0
The road to Ember.js 2.0The road to Ember.js 2.0
The road to Ember.js 2.0
Codemotion
 
Sane Async Patterns
Sane Async PatternsSane Async Patterns
Sane Async Patterns
TrevorBurnham
 
Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications  Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications
Juliana Lucena
 
Loadrunner
LoadrunnerLoadrunner
Loadrunner
Kenneth Kufluk
 
Angular js routing options
Angular js routing optionsAngular js routing options
Angular js routing options
Nir Kaufman
 
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
Spyros Ioakeimidis
 
Protocol-Oriented MVVM
Protocol-Oriented MVVMProtocol-Oriented MVVM
Protocol-Oriented MVVM
Natasha Murashev
 
Building scalable applications with angular js
Building scalable applications with angular jsBuilding scalable applications with angular js
Building scalable applications with angular js
Andrew Alpert
 
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and JasmineSingle Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Paulo Ragonha
 

What's hot (20)

Workshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte IIIWorkshop 14: AngularJS Parte III
Workshop 14: AngularJS Parte III
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
 
Workshop 20: ReactJS Part II Flux Pattern & Redux
Workshop 20: ReactJS Part II Flux Pattern & ReduxWorkshop 20: ReactJS Part II Flux Pattern & Redux
Workshop 20: ReactJS Part II Flux Pattern & Redux
 
Workshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design PatternsWorkshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design Patterns
 
Workshop 19: ReactJS Introduction
Workshop 19: ReactJS IntroductionWorkshop 19: ReactJS Introduction
Workshop 19: ReactJS Introduction
 
Workshop 8: Templating: Handlebars, DustJS
Workshop 8: Templating: Handlebars, DustJSWorkshop 8: Templating: Handlebars, DustJS
Workshop 8: Templating: Handlebars, DustJS
 
Academy PRO: React native - navigation
Academy PRO: React native - navigationAcademy PRO: React native - navigation
Academy PRO: React native - navigation
 
Angular 2.0 Routing and Navigation
Angular 2.0 Routing and NavigationAngular 2.0 Routing and Navigation
Angular 2.0 Routing and Navigation
 
Workshop 3: JavaScript build tools
Workshop 3: JavaScript build toolsWorkshop 3: JavaScript build tools
Workshop 3: JavaScript build tools
 
IndexedDB - Querying and Performance
IndexedDB - Querying and PerformanceIndexedDB - Querying and Performance
IndexedDB - Querying and Performance
 
Protocol Oriented MVVM - Auckland iOS Meetup
Protocol Oriented MVVM - Auckland iOS MeetupProtocol Oriented MVVM - Auckland iOS Meetup
Protocol Oriented MVVM - Auckland iOS Meetup
 
The road to Ember.js 2.0
The road to Ember.js 2.0The road to Ember.js 2.0
The road to Ember.js 2.0
 
Sane Async Patterns
Sane Async PatternsSane Async Patterns
Sane Async Patterns
 
Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications  Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications
 
Loadrunner
LoadrunnerLoadrunner
Loadrunner
 
Angular js routing options
Angular js routing optionsAngular js routing options
Angular js routing options
 
AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014AngularJS - TechTalk 3/2/2014
AngularJS - TechTalk 3/2/2014
 
Protocol-Oriented MVVM
Protocol-Oriented MVVMProtocol-Oriented MVVM
Protocol-Oriented MVVM
 
Building scalable applications with angular js
Building scalable applications with angular jsBuilding scalable applications with angular js
Building scalable applications with angular js
 
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and JasmineSingle Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
 

Viewers also liked

Workhop iOS 1: Fundamentos de Swift
Workhop iOS 1: Fundamentos de SwiftWorkhop iOS 1: Fundamentos de Swift
Workhop iOS 1: Fundamentos de Swift
Visual Engineering
 
Workshop iOS 2: Swift - Structures
Workshop iOS 2: Swift - StructuresWorkshop iOS 2: Swift - Structures
Workshop iOS 2: Swift - Structures
Visual Engineering
 
The mobile-web-at-a-snails-pace
The mobile-web-at-a-snails-paceThe mobile-web-at-a-snails-pace
The mobile-web-at-a-snails-pace
Marcel Kalveram
 
Workshop 21: React Router
Workshop 21: React RouterWorkshop 21: React Router
Workshop 21: React Router
Visual Engineering
 
Navigation in React Native
Navigation in React NativeNavigation in React Native
Navigation in React Native
Sambhu Lakshmanan
 
[React-Native Tutorial] Lecture 8: Midterm Exam Discussion, Feedback, and Ter...
[React-Native Tutorial] Lecture 8: Midterm Exam Discussion, Feedback, and Ter...[React-Native Tutorial] Lecture 8: Midterm Exam Discussion, Feedback, and Ter...
[React-Native Tutorial] Lecture 8: Midterm Exam Discussion, Feedback, and Ter...
Kobkrit Viriyayudhakorn
 
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJSLo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Marcel Kalveram
 
React Native custom components
React Native custom componentsReact Native custom components
React Native custom components
Jeremy Grancher
 
React Native GUIDE
React Native GUIDEReact Native GUIDE
React Native GUIDE
dcubeio
 
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScriptReact Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
Kobkrit Viriyayudhakorn
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react native
ModusJesus
 
Change document display
Change document displayChange document display
Change document display
Radosław Gref
 
Unlock The Value Of Your Microsoft and SAP Investments
Unlock The Value Of Your Microsoft and SAP InvestmentsUnlock The Value Of Your Microsoft and SAP Investments
Unlock The Value Of Your Microsoft and SAP Investments
SAP Technology
 
Workshop 16: EmberJS Parte I
Workshop 16: EmberJS Parte IWorkshop 16: EmberJS Parte I
Workshop 16: EmberJS Parte I
Visual Engineering
 
Workshop iOS 3: Testing, protocolos y extensiones
Workshop iOS 3: Testing, protocolos y extensionesWorkshop iOS 3: Testing, protocolos y extensiones
Workshop iOS 3: Testing, protocolos y extensiones
Visual Engineering
 
CDS Unit Testing
CDS Unit TestingCDS Unit Testing
CDS Unit Testing
ChrisESwanepoel
 
Workshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototypingWorkshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototyping
Visual Engineering
 
Workshop iOS 4: Closures, generics & operators
Workshop iOS 4: Closures, generics & operatorsWorkshop iOS 4: Closures, generics & operators
Workshop iOS 4: Closures, generics & operators
Visual Engineering
 
Multithreading 101
Multithreading 101Multithreading 101
Multithreading 101
Tim Penhey
 
Hana sql
Hana sql Hana sql
Hana sql
Manuel Zárate
 

Viewers also liked (20)

Workhop iOS 1: Fundamentos de Swift
Workhop iOS 1: Fundamentos de SwiftWorkhop iOS 1: Fundamentos de Swift
Workhop iOS 1: Fundamentos de Swift
 
Workshop iOS 2: Swift - Structures
Workshop iOS 2: Swift - StructuresWorkshop iOS 2: Swift - Structures
Workshop iOS 2: Swift - Structures
 
The mobile-web-at-a-snails-pace
The mobile-web-at-a-snails-paceThe mobile-web-at-a-snails-pace
The mobile-web-at-a-snails-pace
 
Workshop 21: React Router
Workshop 21: React RouterWorkshop 21: React Router
Workshop 21: React Router
 
Navigation in React Native
Navigation in React NativeNavigation in React Native
Navigation in React Native
 
[React-Native Tutorial] Lecture 8: Midterm Exam Discussion, Feedback, and Ter...
[React-Native Tutorial] Lecture 8: Midterm Exam Discussion, Feedback, and Ter...[React-Native Tutorial] Lecture 8: Midterm Exam Discussion, Feedback, and Ter...
[React-Native Tutorial] Lecture 8: Midterm Exam Discussion, Feedback, and Ter...
 
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJSLo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
 
React Native custom components
React Native custom componentsReact Native custom components
React Native custom components
 
React Native GUIDE
React Native GUIDEReact Native GUIDE
React Native GUIDE
 
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScriptReact Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react native
 
Change document display
Change document displayChange document display
Change document display
 
Unlock The Value Of Your Microsoft and SAP Investments
Unlock The Value Of Your Microsoft and SAP InvestmentsUnlock The Value Of Your Microsoft and SAP Investments
Unlock The Value Of Your Microsoft and SAP Investments
 
Workshop 16: EmberJS Parte I
Workshop 16: EmberJS Parte IWorkshop 16: EmberJS Parte I
Workshop 16: EmberJS Parte I
 
Workshop iOS 3: Testing, protocolos y extensiones
Workshop iOS 3: Testing, protocolos y extensionesWorkshop iOS 3: Testing, protocolos y extensiones
Workshop iOS 3: Testing, protocolos y extensiones
 
CDS Unit Testing
CDS Unit TestingCDS Unit Testing
CDS Unit Testing
 
Workshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototypingWorkshop 11: Trendy web designs & prototyping
Workshop 11: Trendy web designs & prototyping
 
Workshop iOS 4: Closures, generics & operators
Workshop iOS 4: Closures, generics & operatorsWorkshop iOS 4: Closures, generics & operators
Workshop iOS 4: Closures, generics & operators
 
Multithreading 101
Multithreading 101Multithreading 101
Multithreading 101
 
Hana sql
Hana sql Hana sql
Hana sql
 

Similar to Workshop 25: React Native - Components

What's New in Android
What's New in AndroidWhat's New in Android
What's New in Android
Robert Cooper
 
Average- An android project
Average- An android projectAverage- An android project
Average- An android project
Ipsit Dash
 
Connect.js - Exploring React.Native
Connect.js - Exploring React.NativeConnect.js - Exploring React.Native
Connect.js - Exploring React.Native
joshcjensen
 
Android 3
Android 3Android 3
Android 3
Robert Cooper
 
How to React Native
How to React NativeHow to React Native
How to React Native
Dmitry Ulyanov
 
List adapter with multiple objects
List adapter with multiple objectsList adapter with multiple objects
List adapter with multiple objects
baabtra.com - No. 1 supplier of quality freshers
 
N Things You Don't Want to Repeat in React Native
N Things You Don't Want to Repeat in React NativeN Things You Don't Want to Repeat in React Native
N Things You Don't Want to Repeat in React Native
Anton Kulyk
 
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics
Eliran Eliassy
 
Android por onde começar? Mini Curso Erbase 2015
Android por onde começar? Mini Curso Erbase 2015 Android por onde começar? Mini Curso Erbase 2015
Android por onde começar? Mini Curso Erbase 2015
Mario Jorge Pereira
 
Prescribing RX Responsibly
Prescribing RX ResponsiblyPrescribing RX Responsibly
Prescribing RX Responsibly
Nareg Khoshafian
 
React on Rails - RailsConf 2017 (Phoenix)
 React on Rails - RailsConf 2017 (Phoenix) React on Rails - RailsConf 2017 (Phoenix)
React on Rails - RailsConf 2017 (Phoenix)
Jo Cranford
 
Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React
Robert DeLuca
 
Using React, Redux and Saga with Lottoland APIs
Using React, Redux and Saga with Lottoland APIsUsing React, Redux and Saga with Lottoland APIs
Using React, Redux and Saga with Lottoland APIs
Mihail Gaberov
 
Migrating from Flux to Redux. Why and how.
Migrating from Flux to Redux. Why and how.Migrating from Flux to Redux. Why and how.
Migrating from Flux to Redux. Why and how.
Astrails
 
Going fullstack React(ive) - Paulo Lopes - Codemotion Amsterdam 2017
Going fullstack React(ive) - Paulo Lopes - Codemotion Amsterdam 2017Going fullstack React(ive) - Paulo Lopes - Codemotion Amsterdam 2017
Going fullstack React(ive) - Paulo Lopes - Codemotion Amsterdam 2017
Codemotion
 
React Native: JS MVC Meetup #15
React Native: JS MVC Meetup #15React Native: JS MVC Meetup #15
React Native: JS MVC Meetup #15
Rob Gietema
 
React lecture
React lectureReact lecture
React lecture
Christoffer Noring
 
Reactive Programming Patterns with RxSwift
Reactive Programming Patterns with RxSwiftReactive Programming Patterns with RxSwift
Reactive Programming Patterns with RxSwift
Florent Pillet
 
React 101
React 101React 101
React 101
Casear Chu
 
From mvc to redux: 停看聽
From mvc to redux: 停看聽From mvc to redux: 停看聽
From mvc to redux: 停看聽
Jeff Lin
 

Similar to Workshop 25: React Native - Components (20)

What's New in Android
What's New in AndroidWhat's New in Android
What's New in Android
 
Average- An android project
Average- An android projectAverage- An android project
Average- An android project
 
Connect.js - Exploring React.Native
Connect.js - Exploring React.NativeConnect.js - Exploring React.Native
Connect.js - Exploring React.Native
 
Android 3
Android 3Android 3
Android 3
 
How to React Native
How to React NativeHow to React Native
How to React Native
 
List adapter with multiple objects
List adapter with multiple objectsList adapter with multiple objects
List adapter with multiple objects
 
N Things You Don't Want to Repeat in React Native
N Things You Don't Want to Repeat in React NativeN Things You Don't Want to Repeat in React Native
N Things You Don't Want to Repeat in React Native
 
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics
 
Android por onde começar? Mini Curso Erbase 2015
Android por onde começar? Mini Curso Erbase 2015 Android por onde começar? Mini Curso Erbase 2015
Android por onde começar? Mini Curso Erbase 2015
 
Prescribing RX Responsibly
Prescribing RX ResponsiblyPrescribing RX Responsibly
Prescribing RX Responsibly
 
React on Rails - RailsConf 2017 (Phoenix)
 React on Rails - RailsConf 2017 (Phoenix) React on Rails - RailsConf 2017 (Phoenix)
React on Rails - RailsConf 2017 (Phoenix)
 
Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React
 
Using React, Redux and Saga with Lottoland APIs
Using React, Redux and Saga with Lottoland APIsUsing React, Redux and Saga with Lottoland APIs
Using React, Redux and Saga with Lottoland APIs
 
Migrating from Flux to Redux. Why and how.
Migrating from Flux to Redux. Why and how.Migrating from Flux to Redux. Why and how.
Migrating from Flux to Redux. Why and how.
 
Going fullstack React(ive) - Paulo Lopes - Codemotion Amsterdam 2017
Going fullstack React(ive) - Paulo Lopes - Codemotion Amsterdam 2017Going fullstack React(ive) - Paulo Lopes - Codemotion Amsterdam 2017
Going fullstack React(ive) - Paulo Lopes - Codemotion Amsterdam 2017
 
React Native: JS MVC Meetup #15
React Native: JS MVC Meetup #15React Native: JS MVC Meetup #15
React Native: JS MVC Meetup #15
 
React lecture
React lectureReact lecture
React lecture
 
Reactive Programming Patterns with RxSwift
Reactive Programming Patterns with RxSwiftReactive Programming Patterns with RxSwift
Reactive Programming Patterns with RxSwift
 
React 101
React 101React 101
React 101
 
From mvc to redux: 停看聽
From mvc to redux: 停看聽From mvc to redux: 停看聽
From mvc to redux: 停看聽
 

More from Visual Engineering

Workshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux AdvancedWorkshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux Advanced
Visual Engineering
 
Workshop 18: CSS Animations & cool effects
Workshop 18: CSS Animations & cool effectsWorkshop 18: CSS Animations & cool effects
Workshop 18: CSS Animations & cool effects
Visual Engineering
 
Workshop 10: ECMAScript 6
Workshop 10: ECMAScript 6Workshop 10: ECMAScript 6
Workshop 10: ECMAScript 6
Visual Engineering
 
Workshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVCWorkshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVC
Visual Engineering
 
Workshop 7: Single Page Applications
Workshop 7: Single Page ApplicationsWorkshop 7: Single Page Applications
Workshop 7: Single Page Applications
Visual Engineering
 
Workshop 6: Designer tools
Workshop 6: Designer toolsWorkshop 6: Designer tools
Workshop 6: Designer tools
Visual Engineering
 
Workshop 5: JavaScript testing
Workshop 5: JavaScript testingWorkshop 5: JavaScript testing
Workshop 5: JavaScript testing
Visual Engineering
 
Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.
Visual Engineering
 

More from Visual Engineering (8)

Workshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux AdvancedWorkshop 22: ReactJS Redux Advanced
Workshop 22: ReactJS Redux Advanced
 
Workshop 18: CSS Animations & cool effects
Workshop 18: CSS Animations & cool effectsWorkshop 18: CSS Animations & cool effects
Workshop 18: CSS Animations & cool effects
 
Workshop 10: ECMAScript 6
Workshop 10: ECMAScript 6Workshop 10: ECMAScript 6
Workshop 10: ECMAScript 6
 
Workshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVCWorkshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVC
 
Workshop 7: Single Page Applications
Workshop 7: Single Page ApplicationsWorkshop 7: Single Page Applications
Workshop 7: Single Page Applications
 
Workshop 6: Designer tools
Workshop 6: Designer toolsWorkshop 6: Designer tools
Workshop 6: Designer tools
 
Workshop 5: JavaScript testing
Workshop 5: JavaScript testingWorkshop 5: JavaScript testing
Workshop 5: JavaScript testing
 
Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.
 

Recently uploaded

socradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdfsocradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdf
SOCRadar
 
All you need to know about Spring Boot and GraalVM
All you need to know about Spring Boot and GraalVMAll you need to know about Spring Boot and GraalVM
All you need to know about Spring Boot and GraalVM
Alina Yurenko
 
Malibou Pitch Deck For Its €3M Seed Round
Malibou Pitch Deck For Its €3M Seed RoundMalibou Pitch Deck For Its €3M Seed Round
Malibou Pitch Deck For Its €3M Seed Round
sjcobrien
 
Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !
Marcin Chrost
 
Oracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptxOracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptx
Remote DBA Services
 
How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?
ToXSL Technologies
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
Drona Infotech
 
Unveiling the Advantages of Agile Software Development.pdf
Unveiling the Advantages of Agile Software Development.pdfUnveiling the Advantages of Agile Software Development.pdf
Unveiling the Advantages of Agile Software Development.pdf
brainerhub1
 
SMS API Integration in Saudi Arabia| Best SMS API Service
SMS API Integration in Saudi Arabia| Best SMS API ServiceSMS API Integration in Saudi Arabia| Best SMS API Service
SMS API Integration in Saudi Arabia| Best SMS API Service
Yara Milbes
 
Lecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptxLecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptx
TaghreedAltamimi
 
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, FactsALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
Green Software Development
 
Oracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptxOracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptx
Remote DBA Services
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
Grant Fritchey
 
Artificia Intellicence and XPath Extension Functions
Artificia Intellicence and XPath Extension FunctionsArtificia Intellicence and XPath Extension Functions
Artificia Intellicence and XPath Extension Functions
Octavian Nadolu
 
Energy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina JonuziEnergy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina Jonuzi
Green Software Development
 
GreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-JurisicGreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-Jurisic
Green Software Development
 
SQL Accounting Software Brochure Malaysia
SQL Accounting Software Brochure MalaysiaSQL Accounting Software Brochure Malaysia
SQL Accounting Software Brochure Malaysia
GohKiangHock
 
Top 9 Trends in Cybersecurity for 2024.pptx
Top 9 Trends in Cybersecurity for 2024.pptxTop 9 Trends in Cybersecurity for 2024.pptx
Top 9 Trends in Cybersecurity for 2024.pptx
devvsandy
 
Microservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we workMicroservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we work
Sven Peters
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
dakas1
 

Recently uploaded (20)

socradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdfsocradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdf
 
All you need to know about Spring Boot and GraalVM
All you need to know about Spring Boot and GraalVMAll you need to know about Spring Boot and GraalVM
All you need to know about Spring Boot and GraalVM
 
Malibou Pitch Deck For Its €3M Seed Round
Malibou Pitch Deck For Its €3M Seed RoundMalibou Pitch Deck For Its €3M Seed Round
Malibou Pitch Deck For Its €3M Seed Round
 
Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !Enums On Steroids - let's look at sealed classes !
Enums On Steroids - let's look at sealed classes !
 
Oracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptxOracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptx
 
How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?How Can Hiring A Mobile App Development Company Help Your Business Grow?
How Can Hiring A Mobile App Development Company Help Your Business Grow?
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
 
Unveiling the Advantages of Agile Software Development.pdf
Unveiling the Advantages of Agile Software Development.pdfUnveiling the Advantages of Agile Software Development.pdf
Unveiling the Advantages of Agile Software Development.pdf
 
SMS API Integration in Saudi Arabia| Best SMS API Service
SMS API Integration in Saudi Arabia| Best SMS API ServiceSMS API Integration in Saudi Arabia| Best SMS API Service
SMS API Integration in Saudi Arabia| Best SMS API Service
 
Lecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptxLecture 2 - software testing SE 412.pptx
Lecture 2 - software testing SE 412.pptx
 
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, FactsALGIT - Assembly Line for Green IT - Numbers, Data, Facts
ALGIT - Assembly Line for Green IT - Numbers, Data, Facts
 
Oracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptxOracle 23c New Features For DBAs and Developers.pptx
Oracle 23c New Features For DBAs and Developers.pptx
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
 
Artificia Intellicence and XPath Extension Functions
Artificia Intellicence and XPath Extension FunctionsArtificia Intellicence and XPath Extension Functions
Artificia Intellicence and XPath Extension Functions
 
Energy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina JonuziEnergy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina Jonuzi
 
GreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-JurisicGreenCode-A-VSCode-Plugin--Dario-Jurisic
GreenCode-A-VSCode-Plugin--Dario-Jurisic
 
SQL Accounting Software Brochure Malaysia
SQL Accounting Software Brochure MalaysiaSQL Accounting Software Brochure Malaysia
SQL Accounting Software Brochure Malaysia
 
Top 9 Trends in Cybersecurity for 2024.pptx
Top 9 Trends in Cybersecurity for 2024.pptxTop 9 Trends in Cybersecurity for 2024.pptx
Top 9 Trends in Cybersecurity for 2024.pptx
 
Microservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we workMicroservice Teams - How the cloud changes the way we work
Microservice Teams - How the cloud changes the way we work
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
 

Workshop 25: React Native - Components

  • 1. Front End Workshops React Native Part II: Components Raul Delgado Marc Torrent rdelgado@visual-engin.com mtorrent@visual-engin.com
  • 3. React Native: is a library to generate native apps for iOS and Android mobile devices capable, programmed in javascript. React Native uses the actual native components of each platform (currently iOS and Android). Useful Native APIs React Native Part I
  • 4. Navigation in React Native Apps
  • 5. Navigator: Intro Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. renderScene: It is the prop that got a function that is responsible for, according to the name or index of the route, we will render a view or another.
  • 6. Navigator: Intro Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. renderScene: It is the prop that got a function that is responsible for, according to the name or index of the route, we will render a view or another. renderScene(route, navigator) { switch (route.name) { case 'Login': return ( <Login {...route.props} navigator={navigator} route={route} /> ); case 'Dashboard': return ( <Dashboard {...route.props} navigator={navigator} route={route} /> ); default: return null; } } How navigate: const route = { title: 'Title, name: 'NameComponent', passProps: {propsToPass: true} } this.props.navigator.replace(route); this.props.navigator.push(route); this.props.navigator.pop( );
  • 7. Navigator: Transitions We can configure the navigation bar properties, through the routeMapper configureScene : Optional function where you can configure scene animations and gestures. Available scene configutation options are: Navigator.SceneConfigs.PushFromRight (default) Navigator.SceneConfigs.FloatFromRight Navigator.SceneConfigs.FloatFromLeft Navigator.SceneConfigs.FloatFromBottom Navigator.SceneConfigs.FloatFromBottomAndroid Navigator.SceneConfigs.FadeAndroid Navigator.SceneConfigs.HorizontalSwipeJump Navigator.SceneConfigs.HorizontalSwipeJumpFromRigh t Navigator.SceneConfigs.VerticalUpSwipeJump Navigator.SceneConfigs.VerticalDownSwipeJump <Navigator configureScene={(route) => { return Navigator.SceneConfigs.FloatFromBottom; }} navigationBar={ <Navigator.NavigationBar routeMapper={NavigatorBarRouterMapper} /> } />
  • 8. Navigator: Transitions We can configure the navigation bar properties, through the routeMapper configureScene : Optional function where you can configure scene animations and gestures. Available scene configutation options are: Navigator.SceneConfigs.PushFromRight (default) Navigator.SceneConfigs.FloatFromRight Navigator.SceneConfigs.FloatFromLeft Navigator.SceneConfigs.FloatFromBottom Navigator.SceneConfigs.FloatFromBottomAndroid Navigator.SceneConfigs.FadeAndroid Navigator.SceneConfigs.HorizontalSwipeJump Navigator.SceneConfigs.HorizontalSwipeJumpFromRigh t Navigator.SceneConfigs.VerticalUpSwipeJump Navigator.SceneConfigs.VerticalDownSwipeJump <Navigator configureScene={(route) => { return Navigator.SceneConfigs.FloatFromBottom; }} navigationBar={ <Navigator.NavigationBar routeMapper={NavigatorBarRouterMapper} /> } /> const NavigatorBarRouterMapper = { LeftButton: (route, navigator, index) => { return ( <TouchableHighlight onPress={() => { navigator.pop(); } }> <Text>Back</Text> </TouchableHighlight> ); }, RightButton: (route, navigator, index) => { return null; }, Title: (route, navigator, index) => { return ( <Text >{route.name}</Text> ); }, };
  • 9. Tabs & Other Architectural Components
  • 10. TabBarIOS & TabBarIOS.Item <TabBarIOS style={{backgroundColor: '#ffffff'}} > <TabBarIOS.Item title="Tab Bar 1" selected={this.state.selectedTab === 'TabBar1'} icon={{uri: iconGame1, scale:4 }} onPress={() => { this.setState({ selectedTab: TabBar1' }); }} > <DashboardView navigator={this.props.navigator} /> </TabBarIOS.Item> <TabBarIOS.Item title="Tab Bar 2" selected={this.state.selectedTab === 'TabBar2'} icon={{uri: iconGame1, scale:4 }} onPress={() => { this.setState({ selectedTab: 'TabBar2' }); }} > <DashboardView navigator={this.props.navigator} /> </TabBarIOS.Item> </TabBarIOS>
  • 11. ViewPagerAndroid <ViewPagerAndroid style={{flex: 1}} initialPage={0}> <View > <Component1 navigator={this.props.navigator} /> </View> <View> <Component2 /> </View> <View style={{backgroundColor: 'rgba(0,0,0,.8)', flex: 1}}> <Text>ola</Text> </View> </ViewPagerAndroid> One of the many alternatives to android tabs: ViewPagerAndroid:
  • 12. ScrollableTabView - Universal $ npm install react-native-scrollable-tab-view Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. <ScrollableTabView> <Componente1 tabLabel="comp1" /> <Componente2 tabLabel="comp2" /> <Componente3 tabLabel="comp3" /> </ScrollableTabView>
  • 13. Lists & Other Presentational Components
  • 14. ListView Use ListView to render a list of components. Use a ListViewDataSource as the source of your ListView. The ListViewDataSource has two main methods: - rowHasChanged: function that handles if a row has to be re-rendered - cloneWithRows: the datasource used by ListView is inmutable. So, ListViewDataSource provides this method in order to clone the pre-existing or new data list. The ListView has the renderRow and renderSectionHeader props that are functions that we provide to the ListView in order to render the cells. renderRow (rowData, sectionID, rowID, highlightRow) rowData → The data we will use to render our component inside this cell sectionID, rowID → if we need to change our component from positioning
  • 15. ListView - example constructor(props) { super(props); this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 }) }; } fetchData(_newData) { this.setState({ dataSource: this.state.dataSource.cloneWithRows(_newData) }); } render() { return ( <ListView dataSource={this.state.dataSource} renderRow={(data, sectionID, rowID) => <MyCustomView {...data} />} style={styles.listview} /> ); }
  • 16. ... render() { return ( <ListView dataSource={this.state.dataSource} renderRow={(data, sectionID, rowID) => <MyCustomView {...data} />} renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />} style={styles.listview} /> ); } ListView - renderScrollComponent renderScrollComponentallows setting wich component will render the scrolling part of our list. By default ListView uses ScrollView. For performance it’s better to use RecyclerViewBackedScrollView. Also, you’ll find a lot of scrollable components such as InfiniteScrollView, InvertibleScrollView, ScrollableMixin, ScrollableDecorator
  • 18. UI Components Swiper: npm i react-native-swiper --save Drawer: npm install --save react-native-drawer Swipeout Buttons: npm install --save react-native-swipeout Button: npm install react-native-button --save Video: npm install react-native-video Camera: npm install react-native-camera Vector Icons: npm install react-native-vector-icons --save Native Navigation: npm install react-native-navigation --save
  • 19. Utilities & Architectural Components Reactotron: npm install reactotron --save-dev Internationalizatoin: npm install react-native-i18n --save FileSytem: npm install react-native-fs --save Push Notifications: npm install react-native-push-notification Code Push: npm install --save react-native-code-push CSS/SASS: npm install react-native-css -g Device Info : npm install react-native-device-info --save Redux Persist: npm i --save redux-persist
  • 20. Thanks for your time! Give your questions on the comments section