Fitness App
react Native
Timeline:
4 weeks Duration
Role:
Front-End Developer
Tools:
React Native
Overview:
I developed a Fitness App using React Native, incorporating AJAX to connect seamlessly with a PHP API. The app notifies users of workout times and provides daily exercise insights.
Currently a work in progress, this project showcases my proficiency in mobile app development and API integration, enhancing user experience through personalized fitness notifications and data retrieval.
01/10
The Process:
In the current iteration of my App.js file, I've established a React Navigation framework for a fitness application. The navigation stack encompasses three main screens: 'Home,' 'Details'—which is designed to exhibit workout details with an initial fitness ID parameter—and 'Workout,' a screen enabling users to select their preferred workout.
As of now, the implementation includes these three screens, but it's a work in progress, and further development is underway.
02/10
Components:
In the WorkoutScreen component, I've implemented a dynamic list using FlatList to display fitness items. Each item includes an avatar image, fitness name, subtitle, and a heart icon that can be toggled on press. The heart icon's color changes based on its toggle state. The component fetches fitness data, renders each item using the renderItem function, and includes a "Return Home" button to navigate back to the 'Home' screen. The code utilizes state (isAddedToList) to track the heart icon's status for each fitness item.
const WorkoutScreen = ({ navigation }) => {
const [isAddedToList, setIsAddedToList] = useState({});
const toggleHeart = (fitnessId) => {
setIsAddedToList((prevState) => ({
...prevState,
[fitnessId]: !prevState[fitnessId] || false,
}));
};
const fitnessData = getAllFitness();
// rendering each item in the "Flatlist", so it can display as an each item.
const renderItem = ({ item }) => (
<ListItem
onPress={() => {
console.log('Selected fitnessId:', item.id);
navigation.navigate('Details', { fitnessId: item.id });
}
}
bottomDivider
>
<Avatar
title={item.name[0]}
source={{ uri: item.keyImage }}
size={50}
rounded
/>
<ListItem.Content>
<ListItem.Title>{item.name}</ListItem.Title>
<ListItem.Subtitle>{item.subtitle}</ListItem.Subtitle>
</ListItem.Content>
<TouchableOpacity
onPress={() => toggleHeart(item.id)}
style={styles.heartContainer}
>
<FontAwesomeIcon
icon={solidHeart}
color={isAddedToList[item.id] ? 'red' : 'gray'}
/>
</TouchableOpacity>
<ListItem.Chevron />
</ListItem>
);The DetailsScreen React Native component provides a comprehensive display of fitness details, fetching data based on the provided fitnessId and utilizing an engaging image carousel. Responsive styling and conditional rendering gracefully handle scenarios where fitness data is unavailable or falls within a specific range. Users are presented with an aesthetically pleasing layout, featuring fitness name, short description, amenities, and an about section within a scrollable view.
The component incorporates interactive elements, such as a Floating Action Button triggering an overlay with an apology message for an unavailable booking feature. Additionally, I added a convenient button for users to seamlessly navigate back to the 'Workout' screen.
return (
<View style={styles.container}>
<ScrollView>
{/* <Image
style={styles.fitnessImage}
source={{ uri: currFitness.keyImage }}
/> */}
<Carousel
style={styles.carousel}
data={currFitness.otherImage}
renderItem={renderItem}
initialIndex={7}
itemWidth={windowWidth * 0.8}
inActiveScale={0.6}
separatorWidth={15}
containerWidth={windowWidth}
inActiveOpacity={0.3}
ref={carouselRef}
/>
<Text h3>{currFitness.name}</Text>
<Text>{currFitness.shortDesc}</Text>
<Divider inset={true} insetType='middle' color={'#217F91'} />
<Text h3>Benefits</Text>
{amenItems}
<Divider inset={true} insetType='middle' color={'#217F91'} />
<Text h3>About</Text>
<Text style={{ marginBottom: 50 }}>{currFitness.longDesc}</Text>
</ScrollView>
<FAB
onPress={() => setVisibleAlert(true)}
placement="right"
icon={{
type: 'ionicon',
name: 'barbell-outline',
color: "#FFFFFF",
}}
/>03/10
Final Takeaways:
Working with React Native has been an excellent experience, and I'm thrilled to see how it has boosted my confidence in coding.
I've noticed a significant improvement in my skills, and I'm excited about the continuous growth I'm experiencing.
This journey has made coding more enjoyable and accessible, allowing me to understand complex concepts in a simpler way. I am increasingly confident in my ability to enhance my coding skills and look forward to reaching new heights in my development journey .
04/10
Final Design:
