react-native

import … from 'react-native' resolves to @kog/react-native, which exports React Native's own surface and nothing else. Kog-only widgets and hooks live in @kog/ui and @kog/react (see Kog extensions), so a name you import from 'react-native' is a name React Native has.

Each entry below behaves as in React Native unless its notes say otherwise. Every difference is also collected in Coming from React Native.

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

export default function Hello() {
  const [n, setN] = useState(0);
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Hello from {Platform.OS}</Text>
      <TouchableOpacity style={styles.button} onPress={() => setN(n + 1)}>
        <Text style={styles.label}>Tapped {n} times</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12 },
  title: { fontSize: 18 },
  button: { backgroundColor: '#2f6fed', borderRadius: 8, padding: 12 },
  label: { color: '#ffffff' },
});

Components

Export	Notes in Kog
View	The flex container: flexDirection: 'column' and alignItems: 'stretch' by default. onLayout reports { nativeEvent: { layout: { x, y, width, height } } } in logical pixels. pointerEvents takes 'auto', 'none', 'box-none' and 'box-only'. zIndex reorders siblings. A ref is a host instance with measure (pageX/pageY equal x/y), measureInWindow, focus and blur (no setNativeProps); findNodeHandle(ref) gives the raw handle.
Text	Children are strings, numbers and expressions; elements inside Text are a compile error. numberOfLines truncates with an ellipsis; ellipsizeMode 'head' and 'middle' truncate at the tail.
Image	source is require('./x.png'), { uri: 'file:///sd/…' } or { uri: 'https://…' }; a literal bare string is a compile error and a computed one throws. A bundled image defaults to its own size. resizeMode defaults to 'cover'. tintColor, onLoadStart, onLoad, onLoadEnd, onError, defaultSource. See Images and assets.
ImageBackground	An Image drawn behind its children. Takes source, resizeMode, style and imageStyle.
TextInput	Single-line unless multiline. value, onChangeText, onChange ({ nativeEvent: { text, eventCount } }), placeholder, placeholderTextColor, selectionColor, secureTextEntry, keyboardType, maxLength, editable, autoFocus, onFocus, onBlur, onSubmitEditing. Focusing it opens the on-screen keyboard.
ScrollView	Vertical unless horizontal. scrollEnabled, pagingEnabled, bounces, showsVerticalScrollIndicator, showsHorizontalScrollIndicator, onScroll, onScrollBeginDrag, onScrollEndDrag. A ref exposes scrollTo({ x, y, animated }).
FlatList	Native row recycling. data, renderItem and rowHeight are required for recycling; keyExtractor, horizontal, poolSize, ListHeaderComponent, ListFooterComponent, ListEmptyComponent, ItemSeparatorComponent, onEndReached, onEndReachedThreshold and initialNumToRender are optional. Header, footer and empty rows each take one row slot. A ref has scrollToIndex, scrollToItem, scrollToOffset and scrollToEnd. See Lists.
SectionList	sections, renderItem, renderSectionHeader, keyExtractor and stickySectionHeadersEnabled, built over FlatList, so headers and rows share the fixed rowHeight. A ref has scrollToLocation.
VirtualizedList	The same component as FlatList (no getItem/getItemCount).
Pressable	onPress, onPressIn, onPressOut, onLongPress, disabled, and a function style={({ pressed }) => …} that compiles to native pressed styles. See Styling for the accepted shapes.
TouchableOpacity	Dims to activeOpacity (default 0.2) while pressed. The dimming runs natively, with no JavaScript per press.
TouchableHighlight	Shows underlayColor (default black) as its pressed background. activeOpacity applies only when you set it.
TouchableWithoutFeedback	A Pressable with no pressed look; it wraps its child rather than cloning it.
Button	title, onPress, color (the background color, as on Android) and disabled. It takes no children and no style; use Pressable for a custom look.
Switch	value, onValueChange, disabled, trackColor={{ false, true }} and thumbColor.
Slider	The @react-native-community/slider shape: value, minimumValue (default 0), maximumValue (default 1), step, onValueChange, onSlidingStart, onSlidingComplete, minimumTrackTintColor, maximumTrackTintColor, thumbTintColor, disabled. min/max are compile errors.
ActivityIndicator	animating (default true), color, size ('small' is 20 px, 'large' is 36 px, or a number; a width/height in style wins) and hidesWhenStopped (default true).
Modal	visible (default true), transparent, animationType ('none', 'fade' or 'slide', animated natively in and out), onShow (after the entry animation) and onDismiss (after the exit). It draws above everything else on the screen's top layer. onRequestClose is accepted but never fires, because there is no back button.
SafeAreaView	Keeps its children on the glass of a shaped panel: the inscribed square on the round 1.46B, and the whole screen on a rectangular board.
KeyboardAvoidingView	Moves its children up by the on-screen keyboard's height while the keyboard is open. behavior: 'height' acts like 'padding'.
StatusBar	Accepted and draws nothing; there is no OS status bar.

APIs

Export	Notes in Kog
StyleSheet	create, flatten, compose, absoluteFill, absoluteFillObject and hairlineWidth (1). create is resolved at build time, so its values must be literals. Inline style={{ … }} objects may use dynamic values, including Animated values on numeric keys. flatten of a create style returns the values as the device stores them, not as you wrote them: opacity: 0.5 reads back as 0.502, fontWeight: '700' as 'bold', marginStart as marginLeft, flexGrow as flex, transformOrigin: 'left top' as '0px 0px'. Passing the result back to a style gives the same look. A plain object is merged unchanged, and a number that isn't a style handle is skipped with a console.error naming it.
Animated	Value, ValueXY, timing, spring, decay, delay, sequence, parallel, stagger, loop, createAnimatedComponent, and Animated.View, Text, Image, ImageBackground, ScrollView, FlatList and SectionList. start(callback) receives { finished }, which is false after stop() or when a newer animation takes over the value. interpolate maps numbers and angles, with extrapolate. Animations run in the native engine with no JavaScript per frame; loop repeats from JavaScript once per iteration. useNativeDriver is accepted and makes no difference. Animated.event, the arithmetic operators and color outputs throw. Call Animated.createAnimatedComponent(X) once at module level, as React Native requires; calling it inside a component, or writing a tag that isn't an Animated component such as <Animated.Pressable>, is a build error that shows the module-level form.
Easing	Every React Native curve (linear, ease, quad, cubic, poly, sin, circle, exp, bounce, back, elastic, bezier, and the in/out/inOut wrappers) runs exactly in the native engine. back and elastic take only their default parameters, poly(n) takes whole numbers 1 to 63, and step0, step1 and custom functions throw.
Platform	OS is 'kog', and Version is the wire ABI the app was built against. select reads the kog key, then native, then default. constants.board names the board the bundle was built for. isTV and isPad are false.
Dimensions	get('window') and get('screen') return the display size in logical pixels. The size never changes, so addEventListener listeners never fire.
useWindowDimensions	{ width, height, scale, fontScale } for the display.
PixelRatio	get() is the panel's scale factor (2 on the 1.46B, 1 on the CYD). getFontScale() is 1. roundToNearestPixel and getPixelSizeForLayoutSize.
Appearance	getColorScheme() (initially 'dark'), setColorScheme('light' | 'dark' | null) and addChangeListener. Kog has no OS theme, so the app sets the scheme.
useColorScheme	The current scheme. It updates when Appearance.setColorScheme changes it.
Keyboard	dismiss(), isVisible(), metrics() and addListener(event, fn) for keyboardWillShow, keyboardDidShow, keyboardWillHide and keyboardDidHide; the event carries endCoordinates.height. As in React Native, the show events arrive on the next turn after focus, so a listener added in a useEffect after <TextInput autoFocus> still gets them. isVisible(), metrics() and KeyboardAvoidingView change at once. A focus and blur before delivery emit nothing, so listeners only see show/hide pairs. The Will and Did events fire together, and the ChangeFrame events never fire. The keyboard Kog draws covers half the display.
Alert	alert(title, message?, buttons?, options?) shows a card on the top layer. Buttons default to a single OK and take the default, cancel and destructive styles; options.cancelable dismisses on a backdrop tap and calls onDismiss. Alert.prompt throws.
AppState	currentState is always 'active'.
I18nManager	isRTL is false; layout is left-to-right only, and forceRTL(true) throws.
InteractionManager	runAfterInteractions(fn) runs fn on the next animation frame.
LayoutAnimation	Accepted, with a one-time warning: layout changes apply immediately, and the completion callback still runs. Animate properties with Animated instead.
findNodeHandle	Returns the native widget handle behind a ref.
useAnimatedValue	React Native's hook form of new Animated.Value(initial).
Vibration	vibrate(pattern?, repeat?) and cancel() drive the board's vibration motor with React Native's Android semantics on every target: a number is the buzz length in ms (default 400), an array is [wait, on, wait, on, …], and repeat: true loops it until cancel(). On a board without peripherals.motor, vibrate() throws DEVICE_UNSUPPORTED naming the board. See Device services.
Linking, Share, Clipboard, BackHandler	Exported so ported code compiles. Calling one throws, or rejects for the promise-returning methods, with a message such as kog: Linking.openURL is not available on Kog (there are no other apps or URL handlers on the device).

Types

The props types React Native code imports, such as ViewProps, TextProps, ImageProps, ViewStyle, TextStyle, ImageStyle, StyleProp, ImageSourcePropType, GestureResponderEvent, LayoutChangeEvent and NativeSyntheticEvent, come from 'react-native' too.

Kog extensions

These are not React Native, so they are imported from Kog's own packages. Importing one from 'react-native' is a compile error that names the right package:

Package	Exports
@kog/ui	ProgressBar (the community progress/color/trackColor/indeterminate shape), Arc, Roller, Dropdown, Checkbox, Bar, Spinner, Chart, DynamicColor, ThemeProvider, ErrorBoundary, GestureDirection
@kog/react	useInterval, useTimeout, useAnimatedValue, useDisplay, useStorage, useDevice
@kog/router	Router, Routes, Route, Outlet, Link, useNavigate and the other routing hooks
@kog/hardware	useButton, useDigitalRead, useDigitalWrite, useAnalogRead, usePWM, buses
expo-battery, expo-brightness, expo-sensors, expo-haptics	Expo's APIs, implemented by @kog/device (Device services)

@kog/ui also exports every component above, so older code that imports View from @kog/ui keeps working. New code should import React Native names from 'react-native'.