Components

Kog's components are React Native's. Import them from 'react-native':

import { View, Text, Image, TouchableOpacity, StyleSheet } from 'react-native';

Every element is a retained native LVGL widget, created once at mount and updated one property at a time. The props follow React Native's names, shapes and defaults; where Kog differs, the row says so and Coming from React Native explains why. A few widgets that React Native doesn't have, such as dials and scroll-wheel pickers, are Kog extensions and come from @kog/ui.

How imports resolve. Import built-in components directly from 'react-native' (or from @kog/ui, which exports the same components plus the extensions). Renamed imports (import { View as Box }) and namespace imports (<RN.View>) work. A component you define or import from your own files under the same name, such as your own Button, is yours, as in React Native. One consequence: re-exporting Kog's components through your own barrel file (import { View } from './ui') makes the compiler treat them as your components, and the build or mount fails with a message that says to import them from 'react-native'. HTML tags such as <div> are compile errors that name the React Native replacement.

React Native components

Layout and content

Component	Native widget	Key props
View	base object	style, onLayout, pointerEvents, onGesture (Kog: a swipe direction). A column flex container by default, as in React Native.
Text	label	style (text props), numberOfLines, ellipsizeMode. Children are strings, numbers and expressions only.
Image	image	source (require('./x.png') or { uri }), resizeMode ('cover' by default; also 'contain', 'stretch', 'center', 'repeat'), tintColor, onLoad, onError. See Images and assets.
ImageBackground	image with children	source, resizeMode, style, imageStyle
ScrollView	scrollable object	horizontal (without it the view scrolls vertically only), scrollEnabled, pagingEnabled, bounces, showsVerticalScrollIndicator, showsHorizontalScrollIndicator, onScroll, onScrollBeginDrag, onScrollEndDrag; ref.current.scrollTo({ x, y, animated })
FlatList	native recycling list	data, renderItem, rowHeight (all three required for recycling), keyExtractor, horizontal (then rowHeight is each item's width), poolSize, ListHeaderComponent, ListFooterComponent, ListEmptyComponent, ItemSeparatorComponent, onEndReached. See Lists.
SectionList	recycling list with headers	sections, renderItem, renderSectionHeader, keyExtractor, rowHeight
SafeAreaView	positioned view	Keeps content on the glass of a shaped panel, such as the round 1.46B.
KeyboardAvoidingView	view	Moves its children up while the on-screen keyboard is open.
Modal	top-layer overlay	visible, transparent, animationType ('none', 'fade', 'slide'), onShow, onDismiss

Touch and input

Component	Native widget	Key props
Pressable	button-like object	onPress, onPressIn, onPressOut, onLongPress, disabled, style={({ pressed }) => …}
TouchableOpacity	button-like object	activeOpacity (default 0.2), plus the Pressable events
TouchableHighlight	button-like object	underlayColor, plus the Pressable events
TouchableWithoutFeedback	button-like object	The Pressable events, with no pressed look
Button	styled button	title (the label), onPress, color (the background), disabled. As in React Native it takes no children and no style; use Pressable for a custom look.
TextInput	textarea	value, onChangeText, onChange ({ nativeEvent: { text } }), placeholder, placeholderTextColor, secureTextEntry, keyboardType, maxLength, editable, multiline, autoFocus, onFocus, onBlur, onSubmitEditing. Single-line unless multiline; focusing it opens the on-screen keyboard.
Switch	switch	value, onValueChange, disabled, trackColor, thumbColor
Slider	slider	The community shape: value, minimumValue, maximumValue, step, onValueChange, onSlidingComplete, minimumTrackTintColor, maximumTrackTintColor, thumbTintColor

Feedback

Component	Native widget	Key props
ActivityIndicator	spinner	animating (default true), color, size ('small', 'large' or a number), hidesWhenStopped
StatusBar	none	Accepted so ported code compiles; draws nothing.

The APIs that go with these components (StyleSheet, Animated, Platform, Dimensions, Appearance, Keyboard, Alert and the rest) are in the react-native reference.

note

A few props are accepted but have no visible effect yet. fontWeight takes React Native's full set and lowers to two weights, normal below 600 and bold from 600 up, but the device draws only the regular face. fontFamily is ignored, because the device has one font family.

Kog extensions

These widgets have no React Native equivalent. They come from @kog/ui, never from 'react-native':

import { Arc, Roller, Dropdown, Checkbox, ProgressBar } from '@kog/ui';

Component	Native widget	Key props
ProgressBar	bar	The @react-native-community/progress-bar-android shape: progress (0 to 1), color, trackColor, indeterminate (a segment sweeps across the bar). React Native core has no progress bar.
Arc	arc	value, min, max, startAngle, endAngle, onValueChange; part styling trackColor, trackWidth, indicatorColor, indicatorWidth, rounded, adjustable (for dials and gauges)
Roller	roller	options, selectedIndex, onValueChange (the classic scroll-wheel picker)
Dropdown	dropdown	options, selectedIndex, onValueChange
Checkbox	checkbox	value, onValueChange, text (a built-in label), disabled
Bar	bar	value, min, max, indeterminate: the raw LVGL bar (prefer ProgressBar)
Spinner	spinner	animating: the raw LVGL spinner (prefer ActivityIndicator)
Chart	chart	Series data props; a stub until its page lands.

Structural

Component	Purpose
Router, Routes, Route, Outlet, Link, NavLink, Navigate	Routing, from @kog/router. See the Router reference.
ErrorBoundary	From @kog/ui: renders fallback when a descendant throws during mount or in an effect.
ThemeProvider	From @kog/ui: scheme="light" | "dark" overrides the color scheme for its subtree; without scheme it follows Appearance.
Fragment	From react: groups children without a wrapper widget. Not allowed as a list row.