Skip to content

2
2021-090 frontend
Commit 280297ae authored by IT18111170-Silva S.H.I's avatar IT18111170-Silva S.H.I
Browse files
Options

initial commit

parents
Show whitespace changes
Inline Side-by-side
Showing with 911 additions and 0 deletions
.expo-shared/assets.json 0 → 100644
View file @ 280297ae
{
"12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
"40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
}
.gitignore 0 → 100644
View file @ 280297ae
node_modules/
.expo/
npm-debug.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/
# macOS
.DS_Store
App.js 0 → 100644
View file @ 280297ae
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { homeStack } from "./Navigations/homeStack";
import { AuthStack } from "./Navigations/AuthStack";
import { FontAwesome } from '@expo/vector-icons';
// import { SplashScreen } from "../screen/SplashScreen";
// import Navigator from './Routes/drawer'
// import LoginScreen from './screen/signIn';
// import HomeScreen from './screen/homeScreen';
// import Gamification from './screen/gamification';
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Authntications">
<Drawer.Screen name="Authentications" component={AuthStack} />
<Drawer.Screen name="Agripreneurs" component={homeStack} />
</Drawer.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
Button:{
backgroundColor: '#fff',
marginTop: 20
}
});
Navigations/AuthStack.js 0 → 100644
View file @ 280297ae
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { Ionicons } from "@expo/vector-icons";
import { SignIn } from "../screen/SignIn";
import { SignUp } from "../screen/SignUp";
import { HomeScreen } from "../screen/HomeScreen";
const Stack = createStackNavigator();
export function AuthStack({ navigation }) {
return (
<Stack.Navigator>
<Stack.Screen
name="SignIn"
component={SignIn}
options={{
headerLeft: () => {
return (
<Ionicons
name="md-menu"
size={30}
color="black"
onPress={() => navigation.openDrawer()}
/>
);
},
headerLeftContainerStyle: { paddingLeft: 10 },
}}
/>
<Stack.Screen
name="SignUp"
component={SignUp}
options={{
title: "Sign Up Page",
headerTitleAlign: "center",
}}
/>
<Stack.Screen
name="HomeScreen"
component={HomeScreen}
options={{
title: "Agripreneurs",
headerTitleAlign: "center",
}}
/>
</Stack.Navigator>
);
}
\ No newline at end of file
Navigations/homeStack.js 0 → 100644
View file @ 280297ae
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { Ionicons } from "@expo/vector-icons";
import { HomeScreen } from "../screen/HomeScreen";
import { Leaderboard } from "../screen/Leaderboard";
import { PriceScreen } from "../screen/PriceScreen";
import { gamification } from "../screen/gamification";
const Stack = createStackNavigator();
export function homeStack({ navigation }) {
return (
<Stack.Navigator>
<Stack.Screen
name="Agripreneurs"
component={HomeScreen}
options={{
headerLeft: () => {
return (
<Ionicons
name="md-menu"
size={30}
color="black"
onPress={() => navigation.openDrawer()}
/>
);
},
headerLeftContainerStyle: { paddingLeft: 10 },
}}
/>
<Stack.Screen
name="Leaderboard"
component={Leaderboard}
options={{
title: "Leaderboard Page",
headerTitleAlign: "center",
}}
/>
<Stack.Screen
name="PriceScreen"
component={PriceScreen}
options={{
title: "Discounted/Price Page",
headerTitleAlign: "center",
}}
/>
<Stack.Screen
name="gamification"
component={gamification}
options={{
title: "Gamification Page",
headerTitleAlign: "center",
}}
/>
</Stack.Navigator>
);
}
app.json 0 → 100644
View file @ 280297ae
{
"expo": {
"name": "demoproj",
"slug": "demoproj",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon1.png",
"splash": {
"image": "./assets/splash1.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
}
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
babel.config.js 0 → 100644
View file @ 280297ae
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
package-lock.json 0 → 100644
View file @ 280297ae
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
View file @ 280297ae
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-native-community/async-storage": "^1.12.1",
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/drawer": "^5.12.5",
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.5",
"expo": "~41.0.1",
"expo-splash-screen": "^0.10.2",
"expo-status-bar": "~1.0.4",
"formik": "^2.2.9",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
"react-native-gesture-handler": "^1.10.3",
"react-native-image-slideshow": "^1.0.1",
"react-native-reanimated": "~2.1.0",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.0.0",
"react-native-web": "~0.13.12",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.1"
},
"devDependencies": {
"@babel/core": "^7.9.0"
},
"private": true
}
screen/HomeScreen.js 0 → 100644
View file @ 280297ae
// Example of Splash, Login and Sign Up in React Native
// https://aboutreact.com/react-native-login-and-signup/
// Import React and Component
import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from "react-native";
import ImageSliderz from "react-native-image-slideshow";
import {
AntDesign,
MaterialCommunityIcons,
Ionicons,
} from "@expo/vector-icons";
import { MaterialIcons } from '@expo/vector-icons';
export function HomeScreen({ navigation }) {
//to diable the yellow box warning on the simulator
console.disableYellowBox = true;
return (
<View>
<ImageSliderz
height={500}
dataSource={[
{
url: require("../assets/d.jpg"),
},
{
url: require("../assets/c.jpg"),
},
{
url: require("../assets/b.jpg"),
},
]}
/>
<View>
<TouchableOpacity style={styles.saveExam} onPress={() => navigation.navigate('gamification')}>
<Ionicons
name="game-controller"
size={24}
color="black"
/>
<Text style={styles.buttonText}>Gamification</Text>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity style={styles.saveExam} onPress={() => navigation.navigate('Leaderboard')}>
<MaterialIcons
name="leaderboard"
size={24}
color="black" />
<Text style={styles.buttonText}>Leaderboard</Text>
</TouchableOpacity>
</View>
<Text style={styles.heading}>
AGRIPRENEURS. Agriculture solution provider.
</Text>
<Text style={styles.heading1}>
Build to Empower Entrepreneurs
</Text>
<Text style={styles.heading2}>
All Right Reserved.
</Text>
</View>
);
}
const styles = StyleSheet.create({
heading: {
fontSize: 17,
alignSelf: "center",
marginTop: 10,
},
heading1: {
fontSize: 15,
alignSelf: "center",
marginTop: 5,
},
heading2: {
fontSize: 10,
alignSelf: "center",
marginTop: 5,
},
saveExam: {
width: "90%",
padding: 10,
marginTop: 20,
marginLeft: 20,
marginHorizontal: 10,
backgroundColor: "#ff8000",
flexDirection: "row",
marginBottom: 10,
justifyContent: "center",
borderRadius: 10
},
buttonText: {
color: "#000",
fontSize: 15,
marginLeft: 8
},
});
screen/Leaderboard.js 0 → 100644
View file @ 280297ae
import React, { useState, useEffect } from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity } from 'react-native';
import { ScrollView } from "react-native-gesture-handler";
import { FontAwesome } from "@expo/vector-icons";
export function Leaderboard({ navigation, data }) {
return (
<ScrollView style={styles.container}>
<TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
<View style={styles.card}>
<View style={styles.left}>
<FontAwesome name="user-circle-o" size={75} size={75} color="black"/>
</View>
<View style={styles.right}>
<Text >Name: Husmitha Silva</Text>
<Text >Earns: 4500</Text>
<Text >District: Colombo</Text>
<Text >Points: 10</Text>
</View>
</View>
</TouchableOpacity>
<TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
<View style={styles.card}>
<View style={styles.left}>
<FontAwesome name="user-circle-o" size={75} size={75} color="black" />
</View>
<View style={styles.right}>
<Text >Name: Husmitha Silva</Text>
<Text >Earns: 4500</Text>
<Text >District: Colombo</Text>
<Text >Points: 10</Text>
</View>
</View>
</TouchableOpacity>
<TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
<View style={styles.card}>
<View style={styles.left}>
<FontAwesome name="user-circle-o" size={75} size={75} color="black" />
</View>
<View style={styles.right}>
<Text >Name: Husmitha Silva</Text>
<Text >Earns: 4500</Text>
<Text >District: Colombo</Text>
<Text >Points: 5</Text>
</View>
</View>
</TouchableOpacity>
</ScrollView>
)
}
const styles = StyleSheet.create({
container: {
marginTop: 15,
},
card: {
marginBottom: 10,
marginLeft: "2%",
width: "96%",
shadowColor: "lightpink",
shadowOpacity: 0.9,
shadowRadius: 1,
shadowOffset: { width: 3, height: 3 },
elevation: 5,
padding: 10,
flexDirection: "row",
backgroundColor: '#ff8000',
borderRadius:10
},
// touchable: {
// padding: 10,
// },
right: {
marginLeft: 50
},
left: {
marginLeft: 5
}
});
screen/PriceScreen.js 0 → 100644
View file @ 280297ae
import React, { useState, useEffect } from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import { FontAwesome5 } from '@expo/vector-icons';
export function PriceScreen({ navigation, data }) {
return (
<View style={styles.container}>
<View style={styles.editUSer}>
<TouchableOpacity>
<FontAwesome5 name="user-edit" size={24} color="black" />
</TouchableOpacity>
</View>
<View style={styles.inContainer}>
<View ><Text style={styles.heading}>User Profile</Text></View>
<View style={styles.iconStyle}>
<FontAwesome
name="user-circle"
size={70}
color="black"
/>
</View>
<View>
<TextInput
style={styles.input}
multiline
placeholder='Name'
// onChangeText={props.handleChange('password')}
// value={navigation.getParams('Name')}
/>
<TextInput
style={styles.input}
multiline
placeholder='Earns'
// onChangeText={props.handleChange('password')}
// value={props.values.body}
/>
<TextInput
style={styles.input}
multiline
placeholder='District'
// onChangeText={props.handleChange('password')}
// value={navigation.getParams('District')}
/>
<TouchableOpacity style = {styles.buttonSub} title="Sign Up" >
<Text style={styles.buttonText}>Save Details</Text>
</TouchableOpacity>
<Text style={styles.texts}>Discount earned</Text>
</View>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
color: '#333',
padding: 10,
marginBottom: 10,
width: "100%",
},
inContainer: {
justifyContent: 'center',
flexDirection: 'column',
marginBottom: 10,
marginLeft: 10,
marginRight: 10,
padding: 5,
borderColor: 'red'
},
texts: {
fontSize: 20,
textAlign: 'center',
marginTop: 10,
fontWeight: 'bold',
color: '#ff8000'
},
heading: {
textAlign: 'center',
color: '#333',
fontWeight: 'bold',
padding: 5,
fontSize: 18,
},
iconStyle: {
marginTop: 30,
marginBottom: 40,
padding: 10,
alignSelf: 'center'
},
editUSer: {
alignSelf: 'flex-end',
},
input: {
borderWidth: 1,
borderColor: '#ff8000',
padding: 10,
paddingTop: 10,
fontSize: 18,
borderRadius: 6,
marginTop: 20,
marginBottom: 10,
},
buttonSub: {
width: "90%",
padding: 10,
marginTop: 20,
marginLeft: 20,
marginHorizontal: 10,
backgroundColor: "#ff8000",
flexDirection: "row",
marginBottom: 10,
justifyContent: "center",
borderRadius:8
},
});
\ No newline at end of file
screen/SignIn.js 0 → 100644
View file @ 280297ae
import React from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity } from 'react-native';
export function SignIn({ navigation }) {
return (
<View>
<View style={styles.SectionStyle}>
<TextInput
style={styles.input}
// onChangeText={(UserEmail) =>
// setUserEmail(UserEmail)
// }
placeholder="Enter Email" //dummy@abc.com
// keyboardType="email-address"
// onSubmitEditing={() =>
// passwordInputRef.current &&
// passwordInputRef.current.focus()
// }
blurOnSubmit={false}
/>
</View>
<View style={styles.SectionStyle}>
<TextInput
style={styles.input}
// onChangeText={(UserPassword) =>
// setUserPassword(UserPassword)
// }
placeholder="Enter Password" //12345
placeholderTextColor="#8b9cb5"
// ref={passwordInputRef}
// onSubmitEditing={Keyboard.dismiss}
blurOnSubmit={false}
secureTextEntry={true}
/>
</View>
<View>
<TouchableOpacity
style={styles.buttonSub}
activeOpacity={0.5}
onPress={() => navigation.navigate('HomeScreen')}
>
<Text style={styles.buttonTextStyle}>LOGIN</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonSub} title="Sign Up" onPress={() => navigation.navigate('SignUp')}>
<Text style={styles.buttonText}>Sign Up</Text>
</TouchableOpacity>
</View>
</View>
)
}
const styles = StyleSheet.create({
input: {
borderWidth: 1,
borderColor: '#ddd',
padding: 10,
paddingTop: 10,
fontSize: 18,
borderRadius: 6,
marginTop: 20,
marginBottom: 10,
marginLeft: 19,
marginRight:19
},
buttonSub: {
width: "90%",
padding: 10,
marginTop: 20,
marginLeft: 20,
marginHorizontal: 10,
backgroundColor: "#ff8000",
flexDirection: "row",
marginBottom: 10,
justifyContent: "center",
borderRadius:8
},
});
screen/SignUp.js 0 → 100644
View file @ 280297ae
import React from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity } from 'react-native';
import { Formik } from 'formik';
import { Ionicons } from '@expo/vector-icons';
export function SignUp({ navigation }) {
return (
<View style={styles.container}>
<Formik
initialValues={{ name: '', email: '', password: '', district: ''}}
onSubmit={(values) => {
console.log(values);
}}
>
{props => (
<View style={styles.container}>
<View style={styles.iconView}>
<Ionicons name="person-add" size={50} color="black" />
</View>
<Text style={styles.heading}> Sign Up </Text>
<TextInput
style={styles.input}
placeholder='Name'
onChangeText={props.handleChange('name')}
value={props.values.title}
/>
<TextInput
style={styles.input}
placeholder='Email'
onChangeText={props.handleChange('email')}
value={props.values.title}
/>
<TextInput
style={styles.input}
multiline
placeholder='Password'
onChangeText={props.handleChange('password')}
value={props.values.body}
/>
<TextInput
style={styles.input}
placeholder='District'
onChangeText={props.handleChange('district')}
value={props.values.rating}
/>
<View>
<TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} >
<Text style={styles.buttonText}>Sign Up</Text>
</TouchableOpacity>
</View>
</View>
)}
</Formik>
</View>
);
}
const styles = StyleSheet.create({
input: {
borderWidth: 1,
borderColor: '#ddd',
padding: 10,
paddingTop: 10,
fontSize: 18,
borderRadius: 6,
marginTop: 20,
marginBottom: 10,
},
heading: {
textAlign: 'center',
color: '#333',
fontWeight: 'bold',
padding: 10,
fontSize: 18,
},
container: {
flex: 1,
color: '#333',
padding: 10,
marginTop: 20,
marginBottom: 10,
width: "100%",
},
buttonSub: {
width: "90%",
padding: 10,
marginTop: 20,
marginLeft: 20,
marginHorizontal: 10,
backgroundColor: "#ff8000",
flexDirection: "row",
marginBottom: 10,
justifyContent: "center",
borderRadius:10
},
iconView:{
alignSelf: 'center'
}
});
\ No newline at end of file
screen/gamification.js 0 → 100644
View file @ 280297ae
// Example of Splash, Login and Sign Up in React Native
// https://aboutreact.com/react-native-login-and-signup/
// Import React and Component
import React from 'react';
import {StyleSheet, View, Text, SafeAreaView, TouchableOpacity, TextInput} from 'react-native';
import { Formik } from 'formik';
import { FontAwesome } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons';
export function gamification ({navigation}) {
return (
<SafeAreaView style={{flex: 1, color: 'yellow'}}>
<Formik
initialValues={{ name: ''}}
onSubmit={(values) => {
console.log(values);
}}
>
{props => (
<View style={styles.container}>
<View style={styles.iconView}>
<MaterialCommunityIcons name="map-marker-distance" size={50} color="black" />
</View>
<Text style={styles.heading}> Enter Area </Text>
<TextInput
style={styles.input}
placeholder='Area'
onChangeText={props.handleChange('name')}
value={props.values.title}
/>
<View>
<TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} >
<Text style={styles.buttonText}>Best Crop 1</Text>
</TouchableOpacity>
<TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} >
<Text style={styles.buttonText}>Best Crop 2</Text>
</TouchableOpacity>
<TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} >
<Text style={styles.buttonText}>Best Crop 3</Text>
</TouchableOpacity>
<TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} >
<Text style={styles.buttonText}>Best Crop 4</Text>
</TouchableOpacity>
</View>
<View style={{
alignSelf: 'center',
marginTop:10
}}>
<FontAwesome name="money" size={50} color="black" />
</View>
<Text
style={styles.textdata}>
TOTAL EARNED $: 1000
</Text>
</View>
)}
</Formik>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
color: '#333',
padding: 10,
marginTop: 20,
marginBottom: 10,
width: "100%",
},
activityIndicator: {
alignItems: 'center',
height: 80,
},
Button:{
alignItems: "center",
backgroundColor: "#DDDDDD",
padding: 10
},
input: {
borderWidth: 1,
borderColor: '#ddd',
padding: 10,
paddingTop: 10,
fontSize: 18,
borderRadius: 6,
marginTop: 20,
marginBottom: 10,
marginLeft: 10,
marginRight: 10
},
heading: {
textAlign: 'center',
color: '#333',
fontWeight: 'bold',
padding: 10,
fontSize: 18,
},
buttonSub: {
width: "90%",
padding: 10,
marginTop: 20,
marginLeft: 20,
marginHorizontal: 10,
backgroundColor: "#ff8000",
flexDirection: "row",
marginBottom: 10,
justifyContent: "center",
borderRadius:10
},
textdata:{
fontSize: 18,
textAlign: 'center',
color: '#ff8000',
marginTop: 20,
marginBottom: 5,
},
iconView:{
alignSelf: 'center',
}
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment