react-native-uuid

import uuid, { v4, v1 } from 'react-native-uuid'; import React from 'react'; import { View, Text, Button, StyleSheet } from 'react-native'; const App = () => { const [generatedUuids, setGeneratedUuids] = React.useState<string[]>([]); const generateNewUuids = () => { const newV4Uuid = v4() as string; // Using named export for v4 const newV1Uuid = uuid.v1() as string; // Using default export for v1 const anotherV4Uuid = uuid.v4() as string; // Using default export for v4 setGeneratedUuids(prev => [ `v4 (named): ${newV4Uuid}`, `v1 (default): ${newV1Uuid}`, `v4 (default): ${anotherV4Uuid}`, ...prev.slice(0, 4) // Keep only the latest 5 UUIDs ]); }; return ( <View style={styles.container}> <Text style={styles.title}>Generated UUIDs:</Text> { generatedUuids.length === 0 ? <Text style={styles.noUuids}>Press the button to generate UUIDs.</Text> : generatedUuids.map((id, index) => ( <Text key={index} style={styles.uuidText}>{id}</Text> )) } <Button title="Generate New UUIDs" onPress={generateNewUuids} /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, backgroundColor: '#f0f0f0' }, title: { fontSize: 20, fontWeight: 'bold', marginBottom: 10 }, uuidText: { fontSize: 14, marginBottom: 5, fontFamily: 'monospace' }, noUuids: { fontSize: 16, color: '#888', marginBottom: 20 } }); export default App;