ig - implemented modal

App.tsx

@@ -4,11 +4,14 @@ import "@config/firebase";
 import RootNavigation from "@navigation/index";
 import { NavigationContainer } from "@react-navigation/native";
 
+import SelfPostModal from "@components/SelfPostModal";
+
 export default function App() {
 	return (
 		<NavigationContainer>
 			<ThemeProvider>
 				<RootNavigation />
+				<SelfPostModal />
 			</ThemeProvider>
 		</NavigationContainer>
 	);

package.json

@@ -26,8 +26,10 @@
 		"expo-font": "~11.0.1",
 		"expo-status-bar": "~1.4.2",
 		"firebase": "^9.22.0",
+		"nativewind": "^2.0.11",
 		"react": "18.1.0",
 		"react-dom": "18.1.0",
+		"react-icons": "^4.8.0",
 		"react-native": "0.70.8",
 		"react-native-calendars": "^1.1293.0",
 		"react-native-elements": "^3.4.2",
@@ -61,6 +63,7 @@
 		"eslint-plugin-react": "^7.31.11",
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"prettier": "^2.8.8",
+		"tailwindcss": "^3.3.2",
 		"typescript": "^4.6.3"
 	},
 	"private": true

src/components/SelfPostModal.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from "react";
+
+import {
+	Alert,
+	Modal,
+	StyleSheet,
+	Text,
+	Pressable,
+	View,
+	TextInput,
+} from "react-native";
+
+const SelfPostModal = () => {
+	const [modalVisible, setModalVisible] = useState(false);
+	const [text, onChangeText] = React.useState("");
+	return (
+		<View style={styles.centeredView}>
+			<Modal
+				animationType="slide"
+				transparent={true}
+				visible={modalVisible}
+				onRequestClose={() => {
+					Alert.alert("Modal has been closed.");
+					setModalVisible(!modalVisible);
+				}}
+			>
+				<View style={styles.centeredView}>
+					<View style={styles.modalView}>
+						<Pressable
+							style={[styles.button, styles.buttonClose]}
+							onPress={() => setModalVisible(!modalVisible)}
+						>
+							<Text> Close </Text>
+						</Pressable>
+						<Text style={styles.modalText}>
+							I'm thankful for...
+						</Text>
+						<TextInput
+							style={styles.input}
+							onChangeText={onChangeText}
+							value={text}
+							placeholder="Write text here"
+							placeholderTextColor={"#846c5b"}
+						/>
+					</View>
+				</View>
+			</Modal>
+			<Pressable
+				style={[styles.button, styles.buttonOpen]}
+				onPress={() => setModalVisible(true)}
+			>
+				<Text style={styles.textStyle}>Show Modal</Text>
+			</Pressable>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	centeredView: {
+		flex: 1,
+		justifyContent: "center",
+		alignItems: "center",
+		marginTop: 22,
+	},
+	modalView: {
+		margin: 20,
+		backgroundColor: "white",
+		borderRadius: 20,
+		padding: 35,
+		alignItems: "center",
+		shadowColor: "#000",
+		shadowOffset: {
+			width: 0,
+			height: 2,
+		},
+		shadowOpacity: 0.25,
+		shadowRadius: 4,
+		elevation: 5,
+	},
+	button: {
+		borderRadius: 20,
+		padding: 10,
+		elevation: 2,
+	},
+	buttonOpen: {
+		backgroundColor: "#F194FF",
+	},
+	buttonClose: {
+		backgroundColor: "#2196F3",
+	},
+	input: {
+		height: 40,
+		margin: 12,
+		borderWidth: 0.5,
+		borderRadius: 20,
+		padding: 10,
+	},
+	textStyle: {
+		color: "white",
+		fontWeight: "bold",
+		textAlign: "center",
+	},
+	modalText: {
+		marginBottom: 15,
+		textAlign: "center",
+	},
+});
+
+export default SelfPostModal;

tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: [
+		"./App.{js,jsx,ts,tsx}",
+		"./<custom directory>/**/*.{js,jsx,ts,tsx}",
+	],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};