Develop Reference

How to display products in Flatlist properly?

I am trying to display some fetched products in a FlatList, also to display more products when I reach the end of this FlatList, but I am getting this error: Invariant Violation: ScrollView child layout (["alignItems"]) must be applied through the contentContainerStyle prop.
When I change alignItems from style to contentContainerStyle the app closes without showing an error or alert.
If I remove the alignItems from container the app closes too
export default function NewProducts() {
const [products, setProducts] = useState([]);
const [isLoading, setisLoading] = useState(false);
const [startLimit, setStartLimit] = useState({ start: 0, limit: 10 });
const navigation = useNavigation();
useEffect(() => {
setisLoading(true);
getProducts();
}, [startLimit]);
const gotoProduct = (id) => {
navigation.push("product", { idProduct: id });
};
const getProducts = async () => {
const response = await getLastProductsApi(
startLimit.start,
startLimit.limit
);
console.log(response);
setProducts(response);
};
const renderItem = ({product}) => {
return (
<TouchableWithoutFeedback
key={product.id}
onPress={() => gotoProduct(product.id)}
>
<View style={styles.containerProduct}>
<View style={styles.product}>
<Image
style={styles.image}
source={{
uri: `${product.attributes.images.data[0].attributes.formats.small.url}`,
}}
/>
<Text style={styles.name} numberOfLines={1} ellipsizeMode="tail">
{product.attributes.title}
</Text>
</View>
</View>
</TouchableWithoutFeedback>
);
};
const renderFooter = () => {
return isLoading && <Loading text="Loading more products" size="medium" />;
};
const handleLoadMore = () => {
setStartLimit({
start: startLimit.start + 10,
limit: startLimit.limit + 10,
});
setisLoading(true);
};
return (
<FlatList
style={styles.container}
numColumns={2}
data={products}
renderItem={renderItem}
keyExtractor={(item, index) => index.toString()}
ListFooterComponent={renderFooter}
onEndReached={handleLoadMore}
onEndReachedThreshold={0}
/>
);
}
const styles = StyleSheet.create({
container: {
alignItems: "flex-start",
marginTop: 1,
},
containerProduct: {
padding: 3,
},
product: {
padding: 10,
backgroundColor: "#f0f0f0",
borderRadius: 20,
},
image: {
height: 150,
resizeMode: "contain",
borderRadius: 20,
},
name: {
marginTop: 15,
fontSize: 15,
},
});
Here is where I call this component
export default function Home() {
return (
<>
<StatusBarCustom
backgroundColor={colors.primary}
barStyle="light-content"
/>
<Search />
<View>
<Banner />
<NewProducts />
</View>
</>
);
}

When you use renderItem from FlatList you have to use item and not product: https://reactnative.dev/docs/flatlist#required-renderitem
You can replace
const renderItem = ({product}) => {
By
const renderItem = ({item}) => {

undefinded is not an object

Hello I'm facing with render error in my movie app during printing results for movie searching. Im working in React-Native 0.70.5. Here is some code for this activity
`
import React,{useState,useEffect} from 'react';
import axios from 'axios';
import { View, StyleSheet, Text, TextInput,ScrollView } from "react-native";
const Search = () => {
const apiurl="https://api.themoviedb.org/3/search/movie?api_key=XXX"
const [state,setState] = useState({
s: "Enter a movie",
results:[]
});
const search = () => {
axios(apiurl + "&query="+ state.s).then(({ data }) => {
let results = data.search;
console.log(data);
setState(prevState => {
return{...prevState, results: results }
})
})
}
return (
<View>
<TextInput
onChangeText={text => setState(prevState => {
return {...prevState, s:text}
})}
onSubmitEditing={search}
value={state.s}
/>
<ScrollView>
{state.results.map(result =>(
<View key={result.id}>
<Text>{result.title}</Text>
</View>
))}
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
center: {
flex: 1,
justifyContent: "center",
alignItems: "center",
textAlign: "center",
},
});
export default Search;
`
How to change the construction of this function to print movie titles corectly ?

This is just an example and not the best way to do it.
You need a success flag, something like this:
const [success,setSuccess] = useState(false);
const search = () => {
axios(apiurl + "&query="+ state.s).then(({ data }) => {
let results = data.results;
console.log(data);
setState(prevState => {
return{...prevState, results: results }
})
setSuccess(true);
})
}
<ScrollView>
{success && state.results.map(result =>(
<View key={result.id}>
<Text>{result.title}</Text>
</View>
))}
</ScrollView>

I am not sure but you can try this below ScrollView code...
<ScrollView>
{state.results.length>0 && (state.results.map((result) =>(
<View key={result.id}>
<Text>{result.title}</Text>
</View>
)))}
</ScrollView>

use optional chaining. Might be sometimes you don't get result.
<ScrollView>
{state?.results?.map(result =>(
<View key={result?.id}>
<Text>{result?.title}</Text>
</View>
))}
</ScrollView>
Let me know is it helpful or not

React native SectionList is not showing data from firebase

I am fetching an array of two objects. there are "title" and "iqtiboslar" array inside objects. and show it in SectionList but it is giving an error: "can not read properties of undefined(reading 'length')". Here is my code. Any ideas will be highly appreciated
const Item = ({iqtiboslar}) => (
<View>
<Text>{iqtiboslar}</Text>
</View>
);
const HomeScreen = ({navigation}) => { const [quote, setQuote] = useState();
useEffect(() => {
fetchQuotes();
return () => {
setQuote();
};
}, []);
const fetchQuotes = async () => {
try {
const quoteCollection = await firestore().collection('iqtiboslar').get(); // get(:field) to get specific doc
quoteCollection._docs.map(doc => setQuote(doc.data().items));
// quoteCollection._docs.map(doc => console.log(doc));
} catch (error) {
console.log(error);
}
};
return (
<View style={styles.container}>
{quote ? (
<SectionList
sections={quote}
keyExtractor={(item, index) => item + index}
renderItem={({item}) => <Item title={item.title} />}
renderSectionHeader={({section}) => <Text>{section.title}</Text>}
/>
) : (
<ActivityIndicator />
)} </View>
);
};
export default HomeScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
color: 'red',
},
});

Try this code
<SectionList
sections={quote}
keyExtractor={(item, index) => item + index}
renderItem={({item}) => <Text>{item}</Text>}
renderSectionHeader={({section: {title}}) => (
<Text style={styles.text}>{title}</Text>
)}

How to pass props to FlatList with renderScene in react-native-tab-view?

I'm a newbie in React Native and trying to pass props to ListHeaderComponent in FlatList
Here's the code:
const FirstRoute = (props) => {
const _renderHeader = () => {
return(
<View>
{props.isFollowed &&
<TouchableOpacity onPress={props.onSubmit}>
<Text>You have followed this person</Text>
</TouchableOpacity> }
</View>
)
}
return(
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}>
<FlatList
data={data}
keyExtractor={item => item.id}
renderItem={itemData => ( <Image source={itemData.item.id} style={{height: WIDTH/3, width: WIDTH/3}} />)}
ListHeaderComponent={_renderHeader}
/>
</View>
)
};
const SecondRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
const initialLayout = { width: Dimensions.get('window').width };
export default function Parent() {
const [index, setIndex] = React.useState(0);
const [routes] = useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);
const [_isFollowed, setIsFollowed] = useState(false);
const _onSubmit = () => {
...
setIsfollowed(true)
}
const renderScene = ({route}) => {
switch(route.key){
case 'first': return <FirstRoute {...props} onSubmit={_onSubmit} isFollowed={_isFollowed} />
case 'second': return <SecondRoute {...props} />
}
};
return (
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
);
}
But when I save it, the screen logs the error: Can't find the value of isFollowed
I think the problem is at the way I pass the props. I'm still learning it. Since when I delete the ListHeaderComponent, the FlatList still generates the list of images well. And I don't know if it has something to do with renderScene
I really don't understand why
Please help me. Thank you very much

Let me get this straight. You need to render _renderHeader dinamically based on _isFollowed state. So, you passed to the first route as props your _onSubmit function and _isFollowed state in order to get to access them at _renderHeader. Right?
As I see you actually doesn't need to do it once your _renderHeader has direct access to both _isFollowed state and _onSubmit function. Try it out as bellow:
export default function Parent() {
const [index, setIndex] = React.useState(0);
const [routes] = useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);
const [_isFollowed, setIsFollowed] = useState(false);
const initialLayout = { width: Dimensions.get('window').width };
function _onSubmit() {
setIsFollowed(true);
}
function _renderHeader() {
return (
<View>
{_isFollowed &&
<TouchableOpacity onPress={_onSubmit}>
<Text>You have followed this person</Text>
</TouchableOpacity> }
</View>
);
}
const FirstRoute = () => {
return(
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}>
<FlatList
data={data}
keyExtractor={item => item.id}
renderItem={itemData => ( <Image source={itemData.item.id} style={{height: WIDTH/3, width: WIDTH/3}} />)}
ListHeaderComponent={_renderHeader}
/>
</View>
)
};
const SecondRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
const renderScene = ({route}) => {
switch(route.key){
case 'first': return <FirstRoute />
case 'second': return <SecondRoute />
}
};
return (
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
);
}
Other point I don't understand in your code and couldn't check cause I didn't try to run it was the function bellow:
function _renderHeader() {
return (
<View>
{_isFollowed &&
<TouchableOpacity onPress={_onSubmit}>
<Text>You have followed this person</Text>
</TouchableOpacity> }
</View>
);
}
If you want to render TouchableOpacity just in case _isFollowed is true you should do it using ternary operator like so:
function _renderHeader() {
return (
<View>
{_isFollowed ?
<TouchableOpacity onPress={_onSubmit}>
<Text>You have followed this person</Text>
</TouchableOpacity> }
: <></>
}
</View>
);
}

react-native loading a list of images from gallery using hooks,

Im using react native and hooks to make a view where i choose from taking a photo with my camera or open my cellphone gallery and chose any image i want, once i have a picture it should show the image in a list, so if i choose more than one picture it should show more than oneimage in the list.
const Seleccion = ({navigation}) => {
const [fileList, setFileList] = useState([]);
const state = useMemo(() => ({ fileList }), [fileList]);
const onSelectedImage = useCallback((image) => {
setFileList(fileList => {
const newDataImg = [...fileList];
const source = { uri: image.path };
const item = {
id: Date.now(),
url: source,
content: image.data
};
newDataImg.push(item);
return newDataImg;
});
}, [setFileList]);
const takePhotoFromCamera = useCallback(() => {
ImagePicker.openCamera({
width: 300,
height: 400,
}).then(image => {
onSelectedImage(image);
console.log(image);
});
}, [onSelectedImage]);
const choosePhotoFromLibrary = useCallback(() => {
ImagePicker.openPicker({
width: 300,
height: 400,
}).then(image => {
onSelectedImage(image);
console.log(image);
});
}, [onSelectedImage]);
const renderItem = useCallback(({ item, index }) => {
return (
<View>
<Image source={item.url} style={styles.itemImage} />
</View>
);
}, []);
return (
<View style={styles.container}>
<FlatList
data={fileList}
keyExtractor={(item, index) => index.toString()}
renderItem={renderItem}
extraData={state}
/>
<TouchableOpacity style={styles.viewData} onPress={takePhotoFromCamera}>
<Text>Foto</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.viewData} onPress={choosePhotoFromLibrary}>
<Text>galeria</Text>
</TouchableOpacity>
</View>
);
}

This was my dirty component in a sample, take a look at it:
import React, {useState, useEffect, Fragment} from 'react';
import Icon from 'react-native-vector-icons/FontAwesome5Pro';
import {
View,
Modal,
ScrollView,
Image,
TouchableOpacity,
Text,
} from 'react-native';
import ActionSheet from 'react-native-action-sheet';
import ImagePicker from 'react-native-image-crop-picker';
import ImageViewer from 'react-native-image-zoom-viewer';
import styles from '../../../../../../styles';
const BUTTONS = ['Gallery', 'Camera', 'Cancel'];
export default props => {
let {files, setFiles} = props;
const [ImageViwerIsVisible, showImageViwer] = useState(false);
let [viewingIndex, setViewingIndex] = useState(-1);
useEffect(() => {
viewingIndex !== -1 && showImageViwer(true);
}, [viewingIndex]);
useEffect(() => {
!ImageViwerIsVisible && setViewingIndex(-1);
}, [ImageViwerIsVisible]);
const showActionSheet = () =>
ActionSheet.showActionSheetWithOptions(
{
title: 'Choose photo location',
options: BUTTONS,
cancelButtonIndex: 2,
destructiveButtonIndex: 2,
tintColor: 'blue',
},
buttonIndex => {
switch (buttonIndex) {
case 0:
return selectFromGallery();
case 1:
return selectFromCamera();
default:
return 0;
}
},
);
const selectFromGallery = () =>
ImagePicker.openPicker({
multiple: true,
//cropping: true,
})
.then(image => {
setFiles([...files, image].flat());
})
.catch(e => {});
const selectFromCamera = () =>
ImagePicker.openCamera({
cropping: true,
includeExif: true,
})
.then(image => {
setFiles([...files, image]);
})
.catch(e => {});
return (
<Fragment>
{!!ImageViwerIsVisible && (
<Modal transparent={true} onRequestClose={() => showImageViwer(false)}>
<ImageViewer
imageUrls={files.map(f => ({url: f.path}))}
index={viewingIndex}
/>
</Modal>
)}
<View
style={{
flexDirection: 'row',
padding: 10,
backgroundColor: '#ececec',
marginBottom: 5,
}}>
<TouchableOpacity onPress={() => showActionSheet()}>
<Icon solid name="camera-retro" size={32} />
</TouchableOpacity>
{/* <Text>{JSON.stringify(files, null, 2)}</Text> */}
<ScrollView style={{flexDirection: 'row', flex: 1}} horizontal>
{files.map((file, index) => (
<TouchableOpacity
key={file.path}
onPress={() => setViewingIndex(index)}
onLongPress={() =>
ImagePicker.cleanSingle(file.path)
.then(() => setFiles(files.filter(f => f.path !== file.path)))
.catch(e => {})
}
style={{
marginRight: 5,
width: 50,
height: 50,
borderWidth: 1,
borderColor: '#000',
borderRadius: 5,
}}>
<Image
source={{uri: file.path}}
style={{width: '100%', height: '100%', borderRadius: 5}}
/>
</TouchableOpacity>
))}
</ScrollView>
</View>
</Fragment>
);
};
You need to place useCallBack as you were use in your code, in that time i was dummy about react-hooks.