Detect ScrollView has reached the end

I did it like this: import React from ‘react’; import {ScrollView, Text} from ‘react-native’; const isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => { const paddingToBottom = 20; return layoutMeasurement.height + contentOffset.y >= contentSize.height – paddingToBottom; }; const MyCoolScrollViewComponent = ({enableSomeButton}) => ( <ScrollView onScroll={({nativeEvent}) => { if (isCloseToBottom(nativeEvent)) { enableSomeButton(); } }} scrollEventThrottle={400} > <Text>Here is … Read more

react native get TextInput value

The quick and less optimized way to do this is by using arrow function inside your onChangeText callback, by passing username as your argument in your onChangeText callback. <TextInput ref= {(el) => { this.username = el; }} onChangeText={(username) => this.setState({username})} value={this.state.username} /> then in your _handlePress method _handlePress(event) { let username=this.state.username; } But this has … Read more

Auto scale image height with React Native

Try this: import React, { Component, PropTypes } from “react”; import { Image } from “react-native”; export default class ScaledImage extends Component { constructor(props) { super(props); this.state = { source: { uri: this.props.uri } }; } componentWillMount() { Image.getSize(this.props.uri, (width, height) => { if (this.props.width && !this.props.height) { this.setState({ width: this.props.width, height: height * (this.props.width … Read more

Pass Data between Pages in React native

Note This answer was written for react-navigation: “3.3.0”. As there are newer versions available, which could bring changes, you should make sure that you check with the actual documentation. Passing data between pages in react-navigation is fairly straight forward. It is clearly explained in the documentation here For completeness let’s create a small app that … Read more

Is React Native’s Async Storage secure?

AsyncStorage is not suitable for storing sensitive information. You might find this useful: https://github.com/oblador/react-native-keychain It uses facebook conceal/android keystore to store encrypted data to SharedPreferences (Android) and keychain on iOS. (I co-authored the lib). Be sure to read the entire readme to understand what it offers.