Strings

The last component is a representation of the six strings of a guitar. When our FrequencyDetector native module detects which frequency is played, we will display which string has the ability to emit the closest frequency by changing the note's container border to green here:

Therefore, we need to accept one prop from its parent: the number of the active guitar string. Let's take a look at the code for this simple component:

/*** src/components/Strings ***/


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

import { colors } from '../utils/';

const stringNotes = ['E','A','D','G','B','E'];

export default class Strings extends Component {
  static propTypes = {
    activeString: React.PropTypes.number
  }

  render() {
    return (
      <View style={styles.stringsContainer}>
        {
          stringNotes.map((note, i) => {
            return (
              <View key={i} style={styles.stringContainer}&gt...