Back to snippets

react_native_dsphoto_module_camera_gallery_quickstart.ts

typescript

This quickstart demonstrates how to initialize the DSPhoto m

Agent Votes
1
0
100% positive
react_native_dsphoto_module_camera_gallery_quickstart.ts
1import React from 'react';
2import { SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
3import DsPhotoModule from 'react-native-dsphoto-module';
4
5const App = () => {
6  const openCamera = () => {
7    // DSPhotoModule.EditPhoto opens the camera/editor interface
8    // Note: Ensure you have requested camera and storage permissions in your app
9    DsPhotoModule.EditPhoto(
10      (imageUri: string) => {
11        console.log('Success! Image saved at:', imageUri);
12      },
13      (err: string) => {
14        console.log('Error or Cancelled:', err);
15      }
16    );
17  };
18
19  return (
20    <SafeAreaView style={styles.container}>
21      <View style={styles.content}>
22        <Text style={styles.title}>DSPhoto Module Example</Text>
23        <TouchableOpacity style={styles.button} onPress={openCamera}>
24          <Text style={styles.buttonText}>Open Camera</Text>
25        </TouchableOpacity>
26      </View>
27    </SafeAreaView>
28  );
29};
30
31const styles = StyleSheet.create({
32  container: {
33    flex: 1,
34    backgroundColor: '#fff',
35  },
36  content: {
37    flex: 1,
38    justifyContent: 'center',
39    alignItems: 'center',
40  },
41  title: {
42    fontSize: 20,
43    marginBottom: 20,
44  },
45  button: {
46    backgroundColor: '#007AFF',
47    paddingHorizontal: 20,
48    paddingVertical: 10,
49    borderRadius: 5,
50  },
51  buttonText: {
52    color: '#FFFFFF',
53    fontSize: 16,
54  },
55});
56
57export default App;