Link | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Core Concepts

Features

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Typography

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Community Integration

React Hook Forms

Formik

Recipes

Designs

Forms

Layout

Migration

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">
      Default Link
    </Link>;
};const Example = () => {
  return <Link mt={4} href="https://nativebase.io">
      Default Link
    </Link>;
};

External Link


Playground
const Example = () => {
  return <Link _text={{
    color: "blue.700"
  }} href="https://nativebase.io" isExternal mt={4}>
      NativeBase
    </Link>;
};const Example = () => {
  return <Link _text={{
    color: "blue.700"
  }} href="https://nativebase.io" isExternal mt={4}>
      NativeBase
    </Link>;
};

Link with Underline


Playground
const Example = () => {
  return (// @ts-ignore
    <Link mt={4} fontSize="xl" href="https://nativebase.io" isUnderlined>
      Default Link
    </Link>
  );
};const Example = () => {
  return (// @ts-ignore
    <Link mt={4} fontSize="xl" href="https://nativebase.io" isUnderlined>
      Default Link
    </Link>
  );
};

Link custom onPress


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

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

  return <>
      <Link onPress={toggleState} mt={4}>
        Click here to toggle the color of box.
      </Link>
      <Box h="100" w="100" mt={4} bg={state ? "orange.300" : "blue.300"} />
    </>;
};const Example = () => {
  const [state, setState] = React.useState(false);

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

  return <>
      <Link onPress={toggleState} mt={4}>
        Click here to toggle the color of box.
      </Link>
      <Box h="100" w="100" mt={4} bg={state ? "orange.300" : "blue.300"} />
    </>;
};

Link around containers


Playground
const Example = () => {
  return <Link href="https://nativebase.io" _hover={{
    bg: "primary.100"
  }} justifyContent="center" alignItems="center" isExternal mt={4} mx={4} flexWrap="wrap">
      <Box p={4} bg="seagreen">
        <Text color="white" fontSize={16}>
          Box
        </Text>
      </Box>
      <Text px={2} my={1} _light={{
      color: "blue.700"
    }} _dark={{
      color: "blue.500"
    }}>
        Clicking anywhere will trigger the link
      </Text>
      <Box p={4} bg="emerald.700">
        <Text color="white" fontSize={16}>
          Box
        </Text>
      </Box>
    </Link>;
};const Example = () => {
  return <Link href="https://nativebase.io" _hover={{
    bg: "primary.100"
  }} justifyContent="center" alignItems="center" isExternal mt={4} mx={4} flexWrap="wrap">
      <Box p={4} bg="seagreen">
        <Text color="white" fontSize={16}>
          Box
        </Text>
      </Box>
      <Text px={2} my={1} _light={{
      color: "blue.700"
    }} _dark={{
      color: "blue.500"
    }}>
        Clicking anywhere will trigger the link
      </Text>
      <Box p={4} bg="emerald.700">
        <Text color="white" fontSize={16}>
          Box
        </Text>
      </Box>
    </Link>;
};