A SDK from building react native apps
yarn add @danielsrs/react-native-sdkimport { 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:
| 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:
| |
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:
| 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 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:
| 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:
All components extend | 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:
| 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:
MenuEntry Props:
| 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:
Props:
Route Type:
| 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:
| 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:
| 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:
| 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:
| 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:
| 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:
| 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:
| Reactive state management with observables |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library