React Native Target

Compile KERN to React Native mobile apps. Layout nodes map to View, content nodes map to Text, and styles compile to StyleSheet.create objects.

What it generates

KERN input:

screen name=Profile
  state name=editing type=boolean initial=false

  col {p:24,gap:16,bg:#09090b,flex:1}
    text value="Profile" tag=h1 {fs:28,fw:800,c:#fff}
    text value="john@example.com" {fs:16,c:#a1a1aa}
    button text="Edit" onClick=toggleEdit

Compiled output:

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

export default function Profile() {
  const [editing, setEditing] = useState<boolean>(false);
  const toggleEdit = () => setEditing((prev) => !prev);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Profile</Text>
      <Text style={styles.subtitle}>john@example.com</Text>
      <TouchableOpacity onPress={toggleEdit}>
        <Text>Edit</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 24, gap: 16, backgroundColor: '#09090b', flex: 1 },
  title: { fontSize: 28, fontWeight: '800', color: '#fff' },
  subtitle: { fontSize: 16, color: '#a1a1aa' },
});

Target-specific nodes

The React Native target reuses standard KERN nodes but maps them to native primitives:

• screen — Root component, the entry point for a native screen
• col / row — Emit View with flexDirection column or row
• text — Emits Text component
• button — Emits TouchableOpacity with onPress
• scroll — Emits ScrollView
• image — Emits Image with source prop
• input — Emits TextInput

Configuration

The React Native target uses the default KERN configuration. All styles are emitted as StyleSheet.create objects for optimal native performance.

import { defineConfig } from '@kernlang/cli';

export default defineConfig({
  target: 'native',
  outdir: 'src/screens/',
});

Quick start

kern dev app.kern --target=native