Shipsar Tutorials

Chapter 4: Working with Views and Text

1. Using View, Text, and Image Components

View Component

• Description: The View component is a fundamental building block in React Native, used for creating containers or layout structures in your app.

• Example:

  import React from "react";
  import { View, Text } from "react-native";
  
  const App = () => {
    return (
      <View style={{ padding: 20 }}>
        <Text>Hello, React Native!</Text>
      </View>
    );
  };
  
  export default App;
  

  • Explanation: In this example, the View component is used as a container with padding, and the Text component is nested inside it to display a message.

Text Component

• Description: The Text component is used to display text in your app. It supports various styling options like font size, color, and weight.

• Example:

  import React from "react";
  import { Text } from "react-native";
  
  const App = () => {
    return (
      <Text style={{ fontSize: 18, color: "blue" }}>
        This is a styled text.
      </Text>
    );
  };
  
  export default App;
  

  • Explanation: The Text component displays a styled message with a font size of 18 and a blue color.

Image Component

• Description: The Image component is used to display images in your app. You can load images from local files or URLs.

• Example:

  import React from "react";
  import { Image, View } from "react-native";
  
  const App = () => {
    return (
      <View>
        <Image
          source={{ uri: "https://example.com/image.jpg" }}
          style={{ width: 200, height: 200 }}
        />
      </View>
    );
  };
  
  export default App;
  

  • Explanation: The Image component displays an image from a URL with a width and height of 200 pixels.

2. Styling Text in React Native

Basic Text Styling

• Description: You can style text using the style prop, which accepts a JavaScript object with various style properties.

• Example:

  import React from "react";
  import { Text, View } from "react-native";
  
  const App = () => {
    return (
      <View>
        <Text style={{ fontSize: 20, fontWeight: "bold" }}>Bold Text</Text>
        <Text style={{ fontSize: 18, color: "red" }}>Red Text</Text>
        <Text style={{ fontSize: 16, fontStyle: "italic" }}>Italic Text</Text>
      </View>
    );
  };
  
  export default App;
  

  • Explanation: This example demonstrates how to apply different styles to text, such as bold, color, and italic.

Advanced Text Styling

• Description: You can combine multiple styles and apply more advanced styling like line height, letter spacing, and text alignment.

• Example:

  import React from "react";
  import { Text, View } from "react-native";
  
  const App = () => {
    return (
      <View>
        <Text
          style={{
            fontSize: 18,
            lineHeight: 24,
            letterSpacing: 1,
            textAlign: "center",
          }}
        >
          This is a centered text with custom line height and letter spacing.
        </Text>
      </View>
    );
  };
  
  export default App;
  

  • Explanation: The example shows how to center text and customize its line height and letter spacing.

3. Nested Views and Text Elements

Description: React Native allows you to nest View and Text components within each other, creating complex layouts and text structures.

• Example:

  import React from "react";
  import { View, Text } from "react-native";
  
  const App = () => {
    return (
      <View style={{ padding: 20, backgroundColor: "#f0f0f0" }}>
        <Text style={{ fontSize: 20, marginBottom: 10 }}>Title</Text>
        <View style={{ padding: 10, backgroundColor: "#fff" }}>
          <Text>This is some nested content.</Text>
        </View>
      </View>
    );
  };
  
  export default App;
  

  • Explanation: The example demonstrates a nested structure where a Text component is nested inside a View, which is itself nested within another View.

4. Creating Custom Views

Description: You can create reusable custom views by combining various components and styles.

• Example:

  import React from "react";
  import { View, Text } from "react-native";
  
  const CustomCard = ({ title, content }) => {
    return (
      <View style={{ borderWidth: 1, padding: 15, borderRadius: 10 }}>
        <Text style={{ fontSize: 18, fontWeight: "bold" }}>{title}</Text>
        <Text>{content}</Text>
      </View>
    );
  };
  
  const App = () => {
    return (
      <View style={{ padding: 20 }}>
        <CustomCard title="Card Title" content="This is the card content." />
      </View>
    );
  };
  
  export default App;
  

  • Explanation: This example shows how to create a reusable CustomCard component that accepts title and content as props and displays them with styling.

---

These notes provide a comprehensive understanding of working with View and Text components in React Native. Each example demonstrates key concepts, and you can easily integrate them into your projects.