Nader Dabit’s answer is outdated, since using String literals in ref attributes has been deprecated. This is how we would do it as of September 2017: <Child ref={child => {this.child = child}} {…this.props} /> <Button onPress={this.child.myfunc} /> Same functionality, but instead of using a String to reference the component, we store it in a global … Read more
That’s the ways I fixed it. As @chemitaxis suggests, add base-64 module from NPM: npm i -S base-64 Based on it, I propose a couple of ways to use it: Importing it in files you need it Then, you can import ‘encode’ and ‘decode’ methods using aliases, this way: import {decode as atob, encode as … Read more
It’s a typo: Your closing ScrollView tag is: </SCrollView> rather than </ScrollView>. You also need to add a style to the View container, here’s an example of what it should look like: return( <View style={{flex: 1}}> <ScrollView> <Text> TEST </Text> <Text> TEST </Text> <Text> TEST </Text> <Text> TEST </Text> … </ScrollView> </View> );
After a long research MetroJS bundler default not compile typescript .ts and .tsx extension files. We need tell MetroJS bundler to compile .ts and .tsx files i solved this error by edit metro.config.js file in root project folder by following. Edited on September 2022 Added cjx and json extensions to below snippet All extensions listed … Read more
If you are using react-navigation, this is affected by the header of the react-navigation. The height of the header is vary on different mobile screen. So you have to get the height of the header and pass into the keyboardVerticalOffset props. import * as React from ‘react’ import { KeyboardAvoidingView } from ‘react-native’ import { … Read more
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
For React Native 0.41 and later, you can do this with the built-in scrollToEnd method: <ScrollView ref={ref => {this.scrollView = ref}} onContentSizeChange={() => this.scrollView.scrollToEnd({animated: true})}> </ScrollView>
It seems like a bug in 0.56 related to dependencies. The “solution” is to find the correct combination of dependencies’ versions. We found a workaround by installing those versions EXACTLY: react-native >> 0.55.4 babel-core >> latest babel-loader >> latest babel-preset-react-native >> 4.0.0 So you have to run those commands in order: react-native init AwesomeProject cd … Read more
UPDATE 26.08.2019 Since the initial version of the answer, TextInput’s API has changed, and answer below is no longer valid. I haven’t worked with react-native for more than 2 years now, so I can’t really tell which version had these changes. Regarding the answer, onChangeText is still a simple prop, that gives whatever is the … Read more
The chaining response should look more like this, specifically the response.json part. Then you should get an Object back in console.log. .then(response => response.json()) .then(response => { console.log(response) }