practice.js

export default class Practice extends Component {
  static defaultProps = {
    selected: '',
    onSelectEmoji: () => {}
  };
  
  render() {
    return (
      <Card style={styles.card}>
        <Card.Body>
          <Text style={[TYPO.paperFontHeadline, COLOR.paperCyan500, { marginVertical: 5 }]}>
            Hey {this.props.userName},
          </Text>
          <View style={{ marginVertical: 5 }}>
            <Text style={[TYPO.paperFontBody1]}>Good Evening :)</Text>
            <Text style={[TYPO.paperFontBody1]}>How was your practice today?</Text>
          </View>
        </Card.Body>
        <Divider theme="light" style={{ marginTop: 5, marginBottom: 5 }} />
        <EmojiStrip
          selected={this.props.selected}
          onChangeEmoji={this.props.onSelectEmoji}
        />
      </Card>
    );
  }
}

Practice.propTypes = {
  selected: PropTypes.string,
  onSelectEmoji: PropTypes.func,
  userName: PropTypes.string.isRequired,
};

practiceDetails.js

export default class PracticeDetails extends Component {

  render() {
    return (
      <ScrollView style={styles.container}>
        <Form ref="form" customFields={customFields} >
          <Practice type="EmojiStrip" name="selectedEmoji" userName={this.props.user.name.split(' ')[0]} />
          <Duration />
          <PracticeStyle />
          <Note />
        </Form>
        <Button
          onPress={() => console.log(this.refs.form.getValues())}
          text="Submit"
          primary={'paperCyan'}
          theme="dark"
          raised
        />
      </ScrollView>
    );
  }
}

PracticeDetails.propTypes = {
  user: PropTypes.object.isRequired,
};