react-native-deck-swiper error is TypeError: undefined is not an object (evaluating 'cards.length') - react-native

Created by referring to https://snack.expo.io/rJBRhOLU-
const cardOne = require("../../image/doginfo-1.png");
const cardTwo = require("../../image/doginfo-2.png");
const cardThree = require("../../image/doginfo-3.png");
const cardFour = require("../../image/doginfo-4.png");
class AdvancedDeck extends Component {
constructor(props) {
super(props);
this.sate = {
cardIndex: 0,
swipedAllCards: false,
swipeDirection: "",
cards: [
{
text: "Card One",
name: "One",
image: cardOne
},
{
text: "Card Two",
name: "Two",
image: cardTwo
},
{
text: "Card Three",
name: "Three",
image: cardThree
},
{
text: "Card Four",
name: "Four",
image: cardFour
}
]
};
}
renderCard = (card, index) => {
return (
<Card style={{ elevation: 3 }}>
<CardItem>
<Left>
<Thumbnail source={card.image} />
<Body>
<Text>{card.text}</Text>
<Text note>NativeBase</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image
style={{
resizeMode: "cover",
width: null,
flex: 1,
height: 300
}}
source={card.image}
/>
</CardItem>
<CardItem>
<IconNB name={"ios-heart"} style={{ color: "#ED4A6A" }} />
<Text>
{card.name}-{index}
</Text>
</CardItem>
</Card>
);
};
onSwipedAllCards = () => {
this.setState({
swipedAllCards: true
});
};
swipeLeft = () => {
this.swiper.swipeLeft();
};
render() {
return (
<Container style={styles.container}>
<Header>
<Left>
<Button transparent onPress={() => this.props.navigation.goBack()}>
<Icon name="arrow-back" />
</Button>
</Left>
<Body>
<Title>Advanced Deck Swiper</Title>
</Body>
<Right />
</Header>
<View style={{ flex: 1, padding: 12 }}>
<Swiper
ref={swiper => {
this.swiper = swiper;
}}
onSwiped={this.onSwiped}
onSwipedLeft={() => this.onSwiped("left")}
onSwipedRight={() => this.onSwiped("right")}
onSwipedTop={() => this.onSwiped("top")}
onSwipedBottom={() => this.onSwiped("bottom")}
onTapCard={this.swipeLeft}
cards={this.props.cards}
cardIndex={this.props.cardIndex}
cardVerticalMargin={80}
renderCard={this.renderCard}
onSwipedAll={this.onSwipedAllCards}
showSecondCard={false}
stackSize={3}
stackSeparation={15}
overlayLabels={{
bottom: {
title: "BLEAH",
style: {
label: {
backgroundColor: "black",
borderColor: "black",
color: "white",
borderWidth: 1
},
wrapper: {
flexDirection: "column",
alignItems: "center",
justifyContent: "center"
}
}
},
left: {
title: "NOPE",
style: {
label: {
backgroundColor: "black",
borderColor: "black",
color: "white",
borderWidth: 1
},
wrapper: {
flexDirection: "column",
alignItems: "flex-end",
justifyContent: "flex-start",
marginTop: 30,
marginLeft: -30
}
}
},
right: {
title: "LIKE",
style: {
label: {
backgroundColor: "black",
borderColor: "black",
color: "white",
borderWidth: 1
},
wrapper: {
flexDirection: "column",
alignItems: "flex-start",
justifyContent: "flex-start",
marginTop: 30,
marginLeft: 30
}
}
},
top: {
title: "SUPER LIKE",
style: {
label: {
backgroundColor: "black",
borderColor: "black",
color: "white",
borderWidth: 1
},
wrapper: {
flexDirection: "column",
alignItems: "center",
justifyContent: "center"
}
}
}
}}
animateOverlayLabelsOpacity
animateCardOpacity
swipeBackCard
/>
</View>
<View
style={{
flexDirection: "row",
flex: 1,
position: "absolute",
bottom: 50,
left: 0,
right: 0,
justifyContent: "space-between",
padding: 15
}}
>
<Button
style={{ backgroundColor: "black" }}
onPress={() => this.swiper.swipeBack()}
title="Swipe Back"
>
<Icon name="arrow-back" />
<Text>Swipe Left</Text>
</Button>
<Button iconRight onPress={() => this._deckSwiper._root.swipeRight()}>
<Text>Swipe Right</Text>
<Icon name="arrow-forward" />
</Button>
</View>
</Container>
);
}
}
export default AdvancedDeck;
How can I fix it?
I changed the code to contact-native-check-swiper to write back button because it did not turn into a back button while writing the existing default-base checkswiper.
Any answer is welcome. Please help me a lot.


The problem is with
<Swiper
...
cards={this.props.cards}
...
You've defined the cards in this.state = { cards: ... } instead

Related

How to show different tags, depending on the user logged. Expo react

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?

Add to cart in react native

I am creating my first professional react native app for a new start up, I like to do so.
This is based om a Product delarship.
Since I am not able to Pass the checked products to the Cart Page. Please Help me to do future.
I just created it in expo for react-native
Please Help me
Please Help I am stuck here.
import React from "react";
import styled from "styled-components";
import { Dimensions } from "react-native";
import { StatusBar } from "expo-status-bar";
import MedCard from "../components/MidCard";
import ProductName from "../components/Prices";
import Price from "../components/Prices";
import { LinearGradient } from "expo-linear-gradient";
import {
StyleSheet,
Button,
Text,
View,
TouchableOpacity,
ScrollView,
Image,
ActivityIndicator,
TextInput,
Alert,
} from "react-native";
import {
MaterialIcons,
AntDesign,
Ionicons,
MaterialCommunityIcons,
} from "#expo/vector-icons";
import { color } from "react-native-reanimated";
class Pulsars extends React.Component {
constructor(props) {
super(props);
this.state = {
selectAll: false,
cartItemsIsLoading: false,
cartItems: [
/* Sample data from walmart */
{
itemId: "1",
name: "Orid Dhall",
quantity: "1kg",
status: "Currently Not Available",
thumbnailImage:
"https://annaistores.com/as_content/uploads/2020/05/81f17QBywiL._SL1500_.jpg",
qty: 5,
salePrice: "123",
checked: 0,
},
{
itemId: "2",
name: "Orid Dhall",
quantity: "500g",
status: "Currently Not Available",
thumbnailImage:
"https://annaistores.com/as_content/uploads/2020/05/81f17QBywiL._SL1500_.jpg",
qty: 5,
salePrice: "123",
checked: 0,
},
{
itemId: "3",
name: "Toor Dhall",
quantity: "1kg",
status: "Currently Not Available",
thumbnailImage:
"https://annaistores.com/as_content/uploads/2020/05/81ieFDa5gHL._SY550_.jpg",
qty: 5,
salePrice: "123",
checked: 0,
},
{
itemId: "4",
name: "Toor Dhall",
quantity: "500g",
status: "Currently Not Available",
thumbnailImage:
"https://annaistores.com/as_content/uploads/2020/05/81ieFDa5gHL._SY550_.jpg",
qty: 5,
salePrice: "123",
checked: 0,
},
{
itemId: "5",
name: "Gram Dhall",
quantity: "1kg",
status: "Currently Not Available",
thumbnailImage:
"https://annaistores.com/as_content/uploads/2020/05/udhayam-gram-dal-228x228-1.jpg",
qty: 5,
salePrice: "123",
checked: 0,
},
{
itemId: "6",
name: "Gram Dhall",
quantity: "500g",
status: "Currently Not Available",
thumbnailImage:
"https://annaistores.com/as_content/uploads/2020/05/udhayam-gram-dal-228x228-1.jpg",
qty: 5,
salePrice: "123",
checked: 0,
},
{
itemId: "7",
name: "Moong Dhall",
quantity: "1kg",
status: "Currently Not Available",
thumbnailImage:
"https://annaistores.com/as_content/uploads/2020/12/819D8piBVKL._SL1500_.jpg",
qty: 5,
salePrice: "123",
checked: 0,
},
{
itemId: "8",
name: "Moong Dhall",
quantity: "500g",
status: "Currently Not Available",
thumbnailImage:
"https://annaistores.com/as_content/uploads/2020/12/819D8piBVKL._SL1500_.jpg",
qty: 5,
salePrice: "123",
checked: 0,
},
],
};
}
selectHandler = (index, value) => {
const newItems = [...this.state.cartItems]; // clone the array
newItems[index]["checked"] = value == 1 ? 0 : 1; // set the new value
this.setState({ cartItems: newItems }); // set new state
};
selectHandlerAll = (value) => {
const newItems = [...this.state.cartItems]; // clone the array
newItems.map((item, index) => {
newItems[index]["checked"] = value == true ? 0 : 1; // set the new value
});
this.setState({
cartItems: newItems,
selectAll: value == true ? false : true,
}); // set new state
};
deleteHandler = (index) => {
Alert.alert(
"Are you sure you want to delete this item from your cart?",
"",
[
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel",
},
{
text: "Delete",
onPress: () => {
let updatedCart = this.state.cartItems; /* Clone it first */
updatedCart.splice(
index,
1
); /* Remove item from the cloned cart state */
this.setState(updatedCart); /* Update the state */
},
},
],
{ cancelable: false }
);
};
quantityHandler = (action, index) => {
const newItems = [...this.state.cartItems]; // clone the array
let currentQty = newItems[index]["qty"];
if (action == "more") {
newItems[index]["qty"] = currentQty + 5;
} else if (action == "less") {
newItems[index]["qty"] = currentQty > 5 ? currentQty - 5 : 5;
}
this.setState({ cartItems: newItems }); // set new state
};
subtotalPrice = () => {
const { cartItems } = this.state;
if (cartItems) {
return cartItems.reduce(
(sum, item) =>
sum + (item.checked == 1 ? item.qty * item.salePrice : 0),
0
);
}
return 0;
};
render() {
const styles = StyleSheet.create({
centerElement: { justifyContent: "center", alignItems: "center" },
});
const { cartItems, cartItemsIsLoading, selectAll } = this.state;
return (
<View style={{ flex: 1, backgroundColor: "#f6f6f6" }}>
<View
style={{
flexDirection: "row",
backgroundColor: "#fff",
marginBottom: 10,
}}
>
<View style={[styles.centerElement, { width: 50, height: 50 }]}>
<Ionicons name="ios-cart" size={25} color="#000" />
</View>
<View style={[styles.centerElement, { height: 50 }]}>
<Text style={{ fontSize: 18, color: "#000" }}>Shopping Cart</Text>
</View>
</View>
{cartItemsIsLoading ? (
<View style={[styles.centerElement, { height: 300 }]}>
<ActivityIndicator size="large" color="#ef5739" />
</View>
) : (
<ScrollView>
{cartItems &&
cartItems.map((item, i) => (
<View
key={i}
style={{
flexDirection: "row",
backgroundColor: "#fff",
marginBottom: 2,
height: 120,
}}
>
<View style={[styles.centerElement, { width: 60 }]}>
<TouchableOpacity
style={[styles.centerElement, { width: 32, height: 32 }]}
onPress={() => this.selectHandler(i, item.checked)}
>
<Ionicons
name={
item.checked == 1
? "ios-checkmark-circle"
: "ios-checkmark-circle-outline"
}
size={25}
color={item.checked == 1 ? "#0faf9a" : "#aaaaaa"}
/>
</TouchableOpacity>
</View>
<View
style={{
flexDirection: "row",
flexGrow: 1,
flexShrink: 1,
alignSelf: "center",
}}
>
<TouchableOpacity
onPress={() => {
/*this.props.navigation.navigate('ProductDetails', {productDetails: item})*/
}}
style={{ paddingRight: 10 }}
>
<Image
source={{ uri: item.thumbnailImage }}
style={[
styles.centerElement,
{ height: 60, width: 60, backgroundColor: "#eeeeee" },
]}
/>
</TouchableOpacity>
<View
style={{
flexGrow: 1,
flexShrink: 1,
alignSelf: "center",
}}
>
<Text numberOfLines={1} style={{ fontSize: 15 }}>
{item.name}
</Text>
<Text numberOfLines={1} style={{ color: "#8f8f8f" }}>
{item.quantity}
</Text>
<Text numberOfLines={1} style={{ color: "#333333" }}>
₹{item.qty * item.salePrice}
</Text>
<Text>{item.status}</Text>
<View style={{ flexDirection: "row" }}>
<TouchableOpacity
onPress={() => this.quantityHandler("less", i)}
style={{ borderWidth: 1, borderColor: "#cccccc" }}
>
<MaterialIcons
name="remove"
size={22}
color="#cccccc"
/>
</TouchableOpacity>
<Text
style={{
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor: "#cccccc",
paddingHorizontal: 7,
paddingTop: 3,
color: "#bbbbbb",
fontSize: 13,
}}
>
{item.qty}
</Text>
<TouchableOpacity
onPress={() => this.quantityHandler("more", i)}
style={{ borderWidth: 1, borderColor: "#cccccc" }}
>
<MaterialIcons name="add" size={22} color="#cccccc" />
</TouchableOpacity>
</View>
</View>
</View>
<View style={[styles.centerElement, { width: 60 }]}>
<TouchableOpacity
style={[styles.centerElement, { width: 32, height: 32 }]}
onPress={() => this.deleteHandler(i)}
>
<Ionicons name="md-trash" size={25} color="#ee4d2d" />
</TouchableOpacity>
</View>
</View>
))}
</ScrollView>
)}
{!cartItemsIsLoading && (
<View
style={{
backgroundColor: "#fff",
borderTopWidth: 2,
borderColor: "#f6f6f6",
paddingVertical: 5,
}}
>
<View style={{ flexDirection: "row" }}>
<View style={[styles.centerElement, { width: 60 }]}>
<View
style={[styles.centerElement, { width: 32, height: 32 }]}
></View>
</View>
<View
style={{
flexDirection: "row",
flexGrow: 1,
flexShrink: 1,
justifyContent: "space-between",
alignItems: "center",
}}
></View>
</View>
<View style={{ flexDirection: "row" }}>
<View style={[styles.centerElement, { width: 60 }]}>
<TouchableOpacity
style={[styles.centerElement, { width: 32, height: 32 }]}
onPress={() => this.selectHandlerAll(selectAll)}
>
<Ionicons
name={
selectAll == true
? "ios-checkmark-circle"
: "ios-checkmark-circle-outline"
}
size={25}
color={selectAll == true ? "#0faf9a" : "#aaaaaa"}
/>
</TouchableOpacity>
</View>
<View
style={{
flexDirection: "row",
flexGrow: 1,
flexShrink: 1,
justifyContent: "space-between",
alignItems: "center",
}}
>
<Text>Select All</Text>
<View
style={{
flexDirection: "row",
paddingRight: 20,
alignItems: "center",
}}
>
<Text style={{ color: "#8f8f8f" }}>SubTotal: </Text>
<Text>₹{this.subtotalPrice().toFixed(2)}</Text>
</View>
</View>
</View>
<View
style={{
flexDirection: "row",
justifyContent: "flex-end",
height: 32,
paddingRight: 20,
alignItems: "center",
}}
>
<TouchableOpacity
style={[
styles.centerElement,
{
backgroundColor: "#0faf9a",
width: 100,
height: 25,
borderRadius: 5,
},
]}
onPress={() => console.log("test")}
>
<Text style={{ color: "#ffffff" }}>Add to Cart</Text>
</TouchableOpacity>
</View>
</View>
)}
</View>
);
}
}
export default Pulsars;

My React native button text is not appearing in iOS but in android it works fine

Problem:
In my react native application I have used tochableOpacity for my buttons. I have created a custom button component and Have reused it through out the Application. My Custom button component is look like this.
const SubmitButton = (props) => {
const { onpress, btext, loadding, disabled, scrollView } = props;
const isLargeScreen = useIsLargeDevice();
return (
<TouchableOpacity
style={scrollView ? styles.sendButtonScrollView : styles.sendButton}
onPress={onpress}
disabled={disabled}>
{loadding ? (
<Image
source={spinner}
style={scrollView ? styles.bimageScrollview : styles.bimage}
/>
) : (
<Text
style={[
styles.sendButtonText,
isLargeScreen ? styles.largeText : styles.text,
]}>
{btext}
</Text>
)}
</TouchableOpacity>
);
};
export default SubmitButton;
const styles = StyleSheet.create({
sendButton: {
flex: 1,
backgroundColor: '#3e92ff',
paddingTop: '6%',
paddingBottom: '6%',
alignItems: 'center',
borderRadius: 50,
marginTop: 25,
justifyContent: 'center',
// flexWrap: 'wrap'
},
sendButtonScrollView: {
flex: 1,
backgroundColor: '#3e92ff',
paddingTop: '3%',
paddingBottom: '3%',
alignItems: 'center',
borderRadius: 50,
marginTop: 25,
justifyContent: 'center',
},
sendButtonText: {
fontFamily: 'Montserrat-Medium',
color: '#ffffff',
fontWeight: '300',
textAlign: 'center',
letterSpacing: 2,
},
text: {
fontSize: normalize(14),
},
largeText: {
fontSize: normalize(13),
},
bimage: {
width: 48,
height: 48,
},
bimageScrollview: {
width: 25,
height: 25,
},
});
And I have used it in another component like this.
Platform.OS === 'ios' ? Icon.loadFont() : null;
const handleBackButton = () => {
return true;
};
const _navigateToLogin = (navigation) => {
navigation.navigate('Login');
};
const _onPress = (values, validateToken) => {
validateToken(values.token);
};
const Tocken = (props) => {
useEffect(() => {
BackHandler.addEventListener('hardwareBackPress', handleBackButton);
}, [props.navigation]);
useEffect(() => {
if (props.validtoken === true) {
_navigateToLogin(props.navigation);
props.cleardata();
}
}, [props]);
return (
<KeyboardAvoidingView style={styles.container} enabled behavior={Platform.OS === 'ios' ? 'height' : null}>
<View style={styles.colmty} />
<View style={styles.formContainer}>
<AppText styles={styles.loginFormTitle}>
{strings('token.title')}
</AppText>
<Formik
initialValues={{
token: '',
}}
validationSchema={Yup.object({
token: Yup.string().required(strings('token.token-validation')),
})}
onSubmit={(values, formikActions) => {
_onPress(values, props.validatetoken);
setTimeout(() => {
formikActions.setSubmitting(false);
}, 500);
}}>
{(formprops) => (
<View>
<View
style={
!formprops.values.token &&
!formprops.errors.token &&
!props.hasError
? styles.inputView
: formprops.values.token &&
!formprops.errors.token &&
!props.hasError
? styles.validInputView
: styles.inputViewError
}>
<TextInput
style={styles.textField}
placeholder={strings('token.token_place_holder')}
placeholderTextColor="#bbbbbb"
value={formprops.values.token}
onChangeText={formprops.handleChange('token')}
onBlur={formprops.handleBlur('token')}
keyboardType="default"
/>
{formprops.errors.token || props.hasError ? (
<Icon
name="times"
size={normalize(15)}
style={styles.errorIcon}
/>
) : null}
{formprops.values.token &&
!formprops.errors.token &&
!props.hasError ? (
<Icon
name="check"
size={normalize(15)}
style={styles.validIcon}
/>
) : null}
</View>
{formprops.touched.token &&
formprops.errors.token &&
!props.hasError ? (
<View style={styles.errorMessage}>
<AppText styles={styles.errorMessageText}>
{formprops.errors.token}
</AppText>
</View>
) : null}
{props.hasError ? (
<View style={styles.errorMessage}>
<AppText styles={styles.errorMessageText}>
{props.error}
</AppText>
</View>
) : null}
<View style={styles.submitButtonView}>
<SubmitButton
btext={strings('token.submit')}
onpress={formprops.handleSubmit}
loadding={props.loadding}
disabled={props.loadding}
/>
</View>
</View>
)}
</Formik>
</View>
<View style={styles.colmty2} />
<View style={styles.hr} />
<View style={styles.versionContainer}>
<AppText styles={styles.version}>version: {version}</AppText>
</View>
</KeyboardAvoidingView>
);
};
const mapStateToProps = (state) => {
return {
loadding: state.signin.loadding,
validtoken: state.signin.validtoken,
hasError: state.signin.tokenEr,
error: state.signin.error,
};
};
const mapDispatchToProps = (dispatch) => {
return {
validatetoken: (value) => dispatch(signinActions.validatetoken(value)),
cleardata: () => dispatch(signinActions.cleardata()),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Tocken);
styles that I have used in the Token component is looks like this.
import {StyleSheet} from 'react-native';
import normalize from '_utils/fontsize';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff',
},
colmty: {
height: '20%',
},
formContainer: {
height: '55%',
// backgroundColor: '#f2f2f2',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
// elevation: 5,
padding: '10%',
justifyContent: 'center',
paddingBottom: '5%',
},
colmty2: {
height: '10%',
},
bottom: {
height: '15%',
justifyContent: 'center',
alignItems: 'center',
},
hr: {
borderBottomColor: '#c3c3c3',
borderBottomWidth: 2.0,
marginRight: '10%',
marginLeft: '10%',
},
validIcon: {
marginTop: 15,
color: '#3e92ff',
},
errorIcon: {
marginTop: 15,
color: '#ff3d3d',
},
textField: {
flex: 1,
fontFamily: 'Montserrat-Medium',
fontSize: normalize(15),
fontWeight: '500',
paddingLeft: 0,
},
inputView: {
marginTop: '5%',
flexDirection: 'row',
borderBottomColor: '#cccccc',
borderBottomWidth: 2,
},
validInputView: {
marginTop: '5%',
flexDirection: 'row',
borderBottomColor: '#3e92ff',
borderBottomWidth: 2,
},
inputViewError: {
marginTop: '5%',
flexDirection: 'row',
borderBottomColor: '#ff3d3d',
borderBottomWidth: 2,
},
patientFormTitle: {
fontSize: 30,
fontWeight: '200',
fontStyle: 'normal',
textAlign: 'center',
color: '#444444',
alignItems: 'center',
},
bottomLinkText: {
fontSize: 13,
color: '#484848',
borderBottomWidth: 2,
borderBottomColor: '#c3c3c3',
},
loginFormTitle: {
fontSize: normalize(16),
fontWeight: '200',
fontStyle: 'normal',
textAlign: 'center',
color: '#444444',
alignItems: 'center',
marginTop: '-10%',
},
errorMessageText: {
color: '#ff3d3d',
fontSize: normalize(13),
marginTop: 10,
},
spinnerContainer: {
marginTop: '50%',
alignItems: 'center',
},
versionContainer: {
marginRight: '10%',
marginLeft: '10%',
marginTop: '10%',
},
version: {
textAlign: 'center',
fontSize: normalize(12),
},
});
export default styles;
But button is not showing the text it looks like this.
I tried lot to find out where I have done wrong but I was unable to do so. Can someone help me to solve this issue.Thank you

react native native base ListItem touchableHighlightStyle

Any idea on how to change the touch style for a ListItem?
"Suggestions / Contact" highlights with that left grey on touch.
import React, { Component } from 'react';
import { ScrollView, Switch } from 'react-native';
import Constants from '../models/Constants';
import Styles from '../styles/Styles';
import { Container, Content, Header, List, ListItem, Body, CheckBox, Title, Left, Right, Icon, Text } from 'native-base';
import { Col, Grid } from 'react-native-easy-grid';
import Colours from '../models/Colours';
import SettingsData from '../data/SettingsData';
export default class Settings extends Component {
constructor(props){
super(props)
}
render() {
const isKM = true;
return (
<Container style={Styles.dark}>
<Header transparent noShadow>
<Left style={Styles.headerSide}/>
<Body style={Styles.headerBody}>
<Title style={Styles.headerTitle}>Settings</Title>
</Body>
<Right style={Styles.headerSide}/>
</Header>
<ScrollView>
<Content>
<List>
<ListItem style={Styles.listItem} titleStyle={Styles.title} onPress={() => this.props.navigation.navigate('SignIn')}>
<Left>
<Body>
<Text style={Styles.listTitle}>Sign up</Text>
<Text note style={Styles.subtitle}>To save your data when swapping device</Text>
</Body>
</Left>
<Right>
<Icon name="arrow-forward" />
</Right>
</ListItem>
<ListItem style={Styles.listItem} titleStyle={Styles.title}>
<Left>
<Body>
<Text style={Styles.listTitle}>Smart Track</Text>
<Text note style={Styles.subtitle}>Will not compute stationary time</Text>
</Body>
</Left>
<Right>
<Switch value={this.state.smartTrack} onValueChange={this.onSmartTrack} />
</Right>
</ListItem>
<ListItem style={Styles.listItem} titleStyle={Styles.title} onPress={() => this.props.navigation.navigate('About')}>
<Left>
<Body>
<Text style={Styles.listTitle}>Store</Text>
</Body>
</Left>
<Right>
<Icon name="arrow-forward" />
</Right>
</ListItem>
<ListItem style={Styles.listItem} titleStyle={Styles.title} onPress={() => this.props.navigation.navigate('About')}>
<Left>
<Body>
<Text style={Styles.listTitle}>About</Text>
</Body>
</Left>
<Right>
<Icon name="arrow-forward" />
</Right>
</ListItem>
<ListItem style={Styles.listItem} titleStyle={Styles.title} onPress={() => this.props.navigation.navigate('Suggest')}>
<Left>
<Body>
<Text style={Styles.listTitle}>Suggestions / Contact</Text>
</Body>
</Left>
<Right>
<Icon name="arrow-forward" />
</Right>
</ListItem>
<ListItem style={Styles.listItem} titleStyle={Styles.title} onPress={() => this.props.navigation.navigate('Reset')}>
<Left>
<Body>
<Text style={Styles.listTitle}>Reset all data</Text>
</Body>
</Left>
<Right>
<Icon name="arrow-forward" />
</Right>
</ListItem>
</List>
</Content>
</ScrollView>
</Container>
);
}
}
Style:
import { StyleSheet, Dimensions } from 'react-native';
import Colours from '../models/Colours';
const MARGIN = 20;
const h = Dimensions.get("window").height;
const w = Dimensions.get("window").width;
const pageH = h - 65 - 50 - 5; // header, tabs, safe
const Styles = StyleSheet.create({
dark: {
backgroundColor: Colours.DARK
},
black: {
backgroundColor: Colours.BLACk
},
page: {
//flex: 1,
//flexDirection: 'row'.
backgroundColor: Colours.DARK
},
centerContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
fullPage: {
flex: 1,
justifyContent: "center",
alignItems: "center",
height: pageH
},
modalBG: {
position: 'absolute',
top: 0,
left: 0,
flex: 1,
width: w,
height: h,
justifyContent: "center",
alignItems: "center",
backgroundColor: Colours.RGBA_BLACK
},
centerBlackMargin: {
flex: 1,
justifyContent: "center",
alignItems: "center",
margin: 1,
backgroundColor: Colours.RGBA_BLACK
},
list: {
borderColor: Colours.DARK
},
listTitle: {
color: Colours.WHITE,
fontSize: 16
},
listItem: {
backgroundColor: Colours.DARK,
borderColor: Colours.DARKER,
borderBottomWidth: 1,
height: 60
//borderBottomColor: '#bbb',
//borderTopWidth: 0,
//borderBottomWidth: 0
//StyleSheet.hairlineWidth,
},
listItemPress: {
borderColor: Colours.DARKER
},
input: {
color: Colours.GREY
//height: 60
//borderBottomColor: '#bbb',
//borderTopWidth: 0,
//borderBottomWidth: 0
//StyleSheet.hairlineWidth,
},
textarea: {
color: Colours.GREY,
fontSize: 18,
marginLeft: 14,
marginTop: 15,
paddingLeft: 0,
paddingRight: 15,
borderColor: 'transparent',
borderBottomWidth: 1,
borderBottomColor: Colours.DARKER
},
listItemContainer: {
backgroundColor: Colours.DARK
},
listCols: {
flex: 1,
flexDirection: 'row',
paddingLeft: 10
},
subtitle: {
color: Colours.DARKGREY,
backgroundColor: Colours.DARK,
fontSize: 12
},
title: {
color: Colours.WHITE,
fontSize: 18
},
headerTitle: {
fontSize: 24,
color: Colours.WHITE
},
headerSide:{
flex: 0,
flexBasis: 48
},
headerBody:{
flex: 1,
},
bigTitle: {
fontSize: 48,
color: Colours.WHITE
},
midTitle: {
fontSize: 36,
color: Colours.WHITE
},
smallTitle: {
fontSize: 12,
color: Colours.DARKGREY
},
checkbox: {
marginRight: MARGIN
},
// input: {
// width: 200,
// height: 40,
// fontSize: 24,
// backgroundColor: Colours.RED
// },
sendButton: {
marginTop: 25,
paddingRight: 15,
paddingLeft: 15,
},
sidePadding: {
paddingRight: MARGIN,
paddingLeft: MARGIN,
},
trackFooter: {
paddingTop: MARGIN,
paddingRight: MARGIN,
paddingLeft: MARGIN,
},
button: {
color: Colours.WHITE,
fontSize: 18,
backgroundColor: Colours.RED
},
cancelTrack: {
color: Colours.GREY,
textAlign: 'center',
padding: 10
},
textWarn: {
color: Colours.RED,
textAlign: 'center',
marginTop: 5
},
textCenter: {
color: Colours.GREY,
textAlign: 'center',
marginTop: 10,
//fontSize: 21
},
icon: {
color: Colours.GREY
},
bgRed: {
backgroundColor: Colours.RED
},
bgBlue: {
backgroundColor: Colours.BLUE
},
bgYellow: {
backgroundColor: Colours.YELLOW
},
dashNotEnough: {
textAlign: 'center',
fontSize: 21,
color: Colours.DARKGREY
},
dashFooter: {
height:150,
flex: 1,
justifyContent: "center",
alignItems: "center",
//backgroundColor: Colours.YELLOW
},
centeredScreen: {
flex: 1,
justifyContent: "center",
alignItems: "center",
//backgroundColor: Colours.YELLOW
},
centeredScreenCol: {
flex: 1,
flexDirection: 'column',
justifyContent: "center",
alignItems: "center",
//backgroundColor: Colours.BLUE
}
});
export default Styles;

There are some variables in the theme, that you need to change in order to remove the left white bar.
The Native Base ListItem theme consist of listBtnUnderlayColor: '#DDD' which gives the color for the touchable interaction for the underlay items under the List
Therefore you need to replace marginLeft to paddingLeft in the ListItem ejected component here as
paddingLeft: variables.listItemPadding + 6

Check ListItem Selected and ListItem NoIndent and List component theme variables from docs

React native and scrollView

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.