demo.js

import Draggable from 'react-native-draggable';
import { Image } from 'react-native';

const demo = [
    <Draggable renderSize={200} x={10} y={40}>
      <Image source={require('./assets/symbols/G-Clef.png')} style={{width: 20, height: 55}} />
    </Draggable>,
    <Draggable renderSize={200} x={40} y={45}>
      <Image source={require('./assets/symbols/4-4-Time.png')} style={{width: 18, height: 35}} />
    </Draggable>,
  
    <Draggable renderSize={200} x={70} y={32}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={100} y={32}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={130} y={27}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={160} y={23}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={190} y={45}>
      <Image source={require('./assets/symbols/Barline.png')} style={{width: 18, height: 35}} />
    </Draggable>,
  
    <Draggable renderSize={200} x={220} y={23}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={250} y={27}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={280} y={32}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={310} y={36}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={340} y={45}>
      <Image source={require('./assets/symbols/Barline.png')} style={{width: 18, height: 35}} />
    </Draggable>,
  
    <Draggable renderSize={200} x={370} y={40}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={400} y={40}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={430} y={36}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={460} y={32}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={490} y={45}>
      <Image source={require('./assets/symbols/Barline.png')} style={{width: 18, height: 35}} />
    </Draggable>,
  
    <Draggable renderSize={200} x={520} y={31}>
      <Image source={require('./assets/symbols/Half-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={550} y={36}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={580} y={46}>
      <Image source={require('./assets/symbols/Quarter-Rest.png')} style={{width: 18, height: 35}} />
    </Draggable>,
  
  <Draggable renderSize={200} x={10} y={40+106}>
  <Image source={require('./assets/symbols/G-Clef.png')} style={{width: 20, height: 55}} />
  </Draggable>,
  
    <Draggable renderSize={200} x={70} y={32+106}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={100} y={32+106}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={130} y={27+106}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={160} y={23+106}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={190} y={45+106}>
  <Image source={require('./assets/symbols/Barline.png')} style={{width: 18, height: 35}} />
  </Draggable>,
  
  <Draggable renderSize={200} x={220} y={23+106}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={250} y={27+106}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={280} y={32+106}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={310} y={36+106}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={340} y={45+106}>
  <Image source={require('./assets/symbols/Barline.png')} style={{width: 18, height: 35}} />
  </Draggable>,
  
  <Draggable renderSize={200} x={370} y={40+106}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={400} y={40+106}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={430} y={36+106}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={460} y={32+106}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={490} y={45+106}>
  <Image source={require('./assets/symbols/Barline.png')} style={{width: 18, height: 35}} />
  </Draggable>,
  
  <Draggable renderSize={200} x={520} y={142}>
    <Image source={require('./assets/symbols/Half-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={550} y={147}>
    <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={580} y={46+106}>
    <Image source={require('./assets/symbols/Quarter-Rest.png')} style={{width: 18, height: 35}} />
  </Draggable>,
    
    <Draggable renderSize={200} x={10} y={40+106*2}>
  <Image source={require('./assets/symbols/G-Clef.png')} style={{width: 20, height: 55}} />
  </Draggable>,
  
  <Draggable renderSize={200} x={70} y={37+106*2}>
  <Image source={require('./assets/symbols/Half-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={100} y={33+106*2}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={130} y={41+106*2}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={160} y={45+106*2}>
  <Image source={require('./assets/symbols/Barline.png')} style={{width: 18, height: 35}} />
  </Draggable>,
  
  <Draggable renderSize={200} x={190} y={37+106*2}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={220} y={33+106*2}>
  <Image source={require('./assets/symbols/Eighth-Note.png')} style={{width: 18, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={250} y={29+106*2}>
  <Image source={require('./assets/symbols/Eighth-Note.png')} style={{width: 18, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={280} y={34+106*2}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={310} y={41+106*2}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={340} y={45+106*2}>
  <Image source={require('./assets/symbols/Barline.png')} style={{width: 18, height: 35}} />
  </Draggable>,
  
  <Draggable renderSize={200} x={370} y={37+106*2}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={400} y={33+106*2}>
  <Image source={require('./assets/symbols/Eighth-Note.png')} style={{width: 18, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={430} y={29+106*2}>
  <Image source={require('./assets/symbols/Eighth-Note.png')} style={{width: 18, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={460} y={34+106*2}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={490} y={38+106*2}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={520} y={45+106*2}>
  <Image source={require('./assets/symbols/Barline.png')} style={{width: 18, height: 35}} />
  </Draggable>,
  
  <Draggable renderSize={200} x={550} y={43+106*2}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={580} y={37+106*2}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={610} y={55+106*2}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
  <Draggable renderSize={200} x={640} y={34+106*2}>
  <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
  </Draggable>,
    
  <Draggable renderSize={200} x={10} y={40+106*3}>
      <Image source={require('./assets/symbols/G-Clef.png')} style={{width: 20, height: 55}} />
    </Draggable>,
  
    <Draggable renderSize={200} x={70} y={32+106*3}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={100} y={32+106*3}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={130} y={27+106*3}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={160} y={23+106*3}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={190} y={45+106*3}>
      <Image source={require('./assets/symbols/Barline.png')} style={{width: 18, height: 35}} />
    </Draggable>,
  
    <Draggable renderSize={200} x={220} y={23+106*3}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={250} y={27+106*3}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={280} y={32+106*3}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={310} y={36+106*3}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={340} y={45+106*3}>
      <Image source={require('./assets/symbols/Barline.png')} style={{width: 18, height: 35}} />
    </Draggable>,
  
    <Draggable renderSize={200} x={370} y={40+106*3}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={400} y={40+106*3}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={430} y={36+106*3}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={460} y={32+106*3}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={490} y={45+106*3}>
      <Image source={require('./assets/symbols/Barline.png')} style={{width: 18, height: 35}} />
    </Draggable>,
  
    <Draggable renderSize={200} x={520} y={31+106*3}>
      <Image source={require('./assets/symbols/Half-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={550} y={36+106*3}>
      <Image source={require('./assets/symbols/Quarter-Note.png')} style={{width: 12, height: 35}} />
    </Draggable>,
    <Draggable renderSize={200} x={580} y={46+106*3}>
      <Image source={require('./assets/symbols/Quarter-Rest.png')} style={{width: 18, height: 35}} />
    </Draggable>,
  ]

  export default demo;