// Component const Touchable = ({ onPress, children }) => ( Platform.OS === 'android' ? <TouchableNativeFeedback onPress={onPress}>{ children }</TouchableNativeFeedback> : <TouchableOpacity onPress={onPress}>{ children }</TouchableOpacity> )
const Button = props => ( <TouchableNativeFeedback delayPressIn={0} background={TouchableNativeFeedback.SelectableBackground()} // eslint-disable-line new-cap {...props}> {props.children} </TouchableNativeFeedback> )
render() { return ( <View style={styles.wrapper}> <TouchableNativeFeedback background={TouchableNativeFeedback.Ripple(null, true)} onPress={this.handleClickFab} > <View style={styles.iconWrapper}> <Icon name="plus" size={24} color="#f5f5f5" /> </View> </TouchableNativeFeedback> </View> ); }
_renderPost(data) { const { navigate } = this.props.navigation; return ( <TouchableNativeFeedback onPress={() => navigate('Detail', { data: data })}> <View style={styles.card}> <Text style={styles.cardTitle}>{data.title}</Text> <View style={styles.cardDetail}> <Text style={styles.cardTitleDetail}>Points: {data.point}</Text> <Text style={styles.cardTitleDetail}>{this._formatDateTime(data.created_at)}</Text> </View> </View> </TouchableNativeFeedback> ) }
render() { return ( <View> <TouchableNativeFeedback onPress={() => console.log('Button Pressed!')} > <View style={styles.button}> <Text style={styles.buttonText}>Button</Text> </View> </TouchableNativeFeedback> </View> ); }
render() { const { style, pressOpacity, pressColor, borderless, ...rest } = this.props; if (Platform.OS === 'android' && Platform.Version >= ANDROID_VERSIONS.LOLLIPOP) { return ( <TouchableNativeFeedback {...rest} onPress={this.handlePress} background={TouchableNativeFeedback.Ripple(pressColor, borderless)} > <View style={style}> {React.Children.only(this.props.children)} </View> </TouchableNativeFeedback> ); } else { return ( <TouchableOpacity {...rest} onPress={this.handlePress} style={style} activeOpacity={pressOpacity} > {React.Children.only(this.props.children)} </TouchableOpacity> ); } }
render() { return ( <ScrollView> <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }} > <DrawerItems {...this.props} /> <View style={styles.divider} /> <TouchableNativeFeedback background={TouchableNativeFeedback.SelectableBackground()} onPress={this.handleLogout} > <View style={styles.logoutBtn}> <Text style={styles.logoutBtnText}>Logout</Text> </View> </TouchableNativeFeedback> </SafeAreaView> </ScrollView> ); }
const TouchableView = ({ isRippleDisabled, rippleColor, children, style, ...props }) => { if (IS_RIPPLE_EFFECT_SUPPORTED && !isRippleDisabled) { const background = TouchableNativeFeedback.Ripple('#FFF') return ( <TouchableNativeFeedback {...props} background={background}> <View style={style}>{children}</View> </TouchableNativeFeedback> ) } else { return ( <TouchableOpacity {...props} style={style}> {children} </TouchableOpacity> ) } }
const ButtonWithBackground = (props) => { const content = <View style={[styles.button, { backgroundColor: props.color }, props.disabled ? styles.disabled : null]}> <Text style={props.disabled ? styles.disabledText : null}>{props.children}</Text> </View> if (props.disabled) { return content; } if (Platform.OS === 'android') return ( <TouchableNativeFeedback onPress={props.onPress}> {content} </TouchableNativeFeedback>) else return ( <TouchableOpacity onPress={props.onPress}> {content} </TouchableOpacity> ) }
const Button = props => { let { disabled, onPress, buttonStyle, buttonName, textStyle } = props; if (Platform.OS == "ios") { return ( <TouchableOpacity onPress={props.onPress}> <View style={buttonStyle}> <Text style={textStyle}>{buttonName}</Text> </View> </TouchableOpacity> ); } else { return ( <TouchableNativeFeedback activeOpacity={0.9} disabled={disabled} onPress={onPress} > <View style={buttonStyle}> <Text style={textStyle}>{buttonName}</Text> </View> </TouchableNativeFeedback> ); } }
const Touchable = (props: Props) => { if (Platform.OS === 'android') { return ( <TouchableNativeFeedback onPress={props.onPress} testID="touch-android" style={props.style} > {props.children} </TouchableNativeFeedback> ); } return ( <TouchableOpacity onPress={props.onPress} testID="touch-ios" style={props.style} > {props.children} </TouchableOpacity> ); }
const Button = props => ( <TouchableNativeFeedback onPress={props.onPress}>{props.children}</TouchableNativeFeedback> )
render() { return ( <View style={styles.wrapper}> <TouchableNativeFeedback onPress={this.handleNavigate} background={TouchableNativeFeedback.Ripple(null, true)} > <View style={styles.icon}> <Icon name="menu" color="#f5f5f5" size={24} /> </View> </TouchableNativeFeedback> </View> ); }
// Component const Touchable = ({ onPress, children }) => ( Platform.OS === 'android' ? <TouchableNativeFeedback onPress={onPress}>{ children }</TouchableNativeFeedback> : <TouchableOpacity onPress={onPress}>{ children }</TouchableOpacity> )
/** * Stateless component for rendering basic touchable view. */ const TouchableView = ({ isRippleDisabled, rippleColor, children, style, ...props }) => { if (IS_RIPPLE_EFFECT_SUPPORTED && !isRippleDisabled) { const background = TouchableNativeFeedback.Ripple('#FFF') return ( <TouchableNativeFeedback {...props} background={background}> <View style={style}>{children}</View> </TouchableNativeFeedback> ) } else { return ( <TouchableOpacity {...props} style={style}> {children} </TouchableOpacity> ) } }