Maroof Siddiqui's Blog

8. Some Components and Styling in React-Native

Maroof Siddiqui's photo
Maroof Siddiqui
·

5 min read

Section 1: Building a Better Component Structure

Creating a reusable and organized component structure is essential in React Native development. By following these steps, you can establish a better way to create components:

  1. Create a Component Folder: Start by creating a folder, usually named "components," in the home directory of your project. This folder will house all your custom components.

  2. Save Component Files: Within the "components" folder, create a new file for each component you want to build. The file should be saved with a .tsx extension, indicating a TypeScript file. Naming the file is flexible and can be chosen based on your preference.

  3. Writing the Component: Open the component file and begin writing your React Native component. Make sure to import the necessary dependencies, such as React and relevant components from 'react-native'. Export the component as the default export.

  4. Importing the Component: In the main component file (App.tsx or any other root component), import the desired component using the file path. The auto-import feature might assist in importing the component, or you can manually add the import statement.

     import ComponentName from './components/component_name';

  5. Using the Component: To use the imported component, simply include it within the JSX code of your main component by placing the component name within angle brackets.

     <ComponentName />

Note: Ensure that the correct path is specified while importing the component. If the auto-import feature doesn't work, manually add the import statement.

Section 2: Exploring Additional StyleSheet Properties

React Native's StyleSheet provides various properties to style components. Here are a few notable properties:

  • fontSize: Adjusts the size of the text.

  • fontWeight: Specifies the contrast of the text, supporting numeric values or keywords like 'normal' and 'bold'.

  • fontStyle: Specifies the style of the font, such as 'italic'.

  • borderRadius: Defines the curvature of a View component but doesn't apply to the Text component. It affects components with visible rectangular shapes like View, Image, or custom components.

  • elevation: Adds a black layer to make the container appear popped up, creating a sense of depth.

  • shadowOffset: Sets the horizontal and vertical offset of a shadow.

  • shadowColor: Specifies the color of the shadow.

  • flex: Enables the flex property, allowing components to grow and shrink based on available space.

  • flexDirection: Determines the arrangement of items inside containers, such as row, row-reverse, column, or column-reverse.

  • flexShrink and flexGrow: Control how flex items shrink or grow within a container.

  • justifyContent: Arranges items along the main axis (horizontal for row, vertical for column).

  • alignItems: Arranges items along the cross-axis (vertical for row, horizontal for column).

Section 3: Image Component and Usage

In React Native, the <Image> component is used to display images. Here's an example of using the <Image> component with its essential attributes:

<Image
  source={{
    uri: 'https://example.com/image.jpg',
  }}
  style={{ width: 200, height: 200 }}
/>
  • source: The source attribute specifies the source of the image, which can be a local file path or a remote URL.

Ensure to include the width and height styles to determine the image's dimensions for it to display correctly.

Section 4: Scrollable Content with ScrollView

React Native provides the <ScrollView> component to create scrollable content. It allows you to render a list of components that can be scrolled vertically or horizontally. Here's a basic usage example:

<ScrollView>
  {/* Content to be scrolled */}
</ScrollView>

Place the components or content you want to make scrollable inside the <ScrollView> component. As the content exceeds the available space, users can scroll to view the entire content.

Section 5: Linking Component

The Linking component in React Native allows you to open URLs or deep links within your application. It provides a simple way to handle linking-related tasks such as opening web pages, making phone calls, or launching other applications installed on the user's device.

To open a URL using the Linking component, you can use the openURL method and provide the URL as a parameter. For example:

import { Linking } from 'react-native';

Linking.openURL('https://example.com');

By invoking Linking.openURL('https://example.com'), the user's default browser will open and load the specified URL. You can also use other methods like canOpenURL to check if a URL can be opened, openSettings to open the app's settings, or getInitialURL to retrieve the initial URL when the app is launched from a deep link.

Section 6: TouchableOpacity Component

The TouchableOpacity component is a touchable wrapper in React Native that provides visual feedback when pressed. It is commonly used to create interactive and touchable elements in your application.

To use TouchableOpacity, you can wrap any content or component within the opening and closing tags. By defining an onPress event handler, you can specify the action to be performed when the TouchableOpacity is pressed. Here's an example:

import { TouchableOpacity, Text } from 'react-native';

const openWebsite = (url) => {
  // Perform action to open the website
};

<TouchableOpacity onPress={() => openWebsite('https://google.com')}>
  <Text>Link</Text>
</TouchableOpacity>

In this example, when the TouchableOpacity is pressed, it will invoke the openWebsite function and pass the URL 'https://google.com'. You can customize the openWebsite function to perform any desired action, such as opening a website URL using the Linking component or executing other logic specific to your application.

The TouchableOpacity component provides visual feedback to the user, indicating that the element is touchable. When pressed, the opacity of the TouchableOpacity can change, providing a visual indication of the interaction. This makes it a suitable choice for creating buttons, links, or other interactive elements in your React Native application.

Conclusion:

In this comprehensive guide, we covered important aspects of React Native component development:

  1. Building a better component structure by creating a dedicated folder, saving component files with the .tsx extension, importing components, and using them in the main component.

  2. Exploring additional properties of StyleSheet such as fontSize, fontWeight, borderRadius, elevation, shadowOffset, shadowColor, flex, flexDirection, flexShrink, flexGrow, justifyContent, and alignItems.

  3. Understanding the usage of the <Image> component to display images, including the source attribute and specifying width/height styles.

  4. Implementing scrollable content using the <ScrollView> component, enabling users to scroll through a list or a container with excess content.

  5. Using the Linking component to handle URL opening within your application. With Linking.openURL(), you can easily open web pages, make phone calls, or launch other installed applications on the user's device.

  6. Enhancing interactivity with the TouchableOpacity component. By wrapping content or components with TouchableOpacity and defining an onPress event handler, you can create touchable elements with visual feedback.

By applying these concepts effectively, you can enhance your React Native development skills and create engaging and functional mobile applications.

React Nativecomponents