API tools faq
paste
Advertisement
yosadade

autoscroll

yosadade
Dec 3rd, 2019
119
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.70 KB | None | 0 0
raw download clone embed print report
  1. import React, { Component } from 'react';
  2. import { Container, Footer, FooterTab, Button, Content, Text, CardItem, Right, Left, View} from 'native-base';
  3. import { Image, Dimensions, ScrollView, StyleSheet, Clipboard, Linking, Share } from 'react-native';
  4. import RBSheet from "react-native-raw-bottom-sheet";
  5. import LinkToOriginal from './LinkSumberDesc';
  6. import HTML from 'react-native-render-html';
  7. import GestureRecognizer from 'react-native-swipe-gestures';
  8. import { FloatingAction } from "react-native-floating-action";
  9. import Icon from 'react-native-vector-icons/SimpleLineIcons';
  10.  
  11. import analytics from '@react-native-firebase/analytics';
  12.  
  13. import moment from 'moment/min/moment-with-locales'
  14. moment.locale('id')
  15.  
  16. const actions = [
  17. // {
  18. // text: "Baca Berita",
  19. // icon: <Icon type='SimpleLineIcons' name='volume-2' style={{color:'white'}}/>,
  20. // name: "bt_baca",
  21. // position: 1,
  22. // color:'rgba(58,61,65,1)'
  23. // },
  24. {
  25. text: "Buka Browser",
  26. icon: <Icon type='SimpleLineIcons' name='globe' style={{color:'white'}}/>,
  27. name: "bt_browse",
  28. position: 2,
  29. color:'#5BC97F',
  30. },
  31. {
  32. text: "Salin Link Sumber",
  33. icon: <Icon type='SimpleLineIcons' name='link' style={{color:'white'}}/>,
  34. name: "bt_salin",
  35. position: 3,
  36. color:'#5BC97F'
  37. },
  38. {
  39. text: "Kirim Link Sumber",
  40. icon: <Icon type='SimpleLineIcons' name='share-alt' style={{color:'white'}}/>,
  41. name: "bt_kirim",
  42. position: 4,
  43. color: '#5BC97F'
  44. }
  45. ];
  46.  
  47. function Desc({ judul, ilustrasi, sumber, tgl, isi }){
  48.  
  49. scrollToEnd = () => {
  50. this.scrollView.scrollToEnd();
  51. }
  52.  
  53. let paragraf = (isi.split( ' ').length)
  54. return (
  55. <View style={darkStyles.container}>
  56. <Image source={{uri: ilustrasi }} style={darkStyles.img}/>
  57. <View style={darkStyles.viewJudul}>
  58. <Text style={darkStyles.judul}>{judul}</Text>
  59. </View>
  60. <View style={darkStyles.viewSumberTgl}>
  61. <Text style={darkStyles.sumberTgl}>{sumber}</Text>
  62. <Text style={darkStyles.sumberTgl}>{moment(tgl).utc().format('DD MMMM YYYY')}</Text>
  63. </View>
  64. <View style={darkStyles.viewHTML} accessible={true} accessibilityRole={'text'}>
  65. <ScrollView style={darkStyles.html} ref={(scrollView) => { this.scrollView = scrollView }}>
  66. <HTML
  67. html={`<body>${isi}<br><br>${'('+paragraf+' Kata)'}</body>`}
  68. imagesMaxWidth={Dimensions.get('window').width}
  69. ignoredTags={['script','div']}
  70. tagsStyles= {{ body: { color: 'white'},
  71. a: { color: 'white', textDecorationLine: 'none'}}}
  72. />
  73.  
  74. </ScrollView>
  75. </View>
  76. </View>
  77. )
  78. }
  79.  
  80. export default class DescScreen extends Component {
  81. componentDidMount(){
  82. const screen = "content"
  83. analytics().setCurrentScreen(screen, screen)
  84. }
  85. render() {
  86. const item = this.props.navigation.getParam('item');
  87. let jam = moment(item.tgl).fromNow();
  88. // jam = jam.replace('hours ago', 'j')
  89. return (
  90. <Container>
  91. <Content>
  92. <Desc judul={item.judul} ilustrasi={item.ilustrasi} link={item.link} tgl={item.tgl} isi={item.isi} sumber={item.sumber}/>
  93. </Content>
  94. <FloatingAction
  95. color={'#5BC97F'}
  96. actions={actions}
  97. onPressItem={name => {
  98. console.log(`selected button: ${name}`);
  99. if (name==='bt_baca') {
  100. analytics().logEvent('baca_berita')
  101.  
  102. }
  103. if (name==='bt_browse') {
  104. analytics().logEvent('browse_link')
  105. Linking.openURL(item.link)
  106. }
  107. if (name==='bt_salin') {
  108. analytics().logEvent('salin_link')
  109. Clipboard.setString(item.link)
  110. }
  111. if (name==='bt_kirim') {
  112. analytics().logEvent('kirim_link')
  113. Share.share({message:item.link, title:item.judul, url:item.link})
  114. }
  115. }}
  116. />
  117.  
  118. {/*
  119. <Footer style={styles.footer}>
  120. <FooterTab style={styles.footerTab}>
  121. <Button style={styles.buttonSumber}
  122. onPress={() => {this.RBSheet.open()}}
  123. >
  124. <Text style={styles.buttonTextSumber}>Sumber</Text>
  125. </Button>
  126. <RBSheet
  127. ref={ref => {
  128. this.RBSheet = ref;
  129. }}
  130. height={120}
  131. duration={250}
  132. customStyles={{
  133. container: {
  134. justifyContent: "center",
  135. alignItems: "center",
  136. backgroundColor: "grey",
  137. }
  138. }}
  139. >
  140. <LinkToOriginal link={item.link} />
  141. </RBSheet>
  142.  
  143. <Button style={styles.buttonJam}
  144. >
  145. <Icon name="time" style={styles.iconJamImpresi} />
  146. <Text style={styles.textJam} >{jam}</Text>
  147. </Button>
  148. <Button style={styles.buttonImpresi}
  149. >
  150. <Icon name="eye" style={styles.iconJamImpresi}/>
  151. <Text style={styles.textImpresi} >{item.impresi}</Text>
  152. </Button>
  153. </FooterTab>
  154. </Footer>
  155. */}
  156. </Container>
  157. );
  158. }
  159. }
  160.  
  161. const darkStyles = StyleSheet.create({
  162. container: {
  163. backgroundColor: '#2E3136'
  164. },
  165. img: {
  166. height: 220,
  167. width: null,
  168. flex: 1
  169. },
  170. viewJudul: {
  171. marginHorizontal: 10,
  172. marginTop: 10
  173. },
  174. judul: {
  175. fontWeight: 'bold',
  176. fontSize: 20,
  177. color: 'white'
  178. },
  179. viewSumberTgl: {
  180. flexDirection: 'row',
  181. justifyContent: 'space-between',
  182. marginHorizontal: 10,
  183. marginVertical: 15
  184. },
  185. viewHTML: {
  186. backgroundColor: '#2E3136'
  187. },
  188. sumberTgl: {
  189. fontSize: 12,
  190. color: 'white'
  191. },
  192. html: {
  193. flex: 1,
  194. marginHorizontal: 10,
  195. paddingBottom: 100,
  196. },
  197. footer: {
  198. height: 42
  199. },
  200. footerTab: {
  201. backgroundColor: '#F5F5F7',
  202. },
  203. buttonSumber: {
  204. flex: 1,
  205. backgroundColor: 'grey',
  206. height: 42
  207. },
  208. buttonTextSumber: {
  209. textAlign: 'center',
  210. color: 'white'
  211. },
  212. buttonJam: {
  213. flex: 1,
  214. flexDirection: 'row',
  215. height: 42,
  216. marginHorizontal: 10
  217. },
  218. iconJamImpresi: {
  219. color: 'grey',
  220. fontSize: 20
  221. },
  222. textJam: {
  223. color: 'grey',
  224. fontSize: 10,
  225. right: 20
  226. },
  227. buttonImpresi: {
  228. flex: 1,
  229. flexDirection: 'row',
  230. height: 42
  231. },
  232. textImpresi: {
  233. color: 'grey',
  234. fontSize: 12,
  235. right: 20
  236. }
  237. })
  238.  
  239. const lightStyles = StyleSheet.create({
  240. img: {
  241. height: 220,
  242. width: null,
  243. flex: 1
  244. },
  245. viewJudul: {
  246. marginHorizontal: 10,
  247. marginTop: 10
  248. },
  249. judul: {
  250. fontWeight: 'bold',
  251. fontSize: 20
  252. },
  253. viewSumberTgl: {
  254. flexDirection: 'row',
  255. justifyContent: 'space-between',
  256. marginHorizontal: 10,
  257. marginVertical: 10
  258. },
  259. viewHTML: {
  260. backgroundColor: '#F6F6F6'
  261. },
  262. sumberTgl: {
  263. fontSize: 12
  264. },
  265. html: {
  266. flex: 1,
  267. marginHorizontal: 10,
  268. paddingBottom: 100
  269. },
  270. footer: {
  271. height: 42
  272. },
  273. footerTab: {
  274. backgroundColor: '#F5F5F7',
  275. },
  276. buttonSumber: {
  277. flex: 1,
  278. backgroundColor: 'grey',
  279. height: 42
  280. },
  281. buttonTextSumber: {
  282. textAlign: 'center',
  283. color: 'white'
  284. },
  285. buttonJam: {
  286. flex: 1,
  287. flexDirection: 'row',
  288. height: 42,
  289. marginHorizontal: 10
  290. },
  291. iconJamImpresi: {
  292. color: 'grey',
  293. fontSize: 20
  294. },
  295. textJam: {
  296. color: 'grey',
  297. fontSize: 10,
  298. right: 20
  299. },
  300. buttonImpresi: {
  301. flex: 1,
  302. flexDirection: 'row',
  303. height: 42
  304. },
  305. textImpresi: {
  306. color: 'grey',
  307. fontSize: 12,
  308. right: 20
  309. }
  310. })
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!