Building download button

Create components/DownloadButton.js file:

import { FontAwesome } from '@expo/vector-icons';
import { TouchableOpacity, StyleSheet, Text, View } from 'react-native';

export default function DownloadButton() {
  return (
    <TouchableOpacity style={styles.container}>
      <FontAwesome name="cloud-download" size={16} color="black" style={styles.icon} />
      <Text style={styles.text}>Download</Text>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
  },
  icon: {
    marginEnd: 4
  },
  text: {
    textTransform: 'uppercase',
    fontWeight: '500',
  }
});

Building Sync button (very similar to above)

Create components/SyncButton.js file:

import { FontAwesome5 } from '@expo/vector-icons'; 
import { TouchableOpacity, StyleSheet, Text, View } from 'react-native';

export default function SyncButton() {
  return (
    <TouchableOpacity style={styles.container}>
      <FontAwesome5 name="sync" size={14} color="black" style={styles.icon} />
      <Text style={styles.text}>Sync</Text>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
  },
  icon: {
    marginEnd: 6
  },
  text: {
    textTransform: 'uppercase',
    fontWeight: '500',
  }
});

Building List item component

Create components/ListItem.js file:

import { TouchableOpacity, StyleSheet, Text, View } from 'react-native';

export default function ListItem({ title, subtitle, link, action }) {
  return (
    <TouchableOpacity>
      <View style={styles.container}>
        
        <View style={styles.textContainer}>
          <Text style={styles.title}>
            {title}
          </Text>
          <Text style={styles.subtitle}>
            {subtitle}
          </Text>
        </View>

        <View style={styles.actionContainer}>
          {action}
        </View>
      </View>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: '#CBCBCB',
    marginHorizontal: 8,
    marginVertical: 4,
    padding: 8,
  },
  textContainer: {
    alignItems: 'flex-start',
  }, 
  actionContainer: {
    alignItems: 'flex-end',
  },
  title: {
    fontSize: 20,
    marginVertical: 4,
  },
  subtitle: {
    fontSize: 14,
    color: "#727272"
  },
});

Building List component

Create components/List.js file:

import { TouchableOpacity, StyleSheet, Text, View } from 'react-native';
import DownloadButton from './DownloadButton';
import ListItem from './ListItem';
import SyncButton from './SyncButton';

export default function List({ items }) {
  return (
    <View style={styles.container}>
      <ListItem
        title="My program"
        subtitle="9 subjects" 
        action={<SyncButton />}
      />
      <ListItem
        title="My program 2" 
        subtitle="8 subjects" 
        action={<DownloadButton />}
      />
      <ListItem
        title="My program"
        subtitle="9 subjects"
      />
    </View>
  )   
}

const styles = StyleSheet.create({
  container: {
    flex: 100,
    width: '100%',
  },
});