Melange React Native

OCaml bindings for React Native, designed for use with Melange and MLX syntax.

Write type-safe React Native applications using OCaml instead of JavaScript/TypeScript.

Features

• Type Safety: Full OCaml type system applied to React Native APIs
• Comprehensive: 73 modules covering components, APIs, utilities, and hooks
• MLX Syntax: Uses Melange's JSX-like syntax for React components
• Web Compatible: Works with react-native-web for browser deployment
• Hot Reload: Supports Vite's fast refresh for development

Requirements

• OCaml >= 5.1
• Dune >= 3.9
• Melange >= 4.0
• reason-react >= 0.14

Installation

Add to your dune-project:

(package
 (name your-app)
 (depends
  (melange-react-native (>= 0.1))))

Then in your dune file:

(melange.emit
 (target output)
 (libraries melange-react-native reason-react))

Usage

open React_native

let make () =
  <View style=(Style.style ~flex:1. ~justifyContent:`center ~alignItems:`center ())>
    <Text style=(Style.textStyle ~fontSize:24. ())>
      (React.string "Hello from OCaml!")
    </Text>
    <Button
      title="Press Me"
      onPress=(fun _ -> Alert.alert ~title:"Hello" ())
    />
  </View>
[@@react.component]

Available Modules

UI Components

Component	Description
View	Basic container component
Text	Text display component
Image	Image display component
ImageBackground	Background image container
ScrollView	Scrollable container
FlatList	Performant list component
SectionList	Sectioned list component
TextInput	Text input field
Button	Basic button component
Switch	Toggle switch
Pressable	Flexible press handler
TouchableOpacity	Touch with opacity feedback
TouchableHighlight	Touch with highlight feedback
Modal	Modal dialog
ActivityIndicator	Loading spinner
SafeAreaView	Safe area container
KeyboardAvoidingView	Keyboard-aware container
StatusBar	Status bar control
RefreshControl	Pull-to-refresh control

Core APIs

API	Description
Platform	Platform detection
Dimensions	Screen dimensions
StyleSheet	Style utilities
Style	Style definitions
Alert	Alert dialogs
Linking	URL handling
Share	Share sheet
Clipboard	Clipboard access
Keyboard	Keyboard control
Animated	Animation system
Easing	Easing functions
LayoutAnimation	Layout animations
AppState	App lifecycle
Appearance	Light/dark mode
Vibration	Haptic feedback
PixelRatio	Pixel density
I18nManager	RTL support
InteractionManager	Interaction scheduling
Performance	Performance timing

Hooks

Hook	Description
useWindowDimensions	Responsive dimensions
useColorScheme	Current color scheme

Platform-Specific

Module	Platform
ToastAndroid	Android
ActionSheetIOS	iOS
PermissionsAndroid	Android
DynamicColorIOS	iOS
PlatformColor	Android/iOS

Development

Building

# Install npm dependencies
make install

# Build the library
make build

# Watch mode
make watch

Running the Test App

# Start development server with hot reload
make start

This runs both the Melange watcher and Vite dev server, opening a web preview using react-native-web.

Project Structure

melange-react-native/
├── src/                    # OCaml binding modules
├── test/                   # Test application
├── dune-project            # Dune configuration
├── melange-react-native.opam
├── package.json
├── vite.config.js
└── Makefile

License

MIT