react-native-conversation-tree

Interactive branching conversation trees for React Native

react-native-conversation-tree

A lightweight, highly customizable React Native component to visualize branching conversation threads, mind maps, or hierarchical trees with elegant SVG connections.

Features

• 🌲 Visual Branching: Automatic layout calculation based on parent-child relationships.
• 🎨 Custom Rendering: You control exactly how the nodes look using the renderNode prop.
• 📐 Flowing Connections: Smooth Bezier curves for a modern UI.
• 📱 Cross-Platform: Works on iOS, Android, and Web.

Installation

npm install react-native-conversation-tree react-native-svg
# OR
yarn add react-native-conversation-tree react-native-svg

Usage

import React from 'react';
import { View, Text } from 'react-native';
import { ConversationTree } from 'react-native-conversation-tree';

const data = [
	{ id: '1', text: 'Hello!' },
	{ id: '2', parentId: '1', text: 'How are you?' },
	{ id: '3', parentId: '1', text: 'Tell me a story.' },
];

export default function App() {
	return (
		<ConversationTree
			data={data}
			renderNode={(node) => (
				<View style={{ padding: 10, backgroundColor: 'white', borderRadius: 8 }}>
					<Text>{node.text}</Text>
				</View>
			)}
		/>
	);
}

License

MIT

Step 2: Final Build (Compile to JS)

NPM packages are usually shared as JavaScript, not TypeScript, so everyone can use them. Run this command in your terminal to "build" the package:

yarn prepare