I have an app where there is one view with two CardViews
each directing me to different screens.
Now I added another CardView
and there are already three. The problem is that neither in iOS nor in Android the third of the complete CardView is shown, only a part is shown as I show in the screenshot.
I tried ScrollView as it is a list of few items and Scroll
it works but it doesn't stop and when I release my finger from the screen the screen returns to its initial position hiding the third of the CardView
. Also, the scroll covers the entire screen, including the header, which shouldn't be the case. I've also tried using FlatList, but getting errors.
I have played around with the styles View
, but I don't understand the problem that is offered for the Scroll
not working inside the View
. I have placed flex : 1
theCardView
I show the code of the file, with the third of the CardView
added.
How can I fix this and make the screen scroll so I can access everything CardView
on the screen?
import React, { Component } from "react"
import _ from "lodash"
import ToolBar from "../../../component/ToolBar"
import styleApp from "../../../../res/style/style"
import AppText from "../../../component/Text"
import { strings } from "../../../config/i18n/i18n"
import CardView from "../../../component/CardView"
import { sizeWidth } from "../../../util/Size"
import NavigationActions from "../../../router/NavigationActions"
import {
AsyncStorage,
Image,
StyleSheet,
View,
FlatList,
ScrollView,
List,
SectionList
} from "react-native"
export default class PaintScreen extends Component {
state = {
isLoading: true,
studiedAlphabet: [],
studiedNumber: []
};
componentDidMount() {
AsyncStorage.getAllKeys((error, keys) => {
AsyncStorage.multiGet(keys, (error, stores) => {
const alphabets = []
const numbers = []
stores.map((result, i, store) => {
// get at each store's key/value so you can work with it
if (store[i] != null) {
//data provide is [key: value] - value [[]]
if (store[i][0] == "learned_alphabets") {
alphabets.push(JSON.parse(store[i][1]));
}
if (store[i][0] == "learned_numbers") {
numbers.push(JSON.parse(store[i][1]));
}
}
if (i == keys.length - 1) {
this.setState({
isLoading: false,
studiedAlphabet: alphabets[0],
studiedNumber: numbers[0]
});
}
});
});
});
}
render() {
if (!this.state.isLoading) {
return (
<View style={styles.containerMio}>
<Image
style={styles.backgroundImage}
source={require("../../../../res/images_paint/background/backgroundA_2x.png")}
/>
<Image
style={styles.newPaintImage}
source={require("../../../../res/images_paint/mainScreen/new_paint_ball_2x.png")}
/>
{this.renderToolbar()}
<View
style={{
width: "100%",
alignItems: "center",
position: "absolute",
top: sizeWidth(20)
}}
>
{this.renderAnimal()}
{this.renderObject()}
{this.renderAnimal()}
</View>
</View>
)
} else {
return null
}
}
renderToolbar = () => {
return (
<ToolBar
center={
<AppText style={styleApp.ToolBarText}>
{strings("paint.title")}
</AppText>
}
/>
);
};
renderAnimal = () => {
return (
<CardView
style={{flex: 1}}
image={require("../../../../res/images_paint/newPaintingScreen/animals_2x.png")}
styleImg={styles.styleAnimal}
title={strings("paint.animals")}
backgroundColor={"#fff989"}
colorButton={"#FE6230"}
onPress={() =>
NavigationActions.navigate("PaintAnimals", {
studiedNumber: this.state.studiedNumber,
studiedAlphabet: this.state.studiedAlphabet
})
}
/>
);
}
renderObject = () => {
const { studiedAlphabet } = this.state;
return (
<CardView
style={{flex: 1}}
image={require("../../../../res/images_paint/newPaintingScreen/object_2x.png")}
styleImg={styles.styleObject}
title={strings("paint.objects")}
backgroundColor={"#B29FFF"}
colorButton={"#FE6230"}
onPress={() =>
NavigationActions.navigate("PaintObjects", {
studiedNumber: this.state.studiedNumber,
studiedAlphabet: this.state.studiedAlphabet
})
}
/>
)
}
renderAnimal = () => {
return (
<CardView
style={{flex: 1}}
image={require("../../../../res/images_paint/newPaintingScreen/animals_2x.png")}
styleImg={styles.styleAnimal}
title={strings("paint.animals")}
backgroundColor={"#fff989"}
colorButton={"#FE6230"}
onPress={() =>
NavigationActions.navigate("PaintAnimals", {
studiedNumber: this.state.studiedNumber,
studiedAlphabet: this.state.studiedAlphabet
})
}
/>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column'
},
containerMio: {
flex: 1,
flexDirection: "column"
},
backgroundImage: {
resizeMode: "stretch",
position: "absolute",
width: "100%",
height: "100%"
},
newPaintImage: {
position: "absolute",
width: "100%",
height: "100%"
},
styleAnimal: {
flex: 1,
resizeMode: "center",
width: sizeWidth(70),
height: sizeWidth(50),
marginLeft: sizeWidth(-5),
},
styleObject: {
flex: 1,
resizeMode: "center",
width: sizeWidth(70),
height: sizeWidth(50),
marginLeft: sizeWidth(-5),
}
})
The detail you mention where the screen returns to the starting position on finger release is because maybe you used {flex: 1} in the contentContainerStyle for the ScrollView component.
Here's a quick example that might help you.
style={{flex: 1}} indicates that our scrollView component is going to take the full available size of the screen, in this example, it would be all the remaining space below the Toolbar.
contentContainerStyle={styles.scrollContainer} is for assigning the style to the container inside our ScrollView. In this example we are indicating that the scrollView container will be blue and will center all its elements horizontally.
The View that you have as a container for your CardViews with position "absolute" is not necessary, the {flex: 1} in the CardView is not necessary either.
I hope this helps you!