React Native

Question 1

What is React Native

Answer 1

• JS framework for mobile app development that renders to native iOS and Android code
• built on top of React JS
• uses React platform to create a bridge between JS sytax and host platform
• React components return markup, React uses the markup on DOM, React Native translates the markup to the host platform

Question 2

core components

Answer 2

Text
Image
View
TextInput
ListView

Question 3

virtual DOM

Answer 3

• React creates an in-memory data structure cache, computers the resulting differences and then updates the browser’s displayed DOM efficiently.
• React libraries only render subcomponents that actually change.

Question 4

Flexbox

Answer 4

• works the same way as it does in CSS on the web

- provides a fixed layout on different screen sizes

Question 5

FlatList

Answer 5

component that displays the content in similarly structured data as a scrollable list

Question 6

geolocation

Answer 6

use the Location Services :

• React-native-geolocation-service
• React-native-location

Question 7

props

Answer 7

• short for properties
• immutable
• components receive props from their parent
• enables code reuse

// Parent 
export default class ScreenOne extends React.Component {
  render () {
    return (

)   } }

// Child component
export default class Heading extends React.Component {
  render () {
    return (

    {this.props.message}

    )
  }
}
Heading.propTypes = {
  message: PropTypes.string
}
Heading.defaultProps = {
  message: 'Heading One'
}

Question 8

state

Answer 8

• internal to a component
• mutable
• handles data that is changeable
• use setState to update state objects

class Form extends React.Component {

  constructor (props) {
     super(props)
     this.state = {
       input: ''
     }
  }

handleChangeInput = (text) => {
this.setState({ input: text })
}

render () {
const { input } = this.state

return (

  )
}  }

Question 9

StyleSheet.create

Answer 9

• ensures that values are immutable and opaque

- only created once

Question 10

Steps to create and start a React Native app

Answer 10

1. npm install -g create-react-native-app
2. create-react-native-app AwesomeProject
3. cd AwesomeProject
4. npm start

Question 11

XHR Module

Answer 11

used for implementation of XMLHttpRequest to post data on the server

Question 12

function used to pass values between screens

Answer 12

this.props.navigation.navigate(‘RouteName, { /* params go here */ })

Question 13

JavaScriptCore

Answer 13

• open-source Web browser engine which runs in Webkit.

- helps developers create own browser

Question 14

WebView

Answer 14

• component that is implemented to load a web page or web content
• bridge that connects web platforms with React Native

Question 15

Gesture Responder System

Answer 15

manages lifecycle of gestures in the app

Question 16

native events supported by React Native

Answer 16

Clipboard Events
Composition Events
Keyboard Events
Focus Events
Form Events
Mouse Events
Pointer Events
Selection Events
Touch Events
UI Events
Wheel Events
Media Events
Image Events
Animation Events
Transition Events

Question 17

React Native Platform module

Answer 17

used to detect the platform of the device

Question 18

timer related functions

Answer 18

setTimeout, clearTimeout
setInterval, clearInterval
setImmediate, clearImmediate
requestAnimationFrame, cancelAnimationFrame