Seeking assistance in resolving the issue of overlapping views within my react native app, specifically requiring spacing between them.
Upon clicking the plus sign twice in the top right corner, the two Views overlap without any space between them (referred to as HoldWorkout Components).
Image illustrating the overlap
The code snippet from my App.js is as follows:
let PRs = PRArray.map((val, key) => {
return (
<HoldWorkout
key={key}
keyval={key}
val={val}
exName={setName}
setsHold={setSets}
/>
);
});
PRs are contained within a Scroll View with the following structure:
<View style={styles.container}>
<View style={styles.whiteColor}>
<TouchableOpacity
activeOpacity={0.5}
onPress={addPR.bind(this)}
style={styles.TouchableOpacity}
>
<Icon name="ios-add" color="purple" size={45} />
</TouchableOpacity>
<View style={styles.header}>
<Text style={styles.headerTitle}>Personal Records</Text>
</View>
</View>
<ScrollView style={styles.scrollViewStyle}>
<View style={styles.color}>{PRs}</View>
</ScrollView>
</View>
The styles defined in App.js include:
const styles = StyleSheet.create({
whiteColor: {
backgroundColor: "white",
borderBottomColor: "#F0EFF5",
borderBottomWidth: 2,
height: 80
},
container: {
flex: 1,
borderBottomColor: "#F0EFF5",
borderBottomWidth: 2
},
color: {
marginTop: 20,
backgroundColor: "#F0EFF5"
},
});
In the HoldWorkout.js file, the return section comprises of:
<View key={props.keyval} style={styles.boxWorkouts}>
<TextInput
style={styles.input2}
placeholder="Excercise Name"
placeholderTextColor="#a9a9a9"
onChangeText={props.exName}
/>
<ExSets weight={setWeights} rep={setRep} date={setDates} />
{sets}
<View style={styles.addSet}>
<Button title="Add Set" color="purple" onPress={addSets}></Button>
</View>
</View>
The specific styling for the View is assigned under style.boxWorkouts in HoldWorkout.js and appears as:
const styles = StyleSheet.create({
boxWorkouts: {
borderColor: "#BFBFBF",
borderWidth: 1,
backgroundColor: "white",
height: 90
}
});
Tried incorporating marginBottom: 100 to styles.boxWorkouts, however, this fixed amount doesn't accommodate for changes in component height upon pressing the "Add Set" button, resulting in overlap.
Require guidance on how to address spacing issues persisting due to the vertical expansion of components when adding new rows upon pressing "Add Set." Struggling to find a solution that adjusts the placement of components accordingly to avoid overlap when multiple "Add Set" actions are triggered on preceding HoldWorkouts Components.