Intro to React Native

Introduction

• Hello and welcome to an introduction to React Native. This article will cover the fundamentals of React Native and share the basics of React Native needed to create a skeleton that can be used for the development of any app.

If you are looking to learn React Native, it is highly encouraged that you learn React in advance, as the two have similar syntax and user interface frameworks. React and React Native should not be used or mistaken for one another. The main difference between the two is that React is used to build applications that utilize a web browser, while React Native is used to build mobile applications that run on both IOS and Android Devices.

Environment Setup / Expo Setup

• To properly start we must make sure that when have all the following (applications) downloaded and up to date.

• 1 is Visual Studio Code or VS Code for short.
  VS Code is a free code editor that was designed to help users create web or cloud applications. This platform is also compatible with a variety of programming languages.
  -> https://code.visualstudio.com/ (link to download VS Code)

  • 2 Node.js install Node.js is a cross-platform JavaScript runtime environment. This will allow users to have access to the JavaScript libraries, which give users access to methods, functions, and objects for common programming tasks. It also helps users simplify and accelerate the web development process. -> https://nodejs.org/en (link to download Node.js)

• 3 Download Expo
  
  Expo is a framework that is available to download on iOS and Android devices. What this means is that instead of using a SIM.

Core Components

• In this section, we will be going over the syntax of some of the core components in React Native. These components are the most basic functions needed for a proper mobile app. React Native has built-in components that you can quickly set up in an application.

View

• View, a fundamental building block for the User Interface. View is a container component comparable to the tag in HTML. It's important to know that doesn't display any content on its own. This component is meant to support the layout with Flexbox, Styles, Touch, and accessibility.

  ## Text

  • The component is used for displaying text on the user screen. is comparable to the

    tag in HTML. This component also supports actions like nesting, styling, and touch handling. Nesting means that you can put a inside another . Styling with users are able to change things like font size, color, text alignment, and more. Lastly, touch handling means that the can detect and respond to user touches, and examples of this are taps and clicks.

  <!-- Example for both View and Text component -->
  

  import { View, Text } from "react-native";
  
  export default function App() {
    return (
      <View>
        <Text> This is an example of how view can be used </Text>
      </View>
    );
  }
  

  TextInput

  • The not to be confused with is another fundamental component that is used to input text into an app with a keyboard. Properties that are used with are value, onChangeText, and placeholder. The value property is used to display text inside the input box. When using the onChangeText property it uses a function that gets called when users type or edit. This allows for automatic updates of a new text. Lastly, the placeholder property allows for a hint text to appear inside the input when it's empty. It's helpful to know that this will disappear when users type, if there is no value added.

   import React from "react";
   import { View, Text, TextInput } from "react-native";
   const [text, onChangeText] = useState("");
  
   export default function App() {
     return (
      <View>
      <Text> Enter you Name </Text>
      <TextInput
           placeholder "Enter Name"
           value={text}
           onChangeText={onChangeText}
      />
      </View>
     );
   }
  

  ScrollView

  • The component helps users display content that's bigger than the screen, and allows users to scroll either vertically or horizontally. A limitation of this is that if you plan to have an extra-long list of items display on the screen, this will lead to slow rendering and an increase in memory usage. To help with this users are encouraged to use . renders items "lazily", which means items will only render when they are about to appear, and are removed when they are scrolled off screen. This helps to save memory and cuts down the processing time. It is also important to note that the items in will not render unless given a bounded height. What this means is that users have to define the maximum height that it's allowed to occupy.

   import React from "react";
   import { View, ScrollView, Text, StyleSheet } from "react-native";
    export default function App() {
     return (
      <View style={{ flex: 1}}>
      <ScrollView contentContainerStyle={styles.content}>
      {Array.from({ length: 30}).map((_, i) => (
      <Text key={i} style={styles.item}> Item {i+1}</Text>
      ))}
      </ScrollView>
      </View>
  
     )
   }
  
   const styles = StyleSheet.create({
     content: {
       padding: 20,
     }
     item: {
       marginVertical: 10,
       fontSize: 18,
     }
   })
  

  Button

  • The component is a built-in function in React Native, This method is also the simplest way to add a clickable button for any app. Users can add advanced styling and interactions by using features like and . allows users to make any element on a page pressable. allows users to detect touch interactions and customize the feedback for presses.

  import React from 'react'
  import {View, Button} from 'react-native';
  
  export default function App() {
    return(
  <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
  <Button title="Press Me" onPress={() => alert('Button pressed!')}>
  </View>
   )
  }
  

  StyleSheet

  • The StyleSheet API in React Native lets you define styles in a centralized and reusable way, similar to CSS in web development but written in JavaScript. This helps keep code cleaner and easier to maintain. Instead of inline styles everywhere, you can store them in a single StyleSheet.create() call and reference them by name.

  import React from "react";
  import { View, Text, StyleSheet } from "react-native";
  
  export default function App() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Hello, React Native!</Text>
      </View>
    );
  }
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "#f5f5f5",
    },
    title: {
      fontSize: 24,
      fontWeight: "bold",
      color: "#333",
    },
  });
  

  Conclusion

  • React Native is a powerful framework that bridges the gap between JavaScript developers and native mobile app development. By learning its core components like View, Text, TextInput, ScrollView,Button, and StyleSheet, you can quickly create functional, cross-platform mobile apps without deep knowledge of native iOS or Android code. Once you’re comfortable with these building blocks, you can move on to more advanced features like navigation, state management, animations, and API integration. The more you experiment, the faster you’ll be able to turn your ideas into polished, real-world applications.