Skip to content

Commit a652676

Browse files
itzyashhitzyashh
committed
feat RichBar added screen ->addNote
1 parent 09064e8 commit a652676

File tree

5 files changed

+107
-45
lines changed

5 files changed

+107
-45
lines changed

‎package-lock.json

Lines changed: 33 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,12 @@
1616
"@react-navigation/native-stack": "^6.9.12",
1717
"react": "18.2.0",
1818
"react-native": "0.71.7",
19+
"react-native-pell-rich-editor": "^1.9.0",
1920
"react-native-safe-area-context": "^4.5.2",
2021
"react-native-screens": "^3.20.0",
2122
"react-native-toast-message": "^2.1.6",
22-
"react-native-vector-icons": "^9.2.0"
23+
"react-native-vector-icons": "^9.2.0",
24+
"react-native-webview": "^12.0.2"
2325
},
2426
"devDependencies": {
2527
"@babel/core": "^7.20.0",

‎src/components/DisplayNote.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ const styles = StyleSheet.create({
4444
box: {
4545
width: 115,
4646
height: 160,
47+
paddingBottom: 5,
4748
margin: 5,
4849
borderRadius: 10,
4950
backgroundColor: '#212121',

‎src/screens/AddNote.jsx

Lines changed: 50 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,18 @@ import {
66
TouchableOpacity,
77
View,
88
} from 'react-native';
9-
import React, {useState} from 'react';
9+
import React, {useRef, useState} from 'react';
1010
import AsyncStorage from '@react-native-async-storage/async-storage';
1111
import Toast from 'react-native-toast-message';
1212
import Icon from 'react-native-vector-icons/Entypo';
13-
13+
import {actions,RichToolbar, RichEditor} from 'react-native-pell-rich-editor';
1414

1515
const AddNote = ({navigation}) => {
16-
17-
1816
const [title, setTitle] = useState('');
1917
const [content, setContent] = useState('');
2018

19+
const richText = React.useRef();
20+
2121
const showToast = () => {
2222
Toast.show({
2323
type: 'error',
@@ -28,8 +28,8 @@ const AddNote = ({navigation}) => {
2828
autoHide: true,
2929
topOffset: 30,
3030
bottomOffset: 40,
31-
})
32-
}
31+
});
32+
};
3333

3434
// Function to save notes to async storage
3535
const saveNote = async () => {
@@ -79,47 +79,48 @@ const AddNote = ({navigation}) => {
7979
</TextInput>
8080
</View>
8181
<View style={styles.content}>
82-
<FuncStrip />
83-
<TextInput
84-
onChangeText={text => setContent(text)}
82+
<View style={styles.funcStrip}>
83+
<RichToolbar
84+
editor={richText}
85+
actions={[
86+
actions.undo,
87+
actions.setBold,
88+
actions.setItalic,
89+
actions.insertBulletsList,
90+
actions.insertOrderedList,
91+
actions.checkboxList,
92+
actions.redo,
93+
]}
94+
style={styles.richBar}
95+
iconTint={'white'}
96+
selectedIconTint={'#cad939'}
97+
/>
98+
</View>
99+
<RichEditor
100+
ref={richText}
101+
onChange={text => setContent(text)}
85102
placeholder="Write your note here"
86103
cursorColor={'white'}
87-
placeholderTextColor="grey"
88-
89-
style={{color: 'white', fontSize: 20, padding: 10}}
104+
placeholderTextColor="pink"
105+
editorStyle={styles.editor}
90106
multiline={true}
91-
92107
/>
93108
</View>
94-
{
95-
title && <View
96-
>
97-
<TouchableOpacity
98-
style={styles.saveButton}
99-
onPress={title ? saveNote : showToast}>
100-
<Text>
101-
<Icon name="save" size={30} color="lightgrey" />
102-
</Text>
103-
</TouchableOpacity>
104-
</View>
105-
}
106-
109+
{title && (
110+
<View>
111+
<TouchableOpacity
112+
style={styles.saveButton}
113+
onPress={title ? saveNote : showToast}>
114+
<Text>
115+
<Icon name="save" size={30} color="lightgrey" />
116+
</Text>
117+
</TouchableOpacity>
118+
</View>
119+
)}
107120
</View>
108121
);
109122
};
110123

111-
const FuncStrip = () => {
112-
return (
113-
<View style={styles.funcStrip}>
114-
<Text
115-
style={{
116-
fontSize: 6,
117-
}}>
118-
comming soon!!
119-
</Text>
120-
</View>
121-
);
122-
};
123124
export default AddNote;
124125

125126
const styles = StyleSheet.create({
@@ -163,6 +164,14 @@ const styles = StyleSheet.create({
163164
bottom: 20,
164165
right: 20,
165166
},
166-
})
167-
168-
167+
richBar: {
168+
height: 40,
169+
width: '100%',
170+
backgroundColor: '#212121',
171+
},
172+
editor: {
173+
backgroundColor: 'black',
174+
color: 'white',
175+
contentCSSText: 'font-size: 19px; min-height: 200px; height: 100%;',
176+
},
177+
});

‎yarn.lock

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3071,6 +3071,11 @@ escape-string-regexp@^4.0.0:
30713071
resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
30723072
integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
30733073

3074+
[email protected]:
3075+
version "2.0.0"
3076+
resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz"
3077+
integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
3078+
30743079
eslint-config-prettier@^8.5.0:
30753080
version "8.8.0"
30763081
resolved "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz"
@@ -3889,7 +3894,7 @@ internal-slot@^1.0.3, internal-slot@^1.0.5:
38893894
has "^1.0.3"
38903895
side-channel "^1.0.4"
38913896

3892-
invariant@*, invariant@^2.2.4:
3897+
invariant@*, invariant@^2.2.4, [email protected]:
38933898
version "2.2.4"
38943899
resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
38953900
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -5929,6 +5934,11 @@ react-native-gradle-plugin@^0.71.17:
59295934
resolved "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.17.tgz"
59305935
integrity sha512-OXXYgpISEqERwjSlaCiaQY6cTY5CH6j73gdkWpK0hedxtiWMWgH+i5TOi4hIGYitm9kQBeyDu+wim9fA8ROFJA==
59315936

5937+
react-native-pell-rich-editor@^1.9.0:
5938+
version "1.9.0"
5939+
resolved "https://registry.npmjs.org/react-native-pell-rich-editor/-/react-native-pell-rich-editor-1.9.0.tgz"
5940+
integrity sha512-BKzlu++FySzPXrb5bczD8b/ZZJtfzcD4z7FvW7TrH+4OENEQtaIiEMfmb5N09Kv3YVJcfm8fut8Y+GLNAcCQHA==
5941+
59325942
react-native-safe-area-context@^4.5.2, "react-native-safe-area-context@>= 3.0.0":
59335943
version "4.5.2"
59345944
resolved "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.5.2.tgz"
@@ -5955,7 +5965,15 @@ react-native-vector-icons@^9.2.0:
59555965
prop-types "^15.7.2"
59565966
yargs "^16.1.1"
59575967

5958-
react-native@*, "react-native@^0.0.0-0 || 0.60 - 0.72 || 1000.0.0", [email protected]:
5968+
react-native-webview@^12.0.2, react-native-webview@>=7.5.2:
5969+
version "12.0.2"
5970+
resolved "https://registry.npmjs.org/react-native-webview/-/react-native-webview-12.0.2.tgz"
5971+
integrity sha512-vEnFOgVIYaUAQb437BOZdwTteUv3dkXkYOajalUkMDHNz91Zb35HaG6L49uUSFp4qYw46y/U3licKS1BOISDrg==
5972+
dependencies:
5973+
escape-string-regexp "2.0.0"
5974+
invariant "2.2.4"
5975+
5976+
react-native@*, "react-native@^0.0.0-0 || 0.60 - 0.72 || 1000.0.0", react-native@>=0.50.0, [email protected]:
59595977
version "0.71.7"
59605978
resolved "https://registry.npmjs.org/react-native/-/react-native-0.71.7.tgz"
59615979
integrity sha512-Id6iRLS581fJMFGbBl1jP5uSmjExtGOvw5Gvh7694zISXjsRAsFMmU+izs0pyCLqDBoHK7y4BT7WGPGw693nYw==

0 commit comments

Comments
 (0)