import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';

import {SketchCanvas} from 'react-native-sketch-canvas-enhanced';

export default class Example extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{flex: 1, flexDirection: 'row'}}>
          <SketchCanvas
            style={{flex: 1}}
            strokeColor={'red'}
            strokeWidth={7}
            // Use 'draw' mode for freehand drawing
            drawMode={'draw'}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

import React, {Component} from 'react';
import {StyleSheet, View, TouchableOpacity, Text} from 'react-native';

import {SketchCanvas} from 'react-native-sketch-canvas-enhanced';

export default class ShapeExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      drawMode: 'draw',
      shapeFilled: false,
    };
  }

  render() {
    return (
      <View style={styles.container}>
        {/* Drawing tools */}
        <View style={styles.toolsContainer}>
          <TouchableOpacity
            style={[
              styles.tool,
              this.state.drawMode === 'draw' ? styles.selected : null,
            ]}
            onPress={() => this.setState({drawMode: 'draw'})}>
            <Text>Draw</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={[
              styles.tool,
              this.state.drawMode === 'line' ? styles.selected : null,
            ]}
            onPress={() => this.setState({drawMode: 'line'})}>
            <Text>Line</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={[
              styles.tool,
              this.state.drawMode === 'rectangle' ? styles.selected : null,
            ]}
            onPress={() => this.setState({drawMode: 'rectangle'})}>
            <Text>Rectangle</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={[
              styles.tool,
              this.state.drawMode === 'circle' ? styles.selected : null,
            ]}
            onPress={() => this.setState({drawMode: 'circle'})}>
            <Text>Circle</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={[
              styles.tool,
              this.state.drawMode === 'arrow' ? styles.selected : null,
            ]}
            onPress={() => this.setState({drawMode: 'arrow'})}>
            <Text>Arrow</Text>
          </TouchableOpacity>

          {/* Note: Fill functionality has been removed as it's optimized for outlining */}
        </View>

        {/* Canvas */}
        <View style={{flex: 1}}>
          <SketchCanvas
            ref={ref => (this.canvas = ref)}
            style={{flex: 1}}
            strokeColor={'#000000'}
            strokeWidth={4}
            drawMode={this.state.drawMode}
            // Note: shapeFilled prop is no longer used as fill functionality has been removed
            onShapeStart={(x, y) => console.log('Shape started at', x, y)}
            onShapeChanged={shape => console.log('Shape changed', shape)}
            onShapeEnd={shape => console.log('Shape completed', shape)}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  toolsContainer: {
    flexDirection: 'row',
    padding: 10,
    justifyContent: 'space-around',
  },
  tool: {
    padding: 10,
    borderRadius: 5,
    backgroundColor: '#DDDDDD',
  },
  selected: {
    backgroundColor: '#AAAAFF',
  },
});

import React, {Component} from 'react';
import {StyleSheet, View, TouchableOpacity, Text, Alert} from 'react-native';

import {SketchCanvas} from 'react-native-sketch-canvas-enhanced';

export default class TextAnnotationExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: [
        {
          id: 1,
          text: 'Tap to edit me!\nDrag to move me!',
          fontSize: 20,
          fontColor: '#000000',
          position: {x: 150, y: 200},
          coordinate: 'Absolute',
          alignment: 'Center',
          fontWeight: 'bold',
          backgroundColor: 'rgba(255, 255, 255, 0.7)',
          padding: 10,
          borderWidth: 1,
          borderColor: '#000000',
          borderRadius: 5,
        },
      ],
      pendingTextMode: false,
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.toolsContainer}>
          <TouchableOpacity
            style={styles.tool}
            onPress={() => {
              // Enable pending text mode - next tap on canvas will add text
              this.setState({ pendingTextMode: true });
              Alert.alert('Tap anywhere on the canvas to add text');
            }}>
            <Text>Add Text</Text>
          </TouchableOpacity>
        </View>

        <View style={{flex: 1}}>
          <SketchCanvas
            ref={ref => (this.canvas = ref)}
            style={{flex: 1}}
            text={this.state.text}
            // Enable pending text mode to add text at tap location
            pendingTextMode={this.state.pendingTextMode}
            // Handle text placement
            onTextPlaced={position => {
              // Add new text at the tapped position
              const newText = {
                id: Date.now(),
                text: 'New Text',
                fontSize: 20,
                fontColor: '#000000',
                position: position,
                coordinate: 'Absolute',
                alignment: 'Left',
                editable: true,
              };
              
              this.setState({
                text: [...this.state.text, newText],
                pendingTextMode: false // Exit pending text mode
              });
            }}
            onTextTapped={textId => {
              console.log('Text tapped', textId);
              // Text will be automatically selected for dragging
            }}
            onTextEditingComplete={text => {
              // Update the text in state
              const updatedTexts = this.state.text.map(t =>
                t.id === text.id ? text : t,
              );
              this.setState({text: updatedTexts});
            }}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  toolsContainer: {
    flexDirection: 'row',
    padding: 10,
    justifyContent: 'center',
  },
  tool: {
    padding: 10,
    borderRadius: 5,
    backgroundColor: '#DDDDDD',
  },
});

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Text, View, Alert} from 'react-native';

import RNSketchCanvas from '@terrylinla/react-native-sketch-canvas';

export default class example extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{flex: 1, flexDirection: 'row'}}>
          <RNSketchCanvas
            containerStyle={{backgroundColor: 'transparent', flex: 1}}
            canvasStyle={{backgroundColor: 'transparent', flex: 1}}
            defaultStrokeIndex={0}
            defaultStrokeWidth={5}
            closeComponent={
              <View style={styles.functionButton}>
                <Text style={{color: 'white'}}>Close</Text>
              </View>
            }
            undoComponent={
              <View style={styles.functionButton}>
                <Text style={{color: 'white'}}>Undo</Text>
              </View>
            }
            clearComponent={
              <View style={styles.functionButton}>
                <Text style={{color: 'white'}}>Clear</Text>
              </View>
            }
            eraseComponent={
              <View style={styles.functionButton}>
                <Text style={{color: 'white'}}>Eraser</Text>
              </View>
            }
            strokeComponent={color => (
              <View
                style={[{backgroundColor: color}, styles.strokeColorButton]}
              />
            )}
            strokeSelectedComponent={(color, index, changed) => {
              return (
                <View
                  style={[
                    {backgroundColor: color, borderWidth: 2},
                    styles.strokeColorButton,
                  ]}
                />
              );
            }}
            strokeWidthComponent={w => {
              return (
                <View style={styles.strokeWidthButton}>
                  <View
                    style={{
                      backgroundColor: 'white',
                      marginHorizontal: 2.5,
                      width: Math.sqrt(w / 3) * 10,
                      height: Math.sqrt(w / 3) * 10,
                      borderRadius: (Math.sqrt(w / 3) * 10) / 2,
                    }}
                  />
                </View>
              );
            }}
            saveComponent={
              <View style={styles.functionButton}>
                <Text style={{color: 'white'}}>Save</Text>
              </View>
            }
            savePreference={() => {
              return {
                folder: 'RNSketchCanvas',
                filename: String(Math.ceil(Math.random() * 100000000)),
                transparent: false,
                imageType: 'png',
              };
            }}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  strokeColorButton: {
    marginHorizontal: 2.5,
    marginVertical: 8,
    width: 30,
    height: 30,
    borderRadius: 15,
  },
  strokeWidthButton: {
    marginHorizontal: 2.5,
    marginVertical: 8,
    width: 30,
    height: 30,
    borderRadius: 15,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#39579A',
  },
  functionButton: {
    marginHorizontal: 2.5,
    marginVertical: 8,
    height: 30,
    width: 60,
    backgroundColor: '#39579A',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 5,
  },
});

AppRegistry.registerComponent('example', () => example);

{
  drawer: 'user1',
  size: { // the size of drawer's canvas
    width: 480,
    height: 640
  },
  path: {
    id: 8979841, // path id
    color: '#FF000000', // ARGB or RGB
    width: 5,
    data: [
      "296.11,281.34",  // x,y
      "293.52,284.64",
      "290.75,289.73"
    ]
  }
}

{
  drawer: 'user1',
  size: { // the size of drawer's canvas
    width: 480,
    height: 640
  },
  path: {
    id: 8979841, // path id
    color: '#000000',
    width: 5,
    data: [
      "296.11,281.34",  // x,y coordinate
      "293.52,284.64",
      "290.75,289.73"
    ]
  }
}

{
  drawer: 'user1',
  size: { // the size of drawer's canvas
    width: 480,
    height: 640
  },
  shape: {
    id: 8979842, // shape id
    type: 'rectangle', // 'line', 'rectangle', 'circle', or 'arrow'
    color: '#FF0000',
    width: 3,
    filled: true, // whether the shape is filled (only for rectangle and circle)
    startPoint: { x: 100, y: 100 }, // starting point coordinates
    endPoint: { x: 200, y: 200 } // ending point coordinates
  }
}