Aven
Intro to React Native »

Chapter 2: React Native Components

Intro to React

React allows you to define your app with components that are composed inside each other.

Components are usually delcared as functions:

function MyComponent() {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  )
}

JSX

If you're familiar with JS but are new to React, you might be confused by the HTML tags in the JS code.

This is a language extension called JSX, and it allows you to mix and match Javascript and JSX elements, which describe the structure of your components.

The curly braces allow you to use any Javascript:

function MyComponent() {
  let a = 'Hello'
  if (false) {
    a = 'Goodbye'
  }
  return (
    <View>
      <Text>{a}, World!</Text>
    </View>
  )
}

When you put JSX elements inside of eachother, you are describing "children" of that component. In the above example, the Text is the child of the View. Other components may have no children, and they do not need a closing tag:

<Image style={styles.img} />

This Image tag also demonstrates a "prop" called style. Inside the curly braces we have regular JS, so we look up the img key of the styles object. The children is a special prop.

Component Props

You can declare a component with inputs, called "props". They are passed in to your function as an object.

function Title(props) {
  return <Text style={{ color: props.color }}>Hello, World</Text>;
}

The component would be used like this: <Title color="blue" />. Here you can see the special "children" prop in action:

function Title({ color, children }) {
  return <Text style={{ color }}>{children}</Text>;
}

React Native Components

A few core components are provided by React Native:

View, Text

See the View docs for the props and styles of Views, the generic "box" component in RN.

See the Text docs for the styles and props of Text components.

ScrollView

See the ScrollView docs for the props and styles of scroll views.

Image

With React Native tools, you can require images directly:

<Image
  source={require('./myImage.png')}
/>

See the Image docs for the props and styles of image components.

StyleSheet

You can add styles to your component a few different ways. Usually they are declared statically using the StyleSheet utility:

function App() {
  return <View style={{ backgroundColor: 'blue' }} />
}
const styles = StyleSheet.create({
  app: {
    backgroundColor: 'blue',
  },
});

You can also specify styles inline, but this is only reccomended for styles that change based on props or hooks:

<View style={{ backgroundColor: 'blue' }} />

You can also combine static and dynamic styles using an array:

function Box({ backgroundColor }) {
  return (
    <View
      style={[
        styles.box,
        { backgroundColor }
      ]}
    />
  )
}
const styles = StyleSheet.create({
  box: {
    flex: 1,
  },
});

TextInput

See the TextInput docs for the props and styles of text inputs.

import React from "react";
import { StyleSheet, TextInput } from "react-native";

export default function App() {
  return (
    <TextInput
      style={styles.textInput}
      value={""}
      onChangeText={(value) => {
        // do something with value
      }}
    />
  );
}

const styles = StyleSheet.create({
  textInput: {
    borderWidth: 1,
    borderColor: "#aaa",
    borderRadius: 6,
    minWidth: 200,
    padding: 6,
  },
});

Next: React Hooks

© Aven LLC and Aven Contributors. Licensed under Creative Commons BY-NC-SA 4.0

Open Source under Apache 2.0