Building Native Ui

To create a native UI for a fitness tracking app using Expo, we'll focus on key features such as workout tracking, progress visualization, and user profile management. The design will follow Material Design guidelines for a clean and intuitive interface.

1. **Workout Tracking Screen**: Implement a screen with a list of recent workouts. Each workout item should display the type, duration, and calories burned. Use the `FlatList` component for efficient rendering.

```javascript
import { FlatList, Text, View, StyleSheet } from 'react-native';

const WorkoutList = ({ workouts }) => (
  <FlatList
    data={workouts}
    keyExtractor={(item) => item.id}
    renderItem={({ item }) => (
      <View style={styles.workoutItem}>
        <Text style={styles.workoutType}>{item.type}</Text>
        <Text style={styles.workoutDuration}>{item.duration} mins</Text>
        <Text style={styles.workoutCalories}>{item.calories} kcal</Text>
      </View>
    )}
  />
);

const styles = StyleSheet.create({
  workoutItem: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  workoutType: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  workoutDuration: {
    fontSize: 16,
    color: '#666',
  },
  workoutCalories: {
    fontSize: 16,
    color: '#666',
  },
});
```

2. **Progress Visualization Screen**: Use a chart library like `react-native-chart-kit` to display workout progress over time. This screen should include a line chart showing the user's progress in terms of workouts completed and calories burned.

```javascript
import { LineChart } from 'react-native-chart-kit';

const ProgressChart = ({ progressData }) => (
  <LineChart
    data={progressData}
    width={Dimensions.get('window').width - 20}
    height={220}
    yAxisLabel=""
    yAxisSuffix=""
    yAxisInterval={1}
    chartConfig={{
      backgroundColor: '#ffffff',
      backgroundGradientFrom: '#ffffff',
      backgroundGradientTo: '#ffffff',
      decimalPlaces: 0,
      color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
      labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
      style: {
        borderRadius: 16,
      },
    }}
    bezier
    style={{
      marginVertical: 8,
      borderRadius: 16,
    }}
  />
);
```

3. **User Profile Screen**: Implement a user profile screen that displays the user's personal information, profile picture, and workout statistics. Use the `Image` component for the profile picture and `Text` components for the statistics.

```javascript
import { Image, Text, View, StyleSheet } from 'react-native';

const UserProfile = ({ user }) => (
  <View style={styles.profileContainer}>
    <Image source={{ uri: user.profilePicture }} style={styles.profilePicture} />
    <Text style={styles.userName}>{user.name}</Text>
    <Text style={styles.userEmail}>{user.email}</Text>
    <Text style={styles.workoutStats}>Workouts: {user.workoutsCompleted}</Text>
    <Text style={styles.workoutStats}>Calories Burned: {user.caloriesBurned}</Text>
  </View>
);

const styles = StyleSheet.create({
  profileContainer: {
    alignItems: 'center',
    padding: 20,
  },
  profilePicture: {
    width: 100,
    height: 100,
    borderRadius: 50,
  },
  userName: {
    fontSize: 20,
    fontWeight: 'bold',
    marginTop: 10,
  },
  userEmail: {
    fontSize: 16,
    color: '#666',
  },
  workoutStats: {
    fontSize: 16,
    marginTop: 10,
  },
});
```

By following these steps, you can create a native UI for a fitness tracking app using Expo. The design is responsive and optimized for both iOS and Android platforms, ensuring a seamless user experience.