React native guide Command Line
Getting Started
- Creating Project: Open Terminal App
react-native init AppName cd AppName
- Running App in the IOS Simulator
react-native run-ios
- Running App in the Android Simulator
react-native run-android;
Upgrading React Native
To upgrade React Native to the latest version execute:
npm install --save react-native@latest;
To upgrade project files execute:
react-native upgrade;
Upgrading NPM Packages
To list all outdated packages execute:
npm outdated
To update a package to the latest version execute:
npm install --save package-name@latest;
Code Snippets
Detecting Screen Size
import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');
alert(Screen size: ${width}x${height});
Here are various screen sizes for your reference:
- iPhone 5
320 x 568 - iPhone 6
375 x 667 - iPhone 6 Plus
414 x 736
Transforming Text
To transform text to upper case use toUpperCase()
method of string variables.
<Text>{this.props.title.toUpperCase()}</Text>
To transform text to lower case use toLowerCase()
method of string variables.
<Text>{this.props.title.toLowerCase()}</Text>
Limiting Number of Lines for Text Component
<Text numberOfLines={2}> Lorem ipsum dolor sit amet, </Text>
Components
Component Boilerplate
You can use this boilerplate to create new components.
import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class Component extends Component { render() { return ( <View style={styles.container}> <Text>Component</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, }, });
Default Prop Values
To set default prop values for you components use defaultProps
property. In the example below we set the default value for title
prop. You can always override the default value by passing a custom value to the component JSX expression. For example, <Header title="My Header" />
, would change title
value from default one to My Header.
import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class Header extends Component { static defaultProps = { title: 'Default Header' } render() { return ( <View > <Text style={styles.header}> {this.props.title.toUpperCase()} </Text> </View> ); } } const styles = StyleSheet.create({ header: { fontFamily: 'Avenir', fontSize: 40, fontWeight: 'bold', textAlign: 'center', }, });
Spread Attributes
You can have props as an object and pass them in JSX using ...
spread operator.
render() { const props = { title: 'My Title', size: 20, }; return <Header {...props} />; }
This code is essentially the same as follows:
render() { return <Header title="My Title" size={20} />; }
Pulling Properties out of Objects
You can pull properties out of objects using const { prop1, prop1, ...rest } = object
notation.
render() { const { title, size, ...rest } = this.props; return ( <View> <Text style={[styles.header, { fontSize: size }]} {...rest}> {title.toUpperCase()} </Text> </View> ); }
Using ES7 Decorators
Install babel-plugin-transform-decorators-legacy
first.
npm install --save-dev babel-plugin-transform-decorators-legacy
And then edit .babelrc
file to include transform-decorators-legacy
plugin.
{ "presets": [ "react-native" ], "plugins": [ "transform-decorators-legacy" ] }
Now you can use decorators. In the following example we’re using @connect
decorator from react-redux
package.
import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; @connect( (state) => { const { user, data } = state; return { user, data };}, (dispatch) => ({ actions: { ...bindActionCreators({ actionA, actionB }, dispatch) } }) ) export default class App extends Component { render({ user } = this.props) { return ( <View > <Text style={styles.header}> Hello {user.name} </Text> </View> ); } }
Styling
Applying Multiple Styles to a Component
<View style={[styles.generic, styles.specific, { color: 'blue' }]} />
Making a Circle
<View style={{ width: 90, height: 90, borderRadius: 90 / 2, backgroundColor: '#2196F3' }}/>
Fitting Image Into Flexible Container
<View style={{ backgroundColor: '#dddddd', flex: 1, }}> <Image source={{ uri: 'https://placekitten.com/g/800/600' }} style={{ position: 'absolute', top: 0, left: 0, bottom: 0, right: 0, }} /> </View>
Justify Content
flex-start
(default) — Children distributed at the start.
container: {
flexDirection: 'row',
justifyContent: 'flex-start'
}
center
— Children are centered.
container: {
flexDirection: 'row',
justifyContent: 'center'
}
flex-end
— Children distributed at the end.
container: {
flexDirection: 'row',
justifyContent: 'flex-end'
},
space-around
— Children distributed with equal space around them.
container: {
flexDirection: 'row',
justifyContent: 'space-around'
}
space-between
— Children distributed evenly.
container: {
flexDirection: 'row',
justifyContent: 'space-between'
}
Align Items
flex-start
— Children aligned at the start.
container: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-start'
}
center
— Children aligned at the center.
container: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
}
flex-end
— Children aligned at the end.
container: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end'
}
Wrapping Up
I hope you were able to find something useful for you and saved some time for developing amazing apps. If you feel like the list is missing something, just leave a comment and I’ll add it.