Passing image data from screen to component - react-native

Question

I am unable to pass the photo data from the takePicture function in CameraScreen.tsx to the AddNewPostButton.tsx component to insert the photo into the firebase database. My idea of using useContext is not working and I don't know how to solve it.
I tried to send photos from the CameraScreen screen to the AddNewPostButton component using the useContext mechanism, but I couldn't do it and I don't know how to do it.
CameraScreen.tsx
"Cannot assign argument of type 'string | undefined' to parameter of type 'string | null'.
Type 'undefined' cannot be assigned to type 'string | null'."
import React, { useContext, useState, createContext } from 'react';
import { Pressable, Center, Modal, Button, Stack, Input, TextArea, Icon, Text, View } from 'native-base';
import { MaterialCommunityIcons } from '#expo/vector-icons';
import { addDoc, Timestamp, collection } from 'firebase/firestore';
import { db } from '../firebaseConfig';
import { AuthContext } from '../utils/AuthStateListener';
import type { StackNavigationProp } from '#react-navigation/stack';
import { useNavigation } from '#react-navigation/native';
import { RootStackParamList } from '../stacks/RootStack';
type photoButton = StackNavigationProp<RootStackParamList>;
export const ImageContext = createContext<{ image: string | null, setImage: (newImage: string | null) => void }>({
image: null,
setImage: () => {},
});
function AddNewPostButton() {
const { currentUser, userProfile } = useContext(AuthContext);
//const [image, setImage] = useState<string | null>(null);
const navigation: photoButton = useNavigation();
const { image, setImage } = useContext(ImageContext);
/* const setImage = (newImage: string | null) => {
ImageContext.setImage(newImage);
} */
const [modalVisible, setModalVisible] = React.useState(false);
const [newPost, setNewPost] = React.useState({
title: '',
description: '',
location: '',
photo: ''
});
if (image) console.log(image);
const handleChange = (name: string, value: string) => {
setNewPost((prev) => ({ ...prev, [name]: value }));
};
const addNewPost = async () => {
await addDoc(collection(db, 'publicPosts'), {
title: newPost.title,
description: newPost.description,
location: newPost.location,
date: Timestamp.fromDate(new Date()),
photo: image ? image : '',
likes: 0,
authorId: currentUser?.uid,
authorName: userProfile?.name,
});
setNewPost({
title: '',
description: '',
location: '',
photo: ''
});
setModalVisible(false);
setImage('');
};
return (
<>
<Modal isOpen={modalVisible} onClose={setModalVisible}>
<Modal.Content>
<Modal.CloseButton />
<Modal.Header>Dodaj ogłoszenie</Modal.Header>
<Modal.Body>
<Stack space={1} w="75%" maxW="300px" mx="auto">
<Input
variant="outline"
placeholder="Tytuł nowego ogłoszenia"
onChangeText={(value) => handleChange('title', value)}
/>
<Input
variant="outline"
placeholder="Lokalizacja"
onChangeText={(value) => handleChange('location', value)}
/>
<TextArea
variant="outline"
placeholder="Opis ogłoszenia"
onChangeText={(value) => handleChange('description', value)}
/>
</Stack>
<View>
<Button
onPress={() => {
navigation.navigate({
name: 'Camera',
key: 'CameraScreen',
});
//navigation.navigate({name:'Camera'})
setModalVisible(false);
}}>
<Text>Dodaj zdjęcie</Text>
</Button>
</View>
</Modal.Body>
<Modal.Footer>
<Button.Group space={2}>
<Button
variant="ghost"
colorScheme="blueGray"
onPress={() => {
setModalVisible(false);
}}>
Anuluj
</Button>
<Button
onPress={() => {
addNewPost();
}}>
Zapisz
</Button>
</Button.Group>
</Modal.Footer>
</Modal.Content>
</Modal>
<Pressable
opacity={modalVisible === true ? 1 : 0.5}
py="3"
flex={1}
onPress={() => {
setModalVisible(true);
}}>
<Center>
<Icon mb="1" as={<MaterialCommunityIcons name="plus-box" />} color="white" size="sm" />
<Text color="white" fontSize="12">
Dodaj
</Text>
</Center>
</Pressable>
</>
);
}
export default AddNewPostButton;
import { Camera, CameraType } from 'expo-camera';
import { useState, useRef, useContext } from 'react';
import { StyleSheet, Text, TouchableOpacity, View, Dimensions, Alert } from 'react-native';
import { Ionicons } from '#expo/vector-icons';
import { ImageContext } from '../components/AddNewPostButton';
const screenWidth = Dimensions.get('window').width;
function CameraScreen() {
const [type, setType] = useState(CameraType.back);
const [permission, requestPermission] = Camera.useCameraPermissions();
const { image, setImage } = useContext(ImageContext);
let camera = useRef<Camera>(null);
if (!permission) {
return <View />;
}
if (!permission.granted) {
return (
<Text>Brak dostępu do kamery</Text>
);
}
const takePicture = async () => {
if (camera.current) {
try {
const options = { quality: 0.5, base64: true, orientation: 'portrait' };
const data = await camera.current.takePictureAsync(options);
setImage(data.base64);
} catch (error) {
console.error(error);
Alert.alert('Wystąpił błąd podczas dodawania zdjęcia');
}
}
}
return (
<View style={styles.container}>
<Camera ref={camera} style={styles.camera} type={type}>
<View style={styles.cameraControls}>
<TouchableOpacity
style={styles.flipButton}
onPress={() => {
setType(
type === CameraType.back
? CameraType.front
: CameraType.back
);
}}>
<Ionicons name="ios-camera-reverse-outline" size={64} color="#fff" />
</TouchableOpacity>
<TouchableOpacity
style={styles.captureButton}
onPress={() => takePicture()}>
<Ionicons name="ios-camera" size={64} color="#fff" />
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000',
alignItems: 'center',
justifyContent: 'center',
},
camera: {
width: screenWidth,
height: screenWidth + 200,
},
cameraControls: {
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'space-evenly',
flexDirection: 'row',
paddingHorizontal: 16,
paddingVertical: 16,
},
flipButton: {
alignSelf: 'flex-end',
},
captureButton: {
alignSelf: 'flex-end',
},
text: {
fontSize: 14,
},
});
export default CameraScreen;
import React, { useContext } from 'react';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { Timestamp } from 'firebase/firestore';
import ToggleDarkMode from '../components/DarkModeToggle';
import Header from '../components/Header';
import HomeScreen from '../screens/HomeScreen';
import PostDetailsScreen from '../screens/PostDetailsScreen';
import Signup from '../screens/SignupScreen';
import SigninScreen from '../screens/SigninScreen';
import { AuthContext } from '../utils/AuthStateListener';
import ResetPassword from '../screens/ResetPassword';
import HeaderNavigateBackButton from '../components/HeaderNavigateBackButton';
import UserDetailsScreen from '../screens/UserDetailsScreen';
import CameraScreen from '../screens/CameraScreen';
export type RootStackParamList = {
Home: undefined;
Signup: undefined;
Signin: undefined;
ResetPassword: undefined;
UserDetails: undefined;
Camera: {
param: string;
};
Details: {
post: {
title: string;
description: string;
date: Timestamp;
location: string;
likes: number;
};
};
};
const Stack = createNativeStackNavigator<RootStackParamList>();
// Functions to prevent eslint error of declaring component inside parent component
function ToggleDarkModeComponent() {
return <ToggleDarkMode />;
}
function HeaderComponent() {
return <Header />;
}
function NavigateBackButtonComponent() {
return <HeaderNavigateBackButton />;
}
function RootStack() {
const { currentUser } = useContext(AuthContext);
return (
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerStyle: { backgroundColor: '#86efac' },
headerRight: ToggleDarkModeComponent,
}}>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerTitle: HeaderComponent,
}}
/>
{!currentUser ? (
<>
<Stack.Screen
name="Signin"
component={SigninScreen}
options={{
headerLeft: NavigateBackButtonComponent,
}}
/>
<Stack.Screen
name="Signup"
component={Signup}
options={{
headerLeft: NavigateBackButtonComponent,
}}
/>
<Stack.Screen
name="ResetPassword"
component={ResetPassword}
options={{
headerLeft: NavigateBackButtonComponent,
}}
/>
</>
) : (
<>
<Stack.Screen
name="Details"
component={PostDetailsScreen}
options={{
headerLeft: NavigateBackButtonComponent,
}}
/>
<Stack.Screen
name="UserDetails"
component={UserDetailsScreen}
options={{
headerLeft: NavigateBackButtonComponent,
}}
/>
<Stack.Screen
name="Camera"
component={CameraScreen}
options={{
headerLeft: NavigateBackButtonComponent,
}}
/>
</>
)}
</Stack.Navigator>
);
}
export default RootStack;