I have React Native Refresh control working on IOS.
https://facebook.github.io/react-native/docs/refreshcontrol.html
I run it on the android sim and it does not work.
Error says Unhandled Promise Rejection.
Here is trimmed version of the file so you can see the set up:
import React, { Component } from 'react';
import {
RefreshControl,
} from 'react-native';
export default class Products extends Component {
_onRefresh() {
this.setState({refreshing: true});
this.likedProducts()
}
render() {
return (
<View style={styles.container}>
<ScrollView
contentContainerStyle={styles.scrollContent}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh.bind(this)}
/>
}
>
...
</ScrollView>
</View>
}
}
}
I don't know if it is supported to use a ScrollView with RefreshControl on Android. I would recommend to use https://facebook.github.io/react-native/docs/flatlist.html instead. There you have pull-to-refresh natively integrated on both Android & iOS.
I can confirm that it does work for android and ios. The error i received was from somewhere else.
Related
When I am using Navigator from react native I am getting an error. The error is:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at App.js:11.
My code is:
import React, { Component } from 'react';
import {
Text,
Navigator,
TouchableHighlight
} from 'react-native';
export default class App extends Component {
render() {
return (
<Navigator
initialRoute={{ title: 'Awesome Scene', index: 0 }}
renderScene={(route, navigator) => (
<Text>Hello {route.title}!</Text>
)}
style={{ padding: 100 }}
/>
);
}
}
I followed this tutorial: https://reactnative.dev/docs/0.43/navigator
Can someone please help me in this. Is there something wrong in documentation?
This code example is from react doc version 0.43. After that "Navigator" was removed.
If you do not care about backward compatibility then I would suggest following current documentation (0.63). In the latest version, there is more simple solution is given.
I am making a mobile app using react-native-popup-menu. (React Native)
The popup unit works fine on iOS. But it will not shop up on Android when I test it on Android simulator.
I've seen a post that suggests a fix that involves MenuContext> element. but it looks like that element has been deprecated by the plug-in developers since.
Popup menu does not overlay other components in Android
I'm looking for a up-to-date solution that works for React Native Android environment.
My app looks like this right now:
Import all the tools.
import { MenuProvider } from 'react-native-popup-menu';
import { Menu, MenuOptions, MenuOption, MenuTrigger } from 'react-native-popup-menu';
The main app looks like this. Everything is wrapped within MenuProvider.
export class App1 extends Component {
render() {
return (
<MenuProvider>
<View style={styles.container}>
<MoreStuff navigation={this.props.navigation} />
<TopMenu1 navigation={this.props.navigation} />
<View1Map />
</View>
</MenuProvider>
);
}
}
This is where I built the pop-up menu. I am following example from the official tutorial.
https://github.com/instea/react-native-popup-menu
In the order of appearance, I have View> element, followed by Menu>, MenuTrigger>, MenuOptions> and MenuOption>.
export class MoreStuff extends Component {
render(){
return (
<View>
<Menu>
<MenuTrigger>
<Image
source={require('./assets/Burger.png')}
>
</Image>
</MenuTrigger>
<MenuOptions>
<MenuOption
onSelect={() => {
//DEFINT ACTION HERE
}} text='Item 1' />
<MenuOption onSelect={() => {
//DEFINE ACTION HERE
}} text='Item 2' />
<MenuOption text='Close'
onSelect={() => this.close}/>
</MenuOptions>
</Menu>
</View>
);
}
}
Expected: When you click on the MenuTrigger element, the popup menu will come up.
Actual result: When you click on the MenuTrigger element, nothing happens.
You can resole the issue by making sure that MenuProvider is the first component that is rendered in the tree.
I want to create touch id local authentication in react native. I used
npm react-native-touch-id
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableHighlight
} from 'react-native';
var LocalAuth = require('react-native-touch-id')
var YourComponent = React.createClass({
_pressHandler() {
LocalAuth.authenticate({
reason: 'this is a secure area, please authenticate yourself',
falbackToPasscode: true, // fallback to passcode on cancel
suppressEnterPassword: true // disallow Enter Password fallback
})
.then(success => {
AlertIOS.alert('Authenticated Successfully')
})
.catch(error => {
AlertIOS.alert('Authentication Failed', error.message)
})
},
render() {
return (
<View>
...
<TouchableHighlight onPress={this._pressHandler}>
<Text>
Authenticate with Touch ID / Passcode
</Text>
</TouchableHighlight>
</View>
)
}
})
but it says nothing, i followed this link
https://github.com/ElekenAgency/react-native-touch-id-android
Came here because I've got the same question, but looking at your code I assume you've got lost in mixing libs.
Looking at the line:
var LocalAuth = require('react-native-touch-id')
You're importing LocalAuth which I believe is a part of react-native-local-auth library built on top of react-native-touch-id, while following a tutorial for 3-rd library which is react-native-touch-id-android.
According to their example in the repo, your import should look like this:
import Finger from 'react-native-touch-id-android'
My guess for the reason it's not crashing on you is because you've installed react-native-local-auth somewhere in the process befor trying out react-native-touch-id-android.
Better start all over - go to package.json and remove the above mentioned libraries, then run npm install and then follow the step-by-step guide in the repo you've posted.
I'd be glad if you come back afterwards and report on whether it worked out or not. Good luck.
use this code it worked for me !
import TouchID from 'react-native-touch-id';
TouchID.authenticate('Authentication')
.then(success => {
// Success code
})
.catch(error => {
// Failure code
});
I have a mobile site and I want to make an android browser app where I want to open my site.
I have tried and react-native-browser. Something like..
import {
processColor, // make sure to add processColor to your imports if you want to use hex colors as shown below
} from 'react-native';
// at the top of your file near the other imports
var Browser = require('react-native-browser');
class SampleApp extends Component {
render() {
return (
<View style={{paddingTop:20, flex:1}}>
{Browser.open('https://google.com/')}
</View>
);
}
}
But got no success...
I just want to make a browser that opens my mobile site..
Is there any better way of doing this or if someone has any idea how to use react-native-browser ?
Thanks in advance
Looking at the source code, it seems this browser is only available on iOS.
you must search in this web https://js.coach/react-native?search=browser for example https://github.com/d-a-n/react-native-webbrowser
Why are you trying to look for an external library while there is a WebView Component already integrated with react-native itself?
WebView renders web content in a native view. You can use this
component to navigate back and forth in the web view's history and
configure various properties for the web content.
You can just add a WebView and open up the desired web url.
Example
import React, { Component } from 'react';
import { WebView } from 'react-native';
class MyWeb extends Component {
render() {
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{marginTop: 20}}
/>
);
}
}
You can use https://www.npmjs.com/package/react-native-webbrowser
Install:
npm i react-native-webbrowser --save
Use:
class SampleApp extends Component {
render() {
return (
<View style={{paddingTop:20, flex:1}}>
<Webbrowser
url="https://your-url.com"
hideHomeButton={true}
hideToolbar={true}
hideAddressBar={true}
hideStatusBar={true}
foregroundColor={'#efefef'}
backgroundColor={'#333'}
/>
</View>
);
}
Set all the hide's props to true to make your app display only the site
I am using React Native's <WebView> component.
The documentation has no mention of how to handle the keyboard hiding the webview when the webview's HTML contains an <input> which becomes focused on in Android.
Has anyone managed to solve this?
I have found a library that seems to work for regular <View>, but not a <WebView>.
you can wrap your WebView with a KeyboardAvoidingView
<KeyboardAvoidingView
behavior={Platform.select({ ios: "position", android: null })}
enabled
contentContainerStyle={{ flex: 1 }}
keyboardVerticalOffset={Platform.select({ ios: offset, android: 20 })}
style={{ flexGrow: 1 }}
>
<WebView/>
</KeyboardAvoidingView>
Have you thought about responding to system level events for the keyboard appearing and disappearing, then adjusting the WebView size appropriately?
There is an old question about how to handle this, it may or may not still be relevant. This answer in particular shows how to handle keyboard events. https://stackoverflow.com/a/33585501/1403
DeviceEventEmitter.addListener('keyboardDidShow',(frames)=>{
if (!frames.endCoordinates) return;
this.setState({keyboardSpace: frames.endCoordinates.height});
});
DeviceEventEmitter.addListener('keyboardWillHide',(frames)=>{
this.setState({keyboardSpace:0});
});
You could use the frames.endCoordinates.height value to alter the height of your WebView, ensuring that the content is not hidden behind the keyboard.
Just raising awareness that this can also be simply achieved by using react-native-keyboard-spacer if you are not in for intricate keyboard control.
import KeyboardSpacer from 'react-native-keyboard-spacer';
class DemoApp extends Component {
render() {
return (
<View>
<WebView ... />
<KeyboardSpacer/>
</View>
);
}
}
I used WebView.onTouchStart and ScrollView.scrollTo.
This is work like charm for me.
import { useRef } from "react";
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp
} from "react-native-responsive-screen";
const scrollRef = useRef();
const scrolldown = () => {
scrollRef.current.scrollTo((wp("100%") * 2) / 3);
};
<ScrollView ref={scrollRef} >
...
<WebView onTouchStart={scrolldown} >
...