diff --git a/src/GifSearch.js b/src/GifSearch.js index d2094b9..2f0bb94 100755 --- a/src/GifSearch.js +++ b/src/GifSearch.js @@ -88,7 +88,7 @@ class GifSearch extends PureComponent { if (props.numColumns != null) { this.numColumns = props.numColumns; this.horizontal = false; - this.gifSize = Dimensions.get('window').width / this.numColumns - 20; + this.gifSize = Dimensions.get('window').width / this.numColumns - 15; } this.provider = providers.ALL; if (props.provider != null) { @@ -352,7 +352,7 @@ class GifSearch extends PureComponent { } if (this.numColumns > 1) { Dimensions.addEventListener('change', () => { - this.setState({gifSize: Dimensions.get('window').width / this.numColumns - 20}) + this.setState({gifSize: Dimensions.get('window').width / this.numColumns - 15}) }) } } @@ -369,12 +369,13 @@ class GifSearch extends PureComponent { ( - + {/** EDIT: input box should fill whole space */} + ) : (null) } - {this.gifType == gif_types.ALL ? + { + /** EDIT: flex: 1 results in height-stretched buttons */ + this.gifType == gif_types.ALL ? ( - + + {/** EDIT: margin between buttons only, not on their end-sides */} + { - + renderItem={({item, index}) => { + // EDIT: no right margin for last image column var aspect_ratio = null; var gif_preview = null; var gif_better_quality = null; @@ -464,7 +469,7 @@ class GifSearch extends PureComponent { 1 ? {width:this.state.gifSize, minHeight: this.state.gifSize, maxHeight:this.state.gifSize} : {aspectRatio: aspect_ratio ? aspect_ratio : 4/3, height: 150}, this.props.gifStyle]} + style={[this.styles.image, (index+1)%this.numColumns === 0 ? this.styles.lastColumnImage : {}, this.numColumns > 1 ? {width:this.state.gifSize, minHeight: this.state.gifSize, maxHeight:this.state.gifSize} : {aspectRatio: aspect_ratio ? aspect_ratio : 4/3, height: 150}, this.props.gifStyle]} source={{uri: gif_preview}} /> @@ -505,6 +510,7 @@ class GifSearch extends PureComponent { padding: 10, }, textInput: { + flex: 1, height: 50, fontSize: 20, paddingLeft: 10, @@ -515,9 +521,11 @@ class GifSearch extends PureComponent { marginRight: 10, marginBottom: 10 }, + lastColumnImage: { + marginRight: 0, + }, gifList: { height: 160, - margin: 5, marginBottom: 10, }, gifTypeButton: { @@ -526,10 +534,14 @@ class GifSearch extends PureComponent { backgroundColor: "black", borderRadius: 15, padding: 6, - marginHorizontal: 4, + marginRight: 2, borderColor: "black", borderWidth: 2 }, + stickerTypeButton: { + marginRight: 0, + marginLeft: 2 + }, gifTypeButtonSelected: { borderColor: "white", borderWidth: 2 @@ -546,4 +558,3 @@ class GifSearch extends PureComponent { } export default GifSearch; -