React Native vs ReactJS: Installation, Styling, Navigation, Animation, and Platform‑Specific Development

React Native, now about two years old, has expanded from Android to iOS, macOS, and Windows, enabling developers to build cross‑platform mobile apps. While its API resembles ReactJS, there are important differences that web developers should understand before creating their first native app.

Installation and Packaging

React Native is a full framework that includes everything you need, unlike ReactJS which requires a bundler such as Webpack. Starting a new React Native project is as simple as running a single CLI command, after which you can write code using ES6, some ES7 features, and modern polyfills.

You must install Xcode for iOS/macOS or Android Studio for Android, and you can run your app on simulators/emulators or physical devices.

DOM and Styles

React Native does not render HTML; instead it provides components that map to native iOS and Android UI elements. Many components correspond to familiar HTML tags, e.g., View ↔ div , Text ↔ p .

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class App extends Component {
  render() {
    return (
Hello world!
);
  }
}

Because the UI is not HTML, you cannot reuse HTML, SVG, or Canvas libraries directly, though alternative React‑Native libraries exist.

Styling is done via JavaScript objects that resemble CSS but have key differences; concepts like mixins or global CSS are not applicable.

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    backgroundColor: '#fff',
    padding: 30,
  },
  button: {
    alignSelf: 'center',
    marginTop: 20,
    width: 100,
  },
});

Animation and Gestures

React Native replaces CSS animations with the JavaScript‑based Animated API, similar to Velocity.js, allowing timed or gesture‑driven animations. LayoutAnimation offers simple transitions on iOS, while Android support is limited.

For gesture handling, React Native provides the PanResponder API, exposing functions such as onPanResponderGrant , onPanResponderMove , and onPanResponderRelease to capture touch events and motion data.

Navigation

Instead of using react‑router, React Native offers a built‑in Navigator component for managing screen transitions. While it can feel complex for large apps, it works well for most mobile scenarios; alternatives like NavigatorExperimental exist but are less production‑ready.

Platform‑Specific Code

To handle iOS and Android differences, you can place shared logic in index.js and platform‑specific implementations in index.ios.js and index.android.js . The file structure might look like:

/src
  /components
    /Button
      /components
        /Icon
          /index.android.js
          /index.ios.js
        /Content
          /index.android.js
          /index.ios.js
      /index.js

Alternatively, the Platform module allows conditional code within a single file.

Developer Tools

React Native integrates with familiar web development tools. Hot Reloading speeds up UI tweaks, while Live Reload refreshes the entire app for larger changes. Chrome DevTools, Redux DevTools, and console logging work as expected, though native inspection can be less straightforward.

Publishing

Before releasing to the App Store or Google Play, understand Xcode and Android Studio workflows. For faster updates, CodePush can push JavaScript bundles directly to users without a full store release, though it is not suited for major feature releases.

Conclusion

React Native offers a smooth learning curve for ReactJS developers, enabling rapid mobile app development with a large, growing community. It is a solid alternative to Cordova for web developers seeking native performance.