Component

ClickableText

Text rendered as a pressable action.

React Native

Clickable text

Small text action for secondary flows.

Already have an account?

import { ClickableText, toast } from '@sohantalukder/rn-kit';

export function TermsLink() {
  return (
    <ClickableText
      textColor="primary"
      onPress={() => toast.show({ type: 'info', title: 'Opening terms' })}
    >
      View terms and conditions
    </ClickableText>
  );
}

Live component

defaultinline linkdisabled

Use for small text actions.
Prefer buttons for primary actions.

Usage

import { ClickableText } from '@sohantalukder/rn-kit';

import { ClickableText, toast } from '@sohantalukder/rn-kit';

export function TermsLink() {
  return (
    <ClickableText
      textColor="primary"
      onPress={() => toast.show({ type: 'info', title: 'Opening terms' })}
    >
      View terms and conditions
    </ClickableText>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

childrenReactNode-Content rendered inside the component surface.

onPress() => void-Called when the pressable component is activated.

variant"default" | "inline link" | "disabled"defaultSelects the visual style variant for the component.

textColorTextColorprimaryOverrides the clickable text color token.

disabledbooleanfalsePrevents interaction and renders the disabled visual state.

Theme

ClickableText reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

default
inline link
disabled

Best Practices

Use for small text actions.
Prefer buttons for primary actions.