Skip to content

Commit

Permalink
Collapsible preview block
Browse files Browse the repository at this point in the history
  • Loading branch information
@7kfpun
7kfpun committed Jan 28, 2017
1 parent fd64968 commit 0626dce
Show file tree
Hide file tree
Showing 6 changed files with 98 additions and 90 deletions.
16 changes: 16 additions & 0 deletions app/config.example.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
exports.config = {
admob: {
ios: {
banner: '',
interstital: '',
},
android: {
banner: '',
interstital: '',
},
},
googleAnalytics: {
ios: '',
android: '',
},
};
16 changes: 0 additions & 16 deletions app/config.js
View file

This file was deleted.

20 changes: 0 additions & 20 deletions app/info.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,26 +126,6 @@ export default class InfoView extends Component {
GoogleAnalytics.trackEvent('user-action', 'open-url', { label: 'rate-us' });
}}
/>
<Cell
cellStyle="Basic"
title={'Source code'}
onPress={() => {
Linking.openURL('https://github.com/7kfpun/PhotosReactNative');
GoogleAnalytics.trackEvent('user-action', 'open-url', { label: 'open-source' });
}}
/>
<Cell
cellStyle="Basic"
title={'View more by this developer'}
onPress={() => {
if (Platform.OS === 'ios') {
Linking.openURL('https://itunes.apple.com/us/developer/kf-pun/id1116896894');
} else if (Platform.OS === 'android') {
Linking.openURL('https://play.google.com/store/apps/developer?id=Kf');
}
GoogleAnalytics.trackEvent('user-action', 'open-url', { label: 'more-by-developer' });
}}
/>
</Section>
</TableView>

Expand Down
115 changes: 70 additions & 45 deletions app/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ import AdmobCell from './admob';
const IMAGE_PER_ROW_PHONE = 4;
const IMAGE_PER_ROW_TABLET = 8;

let OFFSETY;
const THRESHOLD = Platform.OS === 'ios' ? 40 : 20;

const styles = StyleSheet.create({
container: {
flex: 1,
Expand All @@ -52,7 +55,6 @@ const styles = StyleSheet.create({
elevation: 10,
},
preview: {
flex: 1,
paddingHorizontal: 5,
backgroundColor: '#424242',
},
Expand All @@ -71,7 +73,7 @@ const styles = StyleSheet.create({
},
fullPreview: {
flex: 1,
backgroundColor: 'rgba(0,0,0,0.8)',
backgroundColor: 'rgba(0,0,0,0.9)',
justifyContent: 'center',
alignItems: 'center',
},
Expand Down Expand Up @@ -118,6 +120,7 @@ export default class MainView extends Component {
this.state = {
images: [],
isModalVisible: false,
isSelectedShow: true,
};
}

Expand All @@ -128,7 +131,8 @@ export default class MainView extends Component {
if (images) {
that.setState({
images,
key: Math.random(),
key0: Math.random(),
key1: Math.random(),
});
}
});
Expand All @@ -151,8 +155,9 @@ export default class MainView extends Component {
}
}

getSelectedImages(images) {
console.log(images);
getSelectedImages(images, current) {
console.log(current);
// console.log(images);
const tempImages = images.map(item => Object.assign({ photo: item.uri }, item));
this.setState({ images: tempImages });
store.save('images', tempImages);
Expand All @@ -161,6 +166,7 @@ export default class MainView extends Component {
clearImages() {
this.setState({
images: [],
key0: Math.random(),
});
store.save('images', []);
GoogleAnalytics.trackEvent('user-action', 'clear-images');
Expand All @@ -169,25 +175,27 @@ export default class MainView extends Component {
renderToolbar() {
if (Platform.OS === 'ios') {
return (
<NavigationBar
statusBar={{ tintColor: '#212121', style: 'light-content' }}
style={styles.navigatorBarIOS}
title={{ title: this.props.title, tintColor: '#F5F5F5' }}
leftButton={
<Icon
style={styles.navigatorLeftButton}
name="ios-information-circle-outline"
size={26}
color="white"
onPress={Actions.info}
/>
}
rightButton={{
title: this.state.images.length > 0 ? 'Clear all' : '',
tintColor: '#69BBFF',
handler: () => this.clearImages(),
}}
/>
<Collapsible collapsed={!this.state.isSelectedShow} duration={600} collapsedHeight={20}>
<NavigationBar
statusBar={{ tintColor: '#212121', style: 'light-content' }}
style={styles.navigatorBarIOS}
title={{ title: this.props.title, tintColor: '#F5F5F5' }}
leftButton={
<Icon
style={styles.navigatorLeftButton}
name="ios-information-circle-outline"
size={26}
color="white"
onPress={Actions.info}
/>
}
rightButton={{
title: this.state.images.length > 0 ? 'Clear all' : '',
tintColor: '#69BBFF',
handler: () => this.clearImages(),
}}
/>
</Collapsible>
);
} else if (Platform.OS === 'android') {
return (
Expand Down Expand Up @@ -234,43 +242,60 @@ export default class MainView extends Component {
</TouchableHighlight>
</Modal>

<ScrollView style={styles.preview} horizontal={true}>
{this.state.images.length > 0 && this.state.images.map((item, i) => <View key={i} style={styles.imageBlock}>
<TouchableHighlight
onPress={() => {
this.setModalVisible(true);
this.setState({ selectedImage: item.uri });
}}
underlayColor="#424242"
>
<Image
style={styles.image}
source={{ uri: item.uri }}
/>
</TouchableHighlight>
</View>)}
<Collapsible style={{ height: 160 }} collapsed={!this.state.isSelectedShow} duration={600}>
<ScrollView style={styles.preview} horizontal={true}>
{this.state.images.length > 0 && this.state.images.map((item, i) => <View key={i} style={styles.imageBlock}>
<TouchableHighlight
onPress={() => {
this.setModalVisible(true);
this.setState({ selectedImage: item.uri });
}}
underlayColor="#424242"
>
<Image
style={styles.image}
source={{ uri: item.uri }}
/>
</TouchableHighlight>
</View>)}

{this.state.images.length === 0 && <View style={{ width: Dimensions.get('window').width - 10, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ color: 'white' }}>Select some of your photos</Text>
</View>}
</ScrollView>
{this.state.images.length === 0 && <View style={{ width: Dimensions.get('window').width - 10, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ color: 'white' }}>Pick your photos</Text>
</View>}
</ScrollView>
</Collapsible>

<View style={styles.rollPicker}>
<CameraRollPicker
callback={images => this.getSelectedImages(images)}
key={this.state.key0}
callback={(images, current) => this.getSelectedImages(images, current)}
imagesPerRow={Device.isTablet ? IMAGE_PER_ROW_TABLET : IMAGE_PER_ROW_PHONE}
backgroundColor="#212121"
maximum={100}
selected={this.state.images}
selectedMarker={<View style={styles.markerBlock}>
<Image source={require('../assets/checkmark-circle.png')} style={styles.marker} />
</View>}
onScroll={(event) => {
if (event.nativeEvent.contentOffset.y < THRESHOLD) {
this.setState({ isSelectedShow: true });
} else if (event.nativeEvent.contentOffset.y - OFFSETY > THRESHOLD) {
console.log('onScroll UP');
this.setState({ isSelectedShow: false });
} else if (OFFSETY - event.nativeEvent.contentOffset.y > THRESHOLD) {
console.log('onScroll DOWN');
this.setState({ isSelectedShow: true });
}
OFFSETY = event.nativeEvent.contentOffset.y;
}}
scrollEventThrottle={500}
emptyText="Loading..."
/>
</View>

<AdmobCell backgroundColor="#212121" />

<Collapsible key={this.state.key} collapsed={this.state.images.length === 0}>
<Collapsible key={this.state.key1} collapsed={this.state.images.length === 0}>
<TouchableHighlight
style={styles.footer}
onPress={() => {
Expand Down
5 changes: 1 addition & 4 deletions app/password.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,6 @@ import GoogleAnalytics from 'react-native-google-analytics-bridge';
import PasswordGesture from 'react-native-gesture-password';
import store from 'react-native-simple-store';

import { config } from './config';

let firstPassword = '';

const styles = StyleSheet.create({
Expand Down Expand Up @@ -102,7 +100,7 @@ export default class PasswordView extends React.Component {

store.delete('password');
Actions.main({ type: ActionConst.RESET });
if (Math.random() > 0.9) {
if (Math.random() > 0.5) {
this.showAdInterstitial();
GoogleAnalytics.trackEvent('system-action', 'show-ad-interstitial');
}
Expand Down Expand Up @@ -148,7 +146,6 @@ export default class PasswordView extends React.Component {
}

showAdInterstitial() {
AdMobInterstitial.setAdUnitID(config.admob[Platform.OS].interstital);
AdMobInterstitial.requestAd(() => AdMobInterstitial.showAd(error => error && console.log('AdMobInterstitial', error)));
}

Expand Down
16 changes: 11 additions & 5 deletions app/photo-browser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,21 @@ import Sound from 'react-native-sound';
// Component
import AdmobCell from './admob';

import { config } from './config';

const styles = StyleSheet.create({
container: {
flex: 1,
},
});

export default class PhotoBrowserView extends React.Component {
componentDidMount() {
if (Math.random() > 0.2) {
this.showAdInterstitial();
console.log('Show ad interstitial');
GoogleAnalytics.trackEvent('system-action', 'show-ad-interstitial');
}
}

onShare(media, index) {
console.log(media, index);
Share.open({
Expand All @@ -43,7 +49,6 @@ export default class PhotoBrowserView extends React.Component {
}

showAdInterstitial() {
AdMobInterstitial.setAdUnitID(config.admob[Platform.OS].interstital);
AdMobInterstitial.requestAd(() => AdMobInterstitial.showAd(error => error && console.log('AdMobInterstitial', error)));
}

Expand All @@ -67,13 +72,14 @@ export default class PhotoBrowserView extends React.Component {
if (Platform.OS === 'ios') {
PasscodeAuth.isSupported()
.then(() => {
const reason = 'You need to be the owner of the device.';
const reason = 'You have to be the owner of the device.';
PasscodeAuth.authenticate(reason)
.then((success) => {
console.log('Authenticated Successfully', success);
vibrateSoundPop();
if (Math.random() > 0.9) {
if (Math.random() > 0.8) {
this.showAdInterstitial();
console.log('Show ad interstitial');
GoogleAnalytics.trackEvent('system-action', 'show-ad-interstitial');
}
})
Expand Down

0 comments on commit 0626dce

Please sign in to comment.