IOS and React Native Tutorial

We can run the React Native app on Android platform by running the following code in the terminal. react-native run-android Before you can run your app on Android device, you need to enable  USB Debugging  inside the  Developer Options . When  USB Debugging  is enabled, you can plug in your device and run the code snippet given above. The Native Android emulator is slow. We recommend downloading  Genymotion  for testing your app. The developer menu can be accessed by pressing  command + M .

If you want to test your app in the IOS simulator, all you need is to open the root folder of your app in terminal and run − react-native run-ios The above command will start the simulator and run the app. We can also specify the device we want to use. react-native run-ios --simulator "iPhone 5s After you open the app in simulator, you can press  command + D  on IOS to open the developers menu. You can check more about this in our  debugging chapter. You can also reload the IOS simulator by pressing  command + R .

In this chapter, we will understand navigation in React Native. Step 1: Install Router To begin with, we need to install the  Router . We will use the React Native Router Flux in this chapter. You can run the following command in terminal, from the project folder. npm i react-native-router-flux --save Step 2: Entire Application Since we want our router to handle the entire application, we will add it in  index.ios.js . For Android, you can do the same in  index.android.js . App.js import React , { Component } from 'react' ; import { AppRegistry , View } from 'react-native' ; import Routes from './Routes.js' class reactTutorialApp extends Component { render () { return ( < Routes /> ) } } export default reactTutorialApp AppRegistry . registerComponent ( 'reactTutorialApp' , () => reactTutorialApp ) Step 3: Add Router Now we will create the  Routes  component insi...

React native offers a couple of methods that help in debugging your code. In App Developer Menu You can open the developer menu on the IOS simulator by pressing  command + D . On Android emulator, you need to press  command + M . Reload  − Used for reloading simulator. You can use shortcut  command + R Debug JS Remotely  − Used for activating debugging inside browser developer console. Enable Live Reload  − Used for enabling live reloading whenever your code is saved. The debugger will open at  localhost:8081/debugger-ui . Start Systrace  − Used for starting Android marker based profiling tool. Show Inspector  − Used for opening inspector where you can find info about your components. You can use shortcut  command + I Show Perf Monitor  − Perf monitor is used for keeping track of the performance of your app.

In this chapter, we will show you how to use  LayoutAnimation  in React Native. Animations Component We will set  myStyle  as a property of the state. This property is used for styling an element inside  PresentationalAnimationComponent . We will also create two functions −  expandElement  and  collapseElement . These functions will update values from the state. The first one will use the  spring  preset animation while the second one will have the  linear  preset. We will pass these as props too. The  Expand  and the  Collapse  buttons call the  expandElement()  and  collapseElement()  functions. In this example, we will dynamically change the width and the height of the box. Since the  Home  component will be the same, we will only change the  Animations  component. In this example, we will dynamically change the width and the height of the box. Since ...

In this chapter, we will show you touchable components in react Native. We call them 'touchable' because they offer built in animations and we can use the  onPress  prop for handling touch event. Facebook offers the  Button  component, which can be used as a generic button. Consider the following example to understand the same. App.js import React , { Component } from 'react' import { Button } from 'react-native' const App = () => { const handlePress = () => false return ( < Button onPress = { handlePress } title = "Red button!" color = "red" /> ) } export default App If the default  Button  component does not suit your needs, you can use one of the following components instead. Touchable Opacity This element will change the opacity of an element when touched. App.js import React from 'react' import { TouchableOp...