Related
I have the following component created for showing an image card on screen. Inside this card there is an image that I am trying to make touchable, however, its does seem to work and when I try clicking on it, nothing happens.
But if I make the Touchable opacity as a parent component below, then the complete image card component becomes touchable and it works on screen. However, I do not want that and only want to target sub elements in this below card component. Not sure how to fix this!
import React, { useState } from "react";
import {
View,
Image,
Text,
StyleSheet,
TouchableOpacity,
} from "react-native";
const ImageCardView = ({
title,
category,
Price,
description,
imageUrl,
rating,
}) => {
return (
<View style={{ backgroundColor: "#d3c4de" }}>
<View style={styles.cardContainer}>
<RedCircle />
<TouchableOpacity onPress={() => navigation.navigate("showCase")}>
<Image
source={{
uri: imageUrl,
}}
style={styles.image}
/>
</TouchableOpacity>
<SeparatorVertical />
<View style={styles.textContainer}>
<Text style={styles.title}>{title}</Text>
<Text style={styles.category}>{category}</Text>
<Text style={styles.price}>${Price}</Text>
<SeparatorHorizontal />
<Text numberOfLines={2} style={styles.description}>
{description}
</Text>
<View style={styles.rightBottom}>
<TouchableOpacity
style={styles.button}
onPress={() => setIsPressed(!isPressed)}
>
<Text>Add To Cart</Text>
</TouchableOpacity>
{/* {isPressed && (
<View
style={{
backgroundColor: "white",
paddingLeft: 16,
paddingRight: 16,
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
paddingBottom: 12,
}}
>
<TouchableOpacity
disabled={!items.length}
onPress={removeItemFromBasket}
>
<Icon
name="minus-circle"
size={40}
color={items.length > 0 ? "#00CCBB" : "gray"}
/>
</TouchableOpacity>
<Text>{items.length}</Text>
<TouchableOpacity onPress={addItemToBasket}>
<Icon name="plus-circle" size={40} color="#00CCBB" />
</TouchableOpacity>
</View>
</View>
)} */}
<View style={styles.ratingContainer}>
{[...Array(5)].map((star, i) => {
const ratingValue = i + 1;
return (
<Text
key={i}
style={[
styles.star,
ratingValue <= rating && styles.filledStar,
]}
>
★
</Text>
);
})}
</View>
</View>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
cardContainer: {
flexDirection: "row",
alignItems: "center",
backgroundColor: "white",
borderRadius: 5,
overflow: "hidden",
marginVertical: 10,
marginLeft: 3,
width: "98%",
height: 300,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
image: {
width: 150,
height: 228,
resizeMode: "cover",
},
textContainer: {
paddingLeft: 10,
},
title: {
fontWeight: "bold",
fontSize: 20,
marginBottom: 10,
},
category: {
color: "#d6c3b9",
},
price: {
fontSize: 20,
fontWeight: "bold",
color: "#05c3fa",
},
description: {
flexDirection: "row",
flexWrap: "wrap",
fontSize: 15,
color: "#666",
marginBottom: 20,
},
ratingContainer: {
flexDirection: "row",
alignItems: "center",
},
button: {
alignItems: "center",
backgroundColor: "#5cb85c",
borderRadius: 5,
padding: 10,
},
rightBottom: {
flexDirection: "row",
},
star: {
fontSize: 18,
color: "#888",
},
filledStar: {
color: "#ffd700",
},
});
export default ImageCardView;
Without seeing the all the code, my suggestion is to make sure your TouchableOpacity is being imported from "react-native" and not from "react-native-gesture-handler" or some other npm package like "react-native-web".
Check the below code and logs, it's working fine:
import React, { useState } from "react";
import {
View,
Image,
Text,
StyleSheet,
TouchableOpacity,
} from "react-native";
const App = ({
title,
category,
Price,
description,
imageUrl,
rating,
}) => {
const [isPressed, setIsPressed] = useState(false)
return (
<View style={{ backgroundColor: "#d3c4de" }}>
<View style={styles.cardContainer}>
<TouchableOpacity onPress={() => {
console.log("on pressed!!!!")
navigation.navigate("showCase")
}
}>
<Image
source={{
uri: imageUrl,
}}
style={styles.image}
/>
</TouchableOpacity>
<View style={styles.textContainer}>
<Text style={styles.title}>{title}</Text>
<Text style={styles.category}>{category}</Text>
<Text style={styles.price}>${Price}</Text>
<Text numberOfLines={2} style={styles.description}>
{description}
</Text>
<View style={styles.rightBottom}>
<TouchableOpacity
style={styles.button}
onPress={() => {
console.log("Add to card pressed!!!!")
setIsPressed(!isPressed)
}}>
<Text>Add To Cart</Text>
</TouchableOpacity>
{isPressed && (
<View
style={{
backgroundColor: "white",
paddingLeft: 16,
paddingRight: 16,
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
paddingBottom: 12,
}}
>
<TouchableOpacity
disabled={!items.length}
onPress={removeItemFromBasket}
>
<Icon
name="minus-circle"
size={40}
color={items.length > 0 ? "#00CCBB" : "gray"}
/>
</TouchableOpacity>
<Text>{items.length}</Text>
<TouchableOpacity onPress={addItemToBasket}>
<Icon name="plus-circle" size={40} color="#00CCBB" />
</TouchableOpacity>
</View>
</View>
)}
<View style={styles.ratingContainer}>
{[...Array(5)].map((star, i) => {
const ratingValue = i + 1;
return (
<Text
key={i}
style={[
styles.star,
ratingValue <= rating && styles.filledStar,
]}
>
★
</Text>
);
})}
</View>
</View>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
cardContainer: {
flexDirection: "row",
alignItems: "center",
backgroundColor: "white",
borderRadius: 5,
overflow: "hidden",
marginVertical: 10,
marginLeft: 3,
width: "98%",
height: 300,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
image: {
width: 150,
height: 228,
resizeMode: "cover",
},
textContainer: {
paddingLeft: 10,
},
title: {
fontWeight: "bold",
fontSize: 20,
marginBottom: 10,
},
category: {
color: "#d6c3b9",
},
price: {
fontSize: 20,
fontWeight: "bold",
color: "#05c3fa",
},
description: {
flexDirection: "row",
flexWrap: "wrap",
fontSize: 15,
color: "#666",
marginBottom: 20,
},
ratingContainer: {
flexDirection: "row",
alignItems: "center",
},
button: {
alignItems: "center",
backgroundColor: "#5cb85c",
borderRadius: 5,
padding: 10,
},
rightBottom: {
flexDirection: "row",
},
star: {
fontSize: 18,
color: "#888",
},
filledStar: {
color: "#ffd700",
},
});
export default App;
For navigation, you need to get it referenced from parent props.
Thanks everyone. I got it fixed, in my case somehow the component was blocking the Touchable opacity, so included that inside my Touchable capacity to include the with the image and it started working
I need to show different tags depending on which user is logged.
Franchisee will see: 'Central' 'Empleados' 'Clientes'.
Employee: 'Store' 'Clientes'
User: none. just the generic info.
Here is my code:
(this is the array that states the scrollview)
const Chats = (props) => {
const TAGS = [
"store",
"Clientes",
"Central",
"Empleados",
]
and this is the component:
import React, { useState } from "react";
import { StyleSheet, FlatList, TouchableOpacity, ScrollView, Image } from 'react-native';
import { SimpleHeader, View, Text } from '../../elements/index';
const Chatstores = ({ chatsstore, navigation }) => (
<View>
<TouchableOpacity onPress={() => navigation.navigate("ChatPersonal")}>
<View style={styles.list} >
<Image source={chatsstore.img} style={styles.iconimg} />
<View style={styles.dataText}>
<View style={styles.nametime}>
<Text style={styles.text}>{chatsstore.name} </Text>
<Text >{chatsstore.time}</Text>
</View>
<Text style={styles.msg}>{chatsstore.msg} </Text>
</View>
</View>
</TouchableOpacity>
</View>
);
const ChatClients = ({ chatsClients, navigation }) => (
<View>
<TouchableOpacity onPress={() => navigation.navigate("ChatPersonal")}>
<View style={styles.list}>
<Image source={chatsClients.img} style={styles.iconimg} />
<View style={styles.dataText}>
<View style={styles.nametime}>
<Text style={styles.text}>{chatsClients.name} </Text>
<Text >{chatsClients.time}</Text>
</View>
<Text style={styles.msg}>{chatsClients.msg} </Text>
</View>
</View>
</TouchableOpacity>
</View>
);
const Chats = (props) => {
const { TAGS, chatsstore, chatsClients, navigation } = props;
const [selectedTag, setSelectedTag] = useState(null)
const [routeDistance, setRouteDistance] = useState(0);
return (
<View style={styles.wrapper}>
<SimpleHeader
style={styles.head}
titleLeft="Chats"
onSearchPress
onAddPress
/>
{/**shows horizontal, scrollview of Tags. */}
<View style={styles.scrollview}>
<ScrollView horizontal showsHorizontalScrollIndicator={false} >
<View style={styles.viewcontainer}>
{TAGS.map((tag) => (
<TouchableOpacity
onPress={() =>
setSelectedTag(tag === selectedTag ? null : tag)
}>
<View
style={[
styles.tag,
selectedTag === tag ? styles.selectedTag : {}
]}>
<Text style={styles.textTag}>{tag}</Text>
</View>
</TouchableOpacity>
))}
</View>
</ScrollView>
</View>
{/**If tag is store, shows its data, otherwise the rest */}
{selectedTag === "store" ? (
<View style={styles.chat}>
<FlatList
data={chatsstore}
renderItem={({ item, index }) => (
<Chatstores
chatsstore={item}
index={index}
navigation={navigation}
/>
)}
keyExtractor={(chatsstore) => chatsstore.name}
ListEmptyComponent={() => (
<Text center bold>No hay ningún mensaje de clientes</Text>
)}
/>
</View>
) :
<View style={styles.chat}>
<FlatList
data={chatsClients}
renderItem={({ item, index }) => (
<ChatClients
chatsClients={item}
index={index}
navigation={navigation}
/>
)}
keyExtractor={(chatsClients) => chatsClients.name}
ListEmptyComponent={() => (
<Text center bold>No hay ningún mensaje de clientes</Text>
)}
/>
</View>
}
</View>
);
};
const styles = StyleSheet.create({
wrapper: {
backgroundColor: "#ffffff",
display: "flex",
flex: 1,
},
head: {
height: 80,
display: "flex",
alignItems: "center",
zIndex: 1,
top: 5,
},
scrollview: {
display: "flex",
alignItems: "center",
justifyContent: "space-evenly",
},
viewcontainer: {
display: "flex",
flexDirection: "row",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 1,
right: 10,
},
list: {
bottom: 15,
flexWrap: "wrap",
alignContent: "space-between",
position: "relative",
marginVertical: 2,
backgroundColor: "#fff",
shadowColor: "#000",
elevation: 2,
flexDirection: "row",
}, dataText: {
alignSelf: "center",
flexDirection: "column",
width: "80%",
},
nametime: {
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
iconimg: {
display: "flex",
height: 43,
width: 43,
alignSelf: "center",
flexDirection: "column",
},
chat: {
margin: 10,
},
text: {
margin: 10,
fontFamily: "Montserrat_700Bold",
paddingHorizontal: 10,
},
msg: {
margin: 10,
fontFamily: "Montserrat_400Regular",
fontSize: 15,
paddingHorizontal: 10,
bottom: 10
},
map: {
display: "flex",
height: "100%",
},
tag: {
display: "flex",
alignSelf: "center",
marginBottom: 1,
width: 225,
padding: 10,
},
selectedTag: {
borderBottomColor: '#F5BF0D',
borderBottomWidth: 2,
},
textTag: {
fontFamily: "Montserrat_700Bold",
alignItems: "center",
textAlign: "center",
fontSize: 15,
},
buttonContainer: {
marginHorizontal: 20
},
button: {
backgroundColor: "#000000",
top: Platform.OS === 'ios' ? 12 : 20,
height: 60,
marginBottom: 40,
marginRight: 10,
},
});
export default Chats;
So I guess that in my "show horizontal tags" I should write some kind of if, that gets the role from the user token?
Or would it be better to write different routes into the navigation and handle it in 3 different components?
I am developing iOS apps in React Native Expo.
To display the image icon and placeholder in the Input column, I set it to Image icon and TextInput in the View.
When using KeyboardAvoidingView, the keyboard scrolls to the bottom of TextInput as shown in the attached image (1), but does anyone know if it is possible to scroll to the bottom of the description of the input field as shown in image (2)?
Image(1)
Image(2)
The article is based on the following.
https://reactnative.dev/docs/keyboardavoidingview
Parent function code.
<KeyboardAvoidingView behavior="padding" style={styles.containerStyle}>
<SafeAreaView style={styles.containerStyle}>
<ScrollView style={styles.containerStyle}>
<View style={styles.headContainerStyle}></View>
<View style={styles.mainContainerStyle}></View>
<View style={styles.headMessageContainerStyle}>
<Text style={styles.headMessageTextStyle}>Sign Up</Text>
</View>
{/* Email */}
<MailForm
inputAccessoryViewID={inputAccessoryViewID}
isCorrectMail={isCorrectMail}
setIsCorrectMail={setIsCorrectMail}
/>
{/* Password */}
<PasswordForm
inputAccessoryViewID={inputAccessoryViewID}
isCorrectPassewordSymbol={isCorrectPassewordSymbol}
setIsCorrectPassewordSymbol={setIsCorrectPassewordSymbol}
isCorrectPassewordStringCount={isCorrectPassewordStringCount}
setIsCorrectPassewordStringCount={setIsCorrectPassewordStringCount}
/>
{/* UserId */}
<UserIdForm
inputAccessoryViewID={inputAccessoryViewID}
isCorrectUserIdSymbol={isCorrectUserIdSymbol}
setIsCorrectUserIdSymbol={setIsCorrectUserIdSymbol}
isCorrectUserIdStringCount={isCorrectUserIdStringCount}
setIsCorrectUserIdStringCount={setIsCorrectUserIdStringCount}
isAvailableUserId={isAvailableUserId}
setIsAvailableUserId={setIsAvailableUserId}
/>
{/* Screen Bottom */}
<View style={styles.bottomStyle}>
{isCorrectMail && isCorrectPassewordSymbol && isCorrectPassewordStringCount && isCorrectUserIdSymbol && isCorrectUserIdStringCount && isAvailableUserId ?
(
<TouchableOpacity
style={styles.buttonContainerStyle}>
<Text style={styles.buttonTextStyle}>Sign Up</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
style={[styles.buttonContainerStyle, styles.buttonContainerInvalidStyle]}
onPress={() => navigation.navigate('SignUp')}>
<Text style={styles.buttonTextStyle}>Sign Up</Text>
</TouchableOpacity>
)}
<View style={styles.toLoginStyle}>
<Text style={styles.toLoginTextStyle}>Do you have an account?</Text>
<Text style={[styles.toLoginTextStyle, styles.toLoginTextLinkStyle]}>Login here</Text>
</View>
</View>
</ScrollView>
</SafeAreaView>
</KeyboardAvoidingView>
The code for the <UserId/> component, which we want to support scrolling for this time.
<View>
<View style={styles.searchBoxStyle}>
<View style={styles.searchWrapperStyle}>
<Pressable style={styles.searchContainerStyle} onPress={() => textInputUserId.focus()}>
<Text style={styles.searchTitleStyle}>UserId</Text>
{/* <KeyboardAvoidingView behavior="padding"> */}
<View style={defaultUserIdBorderColor ? isCorrectUserIdSymbol && isCorrectUserIdStringCount ? styles.searchViewStyle : [styles.searchViewStyle, styles.inputIncorrectBorderColorStyle]: styles.searchViewStyle}>
<Image source={require("../../../assets/profile.png")} style={styles.searchIconStyle}/>
{/* <KeyboardAvoidingView behavior="padding"> */}
<TextInput
onChangeText={onChangeUserIdText}
style={styles.searchContentStyle}
value={userIdText}
placeholder="test1234"
inputAccessoryViewID={inputAccessoryViewID}
ref={(input) => textInputUserId = input}
autoCapitalize="none"
maxLength={100}
textContentType="username"
onFocus={() => {
…
}}
onEndEditing={() => {
…
}}
/>
</View>
</Pressable>
</View>
</View>
{/* UserId Description */}
{displayUserIdDescription ? !isCorrectUserIdSymbol || !isCorrectUserIdStringCount || !isAvailableUserId ? (
<View style={styles.descriptionBoxStyle}>
<View style={styles.descriptionWrapperStyle}>
<View style={styles.descriptionContainerStyle}>
{!defaultDisplayUserIcons ? isCorrectUserIdSymbol ? <Image source={require("../../../assets/correct.png")} style={styles.descriptionIconStyle}/>: <Image source={require("../../../assets/incorrect.png")} style={styles.descriptionIconStyle}/>: null}
<Text style={styles.descriptionTextStyle}>Half-width alphanumeric characters only.</Text>
</View>
<View style={styles.descriptionContainerStyle}>
{!defaultDisplayUserIcons ? isCorrectUserIdStringCount ? <Image source={require("../../../assets/correct.png")} style={styles.descriptionIconStyle}/>: <Image source={require("../../../assets/incorrect.png")} style={styles.descriptionIconStyle}/>: null}
<Text style={styles.descriptionTextStyle} >More than 4 words and less than 100 words.</Text>
</View>
<View style={styles.descriptionContainerStyle}>
{!defaultDisplayUserIcons ? isAvailableUserId ? <Image source={require("../../../assets/correct.png")} style={styles.descriptionIconStyle}/>: <Image source={require("../../../assets/incorrect.png")} style={styles.descriptionIconStyle}/>: null}
<Text style={styles.descriptionTextStyle} >Available.</Text>
</View>
</View>
</View>
) : null: null}
</View>
Style sheet code.
import { StyleSheet } from 'react-native';
export const styles = StyleSheet.create({
containerStyle: {
flex: 1,
backgroundColor: "#1B1C56",
},
headContainerStyle: {
width: "100%",
height: "10%",
height: 40,
backgroundColor: "#1B1C56",
},
headMessageContainerStyle: {
backgroundColor: "#feffff",
alignItems: 'center',
},
headMessageTextStyle: {
fontSize: 50,
fontFamily: "AlfaSlabOne_400Regular",
color: "#1B1C56",
marginBottom: 32,
},
mainContainerStyle: {
width: "100%",
height: "15%",
backgroundColor: "#feffff",
borderTopLeftRadius: 50,
alignItems: 'center',
},
searchBoxStyle: {
flex: 1,
backgroundColor: "#feffff",
},
searchWrapperStyle: {
flex: 1,
alignItems: "center",
paddingBottom: 10,
},
searchContainerStyle: {
},
searchTitleStyle: {
fontFamily: "ABeeZee_400Regular_Italic",
color: "#262626",
marginBottom: 5,
},
searchIconStyle: {
width: 24,
height: 24,
marginRight: 10,
marginLeft: 10,
},
searchViewStyle: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#F6F7FB',
borderWidth: 0.5,
height: 60,
borderRadius: 5,
width: 300,
borderColor: "#F6F7FB",
},
searchContentStyle: {
flex: 1
},
inputIncorrectBorderColorStyle:{
borderWidth: 2,
borderColor: "#ED195E",
},
completeBoxStyle: {
width: 60,
alignItems: "center",
padding: 10,
},
completeTextStyle: {
fontSize: 18,
fontWeight: "bold",
color: "hsl(210, 100%, 60%)"
},
passwordIconStyle: {
marginRight: 10
},
descriptionBoxStyle:{
display: "flex",
alignItems: "center",
backgroundColor: "#feffff",
paddingBottom: 10,
},
descriptionWrapperStyle: {
},
descriptionContainerStyle: {
flexDirection: "row",
width: 300,
},
descriptionTextStyle: {
color: "#262626",
fontSize: 12,
overflow: "visible"
},
descriptionIconStyle:{
marginRight: 10,
width: 12,
height: 12,
},
bottomStyle: {
display: "flex",
alignItems: "center",
height: "100%",
backgroundColor: "#feffff",
},
buttonContainerStyle: {
alignItems: "center",
justifyContent: "center",
backgroundColor: "#1B1C56",
width: 300,
height: 60,
borderRadius: 10,
fontSize: 18,
},
buttonContainerInvalidStyle:{
backgroundColor: "#C5C5C7",
},
buttonTextStyle: {
color: "#feffff",
fontFamily: "ABeeZee_400Regular_Italic",
},
toLoginStyle: {
marginTop: 10,
height: "5%",
flexDirection: "row"
},
toLoginTextStyle: {
fontFamily: "ABeeZee_400Regular_Italic",
},
toLoginTextLinkStyle: {
color: "#ED195E",
marginLeft: 10,
},
});
Swapped the positions of KeyboardAvoidingView, SafeAreaView and ScrollView. I have tried to set the keyboardVerticalOffset and the keyboardVerticalOffset, but each had its own problems, and the current code was the closest to the ideal.
I have a flatlist in my react native code. It does not scroll all the way down. I want to scroll it down till the end, but when I tried scrolling it down, it came back up again. Below is my entire code with style sheets:
FlatListItemSeparator = () => {
return (
<View
style={{
height: .9,
width: "100%",
backgroundColor: "#607D8B",
}}
/>
);
}
_renderItem = ({item, index}) => {
var destUrl = 'https://www.google.com/maps/dir/Current+Location/' + item.addr;
var geodist = require('geodist')
var dist = geodist({lat: item.cLat, lon:item.cLong}, {lat: item.LatL, lon: item.Long2}, 'mi')
var imagevar = item.image;
if (isNaN(dist)) {
dist = 0;
}
return(
<View style={{ backgroundColor: index %2 ===0? '#DDBC95':'#EBDCB2'}} >
<View style={{ flexDirection: 'row', alignItems:'center' }}>
<Image source={Icons[imagevar]} style = {styles.imageView}/>
<View style={{ flex: 1, alignItems: "center"}}>
<Text style={styles.Address1}>{item.addr} </Text>
<View style={styles.phoneImg}>
<TouchableOpacity
onPress={() => { this.handleClick(`tel:${item.phone}`)}}>
<Image source={require('../images/Phone.png')} style={styles.actionImage}/>
</TouchableOpacity>
<Text style={styles.Address1}>{item.phone}</Text>
</View>
<View style={styles.AddressRow}>
{
item.Online != ''? <TouchableOpacity onPress={() => Linking.openURL( item.Online )}>
<Image source={require('../images/www-icon.png')} style={styles.actionImage1}/>
</TouchableOpacity>: null
}
<TouchableOpacity onPress={() => Linking.openURL(item.Online)}>
<Text style={styles.underLineText}>Online</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => Linking.openURL(destUrl)}>
<Text style={styles.underLineText}>Directions</Text>
</TouchableOpacity>
<Text style={styles.AddressSpace} >Miles:{dist}</Text>
</View>
</View>
</View>
</View>
);
}
componentDidCatch
render()
{
var x = this.props.navigation.state.params.item.id ;
var newList = ServiceDetails.filter(obj => obj.fk === x)
return(
<View >
<View>
<Text style={styles.title}>{this.props.navigation.state.params.item.ser}</Text>
<Text style={styles.SerContent} >Services are available in the following locations:</Text>
</View>
<View>
<FlatList
data={newList.sort((a, b) => {
var geodist = require('geodist')
const aDist = geodist(
{ lat: a.cLat, lon: a.cLong },
{ lat: a.LatL, lon: a.Long2 },
"mi"
);
const bDist = geodist(
{ lat: b.cLat, lon: b.cLong },
{ lat: b.LatL, lon: b.Long2 },
"mi"
);
return aDist - bDist;
})}
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={this._renderItem}
keyExtractor={(item, index) => index}
/>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
MainContainer :{
// Setting up View inside content in Vertically center.
justifyContent: 'center',
flex:1,
margin: 10
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
container2:
{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 15
},
underLineText: {
fontSize: 17,
textDecorationLine: 'underline',
color: 'black',
alignSelf: 'center',
marginLeft: 20,
paddingTop:10
},
underLineTextOnline: {
fontSize: 17,
textDecorationLine: 'underline',
color: 'black',
alignSelf: 'center',
marginLeft: 20,
paddingTop:5
},
title:{
justifyContent: 'center',
paddingTop: 10,
alignItems: 'center',
alignSelf: 'center',
fontWeight: 'bold',
fontSize: 22,
color: 'black',
},
Address1:{
alignSelf: 'center',
marginRight: 20,
fontSize: 19,
fontWeight:'bold',
fontWeight: 'bold',
color: 'black'
},
SerContent:{
fontWeight: 'bold',
fontSize: 16,
paddingTop: 10,
alignSelf: 'center',
color: 'black',
paddingBottom: 10
},
Address1:{
alignSelf: 'center',
marginRight: 20,
fontSize: 15,
flexDirection:'column',
color: 'black',
marginLeft:10,
textAlignVertical:'center'
},
AddressRow:{
alignSelf: 'center',
marginRight: 20,
fontSize: 15,
flexDirection: 'row',
color: 'black'
},
phoneImg:{
flexDirection: 'row',
alignSelf: 'center',
textAlignVertical:'center'
},
AddressSpace:{
alignSelf: 'center',
marginLeft: 20,
fontSize: 15,
marginLeft: 20,
paddingTop:5,
color: 'black'
},
actionImage:{
flex:0,
height:30,
width:30,
backgroundColor:'transparent',
justifyContent:'center',
alignItems:'center',
marginTop:10,
alignSelf:'center',
flexDirection:'column',
textAlignVertical:'center'
},
sepBoxes:{
flex: 1,
flexDirection: 'column'
},
box: {
height: 55,
width:400,
},
box1: {
backgroundColor: 'white'
},
actionImage1:{
flex:0,
height:40,
width:40,
backgroundColor:'transparent',
justifyContent:'center',
alignItems:'center',
paddingLeft:5,
alignSelf:'center',
flexDirection:'column'
},
imageView:{
width:'30%',
height:100,
margin:7,
borderRadius: 7
},
textView: {
width:'50%',
textAlignVertical:'center',
padding:10,
color: '#000'
}
});
AppRegistry.registerComponent('ServiceListDetails', () => ServiceListDetails);
Above code has all the stylesheets and complete code.
Any help will be greatly appreciated.
I used the other question to fix it my problem but I don't understand where I mistake.
Hi,
I have a problem with react native scroll view, it scroll but when I release it comes back to the top, how can I fix it?
This is the render:
render() {
const { centerEverything, skeleton, container, textContainer, contentContainer, buttonContainer,
propHeight, propWidth, halfPropWidth, titleContainer, descContainer, title, artworkTitle,
desc, buttonStyle, artworkContainer, artwork } = styles;
let CheckIndex = i => {
if((i % 2) == 0) {
return styles.gray
}
};
let rows = this.state.rows.map((r, i) => {
return <View key={ i } style={{ flexDirection: 'row' }}>
<Input
propWidth={halfPropWidth}
placeholder="Ingrediente"
onChangeText={this.changeIngrediente.bind(this, 'quantita', i)}
value={this.state.date} />
<Input
propWidth={halfPropWidth}
placeholder="Quantita"
onChangeText={this.changeIngrediente.bind(this, 'ingrediente', i)}
value={this.state.time} />
</View>
});
return (
<TouchableWithoutFeedback onPress={()=> dismissKeyboard()}>
<View style={[centerEverything, container]}>
<View style={[centerEverything, textContainer]}>
<View style={titleContainer}>
<Text style={[title]}>Add Event</Text>
</View>
<View style={descContainer}>
<Text style={[desc]}>Submit your event and we will process it in a bit ⚡️</Text>
</View>
</View>
<ScrollView style={[contentContainer, propWidth]}>
<View style={[centerEverything, artworkContainer]}>
<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
<View style={[centerEverything, {height: 100, width: deviceWidth*0.8}]}>
{
(() => {
switch (this.state.artworkUrl) {
case null:
return (
<View>
<Text style={[artworkTitle]}>Upload event artwork</Text>
<Text style={[desc]}>Preferably 640x480</Text>
</View>
);
case '':
return <Spinner size="small"/>
default:
return(
<Image style={artwork} source={{uri: this.state.artworkUrl}} />
)
}
})()
}
</View>
</TouchableOpacity>
</View>
<Input
propWidth={propWidth}
placeholder="Event Title"
onChangeText={(title) => this.setState({ title })}
value={this.state.title} />
<View style={{ flexDirection: 'row' }}>
<Input
propWidth={halfPropWidth}
placeholder="Date"
onChangeText={(date) => this.setState({ date })}
value={this.state.date} />
<Input
propWidth={halfPropWidth}
placeholder="Time"
onChangeText={(time) => this.setState({ time })}
value={this.state.time} />
</View>
<View>
{ rows }
<TouchableHighlight
onPress={ this._addRow.bind(this) }
style={styles.button}>
<Text>Aggiungi ingrediente</Text>
</TouchableHighlight>
</View>
<View style={{ flexDirection: 'row' }}>
<Input
propWidth={halfPropWidth}
placeholder="Organizer"
onChangeText={(organizer) => this.setState({ organizer })}
value={this.state.organizer} />
<Input
propWidth={halfPropWidth}
placeholder="Cost"
onChangeText={(cost) => this.setState({ cost })}
value={this.state.cost} />
</View>
<Input
propWidth={[propHeight, propWidth]}
placeholder="Address"
multiline={true}
onChangeText={(address) => this.setState({ address })}
value={this.state.address} />
<Input
propWidth={[propHeight, propWidth]}
placeholder="Note"
multiline={true}
onChangeText={(note) => this.setState({ note })}
value={this.state.note} />
</ScrollView>
<View style={[buttonContainer]}>
<ButtonComponent
style={buttonStyle}
type='primary'
shape='rectangle'
buttonState={this.state.buttonState}
states={this.buttonStates}
/>
</View>
</View>
</TouchableWithoutFeedback>
)
}
this is the style:
const styles = {
centerEverything: {
justifyContent: 'center',
alignItems: 'center'
},
skeleton: {
borderWidth: 1,
borderColor: 'red'
},
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#F5F6F7',
marginTop: 44
},
textContainer: {
flex: 2,
marginTop: 20
},
propHeight: {
height: 80
},
propWidth: {
width: deviceWidth*0.8
},
halfPropWidth: {
width: deviceWidth*0.4
},
contentContainer: {
flex: 1,
width: deviceWidth,
height: deviceHeight-200
},
buttonContainer: {
width: deviceWidth,
alignItems: 'center',
backgroundColor: 'transparent',
position: 'absolute',
bottom: 20
},
button: {
alignItems: 'center',
justifyContent: 'center',
height:55,
backgroundColor: '#ededed',
marginBottom:10
},
titleContainer: {
width: deviceWidth*0.8,
},
descContainer: {
width: deviceWidth*0.6,
},
title: {
fontSize: 22,
fontFamily: 'Helvetica Neue',
fontWeight: '400',
textAlign: 'center'
},
artworkTitle: {
fontSize: 18
},
desc: {
color: 'grey',
fontSize: 15,
fontFamily: 'Helvetica Neue',
fontWeight: '300',
textAlign: 'center'
},
buttonStyle: {
height: 40,
width: deviceWidth*0.7,
borderRadius: 20,
margin: 3
},
artworkContainer: {
borderColor: '#9B9B9B',
borderRadius: 3,
borderWidth: 1 / PixelRatio.get(),
marginBottom: 5,
width: deviceWidth*0.8,
height: 100
},
artwork: {
width: deviceWidth*0.8,
height: 100
},
listViewContainer: {
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
flexWrap: 'wrap',
},
}
I set minheight property of the scroll and it seems to work.