React Native Piano Keyboard

A beautiful and customizable piano keyboard component for React Native applications.

Installation

npm install react-native-piano-keyboard
# or
yarn add react-native-piano-keyboard

Dependencies

This package requires the following peer dependencies:

• react
• react-native
• expo
• expo-av
• expo-image
• tonal
• tone
• react-native-webview

Usage

import React from 'react';
import { PianoKeyboard, MidiProvider } from 'react-native-piano-keyboard';

const App = () => {
  const handleKeyPress = (note: string) => {
    console.log('Pressed note:', note);
  };

  return (
    <MidiProvider>
      <PianoKeyboard
        startKey="C2"
        endKey="C4"
        onPressKey={handleKeyPress}
      />
    </MidiProvider>
  );
};

export default App;

Props

PianoKeyboard

| Prop | Type | Default | Description | |------|------|---------|-------------| | startKey | string | "C2" | The starting note of the keyboard | | endKey | string | "C4" | The ending note of the keyboard | | keyDisabled | boolean | false | Whether the keyboard keys are disabled | | onPressKey | (key: string) => void | required | Callback function when a key is pressed |

License

MIT

Welcome to React Native Piano Keyboard 👋

This is an Expo project and Inspired from ONLINE PIANIST

ScreenShots

| iOS | Android | Web | | ----------- | ----------- | ----------- | | | | |

Get started

1. Install dependencies

   npm install

2. Start the app

    npm start

In the output, you'll find options to open the app in a

• development build
• Android emulator
• iOS simulator
• Expo Go, a limited sandbox for trying out app development with Expo

Webview and Tone.js are used to implement the piano sound.

Contributors

• zhen1007 (Portfolio)
• gscripts (Portfolio)

⚠️ Warning: Version 1.0.0 published on npm is broken due to missing assets. Please use version 1.0.1 or higher.