11import React , { useState } from 'react' ;
2- import { TextInput , View , Text , TouchableOpacity , StyleSheet , PermissionsAndroid , Platform } from 'react-native' ;
2+ import { TextInput , View , Text , TouchableOpacity , StyleSheet , PermissionsAndroid , Platform , Modal } from 'react-native' ;
33import RNFS from 'react-native-fs' ;
44import { launchCamera , CameraOptions } from 'react-native-image-picker' ;
55import { request , PERMISSIONS , RESULTS } from 'react-native-permissions' ;
6+ import { Calendar , DateData } from 'react-native-calendars' ;
67
78const App = ( ) => {
89 const [ inputText , setInputText ] = useState ( '' ) ;
10+ const [ isCalendarVisible , setIsCalendarVisible ] = useState ( false ) ;
11+ const [ selectedDate , setSelectedDate ] = useState ( '' ) ;
912
1013 const requestPermissions = async ( ) => {
1114 if ( Platform . OS === 'android' ) {
@@ -28,7 +31,6 @@ const App = () => {
2831 console . warn ( err ) ;
2932 }
3033 } else {
31- // iOS Permissions
3234 const cameraPermission = await request ( PERMISSIONS . IOS . CAMERA ) ;
3335 const storagePermission = await request ( PERMISSIONS . IOS . PHOTO_LIBRARY ) ;
3436 if ( cameraPermission !== RESULTS . GRANTED || storagePermission !== RESULTS . GRANTED ) {
@@ -71,6 +73,18 @@ const App = () => {
7173 }
7274 } ;
7375
76+ const schedulePost = ( ) => {
77+ setIsCalendarVisible ( true ) ;
78+ } ;
79+
80+
81+
82+ const onDayPress = ( day : DateData ) => {
83+ setSelectedDate ( day . dateString ) ;
84+ setIsCalendarVisible ( false ) ;
85+ console . log ( 'Selected date: ' , day . dateString ) ;
86+ } ;
87+
7488 return (
7589 < View style = { styles . container } >
7690 < Text style = { styles . title } > Social media scheduler</ Text >
@@ -86,17 +100,62 @@ const App = () => {
86100 </ TouchableOpacity >
87101 </ View >
88102
103+ < View style = { styles . captureContainer } >
104+ < TouchableOpacity onPress = { schedulePost } style = { styles . capture } >
105+ < Text style = { styles . captureText } > SCHEDULE</ Text >
106+ </ TouchableOpacity >
107+ </ View >
108+
89109 < TextInput
90110 style = { styles . textInput }
91111 placeholder = "Enter text to save"
92112 value = { inputText }
93113 onChangeText = { setInputText }
94114 />
115+
116+ { /* Full screen Modal */ }
117+ < Modal presentationStyle = 'fullScreen'
118+ visible = { isCalendarVisible }
119+ animationType = 'slide'
120+ onRequestClose = { ( ) => setIsCalendarVisible ( false ) }
121+ >
122+
123+ < Calendar
124+ onDayPress = { onDayPress }
125+ markedDates = { {
126+ [ selectedDate ] : { selected : true , marked : true , selectedColor : 'blue' } ,
127+ } }
128+ theme = { {
129+ 'stylesheet.calendar.main' : {
130+ base : {
131+ width : '100%' ,
132+ height : '100%' ,
133+ justifyContent : 'center' ,
134+ alignItems : 'center' ,
135+ } ,
136+ } ,
137+ } }
138+ />
139+
140+
141+ </ Modal >
142+
95143 </ View >
96144 ) ;
97145} ;
98146
99147const styles = StyleSheet . create ( {
148+ fullScreenModal : {
149+ flex : 1 ,
150+ justifyContent : 'center' ,
151+ alignItems : 'center' ,
152+ backgroundColor : 'rgba(0,0,0,0.5)' ,
153+ } ,
154+ calendarContainer : {
155+ flex : 1 ,
156+ justifyContent : 'center' ,
157+ alignItems : 'center' ,
158+ } ,
100159 container : {
101160 flex : 1 ,
102161 justifyContent : 'center' ,
@@ -131,6 +190,12 @@ const styles = StyleSheet.create({
131190 padding : 10 ,
132191 color : 'white' ,
133192 } ,
193+ modalContainer : {
194+ flex : 1 ,
195+ justifyContent : 'center' ,
196+ alignItems : 'center' ,
197+ backgroundColor : 'rgba(0,0,0,0.5)' ,
198+ } ,
134199} ) ;
135200
136201export default App ;
0 commit comments