React Native - App

React Native - Your First App

When you create a new React Native project using npx react-native init YourProjectName, the App.js (or App.tsx if using TypeScript) file is the main entry point for your application. It typically looks something like this initially:

<html>
 <body>
  <p>
import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen'; // These are part of the default template

const Section = ({children, title}) => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    &lt;View style={styles.sectionContainer}&gt;
      &lt;Text
        style={[
          styles.sectionTitle,
          {color: isDarkMode ? Colors.white : Colors.black,},
        ]}&gt;
        {title}
      &lt;/Text&gt;
      &lt;Text
        style={[
          styles.sectionDescription,
          {color: isDarkMode ? Colors.light : Colors.dark,},
        ]}&gt;
        {children}
      &lt;/Text&gt;
    &lt;/View&gt;
  );
};

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    &lt;SafeAreaView style={backgroundStyle}&gt;
      &lt;StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} /&gt;
      &lt;ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}&gt;
        &lt;Header /&gt;
        &lt;View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}&gt;
          &lt;Section title="Step One"&gt;
            Edit &lt;Text style={styles.highlight}&gt;App.js&lt;/Text&gt; to change this
            screen and then come back to see your edits.
          &lt;/Section&gt;
          &lt;Section title="See Your Changes"&gt;
            &lt;ReloadInstructions /&gt;
          &lt;/Section&gt;
          &lt;Section title="Debug"&gt;
            &lt;DebugInstructions /&gt;
          &lt;/Section&gt;
          &lt;Section title="Learn More"&gt;
            Read the docs to discover what to do next:
          &lt;/Section&gt;
          &lt;LearnMoreLinks /&gt;
        &lt;/View&gt;
      &lt;/ScrollView&gt;
    &lt;/SafeAreaView&gt;
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;
  </p>
 </body>
</html>

This default app showcases several React Native features, including dark mode support, safe area views, and scrollable content. It’s a good starting point to understand project structure.

Creating a “Hello, World!” App

Let’s simplify the App.js to display a basic “Hello, World!” message. Replace the entire content of App.js with the following:

<html>
 <body>
  <p>
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, StatusBar } from 'react-native';

const App = () => {
  return (
    &lt;SafeAreaView style={styles.safeArea}&gt;
      &lt;StatusBar barStyle="dark-content" /&gt;
      &lt;View style={styles.container}&gt;
        &lt;Text style={styles.text}&gt;Hello, World!&lt;/Text&gt;
        &lt;Text style={styles.text}&gt;Welcome to React Native.&lt;/Text&gt;
      &lt;/View&gt;
    &lt;/SafeAreaView&gt;
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#f0f0f0', // Background for the whole safe area
  },
  container: {
    flex: 1, // Take up all available space within SafeAreaView
    backgroundColor: '#fff',
    alignItems: 'center', // Center children horizontally
    justifyContent: 'center', // Center children vertically
  },
  text: {
    fontSize: 20,
    color: '#333',
    marginVertical: 10, // Add some vertical spacing between text elements
  },
});

export default App;
  </p>
 </body>
</html>

Output: After saving these changes, your app (if running with Fast Refresh enabled) will update to show “Hello, World!” followed by “Welcome to React Native.” centered on the screen. This simple example demonstrates the basic structure of a React Native component using View for layout and Text for displaying text, styled using StyleSheet.