I have a requirement where I want to hide the refresh indicator completely of Refresh Control for Android. I already set most of the color properties to transparent by still see gray circular indicator. Is there any way to completely hide this circular indicator. Link to gif about what is hapenning: http://imgur.com/dkAmkC6
This is my code:
import React, {Component} from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
FlatList,
Dimensions,
RefreshControl,
ToastAndroid,
} from 'react-native';
import Constants from './Constants';
export default class TestList extends Component {
constructor(props) {
super(props);
this.rows =[{id: 1},{id: 2},{id: 3},{id: 4}];
this.state = {
refreshing: false,
}
}
renderItem(row) {
return (
<Text style={{fontSize: 20, borderBottomWidth: 1, borderColor: 'red', color: 'blue', height:80}}>{row.item.id}</Text>
)
}
render() {
return (
<View style={[styles.container]}>
<FlatList
data={this.rows}
renderItem={this.renderItem.bind(this)}
overScrollMode='always'
style={{flex: 1}}
keyExtractor={(item) => item.id}
removeClippedSubviews={false}
keyboardShouldPersistTaps='always'
refreshControl={
<RefreshControl
colors={['transparent']}
style={{backgroundColor: 'transparent'}}
progressBackgroundColor='transparent'
refreshing={this.state.refreshing}
onRefresh={() =>
ToastAndroid.show('Refresh completed with short duration', ToastAndroid.SHORT)}/>}
ref="FlatList"/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
})
[1]: http://imgur.com/dkAmkC6
You can use Platform api from react native.
import { Platform } from 'react-native'
<Flatlist
...other props
refreshControl={
Platform.select({
ios: (
<RefreshControl
colors={['transparent']}
style={{backgroundColor: 'transparent'}}
progressBackgroundColor='transparent'
refreshing={this.state.refreshing}
onRefresh={() =>
ToastAndroid.show(
'Refresh completed with short duration',
ToastAndroid.SHORT
)
}
/>
)
})
}
/>
You could conditionally render the RefreshControl component so that it only renders when you want it to.
The react docs discuss some techniques here: https://facebook.github.io/react/docs/conditional-rendering.html
But for simplicity's sake, I prefer to use the https://github.com/ajwhite/render-if npm module to conditionally render the component based on a flag in your component's state or in a redux store.
I had the same issue and wanted the same thing, but did not get it for android, so I tried the prop. progressViewOffset={number}, up-to such that the pull to refresh worked as well as the loading icon was hidden(was above the view). This is not proper solution but it worked for me.
This works for me on iOS (have not tested on Android):
refreshControl={
<RefreshControl
refreshing={false}
onRefresh={this.onRefreshHandler.bind(this)}
title='Pull to refresh'
tintColor='transparent'
/>
}
Related
How can I load webview content by pressing a button in expo?do I have to use navigation?
import * as React from 'react';
import { WebView } from 'react-native-webview';
import {View} from 'react-native'
export default function App(){
return (
<View>
<Button title={'CLICK'} onPress={()=> <WebView source={{uri:'https://www.google.com'}}/>}>
</View>
)
}
You should use a concept called "states". They are well explained in the official documentation of React. Basically you have to declare a changeable variable and then change it with the button. When a state change detected, React re-renders the corresponding components. And when it is re-rendered, new value of that particular variable is read and according changes happen. Here is a code snippet that serves your desired purpose:
import * as React from "react";
import { WebView } from "react-native-webview";
import { View, Button } from "react-native";
export default function App() {
const [isVisible, setIsVisible] = React.useState(false);
return (
<View
style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
>
// on press, whatever the older value of isVisible was, set it to its opposite, eg. toggle it
<Button
title="click"
onPress={() => setIsVisible((prev) => !prev)}
color="blue"
/>
// if isVisible is true, render the WebView
{isVisible && (
// you probably will want to change WebView's styles
<WebView
style={{ width: 300, height: 250 }}
source={{ uri: "https://www.google.com" }}
/>
)}
</View>
);
}
I just started learning and practicing React Native and I have run into the first problem that I cant seem to solve by myself.
I have the following code, which is very simple, but the Alert.alert() does not work when I run it on the web. if I click the button nothing happens, however, when i click the button on an iOS or android simulator it works fine.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, Button, View, Alert } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.headerStyle} >Practice App</Text>
<Text style={{padding: 10}}>Open up App.js to start working on your app!</Text>
<Button
onPress={() => alert('Hello, Nice To Meet You :)')}
title="Greet Me"
/>
<StatusBar style="auto" />
</View>
);
}
I also know that alert() works on all three devices, however, I want to understand why Alert.alert() only works for iOS and Android.
My question is more so for understanding rather than finding a solution. Is the only solution to use alert(), or am I implementing Alert.alert() in the wrong way?
This workaround basically imitates react-native's Alert behavior with browsers' window.confirm method:
# alert.js
import { Alert, Platform } from 'react-native'
const alertPolyfill = (title, description, options, extra) => {
const result = window.confirm([title, description].filter(Boolean).join('\n'))
if (result) {
const confirmOption = options.find(({ style }) => style !== 'cancel')
confirmOption && confirmOption.onPress()
} else {
const cancelOption = options.find(({ style }) => style === 'cancel')
cancelOption && cancelOption.onPress()
}
}
const alert = Platform.OS === 'web' ? alertPolyfill : Alert.alert
export default alert
Usage:
Before:
import { Alert } from 'react-native'
Alert.alert(...)
After:
import alert from './alert'
alert(...)
Source & Credits: https://github.com/necolas/react-native-web/issues/1026#issuecomment-679102691
React Native is an open-source mobile application framework for Android, iOS and Web but there is not an Alert Component for Web but I have found a package which will provide you solutation. That is it to install package
npm i react-native-awesome-alerts
This example will help you
import React from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
import Alert from "react-native-awesome-alerts";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { showAlert: false };
}
showAlert = () => {
this.setState({
showAlert: true,
});
};
hideAlert = () => {
this.setState({
showAlert: false,
});
};
render() {
const { showAlert } = this.state;
return (
<View style={styles.container}>
<Text>Practice App</Text>
<Text style={{ padding: 10 }}>
Open up App.js to start working on your app!
</Text>
<TouchableOpacity
onPress={() => {
this.showAlert();
}}
>
<View style={styles.button}>
<Text style={styles.text}>Greet Me</Text>
</View>
</TouchableOpacity>
<Alert
show={showAlert}
message="Hello, Nice To Meet You :"
closeOnTouchOutside={true}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#fff",
},
button: {
margin: 10,
paddingHorizontal: 10,
paddingVertical: 7,
borderRadius: 5,
backgroundColor: "#AEDEF4",
},
text: {
color: "#fff",
fontSize: 15,
},
});
Thanks for your reading,I am a beginner into React Native,I find a similar question title on this site, but my question is different from that.
I use TouchableHighlight to press to open a new screen,I have succeeded. But the button did not change color. is that normal?
There are some of my try:
I try to use TouchableOpacity:The button will change it opacity and then open new screen
I also try to use TouchableNativeFeedback:The button behaves normally once，when i tap second time it has no behavior unless i have a long press.
when i use the button to do something else, not to open a new screen, it behaves correctly.
Here is my code:
import React from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableHighlight,
} from 'react-native';
import MyInfoOrder from './MyInfoOrder';
export default class MyInfo extends React.Component{
_onPress(){
console.log("tap");
}
_onPressMessage(){
const { navigator } = this.props;
if(navigator) {
navigator.push({
name: 'order',
component: MyInfoOrder,
})
}
}
render(){
return(
<View style={styles.btnGroup}>
<TouchableHighlight style={[styles.btnItem]} onPress={this._onPressMessage.bind(this)}>
<View style={styles.btnItemView}>
<Image source={require('../images/myinfo/message.png')} style={styles.btnItemViewImage} />
<Text style={styles.btnItemViewText}>MyTest</Text>
<Image source={require('../images/more.png')} style={styles.btnItemViewArrow} />
</View>
</TouchableHighlight>
<View style={styles.lineStyle}></View>
<TouchableHighlight style={[styles.btnItem]} onPress={this._onPress}>
<View style={styles.btnItemView}>
<Image source={require('../images/myinfo/friends.png')} style={styles.btnItemViewImage} />
<Text style={styles.btnItemViewText}>MyTest</Text>
<Image source={require('../images/more.png')} style={styles.btnItemViewArrow} />
</View>
</TouchableHighlight>
<View style={styles.lineStyle}></View>
<TouchableHighlight style={[styles.btnItem]} onPress={this._onPress}>
<View style={styles.btnItemView}>
<Image source={require('../images/myinfo/col.png')} style={styles.btnItemViewImage} />
<Text style={styles.btnItemViewText}>MyTest</Text>
<Image source={require('../images/more.png')} style={styles.btnItemViewArrow} />
</View>
</TouchableHighlight>
</View>
)
}
}
const styles = StyleSheet.create({
btnGroup:{
marginBottom:30,
borderRadius:10,
backgroundColor:'#FFFFFF',
},
btnItem:{
height:104,
borderRadius:10,
},
btnItemView:{
borderRadius:10,
backgroundColor:'#FFFFFF',
height:106,
flexDirection:'row',
alignItems:'center',
},
btnItemViewImage:{
width:48,
height:48,
marginLeft:24,
marginRight:24
},
btnItemViewText:{
flex:1,
fontSize:32,
color:'#333333',
},
btnItemViewArrow:{
width:30,
height:30,
marginRight:30
},
})
I use:
"react": "15.4.2",
"react-native": "0.41.2",
platform：android 6.0
Adjust "delayPressIn" props in TouchableHighlight to 0 and everything work as expected.
if you want change color of TouchableHighlight when pressed you need to add
underlayColor in props
I am currently making a simple app in React-Native to keep track of a dollar amount, however once I enter an amount into the input it gets stuck inside the input. The input never loses focus once I hit the enter/return key on the Android keyboard, it even goes inside the addAmount function and prints the warn but still maintains the cursor focus inside the input, this prevents me from pressing r,r again to refresh the app.
import React, { Component } from 'react';
import { AppRegistry, Text, View, StyleSheet, TextInput, ScrollView} from 'react-native';
class AwesomeProject extends Component {
constructor(props) {
super(props);
}
addAmount(deposit){
console.warn(deposit);
}
render() {
return (
<View style={{ flex: 1, flexDirection: 'column'}}>
<View style={{flex: 1, backgroundColor: 'skyblue', justifyContent:'center'}}>
<Text>YTD Earnings: $10</Text>
</View>
<View style={{flex: 1, backgroundColor: '#95a5a6'}}>
<TextInput
ref = 'amount'
placeholder='Enter Amount'
keyboardType='numeric'
returnKeyType='done'
onSubmitEditing={(event) => this.addAmount(event.nativeEvent.text)}/>
</View>
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
I am trying to make a slider menu in Android. Therefor I made TouchableNativeFeedback with a View parent and Icon and text children wrapped in. Problem is the whole component isn´t clickable. Only the first 10% from the left hand side is clickable.
I have tried deleting all styling and switch to TouchableOpacity, TouchableWithoutFeedback and TouchableHighlight, but problem still remains.
import React from 'react'
import {View,
Text,
StyleSheet,
TouchableOpacity,
Platform
} from "react-native";
var DrawerMenuItem = React.createClass({
propTypes: {
onClick: React.PropTypes.func,
text: React.PropTypes.string.isRequired,
iconName: React.PropTypes.string.isRequired
},
render: function() {
return(
name={this.props.iconName}
size={24}
color={colors.lightBlack}
/>
{this.props.text}
)
}
});
module.exports = DrawerMenuItem;`
And in DrawerContent.js:
import React from 'react'
import DrawerMenuItem from './DrawerMenuItem'
import {View,
Text,
StyleSheet,
TouchableOpacity,
TouchableNativeFeedback,
BackAndroid,
ScrollView,
Image,
Platform
} from "react-native";
var DrawerContent = React.createClass({
propTypes: {
onClick: React.PropTypes.func,
resetStack: React.PropTypes.func,
closeDrawer: React.PropTypes.func,
},
_onPress: function(viewToShow){
this.props.onClick(viewToShow);
this.props.closeDrawer();
},
render: function() {
return (
<View>
<View>
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-end'}}>
<Text>{reduxStore.getState().user.name}</Text>
</View>
<Image resizeMode='cover' source={require('../../resources/images/rf_logo_vit.png')}></Image>
</View>
<ScrollView showsVerticalScrollIndicator={false} style={styles.menu}>
<View>
<DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='line-chart' text={'###'}/>
<DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='bar-chart' text={'###'}/>
<DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='bullseye' text={Localize('###')}/>
<DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='phone' text={Localize('###')}/>
<DrawerMenuItem onClick={() => {this._onPress('##')}} iconName='file-text' text={Localize('###')}/>
</View>
</ScrollView>
</View>
);
}
});
DrawerContent is the slider menu and its working. But only the first 10% of the component is clickable. I wish to make the whole component clickable. I mean everything inside TouchableNativeFeedback. Right now it only half of the Icon.
React Native version: 0.31.0 Platform(s) Android (also same problem in
IOS) Operating System: macOS