-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* profile fix * Remove nativebase & use native modules & implement new design * logo alignment * remove unused imports * code cleaned & onboarding rework & registration screen initial work * registration screen styles and routing * font size fix * Button component and implementation * UI improvements * fb login implemented * animated gallery * placeholder image while loading * fixes crash on fb login * resolved conflicts * fix resolving conflicts * handle fb cancel loading indicator status * hide android bars * updated code comment
- Loading branch information
1 parent
875322a
commit b4f48af
Showing
12 changed files
with
258 additions
and
113 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import React from 'react'; | ||
| import { View, TouchableOpacity, Text, ActivityIndicator, ViewPropTypes } from 'react-native'; | ||
| import Icon from 'react-native-vector-icons/FontAwesome'; | ||
| import { PropTypes } from 'prop-types'; | ||
| import { styles } from './styles'; | ||
|
|
||
| const LoadingComponent = () => ( | ||
| <View style={styles.contentWrapper}> | ||
| <ActivityIndicator color={'rgba(255,255,255,0.6)'} /> | ||
| </View> | ||
| ); | ||
|
|
||
| export const Button = ({ | ||
| style, | ||
| title, | ||
| titleStyle, | ||
| icon, | ||
| iconStyle, | ||
| onPress, | ||
| loading, | ||
| disabled, | ||
| }) => ( | ||
| <TouchableOpacity | ||
| disabled={disabled || loading} | ||
| onPress={onPress} | ||
| style={[styles.button, disabled ? styles.buttonDisabled : null, style]} | ||
| > | ||
| {loading ? <LoadingComponent /> | ||
| : <View style={styles.contentWrapper}> | ||
| {icon ? <Icon name={icon} style={[styles.icon, iconStyle]} /> : null} | ||
| <Text style={[styles.title, titleStyle]}> | ||
| {title} | ||
| </Text> | ||
| </View> | ||
| } | ||
| </TouchableOpacity> | ||
| ); | ||
|
|
||
| Button.propTypes = { | ||
| ...TouchableOpacity.propTypes, | ||
| style: ViewPropTypes.style, | ||
| title: PropTypes.string.isRequired, | ||
| titleStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object]), | ||
| icon: PropTypes.string, | ||
| iconStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object]), | ||
| onPress: PropTypes.func.isRequired, | ||
| loading: PropTypes.bool, | ||
| disabled: PropTypes.bool, | ||
| }; | ||
| Button.defaultProps = { | ||
| style: null, | ||
| title: 'Save', | ||
| titleStyle: null, | ||
| icon: null, | ||
| iconStyle: null, | ||
| loading: false, | ||
| disabled: false, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './component'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { StyleSheet } from 'react-native'; | ||
| import * as colors from 'kitsu/constants/colors'; | ||
|
|
||
| export const styles = StyleSheet.create({ | ||
| button: { | ||
| marginVertical: 4, | ||
| marginHorizontal: 16, | ||
| backgroundColor: colors.green, | ||
| height: 47, | ||
| borderRadius: 4, | ||
| }, | ||
| buttonDisabled: { | ||
| backgroundColor: colors.buttonDisabledColor, | ||
| }, | ||
| contentWrapper: { | ||
| flex: 1, | ||
| flexDirection: 'row', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| }, | ||
| title: { | ||
| color: colors.white, | ||
| fontFamily: 'OpenSans', | ||
| lineHeight: 25, | ||
| fontSize: 15, | ||
| }, | ||
| icon: { | ||
| fontSize: 20, | ||
| color: colors.white, | ||
| paddingRight: 8, | ||
| paddingLeft: 8, | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,99 +1,147 @@ | ||
| import React from 'react'; | ||
| import { View, Text, Image, TouchableOpacity, ScrollView, Dimensions } from 'react-native'; | ||
| import Icon from 'react-native-vector-icons/FontAwesome'; | ||
| import { View, Image, FlatList } from 'react-native'; | ||
| import { LoginManager } from 'react-native-fbsdk'; | ||
| import { connect } from 'react-redux'; | ||
| import { Button } from 'kitsu/components/Button'; | ||
| import { loginUser } from 'kitsu/store/auth/actions'; | ||
| import * as colors from 'kitsu/constants/colors'; | ||
| import { placeholderImage } from 'kitsu/assets/img/onboarding'; | ||
| import { OnboardingHeader } from './common/'; | ||
| import styles from './styles'; | ||
|
|
||
| const TEMP_IMG_URL = 'https://goo.gl/7XKV53'; | ||
|
|
||
| const GalleryRow = () => ( | ||
| <View style={{ marginVertical: 8, flexDirection: 'row', justifyContent: 'center' }}> | ||
| <Image source={{ uri: TEMP_IMG_URL }} style={styles.squareImage} /> | ||
| <Image source={{ uri: TEMP_IMG_URL }} style={styles.squareImage} /> | ||
| <Image source={{ uri: TEMP_IMG_URL }} style={styles.squareImage} /> | ||
| <Image source={{ uri: TEMP_IMG_URL }} style={styles.squareImage} /> | ||
| </View> | ||
| ); | ||
|
|
||
| export default class RegistrationScreen extends React.Component { | ||
| class RegistrationScreen extends React.Component { | ||
| static navigationOptions = { | ||
| header: null, | ||
| }; | ||
|
|
||
| state = { | ||
| loggingUser: false, | ||
| topAnime: Array(10).fill({}), | ||
| topManga: Array(10).fill({}), | ||
| }; | ||
|
|
||
| onSucess = () => { | ||
| // TODO: implement this function. | ||
| componentDidMount() { | ||
| this.fetchTopMedia(); | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| clearInterval(this.animation); | ||
| } | ||
|
|
||
| animation = 0; | ||
|
|
||
| fetchTopMedia = async () => { | ||
| // TODO: handle network error. | ||
| try { | ||
| const topAnime = await fetch('https://kitsu.io/api/edge/trending/anime?limit=10').then(res => res.json()); | ||
| const topManga = await fetch('https://kitsu.io/api/edge/trending/manga?limit=10').then(res => res.json()); | ||
| this.setState({ | ||
| topAnime: topAnime.data, | ||
| topManga: topManga.data, | ||
| }, this.animateLists); | ||
| } catch (e) { | ||
| console.log(e); | ||
| } | ||
| } | ||
|
|
||
| animateLists = () => { | ||
| let offset = 4; | ||
| this.animation = setInterval(() => { | ||
| this.animeList.scrollToOffset({ offset, animated: true }); | ||
| this.mangaList.scrollToOffset({ offset, animated: true }); | ||
| offset += 4; | ||
| }, 120); | ||
| } | ||
|
|
||
| loginFacebook = () => { | ||
| this.setState({ loggingUser: true }); | ||
| LoginManager.logInWithReadPermissions(['public_profile']).then( | ||
| (result) => { | ||
| if (!result.isCancelled) { | ||
| onSuccess(true); | ||
| this.props.loginUser(null, navigation, 'signup'); | ||
| } else { | ||
| this.setState({ loggingUser: false }); | ||
| } | ||
| }, | ||
| (error) => { | ||
| this.setState({ loggingUser: false }); | ||
| console.log(`Login fail with error: ${error}`); | ||
| }, | ||
| ); | ||
| }; | ||
|
|
||
| populateList = (topList) => { | ||
| const list = this.state[topList]; | ||
| this.setState({ | ||
| [topList]: list.concat(list), | ||
| }); | ||
| } | ||
|
|
||
| renderItem = ({ item }) => ( | ||
| <Image source={(item.attributes && { uri: item.attributes.posterImage.large }) || placeholderImage} style={styles.squareImage} /> | ||
| ); | ||
|
|
||
| render() { | ||
| const { navigate } = this.props.navigation; | ||
| const { loggingUser, topAnime, topManga } = this.state; | ||
| // TODO: make this screen responsive. | ||
| return ( | ||
| <ScrollView style={styles.container}> | ||
| <OnboardingHeader /> | ||
| <View style={{ marginVertical: 24, justifyContent: 'center', }}> | ||
| <GalleryRow /> | ||
| <GalleryRow /> | ||
| </View> | ||
| <View style={{ height: 200, justifyContent: 'center' }}> | ||
| <TouchableOpacity | ||
| onPress={this.loginFacebook} | ||
| style={[styles.button, { | ||
| backgroundColor: colors.fbBlueDark, | ||
| }]} | ||
| disabled={false} | ||
| > | ||
| <Icon | ||
| size={20} | ||
| name="facebook-official" | ||
| style={styles.fbIcon} | ||
| <View style={styles.container}> | ||
| <OnboardingHeader style={styles.header} /> | ||
| <View style={{ flex: 8 }}> | ||
| <View> | ||
| <FlatList | ||
| ref={ref => this.animeList = ref} | ||
| style={{ marginBottom: 8 }} | ||
| horizontal | ||
| inverted | ||
| scrollEnabled={false} | ||
| data={topAnime} | ||
| renderItem={this.renderItem} | ||
| onEndReached={() => this.populateList('topAnime')} | ||
| onEndReachedThreshold={0.5} | ||
| showsHorizontalScrollIndicator={false} | ||
| /> | ||
| <FlatList | ||
| ref={ref => this.mangaList = ref} | ||
| horizontal | ||
| scrollEnabled={false} | ||
| style={{ marginTop: 8 }} | ||
| data={topManga} | ||
| renderItem={this.renderItem} | ||
| onEndReached={() => this.populateList('topManga')} | ||
| onEndReachedThreshold={0.5} | ||
| showsHorizontalScrollIndicator={false} | ||
| /> | ||
| <Text style={styles.buttonText}> | ||
| Sign up with Facebook | ||
| </Text> | ||
| </TouchableOpacity> | ||
| <TouchableOpacity | ||
| onPress={() => navigate('Signup')} | ||
| style={[styles.button, { | ||
| backgroundColor: 'transparent', | ||
| borderWidth: 1.5, | ||
| borderColor: colors.darkGrey, | ||
| }]} | ||
| > | ||
| <Text style={styles.buttonText}>Create an Account</Text> | ||
| </TouchableOpacity> | ||
| <TouchableOpacity | ||
| onPress={() => navigate('Login')} | ||
| style={[styles.button, { | ||
| backgroundColor: 'transparent', | ||
| }]} | ||
| > | ||
| <Text style={[styles.buttonText, { | ||
| color: colors.lightGrey, | ||
| }]} | ||
| > | ||
| Already have an account? | ||
| </Text> | ||
| </TouchableOpacity> | ||
| </View> | ||
| <View style={styles.buttonsWrapper}> | ||
| <Button | ||
| style={{ backgroundColor: colors.fbBlueDark }} | ||
| title={'Sign up with Facebook'} | ||
| icon={'facebook-official'} | ||
| loading={loggingUser} | ||
| onPress={this.loginFacebook} | ||
| /> | ||
| <Button | ||
| style={{ | ||
| backgroundColor: colors.transparent, | ||
| borderWidth: 1.5, | ||
| borderColor: colors.darkGrey, | ||
| }} | ||
| title={'Create an Account'} | ||
| onPress={() => navigate('Signup')} | ||
| /> | ||
| <Button | ||
| style={{ backgroundColor: colors.transparent }} | ||
| title={'Already have an account?'} | ||
| titleStyle={{ fontSize: 12, color: colors.lightGrey }} | ||
| onPress={() => navigate('Login')} | ||
| /> | ||
| </View> | ||
| </View> | ||
| </ScrollView> | ||
| </View> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default connect(null, { loginUser })(RegistrationScreen); |
Oops, something went wrong.