@danielsrs/react-native-sdk

A SDK from building react native apps

Installation

yarn add @danielsrs/react-native-sdk

Usage

Wrap your app content with SdkProvider

import { SdkProvider } from '@danielsrs/react-native-sdk';

export default function App() {
  return (
    <SdkProvider>
      {/* App content */}
    </SdkProvider>
  );
}

The use any of the components and APIs:

Styled

Create styled components. Makes code ease to read

Code

Result

import { View } from 'react-native';
import { Styled } from '@danielsrs/react-native-sdk';

export function StyledExample() {
  return (
    <View>
      <RedSquare />
    </View>
  );
}

const RedSquare = Styled.createStyledView({
  width: 100,
  height: 100,
  backgroundColor: 'rgba(255, 0, 0, 0.3)',
});

ZStack

Position children in a z stack

Code

Result

import { useRef } from 'react';
import { StyleSheet, View } from 'react-native';
import { Styled, ZStack } from '@danielsrs/react-native-sdk';

export function ZStackS() {
  const viewRef = useRef<View>(null);
  return (
    <ZStack
      ref={viewRef}
      style={{
        // You need to set the ZStack height someway,
        // Otherwise, nothing will be visible!!
        height: 120,
        // flex: 1,
        // height: '100%',
        // flexGrow: 1,
      }}>
      <RedSquare />
      <GreenSquare />
      <BlueSquare />
    </ZStack>
  );
}

const RedSquare = Styled.createStyledView({
  width: 100,
  height: 100,
  backgroundColor: 'rgba(255, 0, 0, 0.3)',
});

const GreenSquare = Styled.createStyledView({
  width: 100,
  height: 100,
  marginTop: 10,
  marginLeft: 10,
  backgroundColor: 'rgba(0, 255, 0, 0.3)',
});

const BlueSquare = Styled.createStyledView({
  width: 100,
  height: 100,
  marginTop: 20,
  marginLeft: 20,
  backgroundColor: 'rgba(0, 0, 255, 0.3)',
});

AppBackground

Provides a background for your application with support for acrylic effects and transparent backgrounds

Code Result

import { AppBackground } from '@danielsrs/react-native-sdk';

export function App() {
  return (
    <AppBackground
      transparentBackground={false}
      useAcrylic={true}
    >
      {/* Your app content */}
    </AppBackground>
  );
}

Props:

children: React.ReactNode - App content
transparentBackground?: boolean - Use transparent background
useAcrylic?: boolean - Enable acrylic effects (Windows/macOS)

Creates a themed background container for your app

Button

Interactive button component with multiple variants and states

Code Result

import { Button } from '@danielsrs/react-native-sdk';

export function ButtonExample() {
  return (
    <View>
      {/* Basic buttons */}
      <Button onPress={() => console.log('Pressed')}>
        Click me
      </Button>

      {/* Button with icon */}
      <Button
        icon
        showIconOnLeft
        onPress={() => console.log('Icon pressed')}
      >
        With Icon
      </Button>

      {/* Disabled button */}
      <Button disabled>
        Disabled
      </Button>

      {/* Secondary variant */}
      <Button accent={false}>
        Secondary
      </Button>
    </View>
  );
}

Props:

children?: string - Button text
accent?: boolean - Use accent styling (default: true)
icon?: boolean - Show icon
showIconOnLeft?: boolean - Position icon on left
disabled?: boolean - Disable button
Plus all PressableProps

Checkbox

Three-state checkbox component (checked, unchecked, indeterminate)

Code Result

import { Checkbox } from '@danielsrs/react-native-sdk';

export function CheckboxExample() {
  const [checked, setChecked] = useState(false);
  const [indeterminate, setIndeterminate] = useState(undefined);

  return (
    <View>
      {/* Basic checkbox */}
      <Checkbox
        value={checked}
        onPress={() => setChecked(!checked)}
        label="Check me"
      />

      {/* Indeterminate checkbox */}
      <Checkbox
        value={indeterminate}
        onPress={() => setIndeterminate(
          indeterminate === undefined ? true :
          indeterminate ? false : undefined
        )}
        label="Three states"
      />

      {/* Disabled checkbox */}
      <Checkbox
        value={true}
        disabled
        label="Disabled"
      />
    </View>
  );
}

Props:

value: boolean | undefined - Checkbox state
onPress?: () => void - Press handler
disabled?: boolean - Disable checkbox
label?: string - Label text

Interactive checkboxes with three states

ColorPicker

Advanced color picker with HSV color wheel

Code

Result

import { ColorPicker } from '@danielsrs/react-native-sdk';

export function ColorPickerExample() {
  return (
    <View style={{ flex: 1 }}>
      <ColorPicker />
    </View>
  );
}

Features:

Interactive HSV color wheel
Real-time color preview
RGB and HEX color inputs
Touch and drag support
Responsive design

Interactive color wheel with real-time preview

Slider

Smooth slider component for numeric value selection

Code Result

import { Slider } from '@danielsrs/react-native-sdk';

export function SliderExample() {
  const [value, setValue] = useState(50);

  return (
    <View>
      <Text>Value: {value}%</Text>
      <Slider
        minimumValue={0}
        maximumValue={100}
        onValueChange={setValue}
      />
    </View>
  );
}

Props:

onValueChange?: (value: number) => void - Value change callback
maximumValue?: number - Maximum value (default: 1)
minimumValue?: number - Minimum value (default: 0)

Smooth animated slider with touch support

Text Components

Typography components with consistent theming

Code Result

import {
  Caption, Body, BodyStrong, BodyLarge,
  Subtitle, Title, TitleLarge, Display
} from '@danielsrs/react-native-sdk';

export function TextExample() {
  return (
    <View>
      <Display>Display Text</Display>
      <TitleLarge>Title Large</TitleLarge>
      <Title>Title</Title>
      <Subtitle>Subtitle</Subtitle>
      <BodyLarge>Body Large</BodyLarge>
      <BodyStrong>Body Strong</BodyStrong>
      <Body>Body Text</Body>
      <Caption>Caption Text</Caption>
    </View>
  );
}

Available Components:

Display - Largest heading (32pt)
TitleLarge - Large title (32pt, semibold)
Title - Standard title (28pt, semibold)
Subtitle - Subtitle (20pt, semibold)
BodyLarge - Large body (16pt)
BodyStrong - Strong body (14pt, semibold)
Body - Standard body (14pt)
Caption - Small text (12pt)

All components extend TextProps

Typography hierarchy with consistent theming

ToggleButton

Toggle button with on/off states

Code Result

import { ToggleButton } from '@danielsrs/react-native-sdk';

export function ToggleButtonExample() {
  const [isEnabled, setIsEnabled] = useState(false);

  return (
    <View>
      <ToggleButton
        initialValue={false}
        onChange={setIsEnabled}
      >
        {isEnabled ? 'Enabled' : 'Disabled'}
      </ToggleButton>

      {/* With icon */}
      <ToggleButton
        icon
        showIconOnLeft
        onChange={(value) => console.log(value)}
      >
        Toggle with Icon
      </ToggleButton>
    </View>
  );
}

Props:

initialValue?: boolean - Initial toggle state
onChange?: (newValue: boolean) => void - State change callback
Plus all ButtonProps except onPress and accent

Interactive toggle buttons with visual state changes

Menu

Context menu component with flexible positioning

Code Result

import { Menu } from '@danielsrs/react-native-sdk';

export function MenuExample() {
  return (
    <Menu target={<Button>Show Menu</Button>}>
      <Menu.MenuEntry
        onPress={() => console.log('Copy')}
        left={<CopyIcon />}
        right={<Text>Ctrl+C</Text>}
      >
        Copy
      </Menu.MenuEntry>
      <Menu.MenuEntry onPress={() => console.log('Paste')}>
        Paste
      </Menu.MenuEntry>
      <Menu.MenuEntry onPress={() => console.log('Delete')}>
        Delete
      </Menu.MenuEntry>
    </Menu>
  );
}

Props:

target: ReactNode - Element that triggers menu
children: ReactNode - Menu entries
maxWidth?: number - Maximum menu width
minWidth?: number - Minimum menu width
extendToTargetWidth?: boolean - Match target width

MenuEntry Props:

children: string - Entry text
left?: ReactNode | (() => ReactNode) - Left element
right?: ReactNode | (() => ReactNode) - Right element
Plus all TouchableOpacityProps

Context menu with smart positioning

TabView

Tab interface component for organizing content

Code Result

import { TabView, routeList, sceneMap } from '@danielsrs/react-native-sdk';

const routes = routeList([
  { key: 'first', title: 'First Tab' },
  { key: 'second', title: 'Second Tab' },
  { key: 'third', title: 'Third Tab' }
]);

const scenes = sceneMap<typeof routes>({
  first: () => <Text>First Tab Content</Text>,
  second: () => <Text>Second Tab Content</Text>,
  third: () => <Text>Third Tab Content</Text>
});

export function TabViewExample() {
  return (
    <TabView
      routes={routes}
      initialIndex={0}
      renderScene={scenes}
    />
  );
}

Utility Functions:

routeList(routes) - Type-safe route list creation with const assertion
sceneMap(scenes) - Type-safe scene mapping with key validation
sceneMap<RouteType>(scenes) - Scene mapping with route key constraints

Props:

routes: Route[] - Tab configuration
initialIndex?: number - Initial active tab
renderScene: Record<string, () => ReactNode> - Scene renderers

Route Type:

key: string - Unique identifier
title?: string - Tab label
icon?: string - Tab icon
accessible?: boolean - Accessibility
accessibilityLabel?: string - A11y label
testID?: string - Test identifier

Smooth animated tab navigation

RadioButton

Radio button for single selection from options

Code Result

import { RadioButton } from '@danielsrs/react-native-sdk';

export function RadioButtonExample() {
  const [selected, setSelected] = useState('option1');

  return (
    <View>
      <RadioButton
        selected={selected === 'option1'}
        label="Option 1"
        onPress={() => setSelected('option1')}
      />
      <RadioButton
        selected={selected === 'option2'}
        label="Option 2"
        onPress={() => setSelected('option2')}
      />
      <RadioButton
        selected={selected === 'option3'}
        label="Option 3"
        onPress={() => setSelected('option3')}
      />
    </View>
  );
}

Props:

selected: boolean - Selection state
label?: string - Radio button label
onPress?: () => void - Press handler

Radio buttons with smooth animations

ResizableView

Container that can be resized by dragging edges

Code Result

import { ResizableView } from '@danielsrs/react-native-sdk';

export function ResizableViewExample() {
  return (
    <ResizableView
      maxWidthToResize={400}
      minWidthToResize={100}
      maxHeightToResize={300}
      minHeighToResize={50}
      fromRight={true}
      fromBottom={true}
      style={{ backgroundColor: 'lightblue' }}
    >
      <Text>Resizable Content</Text>
    </ResizableView>
  );
}

Props:

maxWidthToResize?: number - Maximum width
minWidthToResize?: number - Minimum width
maxHeightToResize?: number - Maximum height
minHeighToResize?: number - Minimum height
fromRight?: boolean - Enable right edge resize
fromBottom?: boolean - Enable bottom edge resize
Plus all ViewProps

Interactive resizable container

useColors

Hook to access theme colors that adapt to light/dark mode

Code Result

import { useColors } from '@danielsrs/react-native-sdk';

export function ColorExample() {
  const colors = useColors();

  return (
    <View style={{
      backgroundColor: colors.appBackground,
      borderColor: colors.accentDefault
    }}>
      <Text style={{ color: colors.textPrimary }}>
        Themed Text
      </Text>
    </View>
  );
}

Available Colors:

appBackground / appForeground - App backgrounds
textPrimary / textSecondary - Text colors
accentDefault / accentSecondary - Accent colors
fillColorControlDefault - Control backgrounds
strokeColorControlStrongStrokeDefault - Borders
And many more semantic color tokens

Automatic color theming based on system preferences

useColorScheme

Hook to get current color scheme (light/dark)

Code Result

import { useColorScheme } from '@danielsrs/react-native-sdk';

export function ColorSchemeExample() {
  const colorScheme = useColorScheme();

  return (
    <View>
      <Text>Current theme: {colorScheme}</Text>
      {colorScheme === 'dark' ? (
        <Text>🌙 Dark mode active</Text>
      ) : (
        <Text>☀️ Light mode active</Text>
      )}
    </View>
  );
}

Returns:

'light' | 'dark' - Current active color scheme

React to color scheme changes

useSchemeControl

Hook to control app color scheme settings

Code Result

import { useSchemeControl } from '@danielsrs/react-native-sdk';

export function ThemeControls() {
  const { appColorScheme, setAppColorScheme } = useSchemeControl();

  return (
    <View>
      <Text>Current setting: {appColorScheme}</Text>

      <Button onPress={() => setAppColorScheme('light')}>
        Light Mode
      </Button>
      <Button onPress={() => setAppColorScheme('dark')}>
        Dark Mode
      </Button>
      <Button onPress={() => setAppColorScheme('system')}>
        System Default
      </Button>
    </View>
  );
}

Returns:

appColorScheme: 'system' | 'light' | 'dark' - Current setting
setAppColorScheme: (scheme) => void - Change color scheme

Theme control interface

pickFile (API)

File picker API for selecting files from device

Code Result

import { pickFile } from '@danielsrs/react-native-sdk';

export function FilePickerExample() {
  const handlePickFile = async () => {
    try {
      const file = await pickFile();
      console.log('Selected file:', file);
    } catch (error) {
      console.log('File selection cancelled');
    }
  };

  return (
    <Button onPress={handlePickFile}>
      Pick File
    </Button>
  );
}

Returns:

Promise<FileResult> - Selected file information
Throws if cancelled or error occurs

Native file picker integration

Observable States

Access reactive state observables for advanced use cases

Code Result

import {
  AppColorScheme$,
  ColorScheme$,
  SystemColorScheme$,
  RootSDKViewDimensions$,
  Breakpoint$
} from '@danielsrs/react-native-sdk';
import { Memo } from '@legendapp/state/react';

export function ObservableExample() {
  return (
    <View>
      <Memo>
        {() => <Text>App Scheme: {AppColorScheme$.get()}</Text>}
      </Memo>
      <Memo>
        {() => <Text>Current Scheme: {ColorScheme$.get()}</Text>}
      </Memo>
      <Memo>
        {() => <Text>Breakpoint: {Breakpoint$.get().name}</Text>}
      </Memo>
      <Memo>
        {() => (
          <Text>
            Dimensions: {RootSDKViewDimensions$.width.get()} x {RootSDKViewDimensions$.height.get()}
          </Text>
        )}
      </Memo>
    </View>
  );
}

Available Observables:

AppColorScheme$ - User's color scheme preference
ColorScheme$ - Current active color scheme
SystemColorScheme$ - OS color scheme
RootSDKViewDimensions$ - App container dimensions
Breakpoint$ - Current responsive breakpoint
Colors$ - Current theme colors

Reactive state management with observables

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library

Name		Name	Last commit message	Last commit date
Latest commit History 142 Commits
.github		.github
.yarn		.yarn
example		example
sample		sample
src		src
.editorconfig		.editorconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
.nvmrc		.nvmrc
.watchmanconfig		.watchmanconfig
.yarnrc.yml		.yarnrc.yml
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
lefthook.yml		lefthook.yml
package.json		package.json
tsconfig.build.json		tsconfig.build.json
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Repository files navigation

@danielsrs/react-native-sdk

Installation

Usage

Wrap your app content with SdkProvider

Contributing

License

About

Uh oh!

Releases 10

Sponsor this project

Uh oh!

Packages

Uh oh!

Languages

Uh oh!

License

DanielSRS/SDK

Folders and files

Latest commit

History

Repository files navigation

@danielsrs/react-native-sdk

Installation

Usage

Wrap your app content with SdkProvider

Contributing

License

About

Topics

Resources

License

Code of conduct

Uh oh!

Stars

Watchers

Forks

Releases 10

Sponsor this project

Uh oh!

Packages 0

Uh oh!

Languages

Packages