React Native 101

View

Container or Layout component.

View component is like the HTML div tag. The main aim of this component is to act as a container around another components.

You can nest a View inside another, and it is pretty much a general practice to wrap every component with a View component if you need to apply layout styling

In a nutshell:

1. Use View for styling the Layout of any component
2. Doesn't support style inheritance
3. Uses flexbox with default main axis being "column"

Example

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

const TestComponent = () => {
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.text}>Hi, What's up</Text>
      </View>
    </View>
  );
};

export default TestComponent;

const styles = StyleSheet.create({
  container: {
    padding: 50,
  },
  textContainer: {
    backgroundColor: "#000",
    borderRadius: 50,
    alignItems: "center",
  },

  text: {
    color: "#fff",
    fontSize: 24,
  },
});

More on: https://reactnative.dev/docs/view

Text

This is probably the second most used component in react-native. It is used to display text pretty much anywhere.

In a nutshell:

1. Use Text for displaying text anywhere in your app.
2. Support nesting with style inheritance

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

const App = () => {
  return (
    <Text style={styles.baseText}>
      <Text style={styles.titleText} onPress={onPressTitle}>
        "Title of the App"
      </Text>
      <Text numberOfLines={5}>
                "Body of the App"
            </Text>
    </Text>
  );
};

const styles = StyleSheet.create({
  baseText: {
    color: "#CCA7B1"
  },
  titleText: {
    fontSize: 20,
    color: "#000"
  }
});

export default App;

More on: https://reactnative.dev/docs/text

TextInput

This component used for inputting text into the app via a keyboard.

It comes with a lot of configuration props for auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad and whatnot.

In a nutshell:

1. Use it to take text input

import React, { useState } from "react";
import { StyleSheet, View, TextInput, Button, Modal } from "react-native";

const GoalInput = ({ addGoalHandler, modalVisible }) => {
  const [enteredText, setEnteredText] = useState();

  const goalChangeHandler = (enteredText) => {
    setEnteredText(enteredText);
  };

  const addGoalClearBufferHandler = () => {
    addGoalHandler(enteredText);
    setEnteredText("");
  };

  return (
    <Modal visible={modalVisible} animationType="slide">
      <View style={styles.inputBox}>
        <TextInput
          placeholder="Course Goal"
          placeholderTextColor="#D1D5DB"
          style={styles.textInput}
          onChangeText={goalChangeHandler}
          value={enteredText}
        />
        <Button title="Add" onPress={addGoalClearBufferHandler} />
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  inputBox: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },

  textInput: {
    padding: 10,
  },
});

export default GoalInput;

More on: https://reactnative.dev/docs/textinput

StyleSheet

This API is the go-to way to write styles to style and structure react-native components. A StyleSheet is an abstraction similar to CSS StyleSheet, but it is essentially JavaScript.

The most common use case of StyleSheet is to write styles using the create method.

For eg:

const styles = StyleSheet.create({
  container: {
    padding: 50,
  },
  textContainer: {
    backgroundColor: "#000",
    borderRadius: 50,
    alignItems: "center",
  },

  text: {
    color: "#fff",
    fontSize: 24,
  },
});

"StyleSheet.create()" method takes in an object that further contains objects defining the styles.
To use these styles, use the style prop on any component and pass in a particular style object.

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

const TestComponent = () => {
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.text}>Hi, What's up</Text>
      </View>
    </View>
  );
};

export default TestComponent;

const styles = StyleSheet.create({
  container: {
    padding: 50,
  },
  textContainer: {
    backgroundColor: "#000",
    borderRadius: 50,
    alignItems: "center",
  },

  text: {
    color: "#fff",
    fontSize: 24,
  },
});

More on: https://cutt.ly/sjoZXtn

Thank you so much for reading

Would love to hear your thoughts!