VS
~20min
@florianrival
github.com/4ian
App developer @
Developer of
iOS or Android
JavaScriptCore
React Native
provided by iOS, embedded on Android
your JavaScript app
Components
APIs
React Native JS components
Natif
JS
WebView
JavaScript app
Chrome/
UIWebView
JavaScript app
JSCore
App with native components
export default class ClickableImage extends Component {
render() {
return (
<TouchableHighlight onPress={this.props.onClick}>
<Image style={styles.image} source={{ uri: this.props.imageUri }}/>
<Text style={styles.text}>{this.props.text}</Text>
</TouchableHighlight>
);
}
}
onClick() {
fetch('http://my/api').then((response) => {
Alert.alert(response.json())
});
}
<Text style={this.myStyle} />
<Text style={{margin: 10, color: #BADA55}} />
<View style={{flexDirection: 'row'}}>
<Text style={{flex:0}}>I fit</Text>
<Text style={{flex:1}}>I'm taking all the spaaaaace</Text>
</View>
componentDidMount() {
InteractionManager.runAfterInteractions(() => {
Animated.timing(this.state.progress, {
toValue: 200,
}).start();
});
}
render() {
return (<Animated.View style={{
transform: [{
translateX: this.state.progress.interpolate({
inputRange: [0, 1],
outputRange: [500, 0],
}),
opacity: this.state.progress
}],
}}>
<Text>Hello world</Text>
</Animated.View>);
}
60fps, smooth transitions, smooth animations even on older devices
Very large images on Android,
Run fetches/cpu intensive code after interactions
Add Objective-C/Java code directly inside your project
Make it easier to integrate custom SDK (Facebook, Parse...) without having to rely on plugins
25000 stars, 500 contributors, a release each ~2weeks
Lots of components (from icons to full messenger component)
Yup
Yup, yup
Sure bro
Ok
Yuuuuuuuus
Yeeeaahh 😺
No network requests monitoring, use V8 instead of JSC
very simple inspector, debugger launchers,
FPS counter, options to connect to the remote packager
Jest is (was?) slow to start,
hard to test components
100% compatibility between OSes is not a goal
we pushed a fix to RN and made rn-camera-roll/rn-image-resizer
Regularly test on both OSes
a few incomplete/outdated documentation pages
Navigator does a good job, but no easy-to-use router
Be cautious and follow the doc
Solutions are being created