React Native introduction and Core Components

This writing provides an overview of React Native introduction and Core Components.

1. React Native Overview

• React Native is a framework similar to React, used for building native mobile applications. It allows developers to write applications in JavaScript and render them using native components for platforms like Android and iOS, enabling cross-platform development with a single codebase.

2. Expo and React Native

• Expo is a platform that simplifies the development of React Native apps. It includes tools like Expo Go, an app for viewing the development progress on a phone, and Expo CLI, which aids in app creation, management, and development.

3. Native Rendering

• React Native achieves native rendering by mapping React components to their native counterparts, ensuring efficient performance and integration with platform-specific features. (Here native means Swift for iOS, Java, Kotlin etc for Android) 

4. Pros and Cons of React Native

• Advantages:

1. Cross-platform compatibility reduces development time and maintenance efforts.
2. Direct access to native functionalities allows high performance comparable to native apps.
3. It requires only basic web and native development knowledge to get started.
• Example: React Native application can be found in the React Native documentation.

• Disadvantages:

1. Pure native apps can achieve higher performance ceilings.
2. Being an abstraction layer, React Native must keep up with changes in native platforms.
3. Complex apps may require significant customization in native code, necessitating deeper platform knowledge.
• Example: Airbnb started with React Native but later switched to a different toolset.

5. Entry point

• In React Native, the app's entry point must export all functionalities from a single default component.

import * as React from 'react';

const App = () => (
  // All functionality goes here
);

export default App;

6. Core Components

• Core components, which can be imported from the react-native package, include <View>, <Text>, <Image>, <ScrollView>, <Button>, and <TextInput>. For detail, refer to: https://reactnative.dev/docs/components-and-apis

6-1. Importing Core Components

• You should import core components into your project from the react-native package to use it.

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

6-2. <View> Components

• <View> is a generic container similar to a <div> in web development.

function App () {
  return (
    {/* Base layout structure */}
    <View style={{ flex: 1 }}>
      {/* Simple background color */}
      <View style={{ padding: 8, color: 'red' }}>
        <Text>Text with background color</Text>
      </View>
      {/* Space layout structure */}
      <View style={{ margin: 16 }} />
    </View>
  );
}

6-3. <ScrollView> Components

• <ScrollView> is also a container but with scrolling capabilities, less suitable for simple layouts.

function App () {
  return (
    <ScrollView>
      <Text style={{ margin: 16 }}>Scroll here to see more!</Text>
      <Text style={{ marginTop: 1024 }} />
      <Text style={{ margin: 16 }}>Made you look!</Text>
    </ScrollView>
  );
}

6-4. <Text> Components

• <Text> is used exclusively for displaying text and can be styled and nested.

<Text style={{ height: 40, borderWidth: 1 }}>
  Here's some text!
</Text>

6-5. <TextInput> Components

• <TextInput> captures user input, customizable with props like onChangeText.

const [input, setInput] = useState('');

// example use of input
console.log(input);

return (
  <TextInput
    placeholder="What is your name?"
    onChangeText={setInput}
  />
);

6-6. <Image> Components

• <Image> optimally renders images from various sources.

<Image source={require('./local/asset.jpg)} />
<Image source={{ uri: 'https://docs.expo.io/static/images/sdk.svg'}} />

7. Custom Components

• Developers often create custom components for specific needs, wrapping configurations and functionalities.

const App = () => (
  <View style={{ flex: 1, justifyContent: 'center' }}>
    <Box color="red" />
    <Box color="green" />
    <Box color="blue" />
  </View>
);

export const Box = (props) => (
  <View style={{ width: 100, height: 100, backgroundColor: props.color }} />
);