I'm writing an image picker using react-native's CameraRoll
API and rendering them in a FlatList
inside CameraRollScreen
component. This component takes a prop called maxPhotos
, say 3, when a user has selected 3 photos, all other photos will be disabled (cannot be selected anymore), it looks like this (this is what I have right now, it works, but not performant):
As you can see, when I've selected 3 photos (which is the limit), all other photos are covered by a transparent view (disabled). This is not performant, doesn't seem so in the GIF, but when running on a real device, this problem can no longer be ignored. Selecting the first 2 photos doesn't cause any lag, however, upon selecting the last photo, since all other photos will have to be disabled, it becomes laggy. But I have no idea how else I could disable the other photos without disabling them 1 by 1. Here is the code I have for my image picker:
Since every image has different states, I also make each photo a PureComponent
called CameraRollImage
that has the following state:
{
uri: '',
index: -1 // if not selected, it's -1, if selected, it denotes
// the position of the photo in the 'selectedPhotos'
// array
disabled: false // Whether it should be disabled
}
CameraRollImage
component:
class CameraRollImage extends PureComponent {
constructor(props) {
super(props);
this.state = {
uri: '',
index: -1,
disabled: false
};
this.onSelectPhoto = this.onSelectPhoto.bind(this);
}
componentWillMount() {
const { uri, index, disabled } = this.props;
this.setState({ uri, index, disabled });
}
componentWillReceiveProps(nextProps) {
const { uri, index, disabled } = nextProps;
this.setState({ uri, index, disabled });
}
onSelectPhoto() {
const { uri, index } = this.state;
this.props.onSelectPhoto({ uri, index });
// 'onSelectPhoto' is a method passed down to each photo
// from 'CameraRollScreen' component
}
render() {
const { uri, index, disabled } = this.state;
return (
<View style={{ ... }}>
<TouchableOpacity
disabled={disabled}
onPress={this.onSelectPhoto}
>
<Image
source={{ uri }}
style={{ ... }}
/>
</TouchableOpacity>
// If disabled, render a transparent view that covers the photo
{disabled && <View
style={{
position: 'absolute',
backgroundColor: 'rgba(0, 0, 0, 0.75)',
width: ... height: ...
}}
/>}
// render the index here
</View>
);
}
}
export default CameraRollImage;
Then, in CameraRollScreen
Component:
class CameraRollScreen extends Component {
constructor(props) {
super(props);
this.state = {
allPhotos: [], // all photos in camera roll
selectedPhotos: []
};
this.onSelectPhoto = this.onSelectPhoto.bind(this);
this.renderPhoto = this.renderPhoto.bind(this);
}
componentWillMount() {
// Access the photo library to grab all photos
// using 'CameraRoll' API then push all photos
// to 'allPhotos' property of 'this.state'
}
onSelectPhoto({ uri, index }) {
let { selectedPhotos } = { ...this.state };
if (index === -1) {
// this means that this photo is not selected
// and we should add it to 'selectedPhotos' array
selectedPhotos.push(uri);
} else {
_.pullAt(selectedPhotos, index);
}
this.setState({ selectedPhotos });
}
renderPhoto({ item }) {
// item is the uri of the photo
const { selectedPhotos } = this.state;
const index = _.indexOf(selectedPhotos, item);
// A photo should be disabled when reach the limit &&
// it's not selected (index === -1)
return (
<CameraRollImage
uri={item}
index={index}
onSelectPhoto={this.onSelectPhoto}
disabled={index === -1 && selectedPhotos.length >= 3}
/>
);
}
render() {
const { allPhotos } = this.state;
return (
<FlatList
data={allPhotos}
extraData={this.state}
...
...
numColumns={3}
renderItem={this.renderPhoto}
/>
);
}
}
export default CameraRollScreen;
I have only 100 photos in my photo library and it's already causing lags, many people have way way way more photos than I do, this way will cause disaster, but how should I go about updating so many photos in FlatList
? Or, should I use FlatList
at all?
Found the solution, thanks to Pir Shukarullah Shah and RaphaMex.
If I scroll down fast enough, many images were not rendered and they are being rendered when I reach them. This seems right, why render them anyway when they're not on the screen? What I did was that I made use of
onViewableItemsChanged
ofFlatList
:Then,
onViewablePhotosChanged
method:Lastly, modify the
renderPhoto
function to pass aviewable
propThen, in
CameraRollImage
component, where we render images, there is a prop calledviewable
, ifviewable === false
, we simply do not update it:BETTER YET!!! if
viewable
is false, instead of rendering the image, we render an equal-sized empty view, you know, to save memory, which of course doesn't seem to be important if there're only 100 photos: