Skip to content

Commit

Permalink
fix(rkModalImg): container with more than 10 items render. Closes #98 (…
Browse files Browse the repository at this point in the history 
…#120)

* build(common): package lock clean-up

* fix(rkModalImg): initial item render. Fixes #98

* refactor(lint): example - image screen

* fix(rkModalImg): initial item render - android. Fixes #98

* fix(rkModalImg): keyExtractor indexing warning

* fix(rkComponent): type mapping
  • Loading branch information
@artyorsh @malashkevich
artyorsh authored and malashkevich committed Jun 19, 2018
1 parent 24d268b commit c98d45c
Show file tree
Hide file tree
Showing 5 changed files with 122 additions and 113 deletions.
164 changes: 90 additions & 74 deletions example/screens/ImageScreen.js
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,30 @@
import React, {Component} from 'react';
import React, { Component } from 'react';
import {
View,
StyleSheet,
ScrollView,
ListView,
Dimensions, Alert
Dimensions, Alert,
} from 'react-native';
import {
RkButton,
RkModalImg,
RkText,
RkStyleSheet
RkStyleSheet,
} from 'react-native-ui-kitten';

import {UtilStyles} from '../style/styles';
import Icon from 'react-native-vector-icons/FontAwesome';
import { UtilStyles } from '../style/styles';

export class ImageScreen extends Component {
static navigationOptions = {
title: 'Images'
title: 'Images',
};

constructor(props) {
super(props);

let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1.id !== r2.id});
this._images = [
const dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1.id !== r2.id });
this.images = [
require('../img/animal.jpeg'),
require('../img/bird.jpeg'),
require('../img/clock.jpg'),
Expand All @@ -35,133 +34,150 @@ export class ImageScreen extends Component {
require('../img/river.jpeg'),
require('../img/sea.jpg'),
require('../img/sun.jpg'),
require('../img/wood.jpeg'),
require('../img/flowers.jpeg'),
require('../img/tree.jpeg'),
];
this.state = {
ds: ds.cloneWithRows(this._images),
ds: dataSource.cloneWithRows(this.images),
};

let {width} = Dimensions.get('window');
const { width } = Dimensions.get('window');
this.imgSize = (width - 16) / 3;
}

_renderFooter(options) {
onRenderCustomHeader(options) {
return (
<View style={{ justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row' }}>
<RkButton rkType='clear' onPress={options.closeImage}>Close</RkButton>
<RkButton rkType='clear'>
<Icon style={styles.dot} name="circle" />
<Icon style={styles.dot} name="circle" />
<Icon style={styles.dot} name="circle" />
</RkButton>
</View>
);
}

onRenderCustomFooter() {
return (
<View style={{
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
paddingVertical: 10,
paddingHorizontal: 20
}}>
<View style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}>
<RkButton rkType='clear small' onPress={(x) => Alert.alert('I Like it!')}>
<Icon name={'heart'} style={styles.buttonIcon}/>
paddingHorizontal: 20,
}}
>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
<RkButton rkType='clear small' onPress={() => Alert.alert('I Like it!')}>
<Icon name="heart" style={styles.buttonIcon} />
<RkText rkType='inverse'>18</RkText>
</RkButton>
</View>
<View style={{flex: 1}}>
<View style={{ flex: 1 }}>
<RkButton rkType='clear small'>
<Icon name={'comment-o'} style={styles.buttonIcon}/>
<Icon name="comment-o" style={styles.buttonIcon} />
<RkText rkType='inverse'>2</RkText>
</RkButton>
</View>
<View style={{flex: 1}}>
<View style={{ flex: 1 }}>
<RkButton rkType='clear small'>
<Icon name={'send-o'} style={styles.buttonIcon}/>
<Icon name="send-o" style={styles.buttonIcon} />
<RkText rkType='inverse'>7</RkText>
</RkButton>
</View>
</View>
);
}

_renderHeader(options) {
return (
<View style={{justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row'}}>
<RkButton rkType='clear' onPress={options.closeImage}>Close</RkButton>
<RkButton rkType='clear'>
<Icon style={styles.dot} name={'circle'}/>
<Icon style={styles.dot} name={'circle'}/>
<Icon style={styles.dot} name={'circle'}/>
</RkButton>
</View>
);
}

_renderGallery() {
onRenderGallery() {
return (
<ListView
pageSize={3}
contentContainerStyle={{
justifyContent: 'flex-start',
alignItems: 'flex-start',
flexDirection: 'row',
flexWrap: 'wrap'
flexWrap: 'wrap',
}}
scrollRenderAheadDistance={500}
dataSource={this.state.ds}
renderRow={(rowData, sectionID, rowID) => {
return (
<RkModalImg
style={{width: this.imgSize, height: this.imgSize}}
source={this._images}
index={rowID}/>
)
}}
renderRow={(rowData, sectionID, rowID) => (
<RkModalImg
style={{ width: this.imgSize, height: this.imgSize }}
source={this.images}
index={rowID}
/>
)}
/>
)
);
}

render() {
return (
<View style={{flex: 1}}>

<View style={{ flex: 1 }}>
<ScrollView
automaticallyAdjustContentInsets={true}
style={UtilStyles.container}>

automaticallyAdjustContentInsets
style={UtilStyles.container}
>
<View style={[UtilStyles.section, UtilStyles.bordered, styles.imagesContainer]}>
<RkText style={styles.header} rkType='header'>Basic example</RkText>
<View style={[UtilStyles.rowContainer, {paddingLeft: 2}]}>
<RkModalImg style={{width: this.imgSize, height: this.imgSize}} source={require('../img/animal.jpeg')}/>
<RkModalImg style={{width: this.imgSize, height: this.imgSize}} source={require('../img/clock.jpg')}/>
<RkModalImg style={{width: this.imgSize, height: this.imgSize}} source={require('../img/post2.png')}/>
<View style={[UtilStyles.rowContainer, { paddingLeft: 2 }]}>
<RkModalImg
style={{ width: this.imgSize, height: this.imgSize }}
source={require('../img/animal.jpeg')}
/>
<RkModalImg
style={{ width: this.imgSize, height: this.imgSize }}
source={require('../img/clock.jpg')}
/>
<RkModalImg
style={{ width: this.imgSize, height: this.imgSize }}
source={require('../img/post2.png')}
/>
</View>
</View>
<View style={[UtilStyles.section, UtilStyles.bordered, styles.imagesContainer]}>
<RkText style={styles.header} rkType='header'>Custom header and footer</RkText>
<View style={[UtilStyles.rowContainer, {paddingLeft: 2}]}>
<RkModalImg style={{width: this.imgSize, height: this.imgSize}}
renderHeader={this._renderHeader}
renderFooter={this._renderFooter}
headerContentStyle={{backgroundColor: 'red'}}
source={require('../img/post1.png')}/>
<RkModalImg style={{width: this.imgSize, height: this.imgSize}}
renderHeader={this._renderHeader}
renderFooter={this._renderFooter}
source={require('../img/river.jpeg')}/>
<RkModalImg style={{width: this.imgSize, height: this.imgSize}}
renderHeader={this._renderHeader}
renderFooter={this._renderFooter}
source={require('../img/post3.png')}/>

<View style={[UtilStyles.rowContainer, { paddingLeft: 2 }]}>
<RkModalImg
style={{ width: this.imgSize, height: this.imgSize }}
renderHeader={this.onRenderCustomHeader}
renderFooter={this.onRenderCustomFooter}
headerContentStyle={{ backgroundColor: 'red' }}
source={require('../img/post1.png')}
/>
<RkModalImg
style={{ width: this.imgSize, height: this.imgSize }}
renderHeader={this.onRenderCustomHeader}
renderFooter={this.onRenderCustomFooter}
source={require('../img/river.jpeg')}
/>
<RkModalImg
style={{ width: this.imgSize, height: this.imgSize }}
renderHeader={this.onRenderCustomHeader}
renderFooter={this.onRenderCustomFooter}
source={require('../img/post3.png')}
/>
</View>
</View>
<View style={[UtilStyles.section, UtilStyles.bordered, styles.imagesContainer]}>
<RkText style={styles.header} rkType='header'>Gallery Example</RkText>
<View style={[UtilStyles.rowContainer, {paddingLeft: 2}]}>
{this._renderGallery()}
<View style={[UtilStyles.rowContainer, { paddingLeft: 2 }]}>
{this.onRenderGallery()}
</View>
</View>
</ScrollView>
</View>
)
);
}
}

let styles = RkStyleSheet.create(theme => ({
imagesContainer: {
paddingHorizontal: 0
paddingHorizontal: 0,
},
header: {
paddingHorizontal: 24,
Expand All @@ -170,11 +186,11 @@ let styles = RkStyleSheet.create(theme => ({
fontSize: 6.5,
marginLeft: 4,
marginVertical: 6,
color: theme.colors.text.inverse
color: theme.colors.text.inverse,
},
buttonIcon: {
marginRight: 7,
fontSize: 19.7,
color: theme.colors.text.inverse
color: theme.colors.text.inverse,
},
}));
}));
2 changes: 1 addition & 1 deletion example/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5725,7 +5725,7 @@ npm-packlist@^1.1.6:
ignore-walk "^3.0.1"
npm-bundled "^1.0.1"

npm-run-all@^4.1.3:
npm-run-all@4.1.3:
version "4.1.3"
resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.3.tgz#49f15b55a66bb4101664ce270cb18e7103f8f185"
dependencies:
Expand Down
6 changes: 0 additions & 6 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit c98d45c

Please sign in to comment.