12 apps in 12 weeks - App 5

4 min. read

Intro

With this one I try to push myself a bit more. Not just doing an app for the challenge but something who in the real life I would use.

I’m a movie lover, but my problem is I never know which movie to watch. So why not built an app who can help me find one.

The first thing I need to find an idea about how to make this quickly. So I decided to jump on the Tinder flow for choosing which kind of movie you like and with this array of results I render which kind of movie you like.

I choose to use The Movie DB who have an awesome documentation.

Some code

I learn this week than I can use async await with the React lifeCycle. And yes I loved it.

1
2
3
4
5
async componentDidMount() {
await Font.loadAsync(fonts);
this.setState({ fontLoaded: true });
}

Don’t look good? :)


For the swiping action, I choose to use react-native-tinder-swipe-cards who is really easy to use.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
class SwiperEL extends Component {
state = { cardIndex: 0 }
_handleYup = movie => {
this.setState({ cardIndex: this.state.cardIndex + 1 });
this.props.addMovieToLikedList({
id: movie.id,
title: movie.title,
image: movie.poster_path
});
}
_handleNope = () => this.setState({ cardIndex: this.state.cardIndex + 1 })
_clickLike= () => {
this.setState({ cardIndex: this.state.cardIndex + 1 });
this._swiper._goToNextCard();
const movie = this.props.movies[this.state.cardIndex];
this.props.addMovieToLikedList({
id: movie.id,
title: movie.title,
image: movie.poster_path
});
}
_clickDislike = () => {
this.setState({ cardIndex: this.state.cardIndex + 1 });
this._swiper._goToNextCard();
}
render() {
const { movies, modalInfoShow, openModalInfo, closeModalInfo } = this.props;
if (this.state.cardIndex > movies.length - 1) {
return <NoMoreCard />;
}
return (
<View style={styles.root}>
<StatusBar barStyle="light-content" />
<View style={styles.titleContainer}>
<Text style={styles.titleStyle}>{movies[this.state.cardIndex].title}</Text>
</View>
<SwipeCards
ref={ref => this._swiper = ref} // eslint-disable-line
containerStyle={styles.swiperContainer}
cards={movies}
renderCard={data => <Card {...data} />}
handleYup={this._handleYup}
handleNope={this._handleNope}
yupStyle={styles.yupAndNopeStyle}
yupTextStyle={styles.yupTextStyle}
nopeStyle={styles.yupAndNopeStyle}
nopeTextStyle={styles.nopeTextStyle}
renderNoMoreCards={() => <NoMoreCard />}
/>
<ButtonsGroup
info={() => openModalInfo(movies[this.state.cardIndex])}
dislike={this._clickDislike}
like={this._clickLike}
/>
<InfoModal
closeModalInfo={closeModalInfo}
close={() => closeModalInfo()}
visible={modalInfoShow}
movie={this.props.modalInfoMovie}
/>
</View>
);
}
}

The library gives the handleYup and handleNope but I want more. Like a click etc so I create this function by just following the index of the item in the array.

But I got a problem with the library. When I change the state I got some weird error. Like the poster don’t change always stay in the index[2].

1
2
3
4
5
6
7
componentWillReceiveProps(nextProps){
if(nextProps.cards && nextProps.cards.length > 0 && nextProps.cards !== this.props.cards){
this.setState({
card: nextProps.cards[0]
});
}
}

This simple change in the library makes my code working perfectly.


Last Word

Nothing too crazy again in this app. Just a good standard app but I think after this challenge I would come back to this one and add bigger features. I think that can be my first own app in the store.

Hope you enjoy to read me again. If you have any question don’t hesitate to add comments below.

Library use