iOS and Android development with React Native

React Native is an open source JavaScript framework for building mobile applications for iOS and Android devices. It's based on React, a JavaScript framework for building websites for traditional browsers. (Eiseman 2016.)
React Native provides an easy developer experience compared to traditional mobile development. When developing an application, you can instantly see changes without building the application first. You can also use your favourite tools like any text editor and terminal, and the developer tools in Chrome or Safari. You are not forced to use Xcode for iOS development or Android Studio for Android development. However, when developing for iOS, the development machines still needs to be an Apple OS X computer. (Eiseman 2016.)
With React Native it's easy to use the same code for both iOS and Android applications. For some applications some functionality needs to be platform-specific, but it's possible to achieve even 87% code reuse on real-world applications like for example the Facebook Ads Manager. (Eiseman 2016.)

The most notable drawback with React Native is that it's still new technology, meaning it's still in progress and lacking some documentation, but often the benefits of writing both Android and iOS applications in JavaScript outweighs the drawbacks, so it's a good solution to look into. (Eiseman 2016.) This chapter introduces and explains the core features of React Native: rendering, components, JSX, state and props

Comments

Post a Comment

Popular posts from this blog

Size & Dimensions & onLayout

Image
1.window size let winSize = Dimensions.get( 'window' ); console .log(winSize); class Size extends Component { render() { return ( < View style = {styles.container} > < View style = {styles.block} /> < Text style = {styles.text} > some text </ Text > </ View > ); } } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'flex-start' }, block: { height: 100, width: winSize.width, backgroundColor: 'red' }, text: { color: '#ffffff', fontSize: 40/winSize.scale, backgroundColor: 'blue' } }); 2. onLayout class Size extends Component { handleTextLayout(evt){ console .log(evt.nativeEvent.layout); } render() { return ( < View style = {styles.container} > < View style = {styles.block} /> < Text style = {styles.text} onLayout = {this.handle
Read more

Data - Networking - Fetch

Image
 Fetch 1.apply  redux-thunk  middleware import { applyMiddleware, createStore, compose } from 'redux' ; import thunk from 'redux-thunk' ; import createLogger from 'redux-logger' ; import reducers from '../reducers' ; var middlewares = compose(applyMiddleware(thunk), autoRehydrate()); export default function configureStore ( ) { const store = createStore(reducers, undefined , middlewares); return store; } 2.start & end action types //todo action types export const START_FETCH_ALL_TODOS = 'START_FETCH_ALL_TODOS' ; export const FETCH_ALL_TODOS = 'FETCH_ALL_TODOS' ; 3.fetch flow import * as types from '../constants/ActionTypes' ; import * as APIs from '../constants/ServerAPIs' ; function shouldFetchAllTodos ( state ) { const data = state.todos; if (data && data.isFetchingAllTodos) { return false } return true ; } export function fetchAllTodos ( ) {
Read more

Absolute & Relative

Image
1.absolute class Position extends Component { render() { return ( < View style = {styles.container} > < View style = {styles.box1} > < Text style = {styles.text} > 1 </ Text > </ View > < View style = {styles.box2} > < Text style = {styles.text} > 2 </ Text > </ View > < View style = {styles.box3} > < Text style = {styles.text} > 3 </ Text > </ View > </ View > ); } } const styles = StyleSheet.create({ container: { flex: 1 }, box1: { position: 'absolute' , top: 40 , left: 40 , width: 100 , height: 100 , backgroundColor: 'red' }, box2: { position: 'absolute' , top: 80 , left: 80 , width: 100 , height: 100 , backgroundColor: 'blue' }, box3: { position: 'absolute' ,
Read more