@dittolive/ditto-react-native-tools
Advanced tools
⚠️ Platform Compatibility Notice
These tools currently do not support the React Native MacOS platform. They are designed for mobile (iOS, Android) platforms where Ditto's peer-to-peer functionality and file system access are available.
This library requires the following peer dependencies to be installed in your app:
@dittolive/ditto - Core Ditto SDK (>=4.11.6 - Tested on 4.11.6 and 4.12.2)@dr.pogodin/react-native-fs - File system operations for log export and data directory cleanupreact-native-zip-archive - Directory compression for data export functionality⚠️ iOS Target Version
Some tools require iOS version 15.5 or higher. You may need to update your iOS target version.
⚠️ @dr.pogodin/react-native-fs Version
Some tools require iOS version 15.5 or higher. You may need to update your iOS target version. Refer to @dr.pogodin/react-native-fs documentation which version you should use based on the version of React Native you are using.
npm install @dittolive/ditto-react-native-tools @dittolive/ditto @dr.pogodin/react-native-fs react-native-zip-archive
or
yarn add @dittolive/ditto-react-native-tools @dittolive/ditto @dr.pogodin/react-native-fs react-native-zip-archive
After installing dependencies, run:
cd ios && pod install && cd ..
For React Native 0.77.1+, auto-linking should handle Android setup automatically. If you encounter linking issues, clean your build:
cd android && ./gradlew clean && cd ..
After installing this library, you need to configure your React Native app for Ditto.
Please follow the official Ditto React Native quickstart guide: React Native Setup
import React from 'react';
import { DittoProvider, PeersList, DiskUsage, SystemSettings, QueryEditor } from '@dittolive/ditto-react-native-tools';
import { Ditto } from '@dittolive/ditto';
// Initialize your Ditto instance
const ditto = new Ditto({
type: 'offlinePlayground',
appID: 'your-app-id',
offlineToken: 'your-offline-token',
});
function App() {
return (
<DittoProvider ditto={ditto}>
<PeersList
showConnectionDetails={true}
emptyMessage="No peers discovered yet"
/>
{/* Or use other components */}
<SystemSettings ditto={ditto} />
</DittoProvider>
);
}
Display and monitor Ditto peer connections in real-time.
import { PeersList } from '@dittolive/ditto-react-native-tools';
<PeersList
ditto={ditto}
showConnectionDetails={true}
style={{ flex: 1 }}
/>
Props:
ditto (required): Your Ditto instanceshowConnectionDetails?: boolean - Whether to show detailed connection information (default: true)style?: ViewStyle - Custom styling for the main containerheaderComponent?: () => React.ReactElement - Optional header componentStyle Customization:
The component's styling is controlled through built-in StyleSheet with the following key areas that can be customized via the style prop:
// Example custom styling
<PeersList
ditto={ditto}
style={{
flex: 1,
backgroundColor: '#1a1a1a', // Dark theme background
paddingHorizontal: 8 // Reduce horizontal margins
}}
/>
Monitor and display Ditto's disk usage breakdown with export functionality.
import { DiskUsage } from '@dittolive/ditto-react-native-tools';
<DiskUsage
ditto={ditto}
style={{ flex: 1 }}
onExportDataDirectory={() => console.log('Export data')}
/>
Props:
ditto (required): Your Ditto instancestyle?: ViewStyle - Custom styling for the main containeronExportDataDirectory?: () => void - Callback when export data directory button is pressedFeatures:
Logger.exportToFile() method to save log filesStyle Customization:
The component's styling is controlled through built-in StyleSheet with the following key areas that can be customized via the style prop:
// Example custom styling
<DiskUsage
ditto={ditto}
style={{
flex: 1,
backgroundColor: '#f8f9fa', // Light gray background
padding: 16 // Add container padding
}}
/>
Display all Ditto system settings using the SHOW ALL DQL statement. Self-contained component with built-in refresh functionality.
import { SystemSettings } from '@dittolive/ditto-react-native-tools';
<SystemSettings
ditto={ditto}
style={{ flex: 1, backgroundColor: '#f5f5f5' }}
/>
Props:
ditto (required): Your Ditto instancestyle?: ViewStyle - Custom styling for the main containerFeatures:
Style Customization:
The component's styling is controlled through built-in StyleSheet with the following key areas that can be customized via the style prop:
Search Functionality: The component includes a built-in search feature that:
// Example custom styling
<SystemSettings
ditto={ditto}
style={{
flex: 1,
backgroundColor: '#1a1a1a', // Dark theme background
paddingTop: 20 // Add top spacing
}}
/>
Execute DQL (Document Query Language) queries against your Ditto store with a comprehensive interface for query input, execution, and results display.
import { QueryEditor } from '@dittolive/ditto-react-native-tools';
<QueryEditor
ditto={ditto}
style={{ flex: 1 }}
/>
Props:
ditto (required): Your Ditto instancestyle?: ViewStyle - Custom styling for the main containerFeatures:
Supported Query Types:
Style Customization: The QueryEditor component consists of three sub-components, each accepting custom styles:
interface QueryEditorStyles {
container?: ViewStyle; // Main container
editorView?: ViewStyle; // Query input section
headerView?: ViewStyle; // Buttons section
resultsView?: ViewStyle; // Results display section
}
<QueryEditor
ditto={ditto}
style={{
container: { flex: 1, backgroundColor: '#f8f9fa' },
editorView: { backgroundColor: 'white', padding: 16 },
headerView: { backgroundColor: '#e9ecef', borderBottomWidth: 1 },
resultsView: { flex: 1, backgroundColor: 'white' }
}}
/>
Performance Features:
getItemLayout for optimal performance with large datasetsUsage Examples:
// Basic usage for query testing
<QueryEditor ditto={ditto} />
// With custom container styling
<QueryEditor
ditto={ditto}
style={{
flex: 1,
backgroundColor: '#f5f5f5',
margin: 10
}}
/>
// Example queries to try:
// SELECT * FROM myCollection
// INSERT INTO myCollection (name, value) VALUES ('test', 123)
// UPDATE myCollection SET value = 456 WHERE name = 'test'
// DELETE FROM myCollection WHERE name = 'test'
// SHOW ALL
This repository includes a fully functional example app demonstrating all features. See the example directory for setup instructions and implementation details.
When making changes to the root library code and testing them in the example app, the project is setup with symlinks for testing.
package.json:
"@dittolive/ditto-react-native-tools": "file:.."
To stop packages from bleeding from the library to the example app, the example app's metro.config.js is setup to only use the modules we need from the library:
// Explicitly map only the modules we need from the library
extraNodeModules: (() => {
const modules = [
'react',
'react-native',
'@dittolive/ditto',
'@dr.pogodin/react-native-fs',
'react-native-zip-archive',
];
const result = {};
for (const mod of modules) {
try {
// Try to resolve the module from the example app first, then from the library
let resolvedPath;
try {
resolvedPath = path.dirname(require.resolve(`${mod}/package.json`, { paths: [path.resolve(__dirname, 'node_modules')] }));
} catch (e) {
resolvedPath = path.dirname(require.resolve(`${mod}/package.json`, { paths: [path.resolve(libraryPath, 'node_modules')] }));
}
if (fs.existsSync(resolvedPath)) {
result[mod] = resolvedPath;
}
} catch (e) {
// Module not found, skip
}
}
return result;
})(),
// Enable symlinks (default in RN 0.77.1, but explicit for clarity)
unstable_enableSymlinks: true,
After the initial setup, changes to the library source code will be immediately available in the example app:
Make changes to the library source code in src/
Clean all caches and reset development environment:
cd example
./clear-cache.sh
Start Metro (if not already running):
npx react-native start --reset-cache
Run the app:
# In a new terminal:
yarn ios --simulator="iPhone 16 Pro"
# or
yarn android
Note: With this setup, changes to the library code are immediately reflected in the example app through Fast Refresh. No need to rebuild or reinstall the library after each change!
Important: The Metro configuration includes a custom resolver that directly points to the library's TypeScript source files, enabling live updates without compilation.
To build and deploy the example app to a connected Android device:
Enable Developer Mode on your Android device:
Connect your device via USB and verify connection:
adb devices
You should see your device listed (e.g., R5CN30DYCWA device)
There are two methods to deploy to your device:
Clean previous builds (if needed):
cd example/android
./gradlew clean
Build the APK:
./gradlew assembleDebug
Install the APK:
adb install app/build/outputs/apk/debug/app-debug.apk
Start Metro bundler:
cd ../ # Back to example directory
npx react-native start --reset-cache
Launch the app:
adb shell monkey -p com.ditto.example -c android.intent.category.LAUNCHER 1
cd example
yarn android
This command will automatically build and deploy to the connected device.
If you need to revert to the standard file:.. dependency:
cd example
yarn unlink "@dittolive/ditto-react-native-tools"
yarn install --force
The example app uses environment variables for Ditto configuration. After changing values in the .env file:
Restart Metro with cache reset:
npx react-native start --reset-cache
Rebuild the app to pick up the new environment values:
yarn ios --simulator="iPhone 16 Pro"
Note: Environment variables are compiled into the JavaScript bundle at build time, so you must rebuild the app after changing
.envvalues.
This library utilizes the following open-source projects:
We greatly appreciate the maintainers and contributors of these projects for making this library possible.
FAQs
React Native library for Ditto Tools integration
We found that @dittolive/ditto-react-native-tools demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 28 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket researchers found 10 typosquatted npm packages that auto-run on install, show fake CAPTCHAs, fingerprint by IP, and deploy a credential stealer.
Product
Socket Firewall Enterprise is now available with flexible deployment, configurable policies, and expanded language support.
Security News
Open source dashboard CNAPulse tracks CVE Numbering Authorities’ publishing activity, highlighting trends and transparency across the CVE ecosystem.