fergalmoran/argon-react-native
1
0
Fork 0
mirror of https://github.com/fergalmoran/argon-react-native.git synced 2025-12-25 02:39:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dependencies updated & Stack navigator issues fixed

Browse Source
This commit is contained in:
symphony-dev
2022-04-06 14:21:17 +05:00
parent 3f62b1867a
commit 92eaadbb19
4 changed files with 143 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
navigation/Menu.js
View File

@@ -1,26 +1,23 @@
import React from "react";
import {
ScrollView,
StyleSheet,
Image
} from "react-native";
import { Block, Text, theme } from "galio-framework"; import { Block, Text, theme } from "galio-framework";
import { Image, ScrollView, StyleSheet } from "react-native";
import { DrawerItem as DrawerCustomItem } from "../components";
import Images from "../constants/Images"; import Images from "../constants/Images";
import { DrawerItem as DrawerCustomItem } from '../components'; import React from "react";
function CustomDrawerContent({ drawerPosition, navigation, profile, focused, state, ...rest }) { function CustomDrawerContent({
const screens = [ drawerPosition,
"Home", navigation,
"Profile", profile,
"Account", focused,
"Elements", state,
"Articles", ...rest
]; }) {
const screens = ["Home", "Profile", "Account", "Elements", "Articles"];
return ( return (
<Block <Block
style={styles.container} style={styles.container}
forceInset={{ top: 'always', horizontal: 'never' }} forceInset={{ top: "always", horizontal: "never" }}
> >
<Block flex={0.06} style={styles.header}> <Block flex={0.06} style={styles.header}>
<Image styles={styles.logo} source={Images.Logo} /> <Image styles={styles.logo} source={Images.Logo} />
@@ -37,9 +34,20 @@ function CustomDrawerContent({ drawerPosition, navigation, profile, focused, sta
/> />
); );
})} })}
<Block flex style={{ marginTop: 24, marginVertical: 8, paddingHorizontal: 8 }}> <Block
<Block style={{ borderColor: "rgba(0,0,0,0.2)", width: '100%', borderWidth: StyleSheet.hairlineWidth }}/> flex
<Text color="#8898AA" style={{ marginTop: 16, marginLeft: 8 }}>DOCUMENTATION</Text> style={{ marginTop: 24, marginVertical: 8, paddingHorizontal: 8 }}
>
<Block
style={{
borderColor: "rgba(0,0,0,0.2)",
width: "100%",
borderWidth: StyleSheet.hairlineWidth,
}}
/>
<Text color="#8898AA" style={{ marginTop: 16, marginLeft: 8 }}>
DOCUMENTATION
</Text>
</Block> </Block>
<DrawerCustomItem title="Getting Started" navigation={navigation} /> <DrawerCustomItem title="Getting Started" navigation={navigation} />
</ScrollView> </ScrollView>
@@ -48,7 +56,6 @@ function CustomDrawerContent({ drawerPosition, navigation, profile, focused, sta
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
@@ -57,8 +64,8 @@ const styles = StyleSheet.create({
paddingHorizontal: 28, paddingHorizontal: 28,
paddingBottom: theme.SIZES.BASE, paddingBottom: theme.SIZES.BASE,
paddingTop: theme.SIZES.BASE * 3, paddingTop: theme.SIZES.BASE * 3,
justifyContent: 'center' justifyContent: "center",
} },
}); });
export default CustomDrawerContent; export default CustomDrawerContent;

29
navigation/Screens.js
View File

@@ -66,7 +66,12 @@ function ElementsStack(props) {
function ArticlesStack(props) { function ArticlesStack(props) {
return ( return (
<Stack.Navigator mode="card" headerMode="screen"> <Stack.Navigator
screenOptions={{
mode: "card",
headerShown: "screen",
}}
>
<Stack.Screen <Stack.Screen
name="Articles" name="Articles"
component={Articles} component={Articles}
@@ -100,7 +105,13 @@ function ArticlesStack(props) {
function ProfileStack(props) { function ProfileStack(props) {
return ( return (
<Stack.Navigator initialRouteName="Profile" mode="card" headerMode="screen"> <Stack.Navigator
initialRouteName="Profile"
screenOptions={{
mode: "card",
headerShown: "screen",
}}
>
<Stack.Screen <Stack.Screen
name="Profile" name="Profile"
component={Profile} component={Profile}
@@ -141,7 +152,12 @@ function ProfileStack(props) {
function HomeStack(props) { function HomeStack(props) {
return ( return (
<Stack.Navigator mode="card" headerMode="screen"> <Stack.Navigator
screenOptions={{
mode: "card",
headerShown: "screen",
}}
>
<Stack.Screen <Stack.Screen
name="Home" name="Home"
component={Home} component={Home}
@@ -181,7 +197,12 @@ function HomeStack(props) {
export default function OnboardingStack(props) { export default function OnboardingStack(props) {
return ( return (
<Stack.Navigator mode="card" headerMode="none"> <Stack.Navigator
screenOptions={{
mode: "card",
headerShown: false,
}}
>
<Stack.Screen <Stack.Screen
name="Onboarding" name="Onboarding"
component={Onboarding} component={Onboarding}

59
screens/Articles.js
View File

@@ -1,17 +1,18 @@
import React from "react";
import {
ScrollView,
StyleSheet,
Image,
TouchableWithoutFeedback,
ImageBackground,
Dimensions
} from "react-native";
//galio //galio
import { Block, Text, theme } from "galio-framework"; import { Block, Text, theme } from "galio-framework";
import {
Dimensions,
Image,
ImageBackground,
ScrollView,
StyleSheet,
TouchableWithoutFeedback,
} from "react-native";
//argon //argon
import { articles, Images, argonTheme } from "../constants/"; import { Images, argonTheme, articles } from "../constants/";
import { Card } from "../components/"; import { Card } from "../components/";
import React from "react";
const { width } = Dimensions.get("screen"); const { width } = Dimensions.get("screen");
@@ -24,7 +25,7 @@ const categories = [
"Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.", "Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
image: image:
"https://images.unsplash.com/photo-1470225620780-dba8ba36b745?fit=crop&w=840&q=80", "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?fit=crop&w=840&q=80",
price: "$125" price: "$125",
}, },
{ {
title: "Events", title: "Events",
@@ -32,8 +33,8 @@ const categories = [
"Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.", "Rock music is a genre of popular music. It developed during and after the 1960s in the United Kingdom.",
image: image:
"https://images.unsplash.com/photo-1543747579-795b9c2c3ada?fit=crop&w=840&q=80", "https://images.unsplash.com/photo-1543747579-795b9c2c3ada?fit=crop&w=840&q=80",
price: "$35" price: "$35",
} },
]; ];
class Articles extends React.Component { class Articles extends React.Component {
@@ -100,11 +101,11 @@ class Articles extends React.Component {
source={{ uri: Images.Products["View article"] }} source={{ uri: Images.Products["View article"] }}
style={[ style={[
styles.imageBlock, styles.imageBlock,
{ width: width - theme.SIZES.BASE * 2, height: 252 } { width: width - theme.SIZES.BASE * 2, height: 252 },
]} ]}
imageStyle={{ imageStyle={{
width: width - theme.SIZES.BASE * 2, width: width - theme.SIZES.BASE * 2,
height: 252 height: 252,
}} }}
> >
<Block style={styles.categoryTitle}> <Block style={styles.categoryTitle}>
@@ -125,7 +126,7 @@ class Articles extends React.Component {
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
snapToInterval={cardWidth + theme.SIZES.BASE * 0.375} snapToInterval={cardWidth + theme.SIZES.BASE * 0.375}
contentContainerStyle={{ contentContainerStyle={{
paddingHorizontal: theme.SIZES.BASE / 2 paddingHorizontal: theme.SIZES.BASE / 2,
}} }}
> >
{categories && {categories &&
@@ -183,9 +184,7 @@ class Articles extends React.Component {
render() { render() {
return ( return (
<Block flex center> <Block flex center>
<ScrollView <ScrollView showsVerticalScrollIndicator={false}>
showsVerticalScrollIndicator={false}
>
{this.renderCards()} {this.renderCards()}
{this.renderAlbum()} {this.renderAlbum()}
</ScrollView> </ScrollView>
@@ -199,33 +198,33 @@ const styles = StyleSheet.create({
paddingBottom: theme.SIZES.BASE, paddingBottom: theme.SIZES.BASE,
paddingHorizontal: theme.SIZES.BASE * 2, paddingHorizontal: theme.SIZES.BASE * 2,
marginTop: 22, marginTop: 22,
color: argonTheme.COLORS.HEADER color: argonTheme.COLORS.HEADER,
}, },
group: { group: {
paddingTop: theme.SIZES.BASE paddingTop: theme.SIZES.BASE,
}, },
albumThumb: { albumThumb: {
borderRadius: 4, borderRadius: 4,
marginVertical: 4, marginVertical: 4,
alignSelf: "center", alignSelf: "center",
width: thumbMeasure, width: thumbMeasure,
height: thumbMeasure height: thumbMeasure,
}, },
category: { category: {
backgroundColor: theme.COLORS.WHITE, backgroundColor: theme.COLORS.WHITE,
marginVertical: theme.SIZES.BASE / 2, marginVertical: theme.SIZES.BASE / 2,
borderWidth: 0 borderWidth: 0,
}, },
categoryTitle: { categoryTitle: {
height: "100%", height: "100%",
paddingHorizontal: theme.SIZES.BASE, paddingHorizontal: theme.SIZES.BASE,
backgroundColor: "rgba(0, 0, 0, 0.5)", backgroundColor: "rgba(0, 0, 0, 0.5)",
justifyContent: "center", justifyContent: "center",
alignItems: "center" alignItems: "center",
}, },
imageBlock: { imageBlock: {
overflow: "hidden", overflow: "hidden",
borderRadius: 4 borderRadius: 4,
}, },
productItem: { productItem: {
width: cardWidth - theme.SIZES.BASE * 2, width: cardWidth - theme.SIZES.BASE * 2,
@@ -233,21 +232,21 @@ const styles = StyleSheet.create({
shadowColor: "black", shadowColor: "black",
shadowOffset: { width: 0, height: 7 }, shadowOffset: { width: 0, height: 7 },
shadowRadius: 10, shadowRadius: 10,
shadowOpacity: 0.2 shadowOpacity: 0.2,
}, },
productImage: { productImage: {
width: cardWidth - theme.SIZES.BASE, width: cardWidth - theme.SIZES.BASE,
height: cardWidth - theme.SIZES.BASE, height: cardWidth - theme.SIZES.BASE,
borderRadius: 3 borderRadius: 3,
}, },
productPrice: { productPrice: {
paddingTop: theme.SIZES.BASE, paddingTop: theme.SIZES.BASE,
paddingBottom: theme.SIZES.BASE / 2 paddingBottom: theme.SIZES.BASE / 2,
}, },
productDescription: { productDescription: {
paddingTop: theme.SIZES.BASE paddingTop: theme.SIZES.BASE,
// paddingBottom: theme.SIZES.BASE * 2, // paddingBottom: theme.SIZES.BASE * 2,
} },
}); });
export default Articles; export default Articles;

72
screens/Elements.js
View File

@@ -1,20 +1,26 @@
import React from "react";
import { ScrollView, StyleSheet, Dimensions, TouchableOpacity } from "react-native";
// Galio components // Galio components
import { Block, Text, Button as GaButton, theme } from "galio-framework"; import { Block, Button as GaButton, Text, theme } from "galio-framework";
import { Button, Header, Icon, Input, Select, Switch } from "../components/";
import {
Dimensions,
ScrollView,
StyleSheet,
TouchableOpacity,
} from "react-native";
// Argon themed components // Argon themed components
import { argonTheme, tabs } from "../constants/"; import { argonTheme, tabs } from "../constants/";
import { Button, Select, Icon, Input, Header, Switch } from "../components/";
import React from "react";
const { width } = Dimensions.get("screen"); const { width } = Dimensions.get("screen");
class Elements extends React.Component { class Elements extends React.Component {
state = { state = {
"switch-1": true, "switch-1": true,
"switch-2": false "switch-2": false,
}; };
toggleSwitch = switchId => toggleSwitch = (switchId) =>
this.setState({ [switchId]: !this.state[switchId] }); this.setState({ [switchId]: !this.state[switchId] });
renderButtons = () => { renderButtons = () => {
@@ -155,7 +161,7 @@ class Elements extends React.Component {
style={{ style={{
borderColor: argonTheme.COLORS.INFO, borderColor: argonTheme.COLORS.INFO,
borderRadius: 4, borderRadius: 4,
backgroundColor: "#fff" backgroundColor: "#fff",
}} }}
iconContent={<Block />} iconContent={<Block />}
/> />
@@ -200,7 +206,7 @@ class Elements extends React.Component {
width: 20, width: 20,
height: 20, height: 20,
borderRadius: 10, borderRadius: 10,
backgroundColor: argonTheme.COLORS.INPUT_SUCCESS backgroundColor: argonTheme.COLORS.INPUT_SUCCESS,
}} }}
> >
<Icon <Icon
@@ -225,7 +231,7 @@ class Elements extends React.Component {
width: 20, width: 20,
height: 20, height: 20,
borderRadius: 10, borderRadius: 10,
backgroundColor: argonTheme.COLORS.INPUT_ERROR backgroundColor: argonTheme.COLORS.INPUT_ERROR,
}} }}
> >
<Icon <Icon
@@ -363,7 +369,15 @@ class Elements extends React.Component {
</Block> </Block>
<Block style={{ marginBottom: theme.SIZES.BASE }}> <Block style={{ marginBottom: theme.SIZES.BASE }}>
<Header white back title="Title" navigation={this.props.navigation} bgColor={argonTheme.COLORS.ACTIVE} titleColor="white" iconColor="white" /> <Header
white
back
title="Title"
navigation={this.props.navigation}
bgColor={argonTheme.COLORS.ACTIVE}
titleColor="white"
iconColor="white"
/>
</Block> </Block>
<Block style={{ marginBottom: theme.SIZES.BASE }}> <Block style={{ marginBottom: theme.SIZES.BASE }}>
@@ -371,7 +385,12 @@ class Elements extends React.Component {
</Block> </Block>
<Block style={{ marginBottom: theme.SIZES.BASE }}> <Block style={{ marginBottom: theme.SIZES.BASE }}>
<Header tabs={tabs.categories} search title="Title" navigation={this.props.navigation} /> <Header
tabs={tabs.categories}
search
title="Title"
navigation={this.props.navigation}
/>
</Block> </Block>
<Block style={{ marginBottom: theme.SIZES.BASE }}> <Block style={{ marginBottom: theme.SIZES.BASE }}>
@@ -392,7 +411,10 @@ class Elements extends React.Component {
render() { render() {
return ( return (
<Block flex center> <Block flex center>
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 30, width }}> <ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: 30, width }}
>
{this.renderButtons()} {this.renderButtons()}
{this.renderText()} {this.renderText()}
{this.renderInputs()} {this.renderInputs()}
@@ -411,54 +433,54 @@ const styles = StyleSheet.create({
paddingBottom: theme.SIZES.BASE, paddingBottom: theme.SIZES.BASE,
paddingHorizontal: theme.SIZES.BASE * 2, paddingHorizontal: theme.SIZES.BASE * 2,
marginTop: 44, marginTop: 44,
color: argonTheme.COLORS.HEADER color: argonTheme.COLORS.HEADER,
}, },
group: { group: {
paddingTop: theme.SIZES.BASE * 2 paddingTop: theme.SIZES.BASE * 2,
}, },
shadow: { shadow: {
shadowColor: "black", shadowColor: "black",
shadowOffset: { width: 0, height: 2 }, shadowOffset: { width: 0, height: 2 },
shadowRadius: 4, shadowRadius: 4,
shadowOpacity: 0.2, shadowOpacity: 0.2,
elevation: 2 elevation: 2,
}, },
button: { button: {
marginBottom: theme.SIZES.BASE, marginBottom: theme.SIZES.BASE,
width: width - theme.SIZES.BASE * 2 width: width - theme.SIZES.BASE * 2,
}, },
optionsButton: { optionsButton: {
width: "auto", width: "auto",
height: 34, height: 34,
paddingHorizontal: theme.SIZES.BASE, paddingHorizontal: theme.SIZES.BASE,
paddingVertical: 10 paddingVertical: 10,
}, },
input: { input: {
borderBottomWidth: 1 borderBottomWidth: 1,
}, },
inputDefault: { inputDefault: {
borderBottomColor: argonTheme.COLORS.PLACEHOLDER borderBottomColor: argonTheme.COLORS.PLACEHOLDER,
}, },
inputTheme: { inputTheme: {
borderBottomColor: argonTheme.COLORS.PRIMARY borderBottomColor: argonTheme.COLORS.PRIMARY,
}, },
inputInfo: { inputInfo: {
borderBottomColor: argonTheme.COLORS.INFO borderBottomColor: argonTheme.COLORS.INFO,
}, },
inputSuccess: { inputSuccess: {
borderBottomColor: argonTheme.COLORS.SUCCESS borderBottomColor: argonTheme.COLORS.SUCCESS,
}, },
inputWarning: { inputWarning: {
borderBottomColor: argonTheme.COLORS.WARNING borderBottomColor: argonTheme.COLORS.WARNING,
}, },
inputDanger: { inputDanger: {
borderBottomColor: argonTheme.COLORS.ERROR borderBottomColor: argonTheme.COLORS.ERROR,
}, },
social: { social: {
width: theme.SIZES.BASE * 3.5, width: theme.SIZES.BASE * 3.5,
height: theme.SIZES.BASE * 3.5, height: theme.SIZES.BASE * 3.5,
borderRadius: theme.SIZES.BASE * 1.75, borderRadius: theme.SIZES.BASE * 1.75,
justifyContent: "center" justifyContent: "center",
}, },
}); });