Link | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Contribution

Core Concepts

Utility First

Utility Props Specificity

New

Design Tokens

Pseudo Props: Overview

New

Pseudo Props: Dos & Don'ts

Features

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Recipes

Designs

Forms

Layout

Migration

Upgrading to 3.2.0 from 3.x

Components Migration

If you are starting a new project, please try gluestack-ui for better performance and new design.

Link

Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink.

Import

Copy
import { Link } from 'native-base';

Examples

Basic


Playground
const Example = () => {
  return <Link mt={4} href="https://nativebase.io">
      Click here to open documentation.
    </Link>;
};const Example = () => {
  return <Link mt={4} href="https://nativebase.io">
      Click here to open documentation.
    </Link>;
};

External Link


Playground
const Example = () => {
  return <Text mx="16">
      NativeBase is a component library that enables devs to build universal
      design systems. It is built on top of React Native, allowing you to
      develop apps for Android, iOS and the Web.{" "}
      <Link href="https://nativebase.io" isExternal _text={{
      color: "blue.400"
    }} mt={-0.5} _web={{
      mb: -2
    }}>
        Read More
      </Link>
    </Text>;
};const Example = () => {
  return <Text mx="16">
      NativeBase is a component library that enables devs to build universal
      design systems. It is built on top of React Native, allowing you to
      develop apps for Android, iOS and the Web.{" "}
      <Link href="https://nativebase.io" isExternal _text={{
      color: "blue.400"
    }} mt={-0.5} _web={{
      mb: -2
    }}>
        Read More
      </Link>
    </Text>;
};

Link with Underline


Playground
const Example = () => {
  return (// @ts-ignore
    <Link _text={{
      fontSize: "xl",
      _light: {
        color: "cyan.500"
      },
      color: "cyan.300"
    }} mt={4} href="https://nativebase.io" isUnderlined _hover={{
      _text: {
        _light: {
          color: "cyan.600"
        },
        color: "cyan.400"
      }
    }}>
      Click me to open NativeBase website.
    </Link>
  );
};const Example = () => {
  return (// @ts-ignore
    <Link _text={{
      fontSize: "xl",
      _light: {
        color: "cyan.500"
      },
      color: "cyan.300"
    }} mt={4} href="https://nativebase.io" isUnderlined _hover={{
      _text: {
        _light: {
          color: "cyan.600"
        },
        color: "cyan.400"
      }
    }}>
      Click me to open NativeBase website.
    </Link>
  );
};

Link custom onPress


Playground
const Example = () => {
  const [state, setState] = React.useState(false);

  const toggleState = () => {
    setState(!state);
  };

  return <>
      <Box h="100" w="100" bg={state ? "emerald.500" : "indigo.500"} />
      <Link onPress={toggleState} mt="8">
        <Box px="3" py="2" bg="primary.400" rounded="sm" _text={{
        color: "white",
        fontWeight: "medium"
      }}>
          Change Color
        </Box>
      </Link>
    </>;
};const Example = () => {
  const [state, setState] = React.useState(false);

  const toggleState = () => {
    setState(!state);
  };

  return <>
      <Box h="100" w="100" bg={state ? "emerald.500" : "indigo.500"} />
      <Link onPress={toggleState} mt="8">
        <Box px="3" py="2" bg="primary.400" rounded="sm" _text={{
        color: "white",
        fontWeight: "medium"
      }}>
          Change Color
        </Box>
      </Link>
    </>;
};

Link around containers


Playground
const Example = () => {
  return <Link href="https://nativebase.io" _hover={{
    bg: "primary.100"
  }} isExternal>
      <Box bg="cyan.700" p="5" rounded="8" flexShrink="1">
        <HStack alignItems="flex-start">
          <Text fontSize="xs" color="cyan.50" fontWeight="medium">
            Open Source
          </Text>
          <Spacer />
          <Text fontSize="2xs" color="cyan.100">
            1 month ago
          </Text>
        </HStack>
        <Heading color="cyan.50" mt="2" fontWeight="medium" fontSize="lg">
          NativeBase
        </Heading>
        <Text mt="1" fontSize="sm" color="white">
          NativeBase is a component library that enables devs to build universal
          design systems.
        </Text>
        <Flex>
          <Text mt="2" fontSize="xs" fontWeight="medium" color="cyan.400">
            Read More
          </Text>
        </Flex>
      </Box>
    </Link>;
};const Example = () => {
  return <Link href="https://nativebase.io" _hover={{
    bg: "primary.100"
  }} isExternal>
      <Box bg="cyan.700" p="5" rounded="8" flexShrink="1">
        <HStack alignItems="flex-start">
          <Text fontSize="xs" color="cyan.50" fontWeight="medium">
            Open Source
          </Text>
          <Spacer />
          <Text fontSize="2xs" color="cyan.100">
            1 month ago
          </Text>
        </HStack>
        <Heading color="cyan.50" mt="2" fontWeight="medium" fontSize="lg">
          NativeBase
        </Heading>
        <Text mt="1" fontSize="sm" color="white">
          NativeBase is a component library that enables devs to build universal
          design systems.
        </Text>
        <Flex>
          <Text mt="2" fontSize="xs" fontWeight="medium" color="cyan.400">
            Read More
          </Text>
        </Flex>
      </Box>
    </Link>;
};