Baklava React Native

https://trendyol.github.io/baklava-react-native
Admin
Baklava React Native is a comprehensive design system and component library for React Native...
Tokens:10,744
Snippets:143
Trust Score:8.3
Update:8 months ago
Show doc for...
Tokens:
Raw
### Usage Example for SelectBottomSheet

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-selectbottomsheet--page

This example demonstrates how to use the SelectBottomSheet component. It shows how to set visibility, labels, title, actions for closing and selecting, and how to pass options and handle selections.

```jsx
<SelectBottomSheet
  visible={isVisible}
  type="checkbox"
  selectButtonLabel="Select"
  closeButtonLabel="Close"
  title="Select Options"
  closeButtonAction={() => setVisible(false)}
  selectButtonAction={() => {
    showAlert(selectedOptions);
    setVisible(false);
  }}
  options={options}
  selectedOption={selectedOptions}
  onSelect={handleMultiSelect}
/>
```

--------------------------------

### Install Project Dependencies

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fdocumentation-getting-started--page

Installs all necessary npm dependencies for the cloned Baklava React Native project. This command should be run after cloning the repository.

```bash
cd baklava-react-native
npm install
```

--------------------------------

### Install Baklava React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fdocumentation-getting-started--page

Installs the Baklava React Native library using npm. This is the primary package for using the UI components.

```bash
npm install @trendyol/baklava-react-native
```

--------------------------------

### Input Component Usage Example

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-input--page

Demonstrates how to use the Input component in React Native. It shows a basic example with size and placeholder props. The Input component allows users to enter text and supports various configurations for labels, helper text, error states, icons, and security.

```jsx
<Input size="l" placeholder="Large" />
```

--------------------------------

### Usage Example for Select Component (React Native)

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-select--page

This example shows how to use the `Select` component in React Native. It includes common props like `label`, `placeholder`, `size`, `multiple`, and `options`. The `options` prop is an array of objects, each with an `id` and `label`.

```javascript
<Select
  label="Label text"
  placeholder="Placeholder text"
  size="large"
  labelFixed={true}
  multiple={false}
  bottomSheetTitle="Options"
  closeButtonLabel="Cancel"
  selectButtonLabel="Select"
  required
  options={[
    { id: '1', label: 'Option 1' },
    { id: '2', label: 'Option 2' },
    { id: '3', label: 'Option 3' },
  ]}
/>
```

--------------------------------

### Run Project on iOS or Android

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fdocumentation-getting-started--page

Starts the cross-platform application on either an iOS or Android simulator/device. This command allows for local testing and development.

```bash
npm run ios or npm run android
```

--------------------------------

### Usage Example of Modal Component in React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-modal--page

This example shows how to implement the Modal component in a React Native application. It includes essential props like `modalKey`, `visible`, `closable`, `title`, and action button configurations. The `children` prop is used to render content within the modal.

```javascript
<Modal
  modalKey="example-modal"
  visible={isVisible}
  closable={true}
  title="Lorem ipsum dolor"
  duration={200}
  justifyContent="center"
  wrongPressThresholdMs={1000}
  closeButtonAction={() => setVisible(false)}
  actionButtonProps={{
    label: 'Primary Action',
    onPress: () => {},
  }}
  secondActionButtonProps={{
    label: 'Secondary Action',
    onPress: () => {},
  }}>
  <Text>
    ...
  </Text>
</Modal>
```

--------------------------------

### Install react-native-svg for Expo

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fdocumentation-getting-started--page

Installs a specific version of react-native-svg for Expo projects. This ensures compatibility within the Expo environment.

```bash
npx expo install react-native-svg@12.3.0
```

--------------------------------

### Usage Example of BottomSheet Component

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-bottomsheet--page

This code example shows how to use the BottomSheet component in a React Native application. It includes essential props like modalKey, selectButtonLabel, closeButtonLabel, visible, title, and actions for closing and selecting.

```jsx
<BottomSheet
  modalKey="example-bottom-sheet"
  selectButtonLabel="Select"
  closeButtonLabel="Close"
  visible={isVisible}
  title="Basic"
  closeButtonAction={() => setVisible(false)}
  selectButtonAction={() => setVisible(false)}>
  <Text>...</Text>
</BottomSheet>
```

--------------------------------

### Install react-native-svg

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fdocumentation-getting-started--page

Installs the react-native-svg library, which is a required dependency for Baklava React Native components, particularly those involving icons or shapes.

```bash
npm install react-native-svg
```

--------------------------------

### Setup PortalProvider for BottomSheet in React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-bottomsheet--page

This snippet demonstrates how to set up the PortalProvider in your root React Native view, which is necessary for the BottomSheet component to function correctly. It ensures that modals and other portal-based components are rendered properly.

```javascript
import * as React from 'react';
import { theme, ThemeProvider, PortalProvider } from '@trendyol/baklava-react-native';
import App from './src/App';

export default function Main() {
  return (
    <ThemeProvider theme={theme}>
      <PortalProvider>
        <App />
      </PortalProvider>
    </ThemeProvider>
  );
}
```

--------------------------------

### Badge Component Usage Example

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-badge--page

Demonstrates how to use the Badge component with a success variant and custom text. The Badge component is versatile for displaying status or labels.

```jsx
<Badge variant="success" text="Badge Component" />
```

--------------------------------

### Basic Tooltip Implementation in React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-tooltip--page

This example demonstrates the basic implementation of the Tooltip component. It renders an Icon and attaches a tooltip to it, which displays a predefined message when triggered. The tooltip is configured with basic props like id, position, overlay, and hole.

```javascript
<Tooltip
  id="basic"
  position="top"
  overlay
  hole
  highlight
  content="Lorem ipsum dolor sit amet">
  <Icon name="info" color="primaryColor" size="m" />
</Tooltip>
```

--------------------------------

### Setup TooltipProvider for Baklava React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-tooltip--page

To use the Tooltip component, you need to wrap your application or relevant part of it with TooltipProvider. This ensures that the tooltip functionality is available throughout your application. It should be placed within ThemeProvider and alongside other essential providers like SafeAreaProvider.

```javascript
// ...
import { theme, TooltipProvider } from '@trendyol/baklava-react-native';
// ...

<ThemeProvider theme={theme}>
  <TooltipProvider>
    <SafeAreaProvider>
      {/* other components or providers. ex: <App/> */}
    </SafeAreaProvider>
  </TooltipProvider>
</ThemeProvider>

// ...
```

--------------------------------

### DatePicker Component Usage Example

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-datepicker--page

Demonstrates how to use the DatePicker component with various props for customization. It shows how to handle date selection and display.

```jsx
<DatePicker
  value={selectedDate}
  onChange={setSelectedDate}
  placeholder="Select a date"
  title="Select Date"
  closeButtonLabel="Close"
  selectButtonLabel="Select"
  nameOfWeekdays={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}
  nameOfMonths={['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']}
  testID="datepicker"
  firstDayOfWeek={0}
/>
```

--------------------------------

### Show Toast Message with Action and Customization

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-toast--page

Shows how to display a toast message with additional features like a variant, an action button, custom action text, duration, and bottom offset. This example demonstrates the flexibility of the `Toast.show()` method for more complex user interactions and visual feedback.

```javascript
// with action
Toast.show({
  variant: 'error',
  action: () => { /* do something */},
  actionText: 'Action',
  duration: ToastDurations.LONG,
  text: 'Lorem ipsum dolor sit amet.',
  bottomOffset: 30
})
```

--------------------------------

### Tabs Component Usage in React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-tabs--page

Demonstrates how to use the Tabs component in React Native for organizing content. It includes examples of setting the active tab, default tab, and adding options with titles, captions, icons, and badges.

```jsx
<Tabs value={value} onValueChange={setValue} defaultValue="tab1">
  <Tabs.List>
    <Tabs.Option value="tab1" title="Tab Title" caption="Caption" />
    <Tabs.Option value="tab2" title="Tab Title" caption="Caption" iconName="confetti" />
    <Tabs.Option value="tab3" title="Tab Title" badgeText="New" />
  </Tabs.List>
  <Tabs.Content value="tab1">
    <Text>Tab 1 Content</Text>
  </Tabs.Content>
  <Tabs.Content value="tab2">
    <Text>Tab 2 Content</Text>
  </Tabs.Content>
  <Tabs.Content value="tab3">
    <Text>Tab 3 Content</Text>
  </Tabs.Content>
</Tabs>
```

--------------------------------

### Use Text Component with Typography Props in React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fdesign-system-typography--page

Demonstrates how to use the Text component from Baklava React Native, applying specific font sizes and weights. This example shows basic text styling within a React Native application.

```jsx
<Text fontSize={16} fontWeight="400" />
```

--------------------------------

### Apply Spacing with Box Component in React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fdesign-system-size-spacing--page

This example demonstrates how to apply spacing using the 'Box' component in React Native. The 'p' prop accepts a spacing token (e.g., '2xs') to set padding on all sides of the Box element.

```jsx
<Box p="2xs" />
```

--------------------------------

### Checkbox Component Usage Example

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-checkbox--page

Demonstrates how to use the Checkbox component with various states like checked, indeterminate, and disabled, along with a label and an optional flag icon. This component is built for user selection tasks.

```jsx
<Checkbox disable={false} checked={true} indeterminate={true} label="lorem ipsum" flagIcon="TR" />
```

--------------------------------

### Apply Border Radius to Box Component in React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fdesign-system-border-radius--page

This example demonstrates how to apply a border radius to a 'Box' component using the 's' (small) predefined border radius value. This is a common pattern for styling UI elements in React Native.

```jsx
<Box borderRadius="s" />
```

--------------------------------

### Basic Image Usage in React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-image--page

Demonstrates the fundamental way to render an image component in React Native using the 'source' prop with a URI. This is the most common way to display remote images.

```jsx
<Image
  source={{
    uri: 'https://example.com/your-image.png',
  }}
/>
```

--------------------------------

### Icon Component Usage in React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-icon--page

Demonstrates the basic usage of the Icon component. It requires the 'name', 'color', and 'size' props to render an icon. The 'name' prop accepts a string from a predefined list of icons, 'color' accepts theme color keys or ColorValue, and 'size' accepts predefined size strings.

```jsx
<Icon name="confetti" color="primaryColor" size="xl" />
```

--------------------------------

### Clone Baklava React Native Project

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fdocumentation-getting-started--page

Clones the Baklava React Native project repository from GitHub. This is the first step to running the project locally.

```bash
git clone https://github.com/Trendyol/baklava-react-native.git
```

--------------------------------

### TextArea Component Usage (React Native)

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-textarea--page

Demonstrates the basic usage of the TextArea component in React Native. It shows how to set a label, placeholder, size, and maximum length for user input.

```jsx
<TextArea label="Lorem" placeHolder="Lorem" size="small" maxLength={200} />
```

--------------------------------

### Show Basic Toast Message

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-toast--page

Illustrates how to display a simple toast message with just text content using the `Toast.show()` method. This is the most basic usage of the Toast component, suitable for displaying straightforward information.

```javascript
// without action
Toast.show({
  text: 'Lorem ipsum dolor sit amet',
})
```

--------------------------------

### Button Component API

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-button--page

Documentation for the Button component, detailing its available props and their types.

```APIDOC
## Button Component API

### Description
A button component that the user can press to trigger an action.

### Usage
```jsx
<Button variant="primary" kind="success" size="l" label="Primary Button" />
```

### Props
#### variant
Type: `string`
Description: The variant of the button style to use. Possible values: `primary`, `secondary`, `tertiary`.

#### kind
Type: `string`
Description: The kind of the button to adjust the styling for emphasis. Possible values: `default`, `neutral`, `success`, `danger`.

#### size
Type: `string`
Description: The size of the button. Possible values: `s`, `m`, `l`.

#### icon
Type: `string`
Description: The icon name for the button. Must be one of the predefined icon names.

#### label
Type: `string`
Description: The text label displayed on the button.

#### disabled
Type: `boolean`
Description: Disabled state of the button. Defaults to `false`.

#### loading
Type: `boolean`
Description: Loading state of the button. Displays a spinner and disables the button. Defaults to `false`.

#### filled
Type: `boolean`
Description: Filled state of the button. Defaults to `false`.

#### style
Type: `StyleProp<PressableStyle>`
Description: Custom styles for the button, implementing Pressable props.
```

--------------------------------

### Button Component Usage in React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-button--page

Demonstrates the basic usage of the Button component with primary styling, success kind, and large size. It accepts props to customize its appearance and behavior.

```jsx
<Button variant="primary" kind="success" size="l" label="Primary Button" />
```

--------------------------------

### Integrate Toast Component in React Native App

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-toast--page

Demonstrates how to add the Toast component to the root view of a React Native application using the ThemeProvider. This ensures the toast messages are visible above all other components. It requires importing `theme`, `ThemeProvider`, and `Toast` from '@trendyol/baklava-react-native' and wrapping the application with `ThemeProvider` and `SafeAreaProvider`.

```javascript
// ...
import { theme, ThemeProvider, Toast } from '@trendyol/baklava-react-native';
// ...

<ThemeProvider theme={theme}>
  <SafeAreaProvider>
    {/* other components or providers. ex: <App/> */}
    <Toast ignoreKeyboard extraPaddingBottom={40}/>
  </SafeAreaProvider>
</ThemeProvider>

// ...
```

--------------------------------

### Customizing Theme Fonts

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fdocumentation-getting-started--page

Shows how to customize the default theme by overriding font properties. This allows for the integration of custom font families into the application.

```javascript
import * as React from 'react';
import { theme as defaultTheme, ThemeProvider, PortalProvider } from '@trendyol/baklava-react-native';
import App from './src/App';

theme.fonts = {
    'light': 'Inter-Light',
    'regular': 'Inter-Regular',
    'medium': 'Inter-Medium',
    'semiBold': 'Inter-SemiBold',
    'bold': 'Inter-Bold'
};

export default function Main() {
  return (
    <ThemeProvider theme={theme}>
      <PortalProvider>
        <App />
      </PortalProvider>
    </ThemeProvider>
  );
}
```

--------------------------------

### Alert Component Usage in React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-alert--page

Demonstrates how to use the Alert component in React Native. It shows a basic alert with a caption, description, a close button, and an action button. The component is designed to display informational messages to users.

```jsx
<Alert caption="caption" description="description" closable={true}>
  <Button label="Action Button" />
</Alert>
```

--------------------------------

### Switch Component Usage in React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-switch--page

Demonstrates how to use the Switch component for toggling states. It accepts props like 'disabled', 'checked', 'customization', and an 'onChange' callback. The 'customization' prop allows setting specific colors for the 'on' and 'off' states.

```jsx
<Switch
    disabled={true}
    checked={false}
    customization={{colorOn: '#0BC15C', colorOff: '#FF5043'}}
    onChange={(value) => {console.log(value)}}
/>
```

--------------------------------

### Badge Component API

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-badge--page

This section details the Badge component's props and how to use it in your React Native application.

```APIDOC
## Badge Component

Badge component can be used for highlighting a status or labeling an item.

### Usage

```jsx
<Badge variant="success" text="Badge Component" />
```

### Props

#### variant
Type: `string`
Description: The variant of the badge style to use. Options: `default`, `neutral`, `success`, `warning`, `danger`.

#### text
Type: `string`
Description: Badge text.

#### icon
Type: `string`
Description: Badge icon.

#### transparent
Type: `boolean`
Description: Badge without backgroundColor.

#### color
Type: `string`
Description: The color of the Badge. Default value is `primaryKey`. It can be a theme color key.

#### backgroundColor
Type: `string`
Description: Pass the transparent prop to give a custom backgroundColor.

#### style
Type: `StyleProp<ViewStyle>`
Description: Badge implements View props.
```

--------------------------------

### Render Text with Variants in React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-text--page

Demonstrates how to use the Text component to render text with different predefined styles (variants) in a React Native application. The 'variant' prop controls the text's appearance, adhering to the Baklava Design System's typography.

```jsx
<Text variant="heading2">Baklava Design System</Text>
```

--------------------------------

### Controlling Tooltip Visibility with Refs in React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-tooltip--page

This code snippet shows how to programmatically control the visibility of a Tooltip component using React refs. The useEffect hook is used to demonstrate showing and hiding the tooltip after a delay. This is useful for scenarios where you need to trigger tooltips based on specific events or timers.

```javascript
const tooltipRef = React.useRef<TooltipRef>(null);

React.useEffect(() => {
  setTimeout(()=>{
    tooltipRef.current?.show();
    setTimeout(()=>{
      tooltipRef.current?.hide();
    },5000);
  },5000);
},[])

return (
  <Tooltip
    ref={tooltipRef}
    id="basic"
    position="top"
    overlay
    hole
    highlight
    holePadding={8}
    content="Lorem ipsum dolor sit amet">
    <Icon name="info" color="primaryColor" size="m" />
  </Tooltip>
)
```

--------------------------------

### TextLink Component Usage in React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-textlink--page

Demonstrates how to use the TextLink component in React Native. It shows setting up a state variable for press events and passing it to the TextLink component's onPress and isPressed props. The variant prop controls the text styling.

```javascript
import React, { useState } from 'react';
import { TextLink } from 'path/to/TextLink'; // Assuming TextLink is exported from here

function MyComponent() {
  const [isPressed, setIsPressed] = useState(false);

  return (
    <TextLink 
      variant="subtitle3Medium" 
      onPress={() => setIsPressed(true)} 
      isPressed={isPressed}
    >
      Example
    </TextLink>
  );
}
```

--------------------------------

### Box Component Usage in React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-box--page

Demonstrates the basic usage of the Box component, a generic layout component similar to a div in HTML or View in React Native. It can accept style props like backgroundColor.

```jsx
<Box backgroundColor="primaryColor" />
```

--------------------------------

### Spinner Component Usage in React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-spinner--page

Demonstrates how to use the Spinner component to indicate loading states. It accepts 'color' and 'size' props for customization. The default size is 'm' and the default color is 'primaryKey'.

```jsx
<Spinner color="primaryColor" size="xl" />
```

--------------------------------

### Define Font Sizes and Weights in JavaScript

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fdesign-system-typography--page

Defines arrays for font sizes and font weights used in the Baklava React Native typography system. It includes standard numerical sizes and weight keywords like 'bold' and 'normal'.

```javascript
export const fontSizes = [12, 14, 16, 20, 24, 28, 32];
export const fontWeights = ['100', '200', '300', '400', '500', '600', '700', '800', '900', bold, normal];
```

--------------------------------

### Define Spacing Tokens in JavaScript

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fdesign-system-size-spacing--page

This snippet defines a JavaScript object containing spacing tokens, mapping descriptive keys (e.g., '2xs', 'xl') to pixel values. These tokens are essential for maintaining consistent spacing in UI design.

```javascript
spacing: {
  '-6xl': -80,
  '-5xl': -64,
  '-4xl': -48,
  '-3xl': -40,
  '-2xl': -32,
  '-xl': -24,
  '-l': -20,
  '-m': -16,
  '-s': -14,
  '-xs': -12,
  '-2xs': -8,
  '-3xs': -4,
  '-4xs': -2,
  none: 0,
  '4xs': 2,
  '3xs': 4,
  '2xs': 8,
  xs: 12,
  s: 14,
  m: 16,
  l: 20,
  xl: 24,
  '2xl': 32,
  '3xl': 40,
  '4xl': 48,
  '5xl': 64,
  '6xl': 80,
}
```

--------------------------------

### RadioButton Component Usage (React Native)

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-radiobutton--page

Demonstrates the usage of the RadioButton component in React Native. It shows how to set properties like 'disable', 'selected', 'label', and 'flagIcon'. The component allows users to select one item from a group.

```jsx
<RadioButton disable={false} selected={true} label="lorem ipsum" flagIcon="TR" />
```

--------------------------------

### Display FlagIcon Component in React Native

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-flagicon--page

Demonstrates how to use the FlagIcon component in React Native. It requires specifying the 'name' and 'size' props. The 'name' prop accepts a string representing the country code or 'GlobeFlag', and 'size' accepts predefined string values like 'xl', 'l', 'm', 's', 'xs', '2xs'.

```jsx
<FlagIcon name="TR" size="xl" />
```

--------------------------------

### Display Box with Neutral Light Color

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fdesign-system-colors--page

This snippet demonstrates how to use the Box component from Baklava React Native to display a box with a 'neutralLight' color. It utilizes the 'color' prop to apply the specified color from the design system.

```jsx
<Box color="neutralLight" />
```

--------------------------------

### RadioButton Props Documentation (React Native)

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fcomponents-radiobutton--page

Details the properties available for the RadioButton component in React Native. Key props include 'selected' (boolean), 'label' (string), 'flagIcon' (string), and 'disabled' (boolean). It also mentions that RadioButton implements TouchableOpacity props.

```javascript
### selected
Type: `boolean`
Use selected state when the item is selected.
### label
Type: `string`
The label defines a caption for an text.
### flagIcon
Type: `string`
Radio Button flag icon.
### disabled
Type: `boolean`
If true, user won't be able to interact with the component.
#### style
Type: `StyleProp<TouchableOpacityStyle>`
  
RadioButton implements: ...TouchableOpacity props
```

--------------------------------

### Define Border Radius Values in JavaScript

Source: https://trendyol.github.io/baklava-react-native/index_path=%2Fdocs%2Fdesign-system-border-radius--page

This snippet defines a JavaScript object containing various border-radius values, ranging from 'none' to 'pill'. These values can be used to style elements in React Native applications.

```javascript
export const borderRadii = {
  none: 0,
  xs: 2,
  s: 4,
  m: 6,
  l: 8,
  pill: 999,
};
```
Tokens:
Raw