folofse / androw

Shadows in React Native for Android

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

app crash when use androw in long list like chat

ydv0121 opened this issue · comments

hello brother @folofse ,
i getting crashes in my app when use androw in long list like chat or something else which contain so many data in list..
i am getting this error from last 20 days..finally figured out it's beacuse of androw called in flatlist..

when i look this error very carefully i read that
UpdateRecursive
UIImplementation.java

after wasted so many hours/days find that it's beacuse of androw when i comment all androw tag no crashes occur so far

i think it might be because of last update when render recalled for image rendering.

here is screenshot from debug and from android studio

Screenshot_1561111891

Screenshot 2019-06-21 at 2 27 25 PM

is it fixable?? or androw is not usable in listview/flatlists?

@folofse am i right about this error???

I will test this and report back to you..
It might also be a good idea to use a virtual list, so the app doesn't have to render items that are outside the visual box.

ohh yes..i am not aware of virtual list..let me try with virtual list..Thank you

I got the same error so I will investigate to see if I can resolve this problem. If your able you can wrap the whole list in one androw, this will give the app the best performance.

import React, { Component } from 'react';
import {
	Image,
	FlatList,
	StyleSheet,
	Text,
	View,
} from 'react-native';

import Androw from 'react-native-androw';

export default class App extends Component {

	getURI() {
		const rand = Math.floor(Math.random() * 999);
		//const uri = "https://picsum.photos/2000/2000?random=" + rand;
		const uri = "https://picsum.photos/2000/2000";
		console.log(uri);
		return uri;
	}

	render() {
		const list = Array.from(new Array(50)).map((obj, idx) => { return { key: 'id' + idx, value: "Item number " + idx } });
		console.log(list);
		return (
			<View style={styles.container}>

				<View style={{ width: '100%' }}>


					<Androw style={{
						width: '100%',
						height: '100%',
						shadowOpacity: .5,
						shadowRadius: 10,
						shadowColor: '#ff00ff',
						shadowOffset: {
							width: 0,
							height: 0,
						}
					}}>
						<FlatList
							containerStyle={{ width: '100%', height: '100%', backgroundColor: 'lightGrey' }}
							data={list}
							renderItem={({ item }) => <Text style={{ width: '100%', }} key={item.key}>{item.value}</Text>}
						/>
					</Androw>

				</View>
			</View>
		);
	}
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#F5FCFF',
	},
	welcome: {
		fontSize: 20,
		textAlign: 'center',
		margin: 10,
	},
	instructions: {
		textAlign: 'center',
		color: '#333333',
		marginBottom: 5,
	},
	androw: {
		justifyContent: 'center',
		alignItems: 'flex-start',
	},

});

I have a chat module..i applied androw to the dynamic message text view...so when my all messages came from DB...crashes happen..if i got 10-20 messages ..androw will apply in every messsages

like this i applied shadow

Screenshot 2019-06-24 at 4 35 49 PM

@folofse is it fixable?

app is crashing in long list view..is it able to fix?? @folofse

Sorry for late feedback @ydv0121 , I have now manage to solve this crash bug in version 0.0.33, note that this version uses androidX. Also note that I have changed the Pixel Ratio to correspond to iOS, so your current shadowRadius and offset might become a bit bigger than before and you might need to account for that.

commented

app crashs or becomes stuck when using androw in section list item.