COURSE: React Native - Advanced Concepts - 2. Native Features. The changes made in “Improving ListingEditScreen” lesson cause the app to crash.
Before making the changes to the ListingEditScreen that Mosh suggests in Advanced Concepts/2. Native Features/13- Improving ListingEditScreen video, I can successfully render the ListingEditScreen component in App.js at this point (after video 12- Building FormImagePicker).
But as soon as following his changes and adding the FormImagePicker to the ListingEditScreen components, it no longer renders.
Has anyone else been having this issue? Any help or suggestions would be greatly appreciated!!
Here is my code prior to Mosh’s changes in 13- Improving ListingEditScreen video:
ListingEditScreen.js
import React from ‘react’;
import { StyleSheet } from ‘react-native’;
import * as Yup from ‘yup’;
import {
AppForm,
AppFormField,
AppFormPicker,
SubmitButton,
} from ‘…/components/forms’;
import Screen from ‘…/components/Screen’;
import CategoryPickerItem from ‘…/components/CategoryPickerItem’;
const validationSchema = Yup.object().shape({
title: Yup.string().required().min(1).label(‘Title’),
price: Yup.number().required().min(1).max(10000).label(‘Price’),
description: Yup.string().label(‘Description’),
category: Yup.object().required().nullable().label(‘Category’),
});
const categories = [
{ label: ‘Automotive’, value: 1, backgroundColor: ‘#fc5c65’, icon: ‘car’ },
{
label: ‘Beauty & Health’,
value: 2,
backgroundColor: ‘#fd9644’,
icon: ‘brush’,
},
{ label: ‘Books’, value: 3, backgroundColor: ‘#fed330’, icon: ‘book’ },
{
label: ‘Electronics’,
value: 4,
backgroundColor: ‘#26de81’,
icon: ‘camera’,
},
{ label: ‘Games’, value: 5, backgroundColor: ‘#2bcbba’, icon: ‘cards’ },
{
label: ‘Home Goods’,
value: 6,
backgroundColor: ‘#45daf2’,
icon: ‘floor-lamp’,
},
{ label: ‘Pet Supplies’, value: 7, backgroundColor: ‘#4b7bec’, icon: ‘cat’ },
{ label: ‘Plants’, value: 8, backgroundColor: ‘#dc4c10’, icon: ‘flower’ },
{
label: ‘Movies & Music’,
value: 9,
backgroundColor: ‘#008080’,
icon: ‘headphones’,
},
{
label: ‘Sporting Equipment’,
value: 10,
backgroundColor: ‘#BCAFCF’,
icon: ‘tennis’,
},
];
function ListingEditScreen() {
return (
<AppForm
initialValues={{
title: ‘’,
price: ‘’,
description: ‘’,
category: null,
}}
onSubmit={(values) => console.log(values)}
validationSchema={validationSchema}
>
);
}
const styles = StyleSheet.create({
container: {
padding: 10,
},
});
export default ListingEditScreen;