React Native 101
Tags: react, reactnative, javascript, beginners
Published: 2021-01-05 04:35:03

# 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

```jsx
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](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

```jsx
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](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

```jsx
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](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:

```jsx

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.

```jsx
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](https://cutt.ly/sjoZXtn)
#Thank you so much for reading
### Would love to hear your thoughts!