Related
I'm trying to add a tap gesture to the render card of react-native-deck-swiper using the TapGestureHanlder from react-native-reanimated.
Currently, it works when tapping the red zone outside the swiper, but I want to tap the picture and get the x position where I tapped.
This is the code of the red zone, there I'm calling a class component in which I'm using the deck-swiper with some extra functions.
const onSingleTapEvent = (event) => {
if (event.nativeEvent.state === State.ACTIVE) {
alert('Hey single tap!');
}
};
return (
<GestureHandlerRootView style={{ zIndex: 10 }}>
<TapGestureHandler onHandlerStateChange={onSingleTapEvent}>
<AnimatedView style={styles.container}>
<ImageSwiperDeck
index={index}
listOfAssetsWithinTheAlbum={listOfAssetsWithinTheAlbum}
moveImageToTrashBin={moveImageToTrashBin}
keepImageInAlbum={keepImageInAlbum}
/>
</AnimatedView>
</TapGestureHandler>
</GestureHandlerRootView>
);
};
const styles = StyleSheet.create({
container: {
height: 560,
width: 500,
zIndex: 10,
backgroundColor: 'red',
},
});
export default ImageSwiper;
This is the deck-swiper code which works fine.
return (
<Swiper
ref={(swiper) => {
this.swiper = swiper;
}}
cards={this.props.listOfAssetsWithinTheAlbum}
cardIndex={this.props.index}
renderCard={this.Card}
backgroundColor={'transparent'}
onSwipedLeft={this.deleteImage}
onSwipedRight={this.keepImage}
cardVerticalMargin={10}
stackSize={5}
stackScale={20}
stackSeparation={5}
animateOverlayLabelsOpacity
animateCardOpacity
disableTopSwipe
disableBottomSwipe
overlayLabels={{
left: {
title: 'DELETE',
style: {
label: {
backgroundColor: colors.red,
borderColor: colors.red,
color: colors.white,
borderWidth: 1,
fontSize: 24,
},
wrapper: {
flexDirection: 'column',
alignItems: 'flex-end',
justifyContent: 'flex-start',
marginTop: 20,
marginLeft: -20,
},
},
},
right: {
title: 'KEEP',
style: {
label: {
backgroundColor: colors.blue,
borderColor: colors.blue,
color: colors.white,
borderWidth: 1,
fontSize: 24,
},
wrapper: {
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'flex-start',
marginTop: 20,
marginLeft: 20,
},
},
},
}}
/>
);
I am making a todo app, to render the list of todo items i am using flatlist but in flatlist i am not able to scroll through the list is there any way to sroll throught the list
my code
`
<FlatList
data={toDos}
refreshing={isRefreshing}
onRefresh={() => {
loadToDoList();
setIsRefreshing(true);
}}
renderItem={renderToDoItem}
keyExtractor={(item) => item.id}
/>
`
i tried using scroll view but i dont know how to use it can you please help me fix this problem
code
let showToDoList = () => {
return (
<FlatList
data={toDos}
refreshing={isRefreshing}
onRefresh={() => {
loadToDoList();
setIsRefreshing(true);
}}
renderItem={renderToDoItem}
keyExtractor={(item) => item.id}/>
);
};
todo item
let renderToDoItem = ({ item }) => {
return (
<View style={[MyStyles.ToDoItem]}>
<View style={AppStyles.fillSpace}>
<BouncyCheckbox
isChecked={item.completed}
size={25}
fillColor="#0A7AFF"
unfillColor="#fff"
text={item.text}
iconStyle={{ marginLeft: 5 }}
onPress={(isChecked) => {
checkToDoItem(item, isChecked);
}}
/>
</View>
<CustomTextButton
text={<AntDesign name="delete" size={25} color="red" />}
onPress={() => deleteToDo(item.id)}
style={MyStyles.ToDoDelete}
/>
</View>
);
};
styles
import { StyleSheet } from "react-native";
export default StyleSheet.create({
ToDoItem: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
marginTop: 3,
marginBottom: 3,
marginLeft: 7,
marginRight: 7,
backgroundColor: "white",
borderRadius: 3,
borderColor: "#D9D9D9",
},
CustomButtonAddToDo: {
flexDirection: "column",
width: 100,
textAlign: "center",
backgroundColor: "#ff7676",
borderRadius: 5,
marginRight: 5,
marginLeft: 5,
},
Center: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: "center",
alignItems: "center",
},
CustomTextButton: {
fontSize: 20,
color: "#87F1FF",
marginRight: 5,
},
FloatingContainer: {
width: 77,
height: 77,
backgroundColor: "#46A16E",
borderRadius: 100,
display: "flex",
bottom: 0,
right: 0,
position: "absolute",
marginRight: 15,
},
Floating: {},
blackText: {
color: "#000",
},
whiteText: {
color: "#fff",
},
header: {
fontSize: 30,
marginLeft: 10,
marginTop: 20,
},
MainBG: {
backgroundColor: "#798478",
},
TopBar: {
flexDirection: "row",
flexWrap: "wrap",
},
TopBarText: {
marginTop: 20,
marginLeft: 10,
fontSize: 20,
marginBottom: 20,
fontWeight: "bold",
},
TopBarTextMenu: {
marginTop: 20,
marginLeft: 10,
marginBottom: 20,
fontSize: 20,
},
TopBarMenu: {
marginTop: 20,
marginLeft: 10,
marginBottom: 20,
fontSize: 20,
},
addToDoText: {
fontSize: 30,
},
menuicon: {
width: 35,
height: 5,
backgroundColor: 'black',
margin: 50,
},
lightText: {
color: "#fff"
},
lightTextInput: {
color: "#fff"
},
darkText: {
color: "#000"
},
darkTextInput: {
color: "#000"
},
bold: {
fontSize: 15,
fontWeight: "bold"
},
smallText: {
color: "5a5a59",
fontSize: 15,
fontWeight: "300",
},
});
styles2
import { StyleSheet } from "react-native";
export default StyleSheet.create({
imageContainer: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
},
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "white",
padding: 16,
},
rowContainer: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
marginVertical: 8,
},
topMargin: {
marginTop: 16,
},
bottomMargin: {
marginBottom: 16,
},
rightMargin: {
marginRight: 16,
},
leftMargin: {
marginLeft: 16,
},
lightText: {
color: "white",
},
darkText: {
color: "black",
},
errorText: {
color: "#FF0000",
},
header: {
fontSize: 20,
},
textInput: {
alignSelf: "stretch",
padding: 8,
},
lightTextInput: {
borderBottomColor: "white",
},
InlineTextButton: {
fontSize: 20,
color: "#87F1FF",
},
pressedInlineTextButton: {
fontSize: 19,
color: "#87F1FF",
opacity: 0.4,
},
imageContainer: {
flex: 1,
backgroundColor: '#fafafa',
alignItems: 'center',
justifyContent: 'center'
},
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
padding: 16
},
noPadding: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: "red"
},
rowContainer: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
alignSelf: "stretch",
marginVertical: 4,
},
fillSpace: {
flex: 1
},
rightAligned: {
justifyContent: "flex-end"
},
leftAligned: {
justifyContent: "flex-start"
},
topMargin: {
marginTop: 16
},
bottomMargin: {
marginBottom: 16
},
rightMargin: {
marginRight: 16
},
leftMargin: {
marginLeft: 16
},
backgroundCover: {
alignSelf: 'stretch',
alignItems: 'center',
justifyContent: 'center',
marginLeft: 10,
marginRight: 10,
},
lightText: {
color: "#fff"
},
errorText: {
color: "#ff0000"
},
header: {
fontSize: 20,
alignSelf: "center"
},
textInput: {
alignSelf: 'stretch',
padding: 8,
borderBottomWidth: 2,
marginVertical: 8
},
lightTextInput: {
borderBottomColor: "#ffffff"
},
darkTextInput: {
borderBottomColor: "#000000"
},
InlineTextButton: {
fontSize: 15,
fontWeight: "bold",
color: "#87F1FF",
},
pressedInlineTextButton: {
fontSize: 19,
color: "#87F1FF",
opacity: 0.4,
},
});
why my purple absolute view is not showing all, only the half ?
look at the image
Code:
CardView:
const { width } = Dimensions.get('window');
const MAX_NAME_WIDTH = width / 2 - 48;
const CARD_WIDTH = width * 0.45;
const UserCardAdvanced = ({ user_id, username, profile_image, followingShops, is_verification, isD, stars, onPress, onPressReviews, onPressFollow }: IUserCardAdvanced) => {
return (
<Pressable onPress={onPress} style={s.card}>
{ isD &&
<PurpleNotice />
}
<Image source={{uri: profile_image}} resizeMode='contain' style={s.profile_image} />
<View style={s.starContainer}>
<Stars
star_filled={stars?.fill}
disabled
is_all
size={15}
onPressAll={onPressReviews}
/>
<Text style={s.reviewTotal}>{stars?.total_reviews}</Text>
</View>
<View style={s.nameContainer}>
<NameWithVerification
name={username}
is_verification={is_verification}
nameStyle={s.nameStyle}
/>
</View>
<FollowBtn
onPress={onPressFollow}
is_followed={false}
size={24}
/>
</Pressable>
)
}
const s = StyleSheet.create({
card: {
padding: 12,
backgroundColor: '#fff',
borderRadius: 8,
elevation: 3,
margin: 6,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 20,
zIndex: 99921,
width: CARD_WIDTH
},
starContainer: {
flexDirection: 'row',
alignItems: 'center',
marginTop: 8
},
reviewTotal: {
fontFamily: globalStyles.font_regular,
color: '#333',
marginLeft: 4
},
nameContainer: {
marginVertical: 8
},
nameStyle: {
color: '#333',
fontSize: 13,
maxWidth: MAX_NAME_WIDTH
},
profile_image: {
height: 84,
width: 84,
borderRadius: 50,
},
username: {
fontFamily: globalStyles.font_regular,
color: '#555',
marginTop: 12,
textAlign: 'center'
}
})
Purple Notice
const PurpleNotice = (isD: isD) => {
return (
<View style={s.view}>
<Text style={s.text}>TESTTESTETS</Text>
</View>
)
}
const s = StyleSheet.create({
view: {
padding: 2,
paddingHorizontal: 10,
backgroundColor: globalStyles.globalColor,
borderRadius: 6,
position: 'absolute',
top: -10,
left: 0,
zIndex: 99999
},
text: {
fontFamily: globalStyles.font_light,
color: '#fff',
fontSize: 11,
textTransform: 'uppercase',
textShadowColor: '#fff',
textShadowOffset: {
height: 2,
width: 2
}
}
});
I dont know what I am doing wrong i am very thankful for your help!!
.........................................
.........................................
.........................................
.........................................
.........................................
You can add zIndex={1} to that purple view.
use right:0 in style
const s = StyleSheet.create({
view: {
padding: 2,
paddingHorizontal: 10,
backgroundColor: globalStyles.globalColor,
borderRadius: 6,
position: 'absolute',
top: -10,
left: 0,
right:0, //use this also
zIndex: 99999
},
text: {
fontFamily: globalStyles.font_light,
color: '#fff',
fontSize: 11,
textTransform: 'uppercase',
textShadowColor: '#fff',
textShadowOffset: {
height: 2,
width: 2
}
}
});
I'm new to react native. I'm trying to change the styling of the TextInput when there is an error.
How can I make my code not as ugly?
<TextInput
style={touched && invalid?
{height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10, borderWidth: 2, borderColor: 'red'} :
{height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10}}
</TextInput>
Use StyleSheet.create to do style composition like this,
make styles for text, valid text, and invalid text.
const styles = StyleSheet.create({
text: {
height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10,
},
textvalid: {
borderWidth: 2,
},
textinvalid: {
borderColor: 'red',
},
});
and then group them together with an array of styles.
<TextInput
style={[styles.text, touched && invalid ? styles.textinvalid : styles.textvalid]}
</TextInput>
For array styles, the latter ones will merge into the former one, with overwrite rule for the same keys.
Update your code as following:
<TextInput style={getTextStyle(this.state.touched, this.state.invalid)}></TextInput>
Then outside your class component, write:
getTextStyle(touched, invalid) {
if(touched && invalid) {
return {
height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10, borderWidth: 2, borderColor: 'red'
}
} else {
return {
height: 40, backgroundColor: 'white', borderRadius: 5, padding: 10
}
}
}
There are two ways, by inline or calling a function:
1)
const styles = StyleSheet.create({
green: {
borderColor: 'green',
},
red: {
borderColor: 'red',
},
});
<TextInput style={[styles.otpBox, this.state.stateName ?
styles.green :
styles.red ]} />
getstyle(val) {
if (val) {
return { borderColor: 'red' };
}
else {
return { borderColor: 'green' };
}
}
<TextInput style={[styles.otpBox, this.getstyle(this.state.showValidatePOtp)]} />
New React-Native installation. I am trying to set it up. In index.ios.js, I have:
class thingy extends Component {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={(
title: 'Thingy',
component: Main
)} />
);
}
}
When I run this, the app gives me the error:
Can't find variable: title
I'm not sure why it's giving me this error. Any ideas?
Main Component:
var React = require('react-native');
var {
View,
Text,
StyleSheet
} = React;
var styles = StyleSheet.create({
mainContainer: {
flex: 1,
padding: 30,
marginTop: 65,
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: '#48BBEC'
},
title: {
marginBottom: 20,
fontSize: 25,
textAlign: 'center',
color: '#fff'
},
searchInput: {
height: 50,
padding: 4,
marginRight: 5,
fontSize: 23,
bordderWidth: 1,
borderColor: 'white',
borderRadius: 8,
color: 'white'
},
buttonText: {
fontSize: 18,
color: '#111',
alignSelf: 'center'
},
button: {
height: 45,
flexDirection: 'row',
backgroundColor: 'white',
borderColor: 'white',
borderWidth: 1,
bordeRadius: 8,
marginBottom: 10,
marginTop: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
});
class Main extends React.Component{
render(){
return (
<View style={styles.mainContainer}>
<Text> Testing the Router </Text>
</View>
)
}
};
module.exports = Main;
Ah, it looks like initialRoute should be an object, but you have it wrapped in parenthesis:
How it is now:
initialRoute={(
title: 'Thingy',
component: Main
)}
Should actually be:
initialRoute={{
title: 'Thingy',
component: Main
}}