react-native-elements#Divider JavaScript Examples
The following examples show how to use
react-native-elements#Divider.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: NoCards.js From universal-verifier-app with GNU General Public License v3.0 | 6 votes |
|
render() {
return (
<SafeAreaView style={styles.container} backgroundColor={this.props.colors.background}>
<View style={styles.card} borderColor={this.props.colors.divisor} >
<Divider style={[styles.cardTopDivisor]} borderColor={this.props.colors.divisor} />
<View style={styles.bottomContainer}>
<View style={styles.column1}>
<View style={styles.leftSquare} borderColor={this.props.colors.divisor} />
</View>
<View style={styles.column2}>
<Divider style={[styles.line, styles.lineRound, styles.lineShort]} borderColor={this.props.colors.divisor} />
<Divider style={[styles.line, styles.lineRound]} borderColor={this.props.colors.divisor} />
<Divider style={[styles.line, styles.lineRound]} borderColor={this.props.colors.divisor} />
</View>
</View>
</View>
<Text style={[styles.notes,{color:this.props.colors.divisor}]}>Passports you scan will appear here.</Text>
</SafeAreaView>
);
}
Example #2
| Source File: QRShow.js From universal-verifier-app with GNU General Public License v3.0 | 6 votes |
|
function QRShow({ navigation, route }) {
const {colors} = useTheme();
const [qrSize, setQRSize] = useState(0);
useEffect(() => {
navigation.setOptions({
headerStyle: { backgroundColor: colors.background },
headerTintColor: colors.text
});
});
onPageLayout = (event) => {
const {x, y, height, width} = event.nativeEvent.layout;
setQRSize(width);
};
return (
<View style={styles.container} backgroundColor={colors.background}>
<View style={styles.card} backgroundColor={colors.showQRBackground}>
<View style={styles.topView} onLayout={onPageLayout}>
<Text style={[styles.title,{color:colors.showQRText}]}>{route.params.title}</Text>
<Text style={[styles.detail,{color:colors.showQRText}]}>{route.params.detail}</Text>
</View>
<Divider style={[styles.divisor, {borderBottomColor:colors.divisor}]} />
<View style={styles.bottomView} onLayout={onPageLayout}>
<QRCode
value={route.params.qr}
size={qrSize}
color={colors.primary}
/>
</View>
</View>
<Text style={[styles.notes,{color:colors.showQRText}]}>{route.params.signedBy}</Text>
</View>
)
}
Example #3
| Source File: index.js From spree-react-native with MIT License | 6 votes |
|
CheckoutDetailsCard = ({ title, display_total }) => {
return (
<View style={styles.orderTotalContainer}>
<View style={[ globalStyles.container, globalStyles.mt8 ]}>
<Text style={ globalStyles.latoBold14 }>{title}</Text>
</View>
<Divider style={styles.dividerStyle} />
<View style={[ globalStyles.container, globalStyles.mt8 ]}>
<View style={styles.orderDetailsRow}>
<Text style={styles.orderTotalDetailsText}>Subtotal</Text>
<Text style={styles.orderTotalDetailsText}>$50.00</Text>
</View>
<View style={styles.orderDetailsRow}>
<Text style={styles.orderTotalDetailsText}>Promo Discount</Text>
<Text style={styles.orderTotalDetailsText}>-$3.40</Text>
</View>
<View style={styles.orderDetailsRow}>
<Text style={styles.orderTotalDetailsText}>Estimated Tax</Text>
<Text style={styles.orderTotalDetailsText}>$2.40</Text>
</View>
<View style={styles.orderDetailsRow}>
<Text style={styles.orderTotalDetailsText}>Shipping Fee</Text>
<Text style={styles.orderTotalDetailsText}>$0.00</Text>
</View>
</View>
<Divider style={styles.dividerStyle} />
<View style={ styles.orderTotalAmountContainer }>
<Text style={ globalStyles.latoBold14 }>Total Amount</Text>
<Text style={ globalStyles.latoBold14 }>{display_total || '$51.4'}</Text>
</View>
</View>
)
}
Example #4
| Source File: Modals.js From react-native-audio-video-tools with MIT License | 5 votes |
|
CustomModal = ({title, content, isVisible, onCloseClick, leftText, rightText, onLeftClick, onRightClick}) => {
return (
<Modal isVisible={isVisible} overlayStyle={styles.container}>
<View style={styles.wrapper}>
<View style={styles.modalHeader}>
<Text style={styles.modalTitle}>{title}</Text>
<View
style={{
position: 'absolute',
right: 5,
}}
>
<Icon
name={'ios-close-circle-outline'}
type="ionicon"
color={COLORS.White}
onPress={onCloseClick}
/>
</View>
</View>
<Divider />
<View style={styles.modalBody}>
{content}
</View>
<View style={styles.modalFooter}>
{onLeftClick && onRightClick ? (
<>
<Button
type="outline"
title={leftText}
onPress={onLeftClick}
buttonStyle={{paddingHorizontal: 20, paddingVertical: 5}}
/>
<Button
title={rightText}
onPress={onRightClick}
buttonStyle={{paddingHorizontal: 20, paddingVertical: 5, marginHorizontal: 20, marginLeft: 40}}
/>
</>
) : (
<Button
title={leftText}
onPress={onLeftClick}
buttonStyle={{paddingHorizontal: 20, paddingVertical: 5, marginRight: 20}}
/>
)}
</View>
</View>
</Modal>
);
}
Example #5
| Source File: divider.playground.jsx From playground with MIT License | 5 votes |
|
DividerPlayground = () => {
const { theme } = useTheme();
const params = useView({
componentName: "Divider",
props: {
style: {
type: PropTypes.Object,
value: `{width:"80%",margin:20}`,
description: "Apply style to the divider.",
},
color: {
type: PropTypes.String,
value: theme.colors.primary,
description: "Apply color to the divider.",
},
inset: {
type: PropTypes.Boolean,
value: false,
description: "Applies inset to the divider if true. Default is left.",
},
insetType: {
type: PropTypes.String,
value: "left",
description:
"Add inset to the divider in left, right, or in both direction. Choose among left, right, or middle.",
},
subHeader: {
type: PropTypes.String,
value: "React native elements",
description: "Adds a sub-header next to divider.",
},
subHeaderStyle: {
type: PropTypes.Object,
value: `{}`,
description: "Adds styles to the sub header of divider.",
},
width: {
type: PropTypes.Number,
value: 1,
description: "Add width to the divider.",
},
orientation: {
type: PropTypes.String,
value: "horizontal",
description: "Adds orientation to the divider.",
},
},
scope: {
Divider,
},
imports: {
"react-native-elements": {
named: ["Divider"],
},
},
});
return (
<React.Fragment>
<Playground params={params} />
</React.Fragment>
);
}
Example #6
| Source File: CustomDrawerContent.js From spree-react-native with MIT License | 5 votes |
|
function CustomDrawerContent({ dispatch, ...props }) {
return (
<DrawerContentScrollView {...props}>
<View style={styles.jumbotron}>
<LinearGradient
// Background Linear Gradient
start={[1, 0]}
end={[1, 1]}
colors={['#EE3168', '#C1236F']}
style={styles.centeredContent}
>
<View style={styles.centeredContent}>
<Image
source={require('../../../assets/images/user-profile-photo/user-profile-photo.png')}
style={styles.avatar}
/>
<View style={styles.profileDetails}>
<Text style={ styles.profileName }>Jane Pinto</Text>
<ChevronRight size={20} style={{color: colors.white}} />
</View>
</View>
</LinearGradient>
</View>
<DrawerItemList {...props} />
<Divider />
<DrawerItem
label="Support & More"
labelStyle={styles.menuTitle}
icon={({ color, size }) => <Support size={size} style={{color, ...globalStyles.label}} />}
onPress={() => {}}
/>
<DrawerItem
label="FAQs"
labelStyle={styles.subMenuTitle}
onPress={() => {}}
/>
<DrawerItem
label="Contact Us"
labelStyle={styles.subMenuTitle}
onPress={() => {}}
/>
<DrawerItem
label="Privacy Policy"
labelStyle={styles.subMenuTitle}
onPress={() => {}}
/>
<Button
title="Logout Account"
type="outline"
containerStyle={ styles.btnOutlineContainer }
buttonStyle={ styles.btnOutline }
titleStyle={ styles.titleStyle }
onPress={() => dispatch(userLogout())}
/>
</DrawerContentScrollView>
);
}
Example #7
| Source File: ProfileScreen.js From spree-react-native with MIT License | 5 votes |
|
ProfileScreen = ({ dispatch }) => {
return (
<View style={styles.mainContainer}>
<View style={styles.jumbotron}>
<LinearGradient
// Background Linear Gradient
start={[1, 0]}
end={[1, 1]}
colors={['#EE3168', '#C1236F']}
style={styles.centeredContent}
>
<View style={styles.centeredContent}>
<Image
source={require('../../../../assets/images/user-profile-photo/user-profile-photo.png')}
style={styles.avatar}
/>
<View style={styles.profileDetails}>
<Text style={styles.profileName}>Jane Pinto</Text>
<Pen size={24} style={{ color: colors.white }} />
</View>
</View>
</LinearGradient>
</View>
<View>
{
list.map((item, i) => (
<View key={i}>
<View style={styles.listContainer}>
<View style={styles.listIcon}>{item.icon}</View>
<Text style={styles.title}>{item.title}</Text>
<View style={styles.listIcon}><ChevronRight size={24} style={{color: colors.black}} /></View>
</View>
<Divider />
</View>
)
)}
</View>
<View style={globalStyles.container}>
<Button
title="Logout Account"
buttonStyle={ styles.buttonBlockStyle }
titleStyle={ globalStyles.latoBold16 }
onPress={() => dispatch(userLogout())}
/>
</View>
</View>
)
}
Example #8
| Source File: CharacterScreen.js From hero with MIT License | 4 votes |
|
CharacterScreen = ({ route, navigation }) => {
const {
hero,
image,
publisher,
comicPicture,
summary,
firstIssue,
firstIssueURL,
} = route.params;
let publisherLogo = null;
let logoShape = null;
// let firstIssueID = null;
if (publisher === "Marvel Comics" || publisher === "Marvel") {
publisherLogo = require(`../assets/images/Marvel-Logo.jpg`);
logoShape = styles.publisherLogoRectangle;
} else if (publisher === "DC Comics") {
publisherLogo = require(`../assets/images/DC-Logo.png`);
logoShape = styles.publisherLogoSquare;
}
const activeLightboxProps = {
resizeMode: "contain",
marginHorizontal: 20,
flex: 1,
width: null,
};
// if (comicPicture) {
// comicPictureURL = require(comicPicture);
// }
function searchComic(firstComic) {
fetch(
`https://comicvine.gamespot.com/api/characters/?api_key=${apiComic.key}&sort=deck:desc&filter=name:${hero.name}&format=json`
)
.then((res) => {
if (res.status === 404) {
throw new Error("I didn't find this hero. Please try again!");
} else {
return res.json();
}
})
.then((result) => {
console.log("====================================");
console.log("NEW SEARCH");
console.log("====================================");
console.log(result.results);
});
}
function searchFirstComic() {
fetch(
`https://comicvine.gamespot.com/api/issue/4000-${firstIssue.id}/?api_key=${apiComic.key}&format=json`
)
.then((res) => {
if (res.status === 404) {
throw new Error("I didn't find this hero. Please try again!");
} else {
return res.json();
}
})
.then((result) => {
console.log("FIRST ISSUE DETAILS");
console.log(result.results.image.original_url);
// comicPicture = require(result.results[0].image.original_url);
// summary = result.results[0].deck;
});
}
// useEffect(() => {
// // console.log(publisherVine);
// // searchComic(hero.biography["first-appearance"]);
// // searchFirstComic();
// }, []);
return (
<View style={styles.appContainer}>
<StatusBar
translucent
backgroundColor="transparent"
barStyle="dark-content"
/>
<SafeAreaView
style={{ flex: 1, backgroundColor: "transparent" }}
forceInset={{ top: "always" }}
>
<Header title={""} backbutton={true} navigation={navigation} />
<Image source={image} style={styles.heroImage} />
<LinearGradient
colors={["#ffffff00", COLORS.beige]}
style={styles.bottomFade}
locations={[0.3, 1]}
/>
<View style={styles.heroInfoContainer}>
<View style={styles.heroTitleContainer}>
<Text style={styles.heroTitle}>{hero.name}</Text>
<View style={styles.heroHeader}>
<Text style={{ ...styles.h4, marginLeft: 3, fontSize: 16 }}>
{hero.biography["full-name"]}
</Text>
<Image source={publisherLogo} style={logoShape} />
</View>
</View>
<Divider
orientation="horizontal"
width={3}
style={{ ...styles.divider, marginBottom: 0 }}
color={COLORS.navy}
/>
<ScrollView
style={{ height: 340 }}
contentContainerStyle={{
width: "100%",
paddingBottom: 40,
marginTop: 10,
}}
showsVerticalScrollIndicator={false}
>
<Text
style={{
...styles.p,
fontSize: 12,
marginBottom: 20,
lineHeight: 18,
}}
>
{summary}
</Text>
{/********** STATS DETAILS ***************/}
<View
style={{
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "space-around",
alignItems: "center",
// backgroundColor: COLORS.grey,
borderRadius: 20,
// padding: 10,
marginBottom: 10,
}}
>
<View
style={{
alignItems: "center",
justifyContent: "center",
padding: 5,
}}
>
<AnimatedCircularProgress
size={60}
width={10}
duration={2000}
backgroundWidth={8}
rotation={-124}
arcSweepAngle={250}
fill={Number(hero.powerstats.intelligence)}
tintColor={COLORS.red}
tintColorSecondary={COLORS.green}
// onAnimationComplete={() => console.log("onAnimationComplete")}
backgroundColor={COLORS.navy}
padding={0}
lineCap={"round"}
// renderCap={({ center }) => (
// <Circle cx={center.x} cy={center.y} r="10" fill="blue" />
// )}
>
{(fill) => (
<Text
style={{
...styles.p,
fontFamily: "Flame-Regular",
left: 1,
}}
>
{Math.floor(fill)}
</Text>
)}
</AnimatedCircularProgress>
<Text
style={{
...styles.p,
fontFamily: "Flame-Regular",
fontSize: 10,
marginTop: -10,
}}
>
Intelligence
</Text>
</View>
<View
style={{
alignItems: "center",
justifyContent: "center",
padding: 5,
}}
>
<AnimatedCircularProgress
size={60}
width={10}
duration={2000}
backgroundWidth={8}
rotation={-124}
arcSweepAngle={250}
fill={Number(hero.powerstats.strength)}
tintColor={COLORS.red}
tintColorSecondary={COLORS.green}
// onAnimationComplete={() => console.log("onAnimationComplete")}
backgroundColor={COLORS.navy}
padding={0}
lineCap={"round"}
// renderCap={({ center }) => (
// <Circle cx={center.x} cy={center.y} r="10" fill="blue" />
// )}
>
{(fill) => (
<Text
style={{
...styles.p,
fontFamily: "Flame-Regular",
left: 1,
}}
>
{Math.floor(fill)}
</Text>
)}
</AnimatedCircularProgress>
<Text
style={{
...styles.p,
fontFamily: "Flame-Regular",
fontSize: 10,
marginTop: -10,
}}
>
Strength
</Text>
</View>
<View
style={{
alignItems: "center",
justifyContent: "center",
padding: 5,
}}
>
<AnimatedCircularProgress
size={60}
width={10}
duration={2000}
backgroundWidth={8}
rotation={-124}
arcSweepAngle={250}
fill={Number(hero.powerstats.speed)}
tintColor={COLORS.red}
tintColorSecondary={COLORS.green}
// onAnimationComplete={() => console.log("onAnimationComplete")}
backgroundColor={COLORS.navy}
padding={0}
lineCap={"round"}
// renderCap={({ center }) => (
// <Circle cx={center.x} cy={center.y} r="10" fill="blue" />
// )}
>
{(fill) => (
<Text
style={{
...styles.p,
fontFamily: "Flame-Regular",
left: 1,
}}
>
{Math.floor(fill)}
</Text>
)}
</AnimatedCircularProgress>
<Text
style={{
...styles.p,
fontFamily: "Flame-Regular",
fontSize: 10,
marginTop: -10,
}}
>
Speed
</Text>
</View>
<View
style={{
alignItems: "center",
justifyContent: "center",
padding: 5,
}}
>
<AnimatedCircularProgress
size={60}
width={10}
duration={2000}
backgroundWidth={8}
rotation={-124}
arcSweepAngle={250}
fill={Number(hero.powerstats.durability)}
tintColor={COLORS.red}
tintColorSecondary={COLORS.green}
// onAnimationComplete={() => console.log("onAnimationComplete")}
backgroundColor={COLORS.navy}
padding={0}
lineCap={"round"}
// renderCap={({ center }) => (
// <Circle cx={center.x} cy={center.y} r="10" fill="blue" />
// )}
>
{(fill) => (
<Text
style={{
...styles.p,
fontFamily: "Flame-Regular",
left: 1,
}}
>
{Math.floor(fill)}
</Text>
)}
</AnimatedCircularProgress>
<Text
style={{
...styles.p,
fontFamily: "Flame-Regular",
fontSize: 10,
marginTop: -10,
}}
>
Durability
</Text>
</View>
<View
style={{
alignItems: "center",
justifyContent: "center",
padding: 5,
}}
>
<AnimatedCircularProgress
size={60}
width={10}
duration={2000}
backgroundWidth={8}
rotation={-124}
arcSweepAngle={250}
fill={Number(hero.powerstats.power)}
tintColor={COLORS.red}
tintColorSecondary={COLORS.green}
// onAnimationComplete={() => console.log("onAnimationComplete")}
backgroundColor={COLORS.navy}
padding={0}
lineCap={"round"}
// renderCap={({ center }) => (
// <Circle cx={center.x} cy={center.y} r="10" fill="blue" />
// )}
>
{(fill) => (
<Text
style={{
...styles.p,
fontFamily: "Flame-Regular",
left: 1,
}}
>
{Math.floor(fill)}
</Text>
)}
</AnimatedCircularProgress>
<Text
style={{
...styles.p,
fontFamily: "Flame-Regular",
fontSize: 10,
marginTop: -10,
}}
>
Power
</Text>
</View>
<View
style={{
alignItems: "center",
justifyContent: "center",
padding: 5,
}}
>
<AnimatedCircularProgress
size={60}
width={10}
duration={2000}
backgroundWidth={8}
rotation={-124}
arcSweepAngle={250}
fill={Number(hero.powerstats.combat)}
tintColor={COLORS.red}
tintColorSecondary={COLORS.green}
// onAnimationComplete={() => console.log("onAnimationComplete")}
backgroundColor={COLORS.navy}
padding={0}
lineCap={"round"}
// renderCap={({ center }) => (
// <Circle cx={center.x} cy={center.y} r="10" fill="blue" />
// )}
>
{(fill) => (
<Text
style={{
...styles.p,
fontFamily: "Flame-Regular",
left: 1,
}}
>
{Math.floor(fill)}
</Text>
)}
</AnimatedCircularProgress>
<Text
style={{
...styles.p,
fontFamily: "Flame-Regular",
fontSize: 10,
marginTop: -10,
}}
>
Combat
</Text>
</View>
</View>
{/********** BIOGRAPHY DETAILS ***************/}
<View style={styles.heroDetailsContainer}>
<Text style={{ ...styles.h2 }}>Biography</Text>
<Divider
orientation="horizontal"
width={2}
inset={true}
style={styles.divider}
color={COLORS.navy}
/>
{Object.entries(hero.biography).map(([key, value, index]) => {
// console.log(`${key}: ${value}`);
let str = value.toString();
if (
key != "full-name" &&
key != "place-of-birth" &&
key != "first-appearance" &&
key != "alter-egos" &&
"No alter egos found."
) {
str = str.replace(/,|;\s*(?![^()]*\))/g, "\n\u2022 ");
}
return (
<View
key={index}
style={{
flexDirection:
key == "aliases" || key == "alter-egos"
? "column"
: "row",
justifyContent: "space-between",
alignItems: "flex-start",
flexWrap: "wrap",
marginBottom: 5,
}}
>
<Text style={styles.h4}>{key}:</Text>
{str.split(`/,[s]*/g, ", "`).map((value) => (
<Text
style={{ ...styles.p, textTransform: "capitalize" }}
>
{key == "alter-egos" || key == "aliases"
? "\u2022 " + value
: value && value == "-"
? "unknown"
: value}
</Text>
))}
</View>
);
})}
</View>
{/********** COMIC PICTURE ***************/}
<View style={styles.comicPictureContainer}>
{firstIssueURL ? (
<Lightbox
// renderHeader={() => {
// return (
// <View
// style={{
// justifyContent: "center",
// alignItems: "flex-start",
// paddingHorizontal: 15,
// top: 70,
// }}
// >
// <Text
// style={{ ...styles.heroTitle, color: COLORS.beige }}
// >
// First Issue
// </Text>
// </View>
// );
// }}
activeProps={activeLightboxProps}
>
<Image
source={{
uri: firstIssueURL,
}}
style={styles.comicPicture}
/>
</Lightbox>
) : (
<Text style={styles.h4}>NO PICTURE</Text>
)}
</View>
{/********** APPEARANCE DETAILS ***************/}
<View style={styles.heroDetailsContainer}>
<Text style={{ ...styles.h2 }}>Appearence</Text>
<Divider
orientation="horizontal"
width={2}
inset={true}
style={styles.divider}
color={COLORS.navy}
/>
{Object.entries(hero.appearance).map(([key, value, index]) => {
// console.log(`${key}: ${value}`);
const str = value.toString();
return (
<View
key={index}
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "stretch",
flexWrap: "wrap",
}}
>
<Text style={styles.h4}>{key}:</Text>
<Text style={{ ...styles.p, marginTop: -2 }}>
{str
.split(`/,[s]*/g, ", "`)
.map((value) =>
str.includes(",") ? (
<Text>{value.replace(/,(?=[^\s])/g, ", ")}</Text>
) : (
<Text>{value}</Text>
)
)}
</Text>
</View>
);
})}
</View>
{/********** WORK DETAILS ***************/}
<View style={styles.heroDetailsContainer}>
<Text style={{ ...styles.h2 }}>Work</Text>
<Divider
orientation="horizontal"
width={2}
inset={true}
style={styles.divider}
color={COLORS.navy}
/>
{Object.entries(hero.work).map(([key, value, index]) => {
// console.log(`${key}: ${value}`);
let str = value;
if (key != "base") {
str = str.replace(/,|;\s*(?![^()]*\))/g, "\n\u2022 ");
}
return (
<View
key={index}
style={{
flexDirection: key == "base" ? "row" : "column",
justifyContent: "space-between",
alignItems: key == "base" ? "stretch" : "flex-start",
flexWrap: "wrap",
marginBottom: 5,
}}
>
<Text style={{ ...styles.h4, marginBottom: 4 }}>
{key}:
</Text>
{str.split(`/,[s]*/g, ", "`).map((value) => (
<Text
style={{
...styles.p,
textTransform: "capitalize",
lineHeight: key == "occupation" ? 20 : 0,
marginTop: -2,
}}
>
{key == "base"
? value
: "\u2022 " + value && value != "-"
? "\u2022 " + value
: "unknown"}
</Text>
))}
</View>
);
})}
</View>
{/********** CONNECTIONS DETAILS ***************/}
<View style={styles.heroDetailsContainer}>
<Text style={{ ...styles.h2 }}>Connections</Text>
<Divider
orientation="horizontal"
width={2}
inset={true}
style={styles.divider}
color={COLORS.navy}
/>
{Object.entries(hero.connections).map(([key, value, index]) => {
// console.log(`${key}: ${value}`);
let str = value.toString();
if (key == "group-affiliation") {
str = value.replace(/,|;\s*(?![^()]*\))/g, "\n\u2022 ");
} else {
str = value.replace(/,|;\s*(?![^()]*\))/g, "\n\u2022 ");
}
// const firstLetter = str.charAt(0).toUpperCase() + str.slice(1);
return (
<View
key={index}
style={{
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
flexWrap: "wrap",
marginBottom: 5,
}}
>
<Text style={styles.h4}>{key}:</Text>
{str.split(`/,[s]*/g, ", "`).map((value) => (
<Text
style={{
...styles.p,
textTransform: "capitalize",
lineHeight: 24,
}}
>
{value != "-" ? "\u2022 " + value : "unknown"}
</Text>
))}
</View>
);
})}
</View>
</ScrollView>
<LinearGradient
colors={["#ffffff00", COLORS.beige]}
style={styles.bottomFadeInfo}
locations={[0.8, 1]}
pointerEvents={"none"}
/>
</View>
</SafeAreaView>
</View>
);
}
Example #9
| Source File: index.js From spree-react-native with MIT License | 4 votes |
|
PaymentScreen = ({ navigation, dispatch, saving, cart }) => {
const [cardNumber, setCardNumber] = useState('4111111111111111')
const [nameOnCard, setNameOnCard] = useState('John Snow')
const [validThru, setValidThru] = useState('01/2022')
const [cvvInput, setCvvInput] = useState('123')
const [expanded, setExpanded] = useState(true);
const toggleExpanded = () => setExpanded(!expanded);
const [accordionExpanded2, setAccordionExpanded2] = useState(false);
const toggleAccordionExpanded2 = () => setAccordionExpanded2(!accordionExpanded2);
const [windowWidth] = useState(Dimensions.get('window').width)
const [overlayVisible, setOverlayVisible] = useState(false);
const toggleOverlay = () => {
setOverlayVisible(!overlayVisible);
};
const handlePaymentConfirmation = async () => {
await dispatch(updateCheckout(
{
order: {
payments_attributes: [
{
payment_method_id: 2,
source_attributes: {
number: cardNumber,
month: '01',
year: '2022',
verification_value: cvvInput,
name: nameOnCard
}
}
]
}
}
))
await dispatch(completeCheckout())
await dispatch(createCart())
toggleOverlay()
}
if(saving) {
return (
<ActivityIndicatorCard />
)
} else
return (
<View style={ globalStyles.containerFluid }>
<Overlay isVisible={overlayVisible} onBackdropPress={toggleOverlay} fullScreen={true}>
<View style={[globalStyles.container, styles.modalContainer]}>
<View style={styles.modalCloseIcon}>
<Close size={24} style={{color: colors.black}} onPress={toggleOverlay} />
</View>
<View style={{ alignItems: 'center' }}>
<Image source={require('../../../../../../assets/images/order-icon-confirm/order-icon-confirm.png')} />
<Text style={globalStyles.title}>Order Success!</Text>
<Text style={[globalStyles.label, { fontSize: 15, textAlign: 'center'}]}>Your order has been placed successfully! for more details check your account. </Text>
</View>
<View>
<Button
title="Continue Shopping"
type="outline"
buttonStyle={[ globalStyles.btn, styles.btnOutlined]}
titleStyle={styles.titleStyle}
onPress={() => navigation.navigate('Shop')}
/>
</View>
</View>
</Overlay>
<ScrollView>
{/* Status Bar Starts */}
<View style={checkoutStyles.statusBarWrapper}>
<View style={checkoutStyles.statusBarContainer}>
<View style={[ checkoutStyles.rowContainer, { alignItems: 'center'} ]}>
<CheckO size={16} style={[checkoutStyles.iconStyle, {color: colors.success}]} />
<Text style={ globalStyles.latoRegular, {color: colors.success}}>Bag</Text>
</View>
<View
style={[checkoutStyles.shippingIndicatorLine, {
borderBottomColor: colors.success,
}]}
/>
<View style={[ checkoutStyles.rowContainer, { alignItems: 'center'} ]}>
<CheckO size={16} style={[checkoutStyles.iconStyle, {color: colors.success}]} />
<Text style={ globalStyles.latoRegular, {color: colors.success}}>Address</Text>
</View>
<View
style={[checkoutStyles.shippingIndicatorLine, {
borderBottomColor: colors.success,
}]}
/>
<View style={[ checkoutStyles.rowContainer, { alignItems: 'center'} ]}>
<CheckO size={16} style={[checkoutStyles.iconStyle, {color: colors.black}]} />
<Text style={ globalStyles.latoRegular }>Payment</Text>
</View>
</View>
</View>
{/* Status Bar Ends */}
<View style={[globalStyles.containerFluid, globalStyles.bgWhite, globalStyles.mt16]}>
<View style={[ globalStyles.container, globalStyles.mt8 ]}>
<Text style={globalStyles.latoBold14}>Payment Type</Text>
</View>
<Divider style={styles.dividerStyle} />
{/*Code for Single Collapsible Start*/}
<TouchableOpacity style={globalStyles.container} onPress={toggleExpanded}>
<View style={styles.accordionSelectorContainer} onPress={toggleExpanded}>
<Dollar size={16} style={{color: colors.black}} />
<Text style={styles.accordionSelectorTitle}>Pay on Delivery</Text>
{
expanded
? <ChevronDown size={16} style={{color: colors.black}} />
: <ChevronUp size={16} style={{color: colors.black}} />
}
</View>
</TouchableOpacity>
{/*Content of Single Collapsible*/}
<Collapsible collapsed={expanded} align="center">
<View style={styles.content}>
<Text style={{ textAlign: 'center' }}>
This is a dummy text of Single Collapsible View
</Text>
</View>
</Collapsible>
{/*Code for Single Collapsible Ends*/}
{/*Code for Single Collapsible Start*/}
<TouchableOpacity style={globalStyles.container} onPress={toggleAccordionExpanded2}>
<View style={styles.accordionSelectorContainer}>
<CreditCard size={16} style={{color: colors.black}} />
<Text style={styles.accordionSelectorTitle}>Credit/Debit Card</Text>
{
accordionExpanded2
? <ChevronDown size={16} style={{color: colors.black}} />
: <ChevronUp size={16} style={{color: colors.black}} />
}
</View>
</TouchableOpacity>
{/*Content of Single Collapsible*/}
<Collapsible collapsed={accordionExpanded2} align="center" style={globalStyles.container}>
<TextField
placeholder="Card Number"
containerStyle={checkoutStyles.inputWrapperStyle}
rightElement={<CreditCard size={18} style={{color: colors.black}} />}
onChangeText={setCardNumber}
value={cardNumber}
/>
<TextField
placeholder="Name on Card"
containerStyle={checkoutStyles.inputWrapperStyle}
onChangeText={setNameOnCard}
value={nameOnCard}
/>
<View style={[styles.rowContainer, styles.inlineContainer]}>
<TextField
value={validThru}
placeholder="Valid Thru (MM/YY)"
inputStyle={styles.inputStyle}
containerStyle={[styles.containerStyle, {
borderWidth: 1,
width: windowWidth / 2.3
}]}
inputContainerStyle={styles.inputContainerStyle}
onChangeText={setValidThru}
/>
<TextField
value={cvvInput}
placeholder="CVV"
inputStyle={styles.inputStyle}
containerStyle={[styles.containerStyle, {
borderWidth: 1,
width: windowWidth / 2.3
}]}
inputContainerStyle={styles.inputContainerStyle}
onChangeText={setCvvInput}
/>
</View>
<View style={[styles.rowContainer, globalStyles.mt16, globalStyles.mb16]}>
<CheckR size={16} style={styles.iconStyle} />
<Text style={[styles.label]}>Save Card</Text>
</View>
</Collapsible>
{/*Code for Single Collapsible Ends*/}
</View>
<CheckoutDetailsCard title="Order Total" display_total={cart.display_item_total} />
</ScrollView>
<ActionButtonFooter
title="Payment & Confirm"
onPress={handlePaymentConfirmation}
/>
</View>
)
}
Example #10
| Source File: index.js From spree-react-native with MIT License | 4 votes |
|
ProductDetailScreen = ({ dispatch, product, auth, saving }) => {
const [pincode, setPincode] = useState('')
const [isVariantSelected, setIsVariantSelected] = useState(true)
const [activeColor, setActiveColor] = useState(product.default_variant.option_values[0].presentation)
const [activeSize, setActiveSize] = useState('')
const [selectedVariant, setSelectedVariant] = useState({})
const [imageURI, setImageURI] = useState(`${HOST}/${product.variants[0].images[0].styles[3].url}`)
const [snackbarVisible, setSnackbarVisible] = useState(false)
const [variantDistinctColors] = useState([...new Set(product.variants.map(variant => variant.option_values[0].presentation))])
const handleColorSelection = ({index, color}) => {
setActiveColor(color)
setActiveSize('')
setSelectedVariant({})
setIsVariantSelected(true)
setImageURI(`${HOST}/${product.variants[index].images[0].styles[3].url}`)
}
const handleAddToBag = () => {
dispatch(addItem(
{
variant_id: selectedVariant.id,
quantity: 1,
}
))
// setSnackbarVisible(true)
}
if(saving) {
return (
<ActivityIndicatorCard />
)
} else
return (
<>
<ScrollView style={globalStyles.containerFluid}>
<MyCarousel key={imageURI} imageURI={imageURI} />
<View style={ styles.containerFluid }>
<View style={[ globalStyles.container, globalStyles.pb16 ]}>
<Text style={ globalStyles.latoBold18 }>{ product.name }</Text>
<Text style={ styles.description }>{ product.description }</Text>
<View style={[ styles.pricingContainer, globalStyles.mt8 ]}>
<Text style={ styles.discountedPrice }>{ product.display_price }</Text>
<Text style={ styles.price }>$32.90</Text>
<Text style={ styles.discountPercent }>(20% OFF)</Text>
<Text style={[ globalStyles.latoBold14, globalStyles.textSuccess ]}>Inclusive of all taxes</Text>
</View>
</View>
</View>
<View style={[ styles.containerFluid, globalStyles.mt16 ]}>
<View style={[ globalStyles.container, globalStyles.pv8 ]}>
<Text style={ globalStyles.latoBold14 }>You get it for
<Text style={[ globalStyles.prices, globalStyles.textPrimary ]}> $25.49</Text>
<Text style={[ globalStyles.prices, globalStyles.textSuccess ]}> (Save $4.50)</Text>
</Text>
</View>
</View>
<View style={[ styles.containerFluid, globalStyles.mt8 ]}>
<View style={[ globalStyles.container, globalStyles.pv8 ]}>
<View style={styles.rowContainer}>
<Button
title="Save For Later"
type="outline"
disabled={isVariantSelected}
disabledStyle={{ borderColor: colors.gray, color: colors.gray }}
containerStyle={{ flex: 1, marginRight: 16 }}
buttonStyle={globalStyles.btn}
titleStyle={styles.titleStyle}
onPress={() => dispatch(setProductFavourite(selectedVariant))}
/>
<Button
title="Add To Bag"
type="solid"
disabled={isVariantSelected}
disabledStyle={{ backgroundColor: colors.gray }}
disabledTitleStyle={{ color: colors.white }}
containerStyle={{flex: 1}}
buttonStyle={[ globalStyles.btn, globalStyles.btnSolid ]}
onPress={handleAddToBag}
/>
</View>
<View style={ globalStyles.mt16 }>
<Text style={ globalStyles.latoBold14 }>Select Color</Text>
<ScrollView horizontal={true} style={[ styles.rowContainer, globalStyles.mt8 ]}>
{
variantDistinctColors.map((color, index) => (
<Avatar
key={index}
size="small"
rounded
onPress={() => handleColorSelection(
{
index: index,
color: color
}
)}
containerStyle={{
backgroundColor: `${color}`,
marginRight: 16,
borderWidth: 1,
padding: 1,
borderColor: color !== activeColor ? colors.gray : colors.primary
}}
/>
))
}
</ScrollView>
</View>
<View>
{activeColor ? <View style={[ styles.sizingTitleContainer, globalStyles.mt16 ]}>
<Text style={[ globalStyles.latoBold14, globalStyles.textDark ]}>Select Size</Text>
<Text style={[ globalStyles.latoBold14, globalStyles.textPrimary ]}>Size Help?</Text>
</View> : null }
<View style={[ styles.rowContainer, globalStyles.mt8 ]}>
{
product.variants.map((variant, index) => {
if(variant.option_values[0].presentation === activeColor) {
return <Avatar
key={index}
size="small"
title={`${variant.option_values[1].presentation}`}
onPress={() => {
setActiveSize(variant.option_values[1].presentation)
setSelectedVariant(variant)
setIsVariantSelected(false)
}
}
rounded
activeOpacity={0.7}
containerStyle={{
backgroundColor: colors.white,
marginRight: 16,
borderColor: variant.option_values[1].presentation !== activeSize ? colors.black : colors.primary,
borderWidth: 1
}}
titleStyle={[globalStyles.latoBold14,
variant.option_values[1].presentation !== activeSize ? globalStyles.textDark : globalStyles.textPrimary
]}
/>
} else { return null }
})
}
</View>
</View>
</View>
</View>
<View style={[ styles.containerFluid, globalStyles.mt8, globalStyles.pv8 ]}>
<View style={ globalStyles.container }>
<View>
<Text style={ globalStyles.latoBold14 }>Product Detail & Care</Text>
<View style={[ styles.unorderedListItem, globalStyles.mt8 ]}>
{
product.product_properties.map(property => (
<Text key={property.id} style={globalStyles.label}>
{'\u2022'} {capitalizeFirstLetter(property.name)}: {property.value}
</Text>
))
}
</View>
</View>
<View style={ globalStyles.mt16 }>
<Text style={ globalStyles.latoBold14 }>Description</Text>
<Text style={[ globalStyles.label, globalStyles.mt8 ]}>
{ product.description }
</Text>
</View>
<View style={ globalStyles.mt16 }>
<Text style={ globalStyles.latoBold14 }>Manufacturer</Text>
<Text style={[ globalStyles.label, globalStyles.mt8 ]}>Freeway Clothing Co, 768/1, Vijaynagar, New Delhi 116708</Text>
</View>
<View style={ globalStyles.mt16 }>
<Text style={ globalStyles.latoBold14 }>Manufacturer Country</Text>
<Text style={[ globalStyles.label, globalStyles.mt8 ]}>India</Text>
</View>
</View>
</View>
<View style={[ styles.containerFluid, globalStyles.mt8, globalStyles.pv8 ]}>
<View style={ globalStyles.container }>
<Text style={ globalStyles.latoBold14 }>Customer Reviews (309)</Text>
{
[{
id: 0,
review: 'Purchasing the dress online was super easy and they were delivered quick. My partner absolutely loves his new dress! Perfect! All she had to do was swap them over with his old party dress.',
reviewer: 'Devendar Rathore',
date: 'Aug 19, 2020',
likes: 16,
dislikes: 7
},
{
id: 1,
review: 'My old dress was become dull and stale. But this new dress is super amazing and fits nicely to me. Thanks for super quick delivery and good service.',
reviewer: 'Devendar Rathore',
date: 'Aug 19, 2020',
likes: 46,
dislikes: 6
}].map((item, i, arr) => (
<View key={item.id} style={ globalStyles.pv8 }>
<Text style={globalStyles.latoRegular}>{ item.review }</Text>
<View style={styles.reviewFooter}>
<Text style={globalStyles.label}>{ item.reviewer } | { item.date }</Text>
<View style={styles.likesDislikesContainer}>
<View style={styles.likesContainer}>
<Smile size={20} style={{color: colors.gray}}/>
<Text style={globalStyles.label}> { item.likes }</Text>
</View>
<View style={styles.likesContainer}>
<SmileSad size={20} style={{color: colors.gray}}/>
<Text style={globalStyles.label}> { item.dislikes }</Text>
</View>
</View>
</View>
{ i !== arr.length - 1 && <Divider style={styles.reviewBorder} /> }
</View>
))
}
<TouchableOpacity>
<Text style={styles.reviewFooterAction}>View All (309)</Text>
</TouchableOpacity>
</View>
</View>
<View style={[ styles.containerFluid, globalStyles.mt8, globalStyles.pv8 ]}>
<View style={ globalStyles.container }>
<Text style={[ globalStyles.latoBold14, globalStyles.mb8 ]}>Check Delivery</Text>
<TextField
placeholder=" Enter PIN Code"
containerStyle={styles.inputWrapperStyle}
rightElement={<Text style={styles.inputRight}>Check</Text>}
onChangeText={setPincode}
value={pincode}
/>
<View style={ styles.deliveryOffersContainer }>
<ShoppingCart size={18} style={[styles.deliveryOffersIcon, {transform: [{ rotateY: '180deg' }]} ]}/>
<Text style={ globalStyles.latoBold14 }>Delivery by Thursday, Sep 05</Text>
</View>
<View style={ styles.deliveryOffersContainer }>
<Dollar size={18} style={ styles.deliveryOffersIcon }/>
<Text style={ globalStyles.latoBold14 }>Cash on delivery available</Text>
</View>
<View style={ styles.deliveryOffersContainer }>
<Repeat size={18} style={ styles.deliveryOffersIcon }/>
<Text style={ globalStyles.latoBold14 }>Return & exchange available within 10 days</Text>
</View>
</View>
</View>
<View style={[ styles.containerFluid, globalStyles.mt8, globalStyles.pv16 ]}>
<View style={globalStyles.container}>
<View style={styles.alikeProductsHeader}>
<Text style={[ globalStyles.latoBold14, globalStyles.mb16 ]}>Your might also like</Text>
<Text style={[ globalStyles.label, globalStyles.latoBold14 ]}>12 more</Text>
</View>
</View>
<ScrollView horizontal={true} style={styles.carouselProductsContainer}>
<CarouselProductCard imageURI={imageURI} />
<CarouselProductCard imageURI={imageURI} />
<CarouselProductCard imageURI={imageURI} />
</ScrollView>
</View>
<View style={styles.footerContainer}>
<View style={styles.footerItemListContainer}>
<View style={styles.footerItemContainer}>
<CustomIconTruck size={32} style={styles.footerIcon} />
<Text style={styles.footerText}>Fastest Delivery</Text>
</View>
<View style={styles.footerItemContainer}>
<CustomIconOriginal size={32} style={styles.footerIcon} />
<Text style={styles.footerText}>100% Original</Text>
</View>
<View style={styles.footerItemContainer}>
<IcOutlineAssignmentReturn size={32} style={styles.footerIcon} />
<Text style={styles.footerText}>Easy Returns</Text>
</View>
<View style={styles.footerItemContainer}>
<RiSecurePaymentFill size={32} style={styles.footerIcon} />
<Text style={styles.footerText}>Secure Payment</Text>
</View>
</View>
</View>
</ScrollView>
<Snackbar
visible={snackbarVisible}
duration={2000}
>
Added to Bag !
</Snackbar>
</>
)
}
