Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-23 06:59:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add notebook adding dialog

Browse Source
This commit is contained in:
ammarahm-ed
2019-12-03 18:12:50 +05:00
parent 87f3af2087
commit 98ce2c3c7f
9 changed files with 733 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/mobile/src/common/common.js
View File

@@ -35,6 +35,12 @@ export const COLOR_SCHEME = {
accent: '#0560FF',
normal: 'black',
icon: 'gray',
errorBg: '#FFD2D2',
errorText: '#D8000C',
successBg: '#DFF2BF',
successText: '#4F8A10',
warningBg: '#FEEFB3',
warningText: '#9F6000',
};
//FONT FAMILY

304
apps/mobile/src/components/AddNotebookDialog/index.js Normal file
View File

@@ -0,0 +1,304 @@
import React, {useEffect, useState} from 'react';
import {
ScrollView,
View,
Text,
TouchableOpacity,
Dimensions,
Image,
SafeAreaView,
Platform,
Modal,
} from 'react-native';
import NavigationService from '../../services/NavigationService';
import {
COLOR_SCHEME,
SIZE,
br,
ph,
pv,
opacity,
FONT,
WEIGHT,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Feather';
import {getElevation, h, w, timeSince} from '../../utils/utils';
import {FlatList, TextInput} from 'react-native-gesture-handler';
import {useForceUpdate} from '../../views/ListsEditor';
const refs = [];
export const AddNotebookDialog = ({visible}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
const [topicsToAdd, setTopicsToAdd] = useState(['']);
const forceUpdate = useForceUpdate();
let prevItem = null;
let prevIndex = null;
let currentSelectedItem = null;
const onSubmit = (text, index, willFocus = true) => {
let oldData = topicsToAdd;
oldData[index] = text;
if (
oldData.length === index + 1 &&
prevIndex !== null &&
prevItem !== null
) {
oldData.push('');
}
setTopicsToAdd(oldData);
forceUpdate();
currentSelectedItem = null;
if (!willFocus) return;
if (!refs[index + 1]) {
setTimeout(() => {
refs[index + 1].focus();
}, 400);
} else {
refs[index + 1].focus();
}
};
const onFocus = index => {
currentSelectedItem = index;
if (currentSelectedItem) {
let oldData = topicsToAdd;
oldData[prevIndex] = prevItem;
if (oldData.length === prevIndex + 1) {
oldData.push('');
}
prevIndex = null;
prevItem = null;
setTopicsToAdd(oldData);
console.log(oldData);
forceUpdate();
}
};
const onChange = (text, index) => {
prevIndex = index;
prevItem = text;
};
const onDelete = index => {
let listData = topicsToAdd;
listData.splice(index, 1);
setTopicsToAdd(listData);
forceUpdate();
};
return (
<SafeAreaView>
<Modal visible={visible} transparent={true}>
<View
style={{
width: '100%',
height: '100%',
backgroundColor: 'rgba(255,255,255,0.3)',
justifyContent: 'center',
alignItems: 'center',
}}>
<View
style={{
width: '80%',
maxHeight: '80%',
elevation: 5,
borderRadius: 5,
backgroundColor: colors.bg,
paddingHorizontal: ph,
paddingVertical: pv,
}}>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon name="book-open" color={colors.accent} size={SIZE.lg} />
<Text
style={{
color: colors.accent,
fontFamily: WEIGHT.medium,
marginLeft: 10,
fontSize: SIZE.lg,
marginTop: -5,
}}>
New Notebook
</Text>
</View>
<TextInput
style={{
padding: pv - 5,
borderWidth: 1.5,
borderColor: '#f0f0f0',
paddingHorizontal: ph,
borderRadius: 5,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
marginTop: 20,
marginBottom: 10,
}}
placeholder="Enter title of notebook"
placeholderTextColor={colors.icon}
/>
<Text
style={{
fontSize: SIZE.sm,
fontFamily: WEIGHT.semibold,
}}>
Topics
</Text>
<FlatList
data={topicsToAdd}
renderItem={({item, index}) => (
<TopicItem
item={item}
index={index}
colors={colors}
onSubmit={onSubmit}
onChange={onChange}
onFocus={onFocus}
onDelete={onDelete}
/>
)}
/>
<View
style={{
justifyContent: 'space-around',
alignItems: 'center',
flexDirection: 'row',
marginTop: 20,
}}>
<TouchableOpacity
activeOpacity={opacity}
style={{
paddingVertical: pv,
paddingHorizontal: ph,
borderRadius: 5,
width: '45%',
justifyContent: 'center',
alignItems: 'center',
borderColor: colors.accent,
backgroundColor: colors.accent,
borderWidth: 1,
}}>
<Text
style={{
fontFamily: WEIGHT.medium,
color: 'white',
fontSize: SIZE.sm,
}}>
Add
</Text>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={opacity}
style={{
paddingVertical: pv,
paddingHorizontal: ph,
borderRadius: 5,
width: '45%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f0f0',
}}>
<Text
style={{
fontFamily: WEIGHT.medium,
color: colors.icon,
fontSize: SIZE.sm,
}}>
Cancel
</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
</SafeAreaView>
);
};
const TopicItem = ({
item,
index,
onFocus,
onSubmit,
onDelete,
onChange,
colors,
}) => {
const [focus, setFocus] = useState(true);
const topicRef = ref => (refs[index] = ref);
let text = item;
return (
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
borderRadius: 5,
borderWidth: 1.5,
borderColor: '#f0f0f0',
paddingHorizontal: ph,
marginTop: 10,
}}>
<TextInput
ref={topicRef}
onFocus={() => {
onFocus(index);
setFocus(true);
}}
onBlur={() => {
onSubmit(text, index, false);
setFocus(false);
}}
onChangeText={value => {
onChange(value, index);
text = value;
}}
onSubmit={() => onSubmit(text, index, true)}
blurOnSubmit
style={{
padding: pv - 5,
paddingHorizontal: 0,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
width: '90%',
maxWidth: '90%',
}}
placeholder="Add a topic"
placeholderTextColor={colors.icon}
/>
{index == 0 && !focus ? (
<TouchableOpacity
onPress={() =>
!focus && index !== 0
? onDelete(index)
: onSubmit(text, index, true)
}
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon
name={!focus && index !== 0 ? 'minus' : 'plus'}
size={SIZE.lg}
color={colors.accent}
/>
</TouchableOpacity>
) : null}
</View>
);
};

4
apps/mobile/src/components/Recents/index.js
View File

@@ -51,7 +51,7 @@ let blockdata = [
},
];
export const RecentList = () => {
export const RecentList = ({update}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
const [notes, setNotes] = useState([]);
const fetchNotes = async () => {
@@ -63,7 +63,7 @@ export const RecentList = () => {
};
useEffect(() => {
fetchNotes();
}, []);
}, [update]);
return (
<>

4
apps/mobile/src/services/NavigationService.js
View File

@@ -14,6 +14,7 @@ import ForgotPassword from '../views/ForgotPassword';
import Settings from '../views/Settings';
import Trash from '../views/Trash';
import Notes from '../views/Notes';
import Tags from '../views/Tags';
const TopLevelNavigator = createStackNavigator(
{
@@ -59,6 +60,9 @@ const TopLevelNavigator = createStackNavigator(
Notes: {
screen: Notes,
},
Tags: {
screen: Tags,
},
},
{
initialRouteName: 'Home',

105
apps/mobile/src/views/Folders/index.js
View File

@@ -8,6 +8,7 @@ import {
Image,
SafeAreaView,
Platform,
Modal,
} from 'react-native';
import NavigationService from '../../services/NavigationService';
import {
@@ -20,17 +21,22 @@ import {
FONT,
WEIGHT,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Ionicons';
import Icon from 'react-native-vector-icons/Feather';
import {Reminder} from '../../components/Reminder';
import {ListItem} from '../../components/ListItem';
import {getElevation, h, w} from '../../utils/utils';
import {FlatList} from 'react-native-gesture-handler';
import {getElevation, h, w, timeSince} from '../../utils/utils';
import {FlatList, TextInput} from 'react-native-gesture-handler';
import {useForceUpdate} from '../ListsEditor';
import {AddNotebookDialog} from '../../components/AddNotebookDialog';
const refs = [];
export const Folders = ({navigation}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
const [addNotebook, setAddNotebook] = useState(false);
return (
<SafeAreaView>
<AddNotebookDialog visible={addNotebook} />
<View
style={{
flexDirection: 'row',
@@ -48,19 +54,13 @@ export const Folders = ({navigation}) => {
}}>
Notebooks
</Text>
<Icon name="md-more" color={colors.icon} size={SIZE.xxl} />
<Icon name="more-vertical" color={colors.icon} size={SIZE.xxl} />
</View>
<FlatList
numColumns={2}
style={{
width: '100%',
}}
columnWrapperStyle={{
paddingHorizontal: '5%',
justifyContent: 'space-between',
width: '100%',
}}
data={[
{
name: 'Class Notes',
@@ -75,38 +75,77 @@ export const Folders = ({navigation}) => {
Qty: '3',
},
]}
renderItem={({item, index}) => (
<View>
<View
ListHeaderComponent={
<TouchableOpacity
activeOpacity={opacity}
onPress={() => {
setAddNotebook(true);
}}
style={{
borderWidth: 1,
borderRadius: 5,
width: '90%',
marginHorizontal: '5%',
paddingHorizontal: ph,
borderColor: '#f0f0f0',
paddingVertical: pv + 5,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 15,
backgroundColor: colors.accent,
}}>
<Text
style={{
...getElevation(5),
width: w * 0.7 * 0.4,
height: w * 0.7 * 0.3,
borderRadius: 5,
backgroundColor: colors.accent,
alignItems: 'flex-end',
justifyContent: 'flex-end',
padding: 5,
fontSize: SIZE.md,
fontFamily: WEIGHT.bold,
color: 'white',
}}>
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.md,
color: 'white',
opacity: 0.5,
}}>
{item.Qty} Notes
</Text>
</View>
Create new notebook
</Text>
<Icon name="plus" color="white" size={SIZE.lg} />
</TouchableOpacity>
}
renderItem={({item, index}) => (
<View
style={{
paddingHorizontal: ph,
marginHorizontal: '5%',
borderBottomWidth: 1,
borderBottomColor: '#f0f0f0',
paddingVertical: pv + 5,
}}>
<Text
style={{
fontFamily: WEIGHT.bold,
fontSize: SIZE.md,
color: colors.pri,
maxWidth: w * 0.7 * 0.4,
maxWidth: '100%',
}}>
{item.name}
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
paddingTop: pv,
}}>
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
color: colors.accent,
}}>
June 21
</Text>
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.xs,
}}>
15 notes
</Text>
</View>
</View>
)}
/>

226
apps/mobile/src/views/Home/index.js
View File

@@ -43,6 +43,7 @@ export const Home = ({navigation}) => {
const [hidden, setHidden] = useState(false);
const [text, setText] = useState('');
const [searchResults, setSearchResults] = useState([]);
const [update, setUpdate] = useState(0);
useEffect(() => {
setTimeout(() => {
setLoading(false);
@@ -82,6 +83,7 @@ export const Home = ({navigation}) => {
<NavigationEvents
onWillFocus={() => {
DeviceEventEmitter.emit('openSidebar');
setUpdate(update + 1);
}}
/>
<Header colors={colors} heading="Home" canGoBack={false} />
@@ -110,6 +112,12 @@ export const Home = ({navigation}) => {
menu={<RenderSideMenu colors={colors} close={() => setOpen(false)} />}
openMenuOffset={w / 1.5}>
<SafeAreaView style={styles.container}>
<NavigationEvents
onWillFocus={() => {
setUpdate(update + 1);
}}
/>
<Header
colors={colors}
heading="Home"
@@ -129,7 +137,7 @@ export const Home = ({navigation}) => {
{hidden ? (
<NotesList searchResults={searchResults} keyword={text} />
) : (
<RecentList />
<RecentList update={update} />
)}
</SafeAreaView>
</SideMenu>
@@ -152,93 +160,9 @@ export const RenderSideMenu = ({colors, close}) => (
<ScrollView
contentContainerStyle={{
justifyContent: 'space-between',
height: '100%',
}}>
<View>
<View
style={{
width: '100%',
justifyContent: 'space-between',
paddingHorizontal: '5%',
alignItems: 'center',
alignSelf: 'center',
marginBottom: 10,
marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.05,
flexDirection: 'row',
}}>
<Image
style={{
width: 35,
height: 35,
borderRadius: 100,
marginRight: 10,
}}
source={require('../../assets/images/img.png')}
/>
<TouchableOpacity
onPress={() => {
close();
NavigationService.navigate('Login');
}}
activeOpacity={opacity}
style={{
paddingVertical: pv - 5,
paddingHorizontal: ph,
borderRadius: 5,
justifyContent: 'center',
alignItems: 'center',
borderColor: colors.accent,
backgroundColor: colors.accent,
borderWidth: 1,
}}>
<Text
style={{
fontFamily: WEIGHT.medium,
color: 'white',
}}>
Login
</Text>
</TouchableOpacity>
{/* <Text
style={{
fontFamily: WEIGHT.semibold,
color: colors.accent,
fontSize: SIZE.md,
marginTop: 10,
}}>
Hi, Ammar!
</Text>
<Text
style={{
fontFamily: WEIGHT.regular,
color: colors.accent,
fontSize: SIZE.xs,
marginTop: 10,
}}>
80.45/100 MB
</Text> */}
{/* <View
style={{
borderRadius: 2.5,
backgroundColor: colors.accent,
marginTop: 10,
paddingHorizontal: 5,
paddingVertical: 2,
}}>
<Text
style={{
fontFamily: WEIGHT.bold,
fontSize: SIZE.xxs,
color: 'white',
}}>
Basic User
</Text>
</View> */}
</View>
<View
style={{
borderWidth: 1,
@@ -247,6 +171,7 @@ export const RenderSideMenu = ({colors, close}) => (
backgroundColor: colors.navbg,
width: '100%',
marginBottom: 5,
marginTop: Platform.OS == 'ios' ? h * 0.01 : h * 0.03,
}}
/>
<FlatList
@@ -340,10 +265,12 @@ export const RenderSideMenu = ({colors, close}) => (
</TouchableOpacity>
)}
/>
</View>
<View>
<View
<TouchableOpacity
onPress={() => {
close();
NavigationService.navigate('Tags');
}}
style={{
width: '100%',
alignSelf: 'center',
@@ -351,7 +278,7 @@ export const RenderSideMenu = ({colors, close}) => (
justifyContent: 'flex-start',
alignItems: 'center',
paddingHorizontal: ph,
marginTop: 20,
marginTop: 15,
}}>
<Icon
style={{
@@ -365,11 +292,10 @@ export const RenderSideMenu = ({colors, close}) => (
style={{
fontFamily: WEIGHT.medium,
fontSize: SIZE.sm - 1,
marginTop: -5,
}}>
Tags
</Text>
</View>
</TouchableOpacity>
<View
style={{
@@ -386,7 +312,7 @@ export const RenderSideMenu = ({colors, close}) => (
flexDirection: 'row',
flexWrap: 'wrap',
paddingHorizontal: '5%',
marginBottom: 20,
marginBottom: 0,
}}>
{[
'home',
@@ -422,33 +348,6 @@ export const RenderSideMenu = ({colors, close}) => (
))}
</ScrollView>
<View
style={{
width: '100%',
alignSelf: 'center',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
paddingHorizontal: ph,
marginTop: 20,
}}>
<Icon
style={{
width: 30,
}}
name="circle"
color={colors.icon}
size={SIZE.md}
/>
<Text
style={{
fontFamily: WEIGHT.medium,
fontSize: SIZE.sm - 1,
marginTop: -5,
}}>
Colors
</Text>
</View>
<View
style={{
borderWidth: 1,
@@ -464,7 +363,7 @@ export const RenderSideMenu = ({colors, close}) => (
flexDirection: 'row',
flexWrap: 'wrap',
paddingHorizontal: '5%',
marginBottom: 40,
marginBottom: 15,
}}>
{['red', 'yellow', 'green', 'blue', 'purple', 'orange', 'gray'].map(
item => (
@@ -477,18 +376,19 @@ export const RenderSideMenu = ({colors, close}) => (
}}>
<View
style={{
width: 40,
width: 25,
height: 25,
backgroundColor: item,
borderRadius: 5,
borderRadius: 100,
}}
/>
</TouchableOpacity>
),
)}
</ScrollView>
</View>
<View
{/* <View
style={{
backgroundColor: '#F3A712',
width: '90%',
@@ -519,7 +419,83 @@ export const RenderSideMenu = ({colors, close}) => (
}}>
<Icon name="star" color="#FCBA04" size={SIZE.lg} />
</View>
</View>
</View> */}
<View
style={{
width: '100%',
justifyContent: 'space-between',
paddingHorizontal: '5%',
alignItems: 'center',
alignSelf: 'center',
marginBottom: 20,
flexDirection: 'row',
}}>
<TouchableOpacity
onPress={() => {
close();
NavigationService.navigate('Login');
}}
activeOpacity={opacity}
style={{
paddingVertical: pv,
paddingHorizontal: ph,
borderRadius: 5,
width: '100%',
justifyContent: 'center',
alignItems: 'center',
borderColor: colors.accent,
backgroundColor: colors.accent,
borderWidth: 1,
}}>
<Text
style={{
fontFamily: WEIGHT.medium,
color: 'white',
fontSize: SIZE.sm,
}}>
Login to Sync
</Text>
</TouchableOpacity>
{/* <Text
style={{
fontFamily: WEIGHT.semibold,
color: colors.accent,
fontSize: SIZE.md,
marginTop: 10,
}}>
Hi, Ammar!
</Text>
<Text
style={{
fontFamily: WEIGHT.regular,
color: colors.accent,
fontSize: SIZE.xs,
marginTop: 10,
}}>
80.45/100 MB
</Text> */}
{/* <View
style={{
borderRadius: 2.5,
backgroundColor: colors.accent,
marginTop: 10,
paddingHorizontal: 5,
paddingVertical: 2,
}}>
<Text
style={{
fontFamily: WEIGHT.bold,
fontSize: SIZE.xxs,
color: 'white',
}}>
Basic User
</Text>
</View> */}
</View>
</ScrollView>
</SafeAreaView>

62
apps/mobile/src/views/Settings/index.js
View File

@@ -20,10 +20,11 @@ import {
FONT,
WEIGHT,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Ionicons';
import Icon from 'react-native-vector-icons/Feather';
import {Reminder} from '../../components/Reminder';
import {ListItem} from '../../components/ListItem';
import {Header} from '../../components/header';
import {FlatList} from 'react-native-gesture-handler';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
@@ -34,6 +35,65 @@ export const Settings = ({navigation}) => {
return (
<SafeAreaView>
<Header colors={colors} heading="Settings" canGoBack={false} />
<FlatList
data={['Sync']}
ListHeaderComponent={
<FlatList
data={['My Account']}
ListHeaderComponent={<FlatList />}
renderItem={({item, index}) => (
<TouchableOpacity
activeOpacity={opacity}
style={{
borderWidth: 1,
borderRadius: 5,
width: '90%',
marginHorizontal: '5%',
paddingHorizontal: ph,
borderColor: '#f0f0f0',
paddingVertical: pv + 5,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 15,
}}>
<Text
style={{
fontSize: SIZE.md,
fontFamily: WEIGHT.regular,
}}>
{item}
</Text>
</TouchableOpacity>
)}
/>
}
renderItem={({item, index}) => (
<TouchableOpacity
activeOpacity={opacity}
style={{
borderBottomWidth: 1,
width: '90%',
marginHorizontal: '5%',
borderBottomColor: '#f0f0f0',
paddingVertical: pv + 5,
flexDirection: 'row',
paddingHorizontal: ph,
justifyContent: 'space-between',
alignItems: 'center',
}}>
<Text
style={{
fontSize: SIZE.md,
fontFamily: WEIGHT.regular,
}}>
{item}
</Text>
<Icon size={SIZE.lg} color={colors.icon} name="toggle-left" />
</TouchableOpacity>
)}
/>
</SafeAreaView>
);
};

162
apps/mobile/src/views/Tags/index.js Normal file
View File

@@ -0,0 +1,162 @@
import React, {useEffect, useState} from 'react';
import {
ScrollView,
View,
Text,
TouchableOpacity,
Dimensions,
Image,
SafeAreaView,
Platform,
FlatList,
} from 'react-native';
import NavigationService from '../../services/NavigationService';
import {
COLOR_SCHEME,
SIZE,
br,
ph,
pv,
opacity,
FONT,
WEIGHT,
} from '../../common/common';
import Icon from 'react-native-vector-icons/Ionicons';
import {Reminder} from '../../components/Reminder';
import {ListItem} from '../../components/ListItem';
import {Header} from '../../components/header';
import NoteItem from '../../components/NoteItem';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
export const Tags = ({navigation}) => {
const [colors, setColors] = useState(COLOR_SCHEME);
return (
<SafeAreaView
style={{
height: '100%',
justifyContent: 'center',
}}>
<View
style={{
height: '100%',
marginTop: h * 0.1,
width: '100%',
justifyContent: 'center',
flexDirection: 'row',
alignItems: 'center',
}}>
<ScrollView
contentContainerStyle={{
width: '90%',
alignSelf: 'center',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
flexWrap: 'wrap',
}}>
{[
'#home',
'#school',
'#water',
'#love',
'#hope',
'#music',
'#notesforbook',
'#hate',
'#worldofwonders',
'#home',
'#school',
'#water',
'#love',
'#hope',
'#music',
'#notesforbook',
'#hate',
'#worldofwonders',
'#home',
'#school',
'#water',
'#love',
'#hope',
'#music',
'#notesforbook',
'#hate',
'#worldofwonders',
'#home',
'#school',
'#water',
'#love',
'#hope',
'#music',
'#notesforbook',
'#hate',
'#worldofwonders',
'#home',
'#school',
'#water',
'#love',
'#hope',
'#music',
'#notesforbook',
'#hate',
'#worldofwonders',
'#home',
'#school',
'#water',
'#love',
'#hope',
'#music',
'#notesforbook',
'#hate',
'#worldofwonders',
'#home',
'#school',
'#water',
'#love',
'#hope',
'#music',
'#notesforbook',
'#hate',
'#worldofwonders',
].map(item => (
<TouchableOpacity
onPress={() => {
NavigationService.navigate('Notes', {
heading: item,
});
}}
style={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
margin: 5,
backgroundColor: colors.accent,
paddingVertical: pv - 5,
paddingHorizontal: ph + 10,
borderRadius: 30,
}}>
<Text
style={{
fontFamily: WEIGHT.regular,
fontSize: SIZE.md,
color: 'white',
}}>
{item}
</Text>
</TouchableOpacity>
))}
</ScrollView>
</View>
</SafeAreaView>
);
};
Tags.navigationOptions = {
header: null,
};
export default Tags;

21
apps/mobile/src/views/Trash/index.js
View File

@@ -8,6 +8,7 @@ import {
Image,
SafeAreaView,
Platform,
FlatList,
} from 'react-native';
import NavigationService from '../../services/NavigationService';
import {
@@ -24,6 +25,7 @@ import Icon from 'react-native-vector-icons/Ionicons';
import {Reminder} from '../../components/Reminder';
import {ListItem} from '../../components/ListItem';
import {Header} from '../../components/header';
import NoteItem from '../../components/NoteItem';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
@@ -34,6 +36,25 @@ export const Trash = ({navigation}) => {
return (
<SafeAreaView>
<Header colors={colors} heading="Trash" canGoBack={false} />
<FlatList
numColumns={2}
columnWrapperStyle={{
width: '45%',
}}
data={[
{
title: 'my note',
headline: 'my simple not that i just deleted. please restore.',
dateCreated: Date.now(),
},
{
title: 'my note',
headline: 'my simple not that i just deleted. please restore.',
dateCreated: Date.now(),
},
]}
renderItem={({item, index}) => <NoteItem item={item} />}
/>
</SafeAreaView>
);
};