Skip to content

Commit

Permalink
Implementing Storage
Browse files Browse the repository at this point in the history
  • Loading branch information
EdwardHaoranLee committed Nov 8, 2020
2 parents 445920c + 23aa86c commit 082a767
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 135 deletions.
78 changes: 6 additions & 72 deletions Flourish/Components/Garden/PlantCard.js
Original file line number Diff line number Diff line change
@@ -1,74 +1,8 @@
import React from 'react';
import { View, StyleSheet, Text, TouchableOpacity, Image } from 'react-native';
// import React from 'react';
// import { View, StyleSheet, Text, TouchableOpacity, Image } from 'react-native';
// // import { NavigationContainer } from '@react-navigation/native';
// // import { createStackNavigator } from '@react-navigation/stack';
// import PlantScreen from "../../Tabs/PlantScreen";

export default class PlantCard extends React.Component {
render() {
return (
<TouchableOpacity style={{
flex: 0.8,
height: 150,
// width: '100%',
flexDirection: 'row',
alignItems: 'flex-start',
marginBottom: 8,
marginHorizontal: 10,

backgroundColor: '#fff',
borderRadius: 10,

// shadowColor: "#000",
// shadowOffset: {
// width: 0,
// height: 4,
// },
// shadowOpacity: 0.32,
// shadowRadius: 5.46,

// elevation: 9,
}}>
<View style={{
// width: '50%',
// height: '100%',
// flex:0.7,
flex: 1,
// backgroundColor: '#123123',
borderTopLeftRadius: 10,
borderBottomLeftRadius:10,
padding: 8,
}}>
<Image
style={{
// width: '100%',
// height: '100%',
flex: 1,
// borderTopLeftRadius: 10,
// borderBottomLeftRadius:10,
borderRadius: 10,
}}
source={{ uri: this.props.data.img }}
/>
</View>
<View style={{
flexDirection: 'column',
padding: 8,
// width: '100%',
// height: '30%',
flex: 1,
// flexWrap: 'wrap'
}}>
<Text style={{
fontSize: 18,
fontWeight: 'bold',
}}>
{this.props.data.name}
</Text>
<Text style={{
fontSize: 12,
}}>
{this.props.data.binomial}
</Text>
</View>
</TouchableOpacity>
);
}
}
// export default
119 changes: 58 additions & 61 deletions Flourish/Tabs/GardenTabScreen.js
Original file line number Diff line number Diff line change
@@ -1,23 +1,11 @@
import React from 'react';
import * as React from 'react';
import { SafeAreaView, StatusBar, StyleSheet, Text, View, ScrollView, FlatList, TouchableOpacity } from 'react-native';
// import { TouchableOpacity } from 'react-native-gesture-handler';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import PlantCard from '../Components/Garden/PlantCard'
import {Component} from "react";

export default class GardenTabScreen extends React.Component{

componentDidMount() {
this.setState({
data: this.props.plants
})
}

state = {
data: [],
}

renderItem = ({ item }) => {
export default function GardenTabScreen() {
const renderItem = ({ item }) => {
// if (item.id < DATA.length - 1) {
return (
<PlantCard
Expand All @@ -28,21 +16,30 @@ export default class GardenTabScreen extends React.Component{
}}
/>
);
// } else {
// return (
// <View style={{
// justifyContent: "center",
// alignItems: 'center',
// }}>
// <TouchableOpacity style={styles.addPlantIcon}>
// <MaterialCommunityIcons name="plus" color="#CACACA" size={40} />
// </TouchableOpacity>
// </View>
// )
// }
}

render(){
return (
<SafeAreaView style={styles.container}>
<Text style={styles.sectionTitle}>My Garden</Text>
<FlatList style={styles.cardContainer}
data={this.state.data}
renderItem={this.renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}

return (
<SafeAreaView style={styles.container}>
<Text style={styles.sectionTitle}>My Garden</Text>
<FlatList style={styles.cardContainer}
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}

const styles = StyleSheet.create({
Expand Down Expand Up @@ -82,36 +79,36 @@ const styles = StyleSheet.create({
});


// const DATA = [
// {
// "id": "0",
// "img": "https://i1.kknews.cc/SIG=52b418/26r5000002r82qro63ro.jpg",
// "name": "My Red Plant",
// "binomial": "Echeveria Apus",
// },
// {
// "id": "1",
// "img": "https://www.zhifure.com/upload/images/2018/3/27164120681.jpg",
// "name": "The Succulents",
// "binomial": "Echeveria Apus",
// },
// {
// "id": "2",
// "img": "https://duorou.zw3e.com/uploads/allimg/180828/3-1PRQ12410227.jpg",
// "name": "Greens",
// "binomial": "Echeveria Apus",
// },
// {
// "id": "3",
// "img": "https://i.epochtimes.com/assets/uploads/2020/05/shutterstock_1714301299-600x400.jpg",
// "name": "Yeah",
// "binomial": "Echeveria Apus",
// },
// {
// "id": "4",
// "img": "https://i.zw3e.com/zw_news_map/550/2017121/1512527973023359675.jpg",
// "name": "Leaves",
// "binomial": "Echeveria Apus",
// },
// // { "id": "5" }
// ]
const DATA = [
{
"id": "0",
"img": "https://i1.kknews.cc/SIG=52b418/26r5000002r82qro63ro.jpg",
"name": "My Red Plant",
"binomial": "Echeveria Apus",
},
{
"id": "1",
"img": "https://www.zhifure.com/upload/images/2018/3/27164120681.jpg",
"name": "The Succulents",
"binomial": "Echeveria Apus",
},
{
"id": "2",
"img": "https://duorou.zw3e.com/uploads/allimg/180828/3-1PRQ12410227.jpg",
"name": "Greens",
"binomial": "Echeveria Apus",
},
{
"id": "3",
"img": "https://i.epochtimes.com/assets/uploads/2020/05/shutterstock_1714301299-600x400.jpg",
"name": "Yeah",
"binomial": "Echeveria Apus",
},
{
"id": "4",
"img": "https://i.zw3e.com/zw_news_map/550/2017121/1512527973023359675.jpg",
"name": "Leaves",
"binomial": "Echeveria Apus",
},
// { "id": "5" }
]
11 changes: 9 additions & 2 deletions Flourish/Tabs/Photo/PlantScreen.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import React from 'react';
import { render } from 'react-dom';
import { View, StyleSheet, Text } from 'react-native';

export default function PlantScreen() {

export default class PlantScreen extends React.Component {
render(){
return (
<View>
<Text>Hello world</Text>
</View>
);
}
}

0 comments on commit 082a767

Please sign in to comment.