Use backgroundColor transparent on refreshControls

This fixed a bug in react native that causes it to show in the top right, see facebook/react-native#7976
joehoyle · Aug 23, 2016 · 7a2071a · 7a2071a
1 parent bcac2c6
commit 7a2071a
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 41 deletions.
diff --git a/containers/Comments/List.js b/containers/Comments/List.js
@@ -70,12 +70,14 @@ export default class List extends Component {
 				: null }
 				<ScrollView
 					refreshControl={<RefreshControl
-							refreshing={this.props.comments.list.loading}
-							onRefresh={this.onRefresh.bind(this)}
-							tintColor="#666666"
-							title={this.props.comments.list.loading ? 'Loading Comments...' : 'Pull to Refresh...'}
-							titleColor="#000000"
-						/>}>
+						refreshing={this.props.comments.list.loading}
+						style={{backgroundColor: 'transparent'}}
+						onRefresh={this.onRefresh.bind(this)}
+						tintColor="#666666"
+						title={this.props.comments.list.loading ? 'Loading Comments...' : 'Pull to Refresh...'}
+						titleColor="#000000"
+					/>}
+					>
 					{values(this.props.comments.comments).filter( this.filterComments.bind(this) ).map( comment => {
 						return (
 							<ListItem

diff --git a/containers/Posts/List.js b/containers/Posts/List.js
@@ -68,12 +68,13 @@ export default class List extends Component {
 				: null }
 				<ListComponent
 					refreshControl={<RefreshControl
-							refreshing={type.list.loading}
-							onRefresh={this.onRefresh.bind(this)}
-							tintColor="#666666"
-							title={type.list.loading ? 'Loading ' + type.name + '...' : 'Pull to Refresh...'}
-							titleColor="#000000"
-						/>}
+						refreshing={type.list.loading}
+						style={{backgroundColor: 'transparent'}}
+						onRefresh={this.onRefresh.bind(this)}
+						tintColor="#666666"
+						title={type.list.loading ? 'Loading ' + type.name + '...' : 'Pull to Refresh...'}
+						titleColor="#000000"
+					/>}
 					posts={values( posts ).filter( this.filterPosts.bind( this ) )}
 					media={this.props.types.attachment.posts}
 					onEdit={post=>this.props.dispatch( editPost( post ) )}

diff --git a/containers/Sites/View.js b/containers/Sites/View.js
@@ -39,14 +39,14 @@ export default class _View extends Component {
 		return (
 			<ScrollView
 				style={styles.container}
-				refreshControl={
-					<RefreshControl
-						refreshing={false}
-						onRefresh={this.onRefresh.bind(this)}
-						tintColor="#666666"
-						title="Pull to refresh..."
-						titleColor="#000000"
-						/>
+				refreshControl={<RefreshControl
+					refreshing={false}
+					style={{backgroundColor: 'transparent'}}
+					onRefresh={this.onRefresh.bind(this)}
+					tintColor="#666666"
+					title="Pull to refresh..."
+					titleColor="#000000"
+					/>
 				}>
 				<Text style={styles.sectionTitle}>TYPES</Text>
 				<View style={styles.list}>

diff --git a/containers/Terms/List.js b/containers/Terms/List.js
@@ -34,12 +34,14 @@ export default class List extends Component {
 		return (
 			<ScrollView
 				refreshControl={<RefreshControl
-						refreshing={taxonomy.list.loading}
-						onRefresh={this.onRefresh.bind(this)}
-						tintColor="#666666"
-						title={taxonomy.list.loading ? 'Loading ' + taxonomy.name + '...' : 'Pull to Refresh...'}
-						titleColor="#000000"
-					/>}>
+					refreshing={taxonomy.list.loading}
+					style={{backgroundColor: 'transparent'}}
+					onRefresh={this.onRefresh.bind(this)}
+					tintColor="#666666"
+					title={taxonomy.list.loading ? 'Loading ' + taxonomy.name + '...' : 'Pull to Refresh...'}
+					titleColor="#000000"
+				/>}
+				>
 				{values(terms).map( term => {
 					return (
 						<ListItem

diff --git a/containers/Types/List.js b/containers/Types/List.js
@@ -47,15 +47,14 @@ export default class List extends Component {
 					/>
 				: null }
 				<ScrollView
-					refreshControl={
-						<RefreshControl
-							refreshing={this.props.postsList.loading}
-							onRefresh={this.onRefresh.bind(this)}
-							tintColor="#666666"
-							title={this.props.postsList.loading ? 'Loading posts..' : 'Pull to refresh...'}
-							titleColor="#000000"
-						/>
-					}>
+					refreshControl={<RefreshControl
+						refreshing={this.props.postsList.loading}
+						style={{backgroundColor: 'transparent'}}
+						onRefresh={this.onRefresh.bind(this)}
+						tintColor="#666666"
+						title={this.props.postsList.loading ? 'Loading posts..' : 'Pull to refresh...'}
+						titleColor="#000000"
+					/>}>
 					{values( this.props.posts ).filter( this.filterPosts.bind( this ) ).map( post => {
 						return (
 							<ListItem

diff --git a/containers/Users/List.js b/containers/Users/List.js
@@ -33,12 +33,14 @@ export default class List extends Component {
 		return (
 			<ScrollView
 				refreshControl={<RefreshControl
-						refreshing={this.props.users.list.loading}
-						onRefresh={this.onRefresh.bind(this)}
-						tintColor="#666666"
-						title={this.props.users.list.loading ? 'Loading Users...' : 'Pull to Refresh...'}
-						titleColor="#000000"
-					/>}>
+					refreshing={this.props.users.list.loading}
+					style={{backgroundColor: 'transparent'}}
+					onRefresh={this.onRefresh.bind(this)}
+					tintColor="#666666"
+					title={this.props.users.list.loading ? 'Loading Users...' : 'Pull to Refresh...'}
+					titleColor="#000000"
+				/>}
+				>
 				{values(this.props.users.users).map( user => {
 					return (
 						<ListItem