react native

If you’re like me and every other MERN stack enthusiast, you’ve probably followed the path of learning HTML, CSS, JavaScript, and then React. Now, you’re probably wondering how to break into mobile development. This article aims to guide you through the process of leveraging your existing React knowledge to master React Native. I'll be sharing my personal learning experience, highlighting key concepts, and providing practical insights
(Also I am new to React Native - if you see any problems with the content here let me know )

Getting Started with React Native

When starting with React, we’re familiar with using commands like:

npx create-react-app

# or
npx create-vite@latest

These commands get a starter React app ready. Similarly, in React Native, there are two main options to kick things off:

Expo: A React Native framework that simplifies development and allows you to build, run, and test your app without worrying about native dependencies.
React Native CLI: This method is used when you need more control or want to add native customizations to your app.

Since Expo is the recommended starting point in the official documentation, we'll use it as our entry point.

npx create-expo-app@latest

With that, you’re ready to set up your Expo framework. Here’s a quick checklist:

Project Setup: Initialize your project using the command above.
Emulator Setup: Download Android Studio if you’d like to run an emulator on your PC.
Device Testing: Alternatively, you can use the Expo Go app on your phone to test your app.
Web Preview: Run the development server on your desktop and view the app in your browser.

Project Structure and Core Concepts

If you’re familiar with React’s project structure, React Native will feel quite similar. Here’s a quick comparison of key components:

Core Components

React Native Web (React) Description
<View> <div> A container for layout (flexbox by default)
<Text> <p> Displays text content
<Image> <img> Displays images
<TextInput> <input> A user input field

These components behave similarly to their React counterparts, but they’re mapped to native mobile components under the hood. For instance:

<View> is mapped to Android.View on Android and UIView on iOS.
Platform-specific changes can be made using the Platform module.

here’s a simple React Native example:
```
  import { View, Text } from 'react-native';
  import React from 'react';

  export default function Index() {
    return (
      <View style={{ height: '100%', justifyContent: 'center', alignItems: 'center' }}>
        <Text>index</Text>
      </View>
    );
  }
```
When run, it will render the following screen on a native device, similar to how React renders content on the web but with native components instead of HTML elements.

Native Differences
- No DOM: React Native doesn’t use HTML or DOM elements. It works with native components instead.
- Native Components: Uses components like <Button>, <Switch>, <ScrollView>, and <View>.
- Automatic Platform Handling: View automatically maps to Android.View on Android and UIView on iOS.
- No CSS: Instead, you use the StyleSheet API to style components with inline styles.

Styling with StyleSheet

Unlike CSS, React Native uses JavaScript objects to style components. Here's a simple example:

    import { StyleSheet, View } from 'react-native';

    const App = () => {
      return <View style={styles.container} />;
    };

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      },
    });

React Native vs React

Here’s a side-by-side comparison of how the same simple app would look in React Native and React:

React Native

    function App() {
      return (
        <View>
          <Text>Hello, world!</Text>
        </View>
      );
    }

React

    function App() {
      return (
        <div>
          <p>Hello, world!</p>
        </div>
      );
    }

The logic and structure are essentially the same, but React Native uses native mobile components instead of HTML elements.

Let's put your React Native knowledge to the test by building a search/filter bar with a list of items below it. Here’s a simple version of the app:

    import { View, Text, StyleSheet, TextInput } from 'react-native';
    import React, { useState } from 'react';

    export default function Index() {
      const data = ['cat', 'dog', 'monkey', 'apple', 'banana'];
      const [value, setValue] = useState(data);

      function filterData(text) {
        if (text === '') {
          setValue(data);
        } else {
          setValue(data.filter((item) => item.includes(text.toLowerCase())));
        }
      }

      return (
        <View style={styles.container}>
          <Text>Search Filter</Text>
          <TextInput
            style={styles.inputBox}
            onChangeText={filterData}
            placeholder="Type here..."
            placeholderTextColor="gray"
          />
          {value.map((item, index) => (
            <Text key={index} style={styles.listItem}>{item}</Text>
          ))}
        </View>
      );
    }

    const styles = StyleSheet.create({
      container: {
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
      },
      listItem: {
        margin: 10,
      },
      inputBox: {
        height: 40,
        width: 200,
        backgroundColor: 'black',
        color: 'white',
        margin: 10,
        paddingHorizontal: 10,
      },
    });

Challenge: Try building the app on your own before reviewing the solution.

Native Modules

With the core concepts in place, you’re now able to create apps similar to those you’d build using React for the web. But for mobile-specific features like accessing device sensors or the camera, you’ll need to work with Native Modules. These modules allow access to device hardware like GPS, accelerometers, and file systems, giving your app powerful mobile capabilities.

**My Project: Dumbphone.so Clone

here [github.com/shivankkunwar/NoBrainRot**](http..

To put my React Native knowledge to the test, I’m working on a clone of Dumbphone.so. The goal is to apply everything I’ve learned to build a fully functional mobile app. This project will push me to understand native modules, navigation, and more advanced aspects of React Native development.

Final Thoughts

If you’ve learned React, you’re already halfway to mastering React Native. The skills are highly transferable, and the differences are minor but significant. From core components like <View> and <Text> to the use of Native Modules, React Native offers an exciting path for web developers to break into mobile development. So get started, build something, and see where your learning takes you.

From React to React native: Smooth transition

Leverage Your React Skills to Master Mobile Development with React Native