First React Native app

Introduction

We create a first React Native app to learn how to build mobile apps using JavaScript and React. It helps us see how code turns into a real app on a phone.

When you want to start learning mobile app development with React Native.

When you want to test if your development environment is set up correctly.

When you want to create a simple app that shows text on the screen.

When you want to understand how React Native components work together.

Syntax

React Native

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

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

The App function is the main component of your app.

View is like a container or a box for other components.

Text shows text on the screen.

Examples

This example shows a simple app that displays a welcome message.

React Native

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

export default function App() {
  return (
    <View>
      <Text>Welcome to React Native!</Text>
    </View>
  );
}

This example adds style to the text to make it bigger and blue.

React Native

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

export default function App() {
  return (
    <View>
      <Text style={{ fontSize: 20, color: 'blue' }}>Blue Text</Text>
    </View>
  );
}

Sample App

This complete app shows centered text on a light gray background. It uses styles to make the text bigger and the layout centered.

React Native

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, world!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0'
  },
  text: {
    fontSize: 24,
    color: '#333'
  }
});

Important Notes

Always import React and the components you need from 'react-native'.

Use View to group components and control layout.

Use StyleSheet.create to keep styles organized and efficient.

Summary

Your first React Native app shows text inside a View container.

React Native uses components like Text and View to build UI.

Styling helps make your app look nice and organized.