Skip to content

Instantly share code, notes, and snippets.

@happyharis
Last active July 22, 2022 12:25
Show Gist options
  • Save happyharis/1c231f21a88a8fb6a7c14409e9138540 to your computer and use it in GitHub Desktop.
Save happyharis/1c231f21a88a8fb6a7c14409e9138540 to your computer and use it in GitHub Desktop.
PCMOB 6 NotesStack.js & NotesScreenAdd.js
import { FontAwesome } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import React, { useState } from "react";
import {
KeyboardAvoidingView,
Platform,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from "react-native";
export default function NotesScreenAdd() {
const navigation = useNavigation();
const [noteTitle, setNoteTitle] = useState("");
const [noteBody, setNoteBody] = useState("");
return (
<KeyboardAvoidingView
style={styles.container}
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
<TouchableOpacity onPress={() => navigation.goBack()}>
<FontAwesome name={"arrow-left"} size={24} color={"black"} />
</TouchableOpacity>
<TextInput
style={styles.noteTitle}
placeholder={"note title"}
value={noteTitle}
onChangeText={(text) => setNoteTitle(text)}
selectionColor={"gray"}
/>
<TextInput
style={styles.noteBody}
placeholder={"Add your notes"}
value={noteBody}
onChangeText={(text) => setNoteBody(text)}
selectionColor={"gray"}
multiline={true}
/>
<View style={{ flex: 1 }} />
<TouchableOpacity style={styles.button} onPress={() => {}}>
<Text style={styles.buttonText}>Add Note</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
paddingTop: 60,
padding: 25,
},
noteTitle: {
fontSize: 24,
fontWeight: "600",
marginTop: 30,
marginBottom: 25,
},
noteBody: {
fontSize: 15,
fontWeight: "400",
},
button: {
backgroundColor: "black",
borderRadius: 15,
width: "100%",
marginBottom: 20,
},
buttonText: {
textAlign: "center",
fontWeight: "400",
fontSize: 17,
padding: 20,
color: "white",
},
});
import { createStackNavigator } from "@react-navigation/stack";
import React from "react";
import { NOTES_SCREEN } from "../constants";
import NotesScreenAdd from "../screens/NotesScreenAdd";
import NotesScreenHome from "../screens/NotesScreenHome";
const NotesStackNav = createStackNavigator();
export default function NotesStack() {
return (
<NotesStackNav.Navigator>
<NotesStackNav.Screen
name={NOTES_SCREEN.Home}
component={NotesScreenHome}
options={{ headerShown: false }}
/>
<NotesStackNav.Screen
name={NOTES_SCREEN.Add}
component={NotesScreenAdd}
options={{ headerShown: false }}
/>
</NotesStackNav.Navigator>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment