View

Container or Layout component.

View component is like the HTML div tag. The main aim of this component is to act like 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 View component if you need to apply layout styling

In a nut shell:

  1. Use View for styling the Layout of any component
  2. Doesn’t support style inheritance
  3. Uses flex box 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 nut shell:

  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 nut shell:

  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 react native component. 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 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 the particular style.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Next Post

React Native: Responsive and Adaptive User Interfaces

Thu Jan 28 , 2021
Adaptability is probably the most essential need of an app. I will try to layout some of the tools and tips that I use while […]