IconButton

import { IconButton } from 'reactnatively';

1import { View, StyleSheet } from 'react-native';2import { Ionicons } from '@expo/vector-icons';3import { IconButton, Heading } from 'reactnatively';45export function ScreenHeader({ title, onBack, onShare, onMore }) {6  return (7    <View style={styles.header}>8      <IconButton9        icon={<Ionicons name="arrow-back" size={22} color="#fff" />}10        accessibilityLabel="Go back"11        variant="ghost"12        onPress={onBack}13      />14      <Heading level="h5" style={{ flex: 1, textAlign: 'center' }}>{title}</Heading>15      <View style={styles.actions}>16        <IconButton17          icon={<Ionicons name="share-outline" size={22} color="#fff" />}18          accessibilityLabel="Share"19          variant="ghost"20          onPress={onShare}21        />22        <IconButton23          icon={<Ionicons name="ellipsis-horizontal" size={22} color="#fff" />}24          accessibilityLabel="More options"25          variant="ghost"26          onPress={onMore}27        />28      </View>29    </View>30  );31}3233const styles = StyleSheet.create({34  header: { flexDirection: 'row', alignItems: 'center', padding: 12, gap: 4 },35  actions: { flexDirection: 'row', gap: 4 },36});

1import { View, StyleSheet } from 'react-native';2import { Ionicons } from '@expo/vector-icons';3import { IconButton, GlassView } from 'reactnatively';45export function PlayerControls({ isPlaying, onPlay, onPrev, onNext, onLike, liked }) {6  return (7    <GlassView elevation={2} borderRadius={32} style={styles.bar}>8      <IconButton9        icon={<Ionicons name={liked ? 'heart' : 'heart-outline'} size={22} color={liked ? '#ef4444' : '#fff'} />}10        accessibilityLabel={liked ? 'Unlike' : 'Like'}11        variant="ghost"12        onPress={onLike}13      />14      <IconButton15        icon={<Ionicons name="play-skip-back" size={24} color="#fff" />}16        accessibilityLabel="Previous track"17        variant="ghost"18        size="lg"19        onPress={onPrev}20      />21      <IconButton22        icon={<Ionicons name={isPlaying ? 'pause' : 'play'} size={28} color="#fff" />}23        accessibilityLabel={isPlaying ? 'Pause' : 'Play'}24        variant="solid"25        color="primary"26        size="xl"27        onPress={onPlay}28      />29      <IconButton30        icon={<Ionicons name="play-skip-forward" size={24} color="#fff" />}31        accessibilityLabel="Next track"32        variant="ghost"33        size="lg"34        onPress={onNext}35      />36      <IconButton37        icon={<Ionicons name="shuffle" size={22} color="#fff" />}38        accessibilityLabel="Shuffle"39        variant="ghost"40        onPress={() => {}}41      />42    </GlassView>43  );44}4546const styles = StyleSheet.create({47  bar: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 16, margin: 20 },48});