This document provides an overview of building initial scenes in React Native, including setting up components, styles, state, props, file structure, and networking. It discusses common React Native components like View, Text, Image, ScrollView, ListView, and interaction components. It also covers more advanced topics such as maps, dates pickers, geolocation, cameras, and working with native iOS and Android modules.

1. React Native
Building first scenes

2. Contents
1. Introduction
2. Building first scenes
3. Navigation/Swiping
4. Performance/Animations
5. Sockets/Push notifications/Building application/Send to market
6. ?

3. A bit of React

4. Component
export default class scrollView extends Component {
constructor() {}
render() {
return (<Text>Muffin</Text>)
}
}
AppRegistry.registerComponent('scrollView', () => scrollView);

5. Import modules
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
...
} from 'react-native';

6. Styles
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});

7. State
In general, you should initialize state in the constructor, and then call
setState when you want to change it.
this.setState({mykey: 'my new value'});

8. Props
Most components can be customized when they are created, with different
parameters. These creation parameters are called props.
<Image source={pic} style={{width: 193, height: 110}}/>

9. File Structure

10. import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, ...} from 'react-native';
export default class scrollView extends Component {
constructor() {}
render() {
return (<Text style={[styles.container]}>Muffin</Text>)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
});
AppRegistry.registerComponent('scrollView', () => scrollView);

11. Components vs API

12. Networking
fetch('https://mywebsite.com/mydata.json')

13. Customize fetch
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})

14. Success and Failure
function getMoviesFromApiAsync() {
return fetch('https://facebook.github.io/react-
native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});
}

15. Other possible options
1. Frisbee
2. axios
3. XMLHttpRequest

16. Caveats
By default, iOS will block any request that's not encrypted using SSL. If
you need to fetch from a cleartext URL (one that begins with http) you will
first need to add an App Transport Security exception. If you know ahead
of time what domains you will need access to, it is more secure to add
exceptions just for those domains; if the domains are not known until
runtime you can disable ATS completely. Note however that from January
2017, Apple's App Store review will require reasonable justification for
disabling ATS. See Apple's documentation for more information.

17. Info.plist
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>

18. Mobile components

19. Necessary items
Lists
Images
Maps
Navigation
Button (Touchable items)
Text
Inputs (Checkbox, Slider, Option, TextInput)
Camera

20. Components correspondence
<span> <Text>
<div> <View>
<ul> <ScrollView>
<img> <Image>
<button> <Button>

21. Screen API
Dimensions API
Pixel Ratio

22. Dimensions API
1. set()
2. get()
var {height, width} = Dimensions.get('window');

23. Pixel Ratio
var image = getImage({
width: PixelRatio.getPixelSizeForLayoutSize(200),
height: PixelRatio.getPixelSizeForLayoutSize(100),
});
<Image source={image} style={{width: 200, height: 100}} />

24. General components

25. View
<View style={{flexDirection: 'row', height: 100, padding: 20}}>
<View style={{backgroundColor: 'blue', flex: 0.3}} />
<View style={{backgroundColor: 'red', flex: 0.5}} />
<Text>Hello World!</Text>
</View>

26. Accesibility
VoiceOver (iOS)
TalkBack (Android)

27. Scroll View
render() {
return(
<ScrollView>
<Text style={{fontSize:96}}>Scroll me plz</Text>
<Image source={require('./img/favicon.png')} />
</ScrollView>
)
}

28. Problems
Memory usage
Performance
Renders all at once

29. List View
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>

30. Data to pass
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.state = {
dataSource: ds.cloneWithRows([
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian'
])
};

31. Interaction components

32. Button

33. Properties and methods
1. color
2. onPress()
3. title

34. Customizations

35. TouchableHighlight
Generally, you can use anywhere
you would use a button or link on
web. The view's background will be
darkened when the user presses
down on the button.

36. TouchableNativeFeedback
You may consider using on
Android to display ink surface
reaction ripples that respond to
the user's touch.

37. TouchableOpacity
can be used to provide feedback by
reducing the opacity of the button,
allowing the background to be seen
through while the user is pressing down.

38. TouchableWithoutFeedback
If you need to handle a tap
gesture but you don't want any
feedback to be displayed, use.

39. Image
<Image
style={{width: 50, height: 50}}
source={{uri: this.state.data.results[0].picture.large}}
/>

40. Backround image
return (
<Image source={...}>
<Text>Inside</Text>
</Image>
);

41. Setting Remote URL
<Image source={{
uri:'https://facebook.github.io/react/img/logo_og.png',
cache: 'only-if-cached'
}}
style={{width: 400, height: 400}}
/>

42. Working with
<input />

43. Input types
Checkbox
Slider
TextInput
RadioButton
Select (Picker?)

44. Checkbox
<Switch
onValueChange={(value) => this.setState({trueSwitchIsOn:
value})}
value={this.state.trueSwitchIsOn}
/>

45. Slider
<Slider
{...this.props}
onValueChange={(value) => this.setState({value: value})} />

46. TextBox
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
Some params are multiline prop dependent

47. Select
<Picker
selectedValue={this.state.language}
onValueChange={(lang) => this.setState({language: lang})}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>

48. Properties
Mode (dialog, dropdown) [Android]
ItemStyle (iOS)

49. Radio

50. So what?
https://github.com/pressly/react-native-radio-button-classic
https://github.com/moschan/react-native-simple-radio-button

51. At last we have a solution!
http://react-native-material-design.github.io/components/radio-button

52. Complex components

53. Date pickers

54. iOS (Module)
<DatePickerIOS
date={this.state.date}
mode="datetime"
timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours
* 60}
onDateChange={this.onDateChange}
/>

55. Options
Date
MinimumDate
MaximumDate
MinuteInterval
Mode (date, time, datetime)

56. Android Date Picker (API)
showPicker = async (stateKey, options) => {
try {
const {action, year, month, day} = await
DatePickerAndroid.open(options);
if (action === DatePickerAndroid.dismissedAction) {} else {}
} catch ({code, message}) {
console.warn(`Error in example '${stateKey}': `, message);
}
}

57. Options
Date
MinDate
MaxDate
Mode (spinner, calendar, default)

58. MapView

59. return (
<MapView
style={{height: 200, margin: 40}}
showsUserLocation={true}
/>
);
Was...

60. Deprecated since January 2017...

61. Thanks to...

62. Usage
return (
<MapView
region={this.state.region}
onRegionChange={this.onRegionChange}
/>
);

63. AirBnB examples

64. API key

65. Including native modules

66. Linking
$ react-native link

67. AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission
android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="AAAAAAAAAAAAAAAAAAAAAAAAAAAAA"/>

68. Build.gradle
dependencies {
compile project(':react-native-image-picker')
compile project(':react-native-maps')
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From
node_modules
}

69. Main Appplication.java
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new ImagePickerPackage(),
new MapsPackage()
);
}

70. Gradle-wrapper.properties
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https://services.gradle.org/distributions/gradle-
2.14.1-all.zip

71. Geolocation
getCurrentPosition()
watchPosition()

72. Other useful API
and components

73. Activity indicator
<ActivityIndicator
animating={this.state.animating}
style={[styles.centering, {height: 80}]}
size="large"
/>

74. Modal
<Modal
animationType={"slide"}
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {alert("Modal has been closed.")}}
></Modal>

75. ClipBoard
_setClipboardContent = async () => {
Clipboard.setString('Hello World');
try {
var content = await Clipboard.getString();
this.setState({content});
} catch (e) {
this.setState({content:e.message});
}
};

76. Toast

77. Let’s code
_onPress(){
ToastAndroid.show('This is a toast with short duration',
ToastAndroid.SHORT)
}

78. Params
SHORT / LONG
TOP / BOTTOM / CENTER

79. Working with
camera

80. CameraRoll
CameraRoll provides access to the local camera roll / gallery. Before using
this you must link the RCTCameraRoll library.
SaveToCameraRoll()
getPhotos()

81. React Native Image Picker

82. Questions?

83. Sources
https://bitbucket.org/RusinkaBogdan/react-native-
components/commits/all

84. Fin
To be continued...