Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from 'react';
import { StyleSheet, Text, SafeAreaView, TouchableOpacity} from 'react-native';
import Colors from '../utils/styles';
import PropTypes from 'prop-types';
export default class SaniButton extends React.Component {
constructor(props) {
super(props);
this.state = {
color: Colors.blue
}
}
render() {
const { text } = this.props;
const { colorStyle } = this.props;
const { onPress } = this.props;
return (
<SafeAreaView style={[styles.container, {backgroundColor: Colors.blue} ]}>
<TouchableOpacity style={styles.button} onPress={onPress}>
<Text style={{color: '#ffff'}}> {text} </Text>
</TouchableOpacity>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
display: 'flex',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: Colors.blue,
borderRadius: 15,
height: 60,
margin: 10,
}, button: {
justifyContent: "center",
alignItems: "center",
width: '100%',
height: '100%',
marginLeft: '35%',
marginRight: '35%'
}
});
import React from 'react';
import { TouchableOpacity, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { withNavigation } from 'react-navigation';
import { DrawerActions } from 'react-navigation-drawer';
class DrawerTrigger extends React.Component {
render() {
return (
<TouchableOpacity style={styles.trigger}
onPress={() => {
this.props.navigation.dispatch(DrawerActions.openDrawer())
}}
>
<Ionicons
name={'md-menu'}
size={47}
color={'grey'}
/>
</TouchableOpacity>
)
}
}
const styles = StyleSheet.create({
trigger: {
marginLeft: 27.5,
borderRadius: 30,
width: 60,
height: 60,
}
});
export default withNavigation(DrawerTrigger);
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import DrawerTrigger from './DrawerTrigger'
class Header extends React.Component {
render() {
return (
<View style={styles.header}>
<DrawerTrigger />
</View>
)
}
}
const styles = StyleSheet.create({
header: {
paddingTop: 40,
backgroundColor: 'whitesmoke'
}
});
export default Header;
import React, {Component} from 'react';
import { StyleSheet, TextInput} from 'react-native';
import PropTypes from 'prop-types';
import AppStyles from '../utils/styles'
export default class InputField extends React.Component {
static propTypes = {
isPassword: PropTypes.bool.isRequired, // must be supplied when making an InputField
isEditable: PropTypes.bool,
isEmail: PropTypes.bool,
autoCapitalize: PropTypes.string,
textColor: PropTypes.string,
fontSize: PropTypes.number,
placeholder: PropTypes.string,
placeholderTextColor: PropTypes.string,
value: PropTypes.string.isRequired, // must be supplied when making an InputField
maxLength: PropTypes.number,
minWidth: PropTypes.number,
backgroundColor: PropTypes.string,
style: PropTypes.object,
onChangeText: PropTypes.func.isRequired, // must be supplied when making an InputField
}
// consider to make a password render function and a non-password render function to reduce complexity
render() {
if(this.props.isPassword) {
return(
<TextInput style={this.props.style || styles.input}
textColor={this.props.textColor}
placeholder = {this.props.placeholder}
placeholderTextColor = {this.props.placeholderTextColor}
editable={this.props.isEditable}
value={this.props.value}
autoCapitalize={this.props.autoCapitalize}
labelFontSize={this.props.fontSize || 12}
onChangeText = {this.props.onChangeText}
maxLength={this.props.maxLength || 40}
backgroundColor={this.props.backgroundColor}
secureTextEntry={true} // sensors text input with asterisks
/>
)
}
else {
return(
<TextInput style={this.props.style || styles.input}
textColor={this.props.textColor}
placeholder = {this.props.placeholder}
placeholderTextColor = {this.props.placeholderTextColor}
editable={this.props.isEditable}
value={this.props.value}
keyboardType={this.props.isEmail ? 'email-address' : 'default'}
autoCapitalize={this.props.autoCapitalize}
labelFontSize={this.props.fontSize || 12}
onChangeText = {this.props.onChangeText}
maxLength={this.props.maxLength || 40}
backgroundColor={this.props.backgroundColor}
/>
)
}
}
}
const styles = StyleSheet.create({
input: {
minWidth: 120,
borderBottomWidth: 1.0,
paddingLeft: 2,
textAlign: "left"
},
});
import React, { Component } from "react";
import {
TouchableOpacity,
Image,
StyleSheet,
View,
SafeAreaView,
Text,
Dimensions,
RefreshControlComponent,
} from "react-native";
import BottomSheet from "react-native-bottomsheet-reanimated";
import Button from "./Button";
import AppStyles from "../utils/styles";
const Screen = {
width: Dimensions.get("window").width,
height: Dimensions.get("window").height,
};
export default class MapDetail extends React.Component {
unselect = () => {
const { onUnselect } = this.props;
onUnselect();
};
delete = () => {
const { spot, onDeleteSpot } = this.props;
onDeleteSpot(spot.id);
};
render() {
const { spot, navigate } = this.props;
return (
<SafeAreaView style={styles.container}>
{spot ? (
<BottomSheet
bottomSheerColor="#FFFFFF"
ref="BottomSheet"
initialPosition={Screen.height * 1.08}
snapPoints={[Screen.height * 1.08, Screen.height * 1.5]}
isBackDrop={true}
isBackDropDismissByPress={false}
isRoundBorderWithTipHeader={true}
containerStyle={{ backgroundColor: "white" }}
tipStyle={{ backgroundColor: AppStyles.blue }}
header={
<View>
<Text>Spotted:</Text>
<Text>Kind: {spot.category}</Text>
<TouchableOpacity onPress={this.unselect}>
<Text>X</Text>
</TouchableOpacity>
<Button onPress={this.delete} text="Delete Spot"></Button>
</View>
}
body={
<View style={styles.body}>
<Image></Image>
</View>
}
/>
) : (
<BottomSheet
bottomSheerColor="#FFFFFF"
ref="BottomSheet"
initialPosition={Screen.height * 1.08}
snapPoints={[Screen.height * 1.08]}
isBackDrop={true}
isBackDropDismissByPress={false}
isRoundBorderWithTipHeader={true}
containerStyle={{ backgroundColor: "white" }}
tipStyle={{ backgroundColor: AppStyles.blue }}
header={
<View>
<Button onPress={() => navigate("Camera")} text="Add Spot"></Button>
</View>
}
body={<View style={styles.body}></View>}
/>
)}
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 30,
},
body: {
justifyContent: "center",
alignItems: "center",
},
text: {
fontSize: 20,
fontWeight: "bold",
color: AppStyles.blue,
},
});
import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native';
import Colors from '../utils/styles';
import PropTypes from 'prop-types';
import { deleteSpot } from '../utils/api';
import FirebaseApi from '../utils/FirebaseApi'
export default class Tile extends React.Component {
constructor(props) {
super(props);
}
getTimeDifference = (dateAsString) => {
var msDiff = new Date(dateAsString).getTime() - new Date().getTime(); //Future date - current date
var daysSince = Math.floor((msDiff*-1 ) / (1000 * 60 * 60 * 24));
return daysSince;
}
deleteSpot = async (id) => {
await FirebaseApi.shared.deleteSpot(id);
const spots = this.state.spots.filter((spot) => {
return spot.id !== id;
});
this.setState({
spots,
selectedSpot: null,
});
};
render() {
const { spot } = this.props;
const { imageURI } = this.props;
return (
<View style={styles.container}>
<View style={styles.textView}>
<Text style={styles.boldText}>Category</Text>
<Text style={styles.infoText}>{spot.category} </Text>
<Text style={styles.boldText}>Spotted</Text>
<Text style={styles.infoText}>{this.getTimeDifference(spot.timestamp)} days ago </Text>
<TouchableOpacity onPress={() => this.deleteSpot(spot.id)}>
<Image style={styles.trash} source={require('../assets/trash.png')}></Image>
</TouchableOpacity>
</View>
<View>
<Image style={styles.img} source={{uri: imageURI}}></Image>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
display: 'flex',
flexDirection: 'row',
padding: 20,
justifyContent: "space-around",
alignItems: 'center',
backgroundColor: Colors.grey,
width: '90%',
borderRadius: 15,
margin: 10
}, textView: {
flex: 1
}, imgView: {
flex: 1,
}, boldText: {
fontSize: 15,
fontWeight: 'bold'
}, infoText: {
marginBottom: 15
}, trash: {
width: 20,
height: 20,
marginTop: 20
}, img: {
height: 140,
width: 140,
resizeMode: 'stretch'
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment