DEV Community

Cover image for React Native 101
Rahul
Rahul

Posted on

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,
  },
});
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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,
  },
});
Enter fullscreen mode Exit fullscreen mode

"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,
  },
});
Enter fullscreen mode Exit fullscreen mode

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

Thank you so much for reading

Would love to hear your thoughts!

Top comments (0)