Open nualoy opened 5 years ago
RN: 0.55.4
Code:
// (...) export class InfoPopover extends PureComponent<Props> { static defaultProps = { style: {}, }; static styles = StyleSheet.create({ infoButton: { paddingLeft: 6, color: colors.ink, }, popoverContent: { padding: 12, backgroundColor: colors.ink, borderRadius: 4, width: 230, shadowOpacity: 0.25, shadowRadius: 4, shadowOffset: { width: 0, height: 0, }, elevation: 2, }, popoverText: { color: colors.white, }, popoverArrow: { display: 'none', borderTopColor: 'transparent', }, popoverBackground: { backgroundColor: 'transparent', }, }); render() { const { message, style } = this.props; const { styles } = InfoPopover; return ( <PopoverController> {({ openPopover, closePopover, popoverVisible, setPopoverAnchor, popoverAnchorRect }) => ([ <View key="button" style={style}> <TouchableWithoutFeedback hitSlop={{ top: 1, bottom: 1, left: 1, right: 1 }} ref={setPopoverAnchor} onPress={openPopover} > <Header style={styles.infoButton}> {popoverVisible ? TextIcons.InfoInverted : TextIcons.Info} </Header> </TouchableWithoutFeedback> </View>, <Popover key="popover" contentStyle={styles.popoverContent} arrowStyle={styles.popoverArrow} backgroundStyle={styles.popoverBackground} placement="left" visible={popoverVisible} onClose={closePopover} fromRect={popoverAnchorRect} easing={() => Easing.inOut(Easing.quad)} > <Subtitle style={styles.popoverText}>{message}</Subtitle> </Popover>, ])} </PopoverController> ); } }
found solution?
RN: 0.55.4
Code: