I have a FlatList that receives (immutable) data of max. 50 elements and it renders in each list item Svg using react-native-svg.
Parts of the graphics are wrapped with a Pressable component for selecting the element.
Now the problem is, that I can't select any of the elements, until the FlatList went through all 50 items.
What I don't get is, that the offscreen items aren't even rendered, it's just the containers. Once it's all rendered, I can click the elements, the ripple effect shows and the event is fired.
Specs:
Expo # 46.0.0
React Native # 0.69.6
React # 18.0.0
Running with android via expo start --no-dev --minify then open in Expo Go
Reproduction:
import React, { useEffect, useState } from 'react'
import { FlatList } from 'react-native'
import { Foo } from '/path/to/Foo'
import { Bar } from '/path/to/Bar'
export const Overview = props => {
const [data, setData] = useState(null)
// 1. fetching data
useEffect(() => {
// load data from api
const loaded = [{ id: 0, type: 'foo' }, { id: 1, type: 'bar' }] // make a list of ~50 here
setData(loaded)
}, [])
if (!data?.length) {
return null
}
// 2. render list item
const onPressed = () => console.debug('pressed')
const renderListItem = ({ index, item }) => {
if (item.type === 'foo') {
return (<Foo key={`foo-${index}`} onPressed={onPressed} />)
}
if (item.type === 'bar') {
return (<Foo key={`bar-${index}`} onPressed={onPressed} />)
}
return null
}
// at this point data exists but will not be changed anymore
// so theoretically there should be no re-render
return (
<FlatList
data={data}
renderItem={renderListItem}
inverted={true}
decelerationRate="fast"
disableIntervalMomentum={true}
removeClippedSubviews={true}
persistentScrollbar={true}
keyExtractor={flatListKeyExtractor}
initialNumToRender={10}
maxToRenderPerBatch={10}
updateCellsBatchingPeriod={100}
getItemLayout={flatListGetItemLayout}
/>
)
}
}
// optimized functions
const flatListKeyExtractor = (item) => item.id
const flatListGetItemLayout = (data, index) => {
const entry = data[index]
const length = entry && ['foo', 'bar'].includes(entry.type)
? 110
: 59
return { length, offset: length * index, index }
}
Svg component, only Foo is shown, since Bar is structurally similar and the issue affects both:
import React from 'react'
import Svg, { G, Circle } from 'react-native-svg'
const radius = 25
const size = radius * 2
// this is a very simplified example,
// rendering a pressable circle
const FooSvg = props => {
return (
<Pressable
android_ripple={rippleConfig}
pressRetentionOffset={0}
hitSlop={0}
onPress={props.onPress}
>
<Svg
style={props.style}
width={size}
height={size}
viewBox={`0 0 ${radius * 2} ${radius * 2}`}
>
<G>
<Circle
cx='50%'
cy='50%'
stroke='black'
strokeWidth='2'
r={radius}
fill='red'
/>
</G>
</Svg>
</Pressable>
)
}
const rippleConfig = {
radius: 50,
borderless: true,
color: '#00ff00'
}
// pure component
export const Foo = React.memo(FooSvg)
The rendering performance itself is quite good, however I can't understand, why I need to wait up to two seconds, until I can press the circles, allthough they have already been rendered.
Any help is greatly appreciated.
Edit
When scrolling the list very fast, I get:
VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"contentLength": 4740, "dt": 4156, "prevDt": 5142}
However, the Components are already memoized (PureComponent) and not very complex. There must be another issue.
Hardware
I cross tested with an iPad and there is none if the issues described. It seems to only occur on Android.
Please ignore grammatical mistakes.
This is the issue with FlatList. Flat list is not good for rendering a larger list at one like contact list. Flatlist is only good for getting data from API in church's like Facebook do. get 10 element from API and. then in the next call get 10 more.
To render. a larger number of items like contact list (more than 1000) or something like this please use https://bolan9999.github.io/react-native-largelist/#/en/
import React, {useRef, useState} from 'react';
import {
Image,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import {LargeList} from 'react-native-largelist-v3';
import Modal from 'react-native-modal';
import {widthPercentageToDP as wp} from 'react-native-responsive-screen';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import fonts from '../constants/fonts';
import {moderateScale} from '../constants/scaling';
import colors from '../constants/theme';
import countries from '../Data/larger_countries.json';
const CountrySelectionModal = ({visible, setDefaultCountry, setVisible}) => {
const pressable = useRef(true);
const [country_data, setCountryData] = useState(countries);
const [search_text, setSearchText] = useState('');
const onScrollStart = () => {
if (pressable.current) {
pressable.current = false;
}
};
const onScrollEnd = () => {
if (!pressable.current) {
setTimeout(() => {
pressable.current = true;
}, 100);
}
};
const _renderHeader = () => {
return (
<View style={styles.headermainView}>
<View style={styles.headerTextBg}>
<Text style={styles.headerTitle}>Select your country</Text>
</View>
<View style={styles.headerInputBg}>
<TouchableOpacity
onPress={() => searchcountry(search_text)}
style={styles.headericonBg}>
<FontAwesome
name="search"
size={moderateScale(20)}
color={colors.textColor}
/>
</TouchableOpacity>
<TextInput
placeholder="Select country by name"
value={search_text}
placeholderTextColor={colors.textColor}
style={styles.headerTextInput}
onChangeText={text => searchcountry(text)}
/>
</View>
</View>
);
};
const _renderEmpty = () => {
return (
<View
style={{
height: moderateScale(50),
backgroundColor: colors.white,
flex: 1,
justifyContent: 'center',
}}>
<Text style={styles.notFoundText}>No Result Found</Text>
</View>
);
};
const _renderItem = ({section: section, row: row}) => {
const country = country_data[section].items[row];
return (
<TouchableOpacity
activeOpacity={0.95}
onPress={() => {
setDefaultCountry(country),
setSearchText(''),
setCountryData(countries),
setVisible(false);
}}
style={styles.renderItemMainView}>
<View style={styles.FlagNameView}>
<Image
source={{
uri: `https://zoobiapps.com/country_flags/${country.code.toLowerCase()}.png`,
}}
style={styles.imgView}
/>
<Text numberOfLines={1} ellipsizeMode="tail" style={styles.text}>
{country.name}
</Text>
</View>
<Text style={{...styles.text, marginRight: wp(5), textAlign: 'right'}}>
(+{country.callingCode})
</Text>
</TouchableOpacity>
);
};
const searchcountry = text => {
setSearchText(text);
const items = countries[0].items.filter(row => {
const result = `${row.code}${row.name.toUpperCase()}`;
const txt = text.toUpperCase();
return result.indexOf(txt) > -1;
});
setCountryData([{header: 'countries', items: items}]);
};
return (
<Modal
style={styles.modalStyle}
animationIn={'slideInUp'}
animationOut={'slideOutDown'}
animationInTiming={1000}
backdropOpacity={0.3}
animationOutTiming={700}
hideModalContentWhileAnimating={true}
backdropTransitionInTiming={500}
backdropTransitionOutTiming={700}
useNativeDriver={true}
isVisible={visible}
onBackdropPress={() => {
setVisible(false);
}}
onBackButtonPress={() => {
setVisible(false);
}}>
<LargeList
showsHorizontalScrollIndicator={false}
style={{flex: 1, padding: moderateScale(10)}}
onMomentumScrollBegin={onScrollStart}
onMomentumScrollEnd={onScrollEnd}
contentStyle={{backgroundColor: '#fff'}}
showsVerticalScrollIndicator={false}
heightForIndexPath={() => moderateScale(49)}
renderIndexPath={_renderItem}
data={country_data}
bounces={false}
renderEmpty={_renderEmpty}
renderHeader={_renderHeader}
headerStickyEnabled={true}
initialContentOffset={{x: 0, y: 600}}
/>
</Modal>
);
};
export default CountrySelectionModal;
const styles = StyleSheet.create({
modalStyle: {
margin: moderateScale(15),
borderRadius: moderateScale(10),
overflow: 'hidden',
backgroundColor: '#fff',
marginVertical: moderateScale(60),
justifyContent: 'center',
},
headermainView: {
height: moderateScale(105),
backgroundColor: '#fff',
},
headerTextBg: {
height: moderateScale(50),
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
headerTitle: {
textAlign: 'center',
fontFamily: fonts.Bold,
fontSize: moderateScale(16),
color: colors.textColor,
textAlignVertical: 'center',
},
headerInputBg: {
height: moderateScale(40),
borderRadius: moderateScale(30),
overflow: 'hidden',
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: moderateScale(10),
backgroundColor: colors.inputbgColor,
flexDirection: 'row',
},
headericonBg: {
backgroundColor: colors.inputbgColor,
alignItems: 'center',
justifyContent: 'center',
width: moderateScale(40),
height: moderateScale(40),
},
headerTextInput: {
backgroundColor: colors.inputbgColor,
height: moderateScale(30),
flex: 1,
paddingTop: 0,
includeFontPadding: false,
fontFamily: fonts.Medium,
color: colors.textColor,
paddingBottom: 0,
paddingHorizontal: 0,
},
notFoundText: {
fontFamily: fonts.Medium,
textAlign: 'center',
fontSize: moderateScale(14),
textAlignVertical: 'center',
color: colors.textColor,
},
renderItemMainView: {
backgroundColor: colors.white,
flexDirection: 'row',
alignSelf: 'center',
height: moderateScale(43),
alignItems: 'center',
justifyContent: 'space-between',
width: wp(100) - moderateScale(30),
},
FlagNameView: {
flexDirection: 'row',
justifyContent: 'center',
paddingLeft: moderateScale(12),
alignItems: 'center',
},
imgView: {
height: moderateScale(30),
width: moderateScale(30),
marginRight: moderateScale(10),
borderRadius: moderateScale(30),
},
text: {
fontSize: moderateScale(13),
color: colors.textColor,
marginLeft: 1,
fontFamily: fonts.Medium,
},
});
1
I am a beginner and still learning to react native.
In my react native App, I have 2 screens. In the first page, I have JSON data ; I want to pass this JSON data to the next page.
I used react-navigation for navigating between pages. I need to passed each parameter for a new book screen for each book.
But I couldn't figure out, how to pass JSON data to next page! In BookScreen.js the function "getParam" is not been seen.
First Screen: ExploreScreen.js
import React, { useState, useEffect } from "react";
import {
View,
Text,
StyleSheet,
FlatList,
Image,
TouchableOpacity,
} from "react-native";
export default function ExploreScreen({ navigation, route }) {
const [data, setData] = useState([]);
useEffect(() => {
loadData();
}, []);
const loadData = async () => {
await fetch(
"http://www.json-generator.com/api/json/get/bTvNJudCPS?indent=2"
)
.then((response) => response.json())
.then((receivedData) => setData(receivedData));
};
return (
<View style={styles.container}>
<FlatList
data={data}
renderItem={({ item }) => (
<TouchableOpacity
style={styles.book}
onPress={() => navigation.navigate("Book", item)}
>
<Image
style={styles.bookImage}
source={{ uri: item.book_image }}
></Image>
<View>
<Text style={styles.bookTitleText}>{item.title}</Text>
<Text style={styles.bookAuthor}>{item.author}</Text>
<Text style={styles.bookGenre}>
<Text styles={styles.gen}>Genul: </Text>
{item.genre_id}
</Text>
</View>
</TouchableOpacity>
)}
></FlatList>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
alignSelf: "center",
paddingVertical: "15%",
},
book: {
flex: 1,
flexDirection: "row",
marginBottom: 3,
},
bookImage: {
width: 100,
height: 100,
margin: 5,
},
bookTitleText: {
color: "#8B0000",
fontSize: 15,
fontStyle: "italic",
fontWeight: "bold",
},
bookAuthor: {
color: "#F41313",
},
});
Second Screen: BookScreen.js
import React from "react";
import { View, Text, StyleSheet } from "react-native";
export default function BookScreen({ navigation, route }) {
const { item } = route.params;
return (
<View style={styles.container}>
<Text style={styles.text}>{navigation.getParam("name")}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
alignSelf: "center",
paddingVertical: "100%",
},
text: {
fontSize: 20,
},
});
In your BookScreen, change it to the following:
export default function BookScreen({ navigation, route }) {
const { item } = route.params;
return (
<View style={styles.container}>
<Text style={styles.text}>{item.name}</Text>
</View>
);
}
Edit:
I think you should pass the data like this:
navigation.navigate('Book', {item: item});
I am doing a search filter for an TodoList.
In todoList I'm using a function to render items called renderItem, but I don't know how to re-render, when I write the searched item in the inputText
Can someone help me?
StaticContainer.js
import * as React from 'react';
import { FlatList, Text, View, StyleSheet, TouchableOpacity, TextInput } from 'react-native';
export default class StaticCounter extends React.Component {
constructor(props) {
super(props);
this.state = {
filter: '',
name: '',
}
this.renderItem = this.renderItem.bind(this)
this.setState = this.setState.bind(this)
}
setState(text){
this.state.filter = text
alert(JSON.stringify(this.state.filter))
this.renderItem
}
renderItem(obj){
if (this.state.filter != '') {
if (obj.item.desc.startsWith(this.state.filter)) {
console.log(typeof(obj.item.desc));
let key = obj.item.key
return(
<TouchableOpacity style={styles.container} onPress={()=> this.props.acessarDados(key)}>
<Text style={styles.cel}>{obj.item.desc}</Text>
</TouchableOpacity>
)
}else{
}
}else{
let key = obj.item.key
return(
<TouchableOpacity style={styles.container} onPress={()=> this.props.acessarDados(key)}>
<Text style={styles.cel}>{obj.item.desc}</Text>
</TouchableOpacity>
)
}
}
render() {
return (
<View>
<FlatList style={styles.lista} data={this.props.itens} renderItem={this.renderItem}/>
<TextInput style={styles.input} onChangeText={(text) =>{this.setState(text)}}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'center',
},
lista: {
marginTop: 90,
},
cel:{
paddingVertical: 20,
backgroundColor: '#E4EBEE',
fontSize: 18,
marginBottom: 2,
},
inputView:{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
input:{
backgroundColor: '#fff',
borderColor: '#ccc',
borderWidth: 3,
padding: 15,
margin:20,
color: '#3d3d3d'
}
});
you have to filter the data that you pass to the flatlist
state = {todoList: props.items }
filterTodo = (inputText) => {
const filteredList = this.state.todolist.filter(todo => todo.includes(inputText));
this.setState({todolist: filteredList })
}
then the data for your flatlist becomes this.state.todolist.
just to be clear the render Item is the component that get rendered from each data point in the data array, logic for the whole list should not be done there, if you don't want to show any data it should be a ternary in the data prop
data={someCondition? this.props.todolist: [] }
I think you have a typo in the flatlist data={this.props.itens}, this will work for a simple list if its a really big list you'll need a more optimized backend search.
I'm studying React Native with this site https://www.tutorialspoint.com/react_native/react_native_animations.htm
However, there is a problem while i'm trying to open app on iPhone. According to error it cannot find variable, though it's imported.
import React, { Component } from 'react';
import { View, LayoutAnimation, TouchableOpacity, Text, StyleSheet} from 'react-native';
export default class Animations extends Component {
state = {
myStyle: {
height: 100,
backgroundColor: 'red'
}
};
expandElement = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
this.setState({
myStyle: {
height: 400,
backgroundColor: 'red'
}
})
};
collapseElement = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
this.setState({
myStyle: {
height: 100,
backgroundColor: 'red'
}
})
};
render() {
return (
<View>
<View>
<View style={this.state.myStyle}/>
</View>
<TouchableOpacity>
<Text style={styles.button} onPress = {this.expandElement}>
Expand
</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.button} onPress = {this.collapseElement}>
Collapse
</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
button: {
borderWidth: 1,
borderColor: 'red',
color: 'red',
textAlign: 'center',
marginTop: 50,
padding: 10
}
});
Ah... I've found the problem. It was in other component which had styles but no elements to them and had no imported StylesSheet since I corrected it to new conditions but forgot about block with styles.
I am rendering a ListView in a React Native app that I'm building and am finding that a parent View container for the row is not expanding to fit all the content within it and I'm not sure why.
See in screenshot below how the second row within the row is rendered within the margin of the row view:
Component is as follows:
import React from 'react';
import { connect } from 'react-redux';
import {
View,
Text
} from 'react-native';
import { Icon } from 'native-base';
const ListViewRow = (props) => {
const { booking } = props;
const guest = props.guests[booking.guest_id];
return (
<View style={styles.rowStyle}>
<View style={styles.leftContentStyle}>
<View>
<Text>{guest.fullname}</Text>
</View>
<View>
<Text>{booking.start_date} - {booking.end_date}</Text>
</View>
</View>
<View style={styles.rightContentStyle}>
<Icon name='ios-arrow-forward' />
</View>
</View>
);
};
const styles = {
rowStyle: {
flex: 1,
borderBottomWidth: 1,
padding: 10,
backgroundColor: '#fff',
justifyContent: 'space-between',
flexDirection: 'row',
borderColor: '#ddd',
position: 'relative'
},
leftContentStyle: {
alignItems: 'stretch'
},
rightContentStyle: {
flexDirection: 'row',
alignItems: 'center'
}
};
const mapStateToProps = state => {
return { guests: state.guests };
};
export default connect(mapStateToProps)(ListViewRow);