I'm trying to use react-native-image-picker, but I'm getting the error: NativeModule.ImagePickermanager is null.
import React, { Component } from 'react';
import { Text, View, StyleSheet, Alert, PixelRatio, Image } from 'react-native';
import ImagePicker from 'react-native-image-picker';
...
handleChoosePhoto = () => {
const options = {
noData: true,
};
ImagePicker.launchImageLibrary(options, response => {
if (response.uri) {
this.setState({ photo: response });
}
});
};
...
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
{this.state.photo && (
<Image
source={{ uri: this.state.photo.uri }}
style={{ width: 300, height: 300 }}
/>
)}
<Button title="Choose Photo" onPress={this.handleChoosePhoto} />
</View>
I tried to run react-native link react-native-image-picker. When I run this command, nothing happens. It does not show anything in the terminal. I'm using IOS simulator.
I have been trying to resolve this error from last 8 hours but couldn't succeed. Please use ImagePicker from expo and here is its link. https://docs.expo.io/versions/latest/sdk/imagepicker/
It will resolve your error.
I also have the same problem . This is what worked for me.
Unistall the latest version
npm uninstall react-native-image-picker
Installed version 0.28.0
npm install react-native-image-picker#0.28.0 --save
react-native link react-native-image-picker
Related
Below is the basic code for Responsive layout using npm package(react-native-responsive-screen). This is working fine as expected in Class component. But, I want to change the below code to Functional component. I have almost changed everything. Initially no error when i load the app in portrait/landscape mode. Once i change it to landscape/portrait, it will come up with some error.
Here is the link of Original source. https://github.com/marudy/react-native-responsive-screen/blob/master/examples/responsive-screen-orientation-change/README.md
import React, { useEffect, useState } from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import { Container, View, Button, Text} from "native-base";
import {widthPercentageToDP as wp,
heightPercentageToDP as hp,
listenOrientationChange as lor,
removeOrientationListener as rol } from 'react-native-responsive-screen';
const Responsive = () =>
{
useEffect( () =>
{
lor();
return () => rol()
},[])
const styles = StyleSheet.create({
container: { flex: 1, alignItems: 'center', justifyContent:'center' },
title: {
backgroundColor: 'gray',
height: hp('10%'),
width: wp('80%'),
alignItems: 'center',
justifyContent:'center',
marginVertical: wp('10%'),
},
myText: {
textAlign:'center',
color:'white',
fontSize: hp('5%') // End result looks like the provided UI mockup
},
buttonStyle:
{
height: hp('8%'), // 70% of height device screen
width: wp('30%'),
marginHorizontal: wp('10%'),
},
buttonContainer:
{
flexDirection:'row',
marginBottom: wp('10%'),
},
paraContainer:
{
width: wp('80%'),
},
paraText:
{
textAlign:'justify'
}
});
return (
<Container>
<View style={styles.container}>
<View style={styles.title}>
<Text style={styles.myText}>Screen title with 50% width</Text>
</View>
<View style={styles.buttonContainer}>
<Button success style={styles.buttonStyle}><Text>Button 1</Text></Button>
<Button success style={styles.buttonStyle}><Text>Button 2</Text></Button>
</View>
<View style={styles.paraContainer}>
<Text style={styles.paraText}>
As mentioned in "How to Develop Responsive UIs with React Native" article, this solution is
already in production apps and is tested with a set of Android, iOS emulators of different
screen
specs, in order to verify that we always have the same end result.
</Text>
</View>
</View>
</Container>
);
}
export default Responsive;
Thanks in Advance.
It is not due to your code, it is due to library limitation. Current version of library still does not support functional components.
There is an open issue and PR regarding that open
issue: https://github.com/marudy/react-native-responsive-screen/issues/82
PR: https://github.com/marudy/react-native-responsive-screen/pull/70
If you still want to continue with this library, just use the head of that PR in your package.json and it should work.
"react-native-responsive-screen": "marudy/react-native-responsive-screen#70/head",
Make sure to delete node_module and perform yarn or npm install
react-native-fontawesome was working just fine for me at version 5. I upgraded to 6.0.1 but downloading the new font-awesome files, adding the new tff files into the assets/fonts folder, running react-native link react-native-fontawesome.
I closed my simulators and ran react-native run-ios and see that the icons that worked before are now question marks. They don't show up on Android either
Firstly you need to install the dependency and link the library by the following ways...
Run the following command to install the dependency.
npm install react-native-vector-icons --save
Linking of Dependency...
After the updation of React Native 0.60, they have introduced the auto-linking feature means we do not require to link the library but they have also mentioned that some libraries need linking and react-native-vector-icons is one of those cases. So for that, we need to link the library using.
react-native link react-native-vector-icons
And copy the given App.js file that shows below.
/*Example of React Native Vector Icon*/
import React, {Component} from 'react';
//import React
import {Platform, StyleSheet, Text, View} from 'react-native';
//import all the basic components
import Icon from 'react-native-vector-icons/FontAwesome';
//import vector icons
type Props = {};
export default class App extends Component<Props> {
render() {
Icon.getImageSource('user', 20, 'red').then((source) => this.setState({ userIcon: source }));
return (
<View style={styles.container}>
<Text>Example of Vector Icon</Text>
<View style={{marginTop:16, marginBottom:16, justifyContent:'center', alignItems:'center', textAlign:'center'}}>
<Text><Icon name="rocket" size={'{30}'} color="#900" /></Text>
{/*Icon Component*/}
<Icon name="rocket" size={30} color="#900" />
</View>
<View style={{marginTop:16, marginBottom:16}}>
{/*Icon.Button Component*/}
<Icon.Button name="facebook" backgroundColor="#3b5998" onPress={()=>alert("Login with Facebook")}>
Login with Facebook
</Icon.Button>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
or you can follow the following link...
https://aboutreact.com/react-native-vector-icons/
I am getting SyntaxError: Json Parse error: JSON Parse error: Unrecognized token '<'
I'm using https://cataas.com api for a react native app, my task is to generate a list of random kitten images. I tried using fetch method, but also i get error sorce.uri should not be an empty string. How can i solve this problem?
Here is my code:
import React, { Component } from 'react';
import {
Image,
StyleSheet,
Text,
View,
FlatList
} from 'react-native';
class App extends Component {
state = {
photos: '',
}
componentDidMount() {
fetch('https://cataas.com/cat?width=100')
.then(res => res.json())
.then(data => {
this.setState({
photos: data
})
.catch(err => {
console.log('error', err);
alert(err)
})
})
}
render() {
console.log(this.state.photos)
return (
<View style={styles.container}>
<Image
source={{url: this.state.photos}}
style={{height: 100, width: 100}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
}
});
export default App;
There is a typo in your code
Replace url with uri as in the docs
<Image
source={{uri: this.state.photos}}
style={{height: 100, width: 100}}
/>
You don't have to call this api manually, you could directly use the link in the Image component :
<Image
source={{uri: "https://picsum.photos/100/100"}}
style={{height: 100, width: 100}}
/>
EDIT:
Ok it's not as easy as I thought !
I created a first basic version : https://snack.expo.io/#sanjar/so-53434400
And contrary to what I thought it's always the same picture that is displayed.
It's because of react-native cache system that see the same url and decide to not execute the http request again.
then I checked the doc and founda way to fix this issue, but for ios only
I just had to change :
source={{uri: "https://source.unsplash.com/random"}}
by :
source={{uri: "https://source.unsplash.com/random", cache: 'reload'}}
It should work on ios (I don't have a mac with me now), for android I don't know yet, I'll probably investigate later.
Here I am using native-base latest version and using all the methods props but still my icons are not appearing in the header
import React, { Component } from "react";
import {
View,
Text,
StyleSheet
} from "react-native";
import {Header,Icon} from 'native-base'
class HomeScreen extends Component {
static navigationOptions = { header: null }
render() {
return (
<View style={{flex:1,backgroundColor:'#3q455c',width:"100%"}}>
<Header
placement="left"
leftComponent={{ icon: 'menu', color: 'white' }}
centerComponent={{ text: 'MY TITLE', style: { color: 'white' } }}
rightComponent={{ icon: 'home', color: 'white' }}
/>
</View>
);
}}
export default HomeScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
Here the header function is not showing in the header component
To get around this I did:
react-native link
react-native run-android
and the icons showed.
install react-native-vector-icons
npm install --save react-native-vector-icons
iOS:
react-native link react-native-vector-icons
Android:
Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:
project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
and Use:
<Icon
type="MaterialIcons"
name="menu"
/>
document
For some reason, react-native-vector-icons wasn't linked to my project.
So:
react-native link react-native-vector-icons
made the trick for me.
Of course, you must have previously installed react-native-vector-icons module, something like:
npm install react-native-vector-icons --save
Keep coding, and let the code be with you!
In my case after adding below the line in app/build.gradle and re-create the build react-native run-android the icon will show.
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
Nirmal Dalmia's answer worked, but if you are using RN >= .60, you do have to install it before linking, as shown:
npm install react-native-vector-icons
react-native link react-native-vector-icons
This seems to be the case because, starting with .60, RN will autolink your npm dependencies. Since by default react-native-vector-icons is embedded within native-base, it won't autolink. I now get an error when running react-native run-android telling me not to manually link, but the icons are showing up.
I don't know why your code doesn't work.
Here is what I am using:
import React from "react";
import { SafeAreaView } from 'react-native';
import {
Container, Header, Title, Left, Icon, Right, Button, Body, Content, Text, Card, CardItem
} from "native-base";
export default class Test extends React.Component {
static navigationOptions = {
header: null
};
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<Container style={{ flex: 1, backgroundColor: '#fff' }}>
<Header style={{ backgroundColor: '#41b8f4' }}>
<Left>
<Button
transparent
onPress={() => console.log('button')}>
<Icon name="menu" />
</Button>
</Left>
<Body>
<Title>Medical</Title>
</Body>
<Right />
</Header>
<Content padder style={{ flex: 1 }}>
<Card>
<CardItem>
<Left>
<Icon active name="md-person" />
<Text>text</Text>
</Left>
<Right>
<Icon name="arrow-forward" onPress={() =>
console.log('right')} />
</Right>
</CardItem>
</Card>
</Content>
</Container>
</SafeAreaView>
);
}
}
Native base uses window dimensions for Picker item and this ends in such issues. Add these lines to your Picker. It will solve your issue.
style={{ width: '80%' }}
placeholderStyle={{ maxWidth: '100%' }}
textStyle={{ maxWidth: '100%' }}
https://github.com/GeekyAnts/NativeBase/issues/2630#issuecomment-479847012
The icons in native base are served using react-native-vector-icons package. You don't need to install vector icons as it comes bundled with native base. I had the same problem of icons not showing up. All you need to do is link vector icons to your project.
react-native link react-native-vector-icons
After this, the icons should appear upon reinstalling the app.
Well for some reasons, I had to use this way :
<Icon type='MaterialIcons' name='menu' />
In opposition of this way :
<Icon android='md-menu' />
Can't find why though. This makes it more complicated to differentiate Android and iOS icons.
Have you installed the required peer dependencies for Native Base 2.x using the link command? https://docs.nativebase.io/docs/GetStarted.html
This fixed the issue for me:
npx react-native link
Haven't noticed much sample code/guides on how to use the CameraRoll library from React Native, I found the example in the docs a bit "vague" and confusing.
First time I'm using any of the API's so I do not fully understand how I'm suppose to use the library either. So far I've imported it like:
import {
AppRegistry,
Image,
StyleSheet,
TextInput,
Navigator,
CameraRoll,
Alert,
TouchableHighlight,
Button,
Text,
View
} from 'react-native';
quite confused with "Linking" etc, but as far as I know, this should be all I need to do in order to use the lib.
And how do I use it for something as simple as to open the gallery on the click of a button and let the user choose an image that should then be displayed in the app.
Thanks in advance, hope someone has some code to clarify this.
Here is some sample code that will grab the first 25 photos from your camera roll and display them in a ScrollView. I modified this from an example I found online here
import React, { Component, PropTypes } from 'react'
import {
CameraRoll,
Image,
ScrollView,
StyleSheet,
TouchableHighlight,
View,
} from 'react-native';
class CameraRollView extends Component {
constructor(props) {
super(props)
var controls = props.controls
this.state = {
images: [],
selected: '',
fetchParams: { first: 25 },
groupTypes: 'SavedPhotos',
}
this._storeImages = this._storeImages.bind(this)
this._logImageError = this._logImageError.bind(this)
this._selectImage = this._selectImage.bind(this)
}
componentDidMount() {
// get photos from camera roll
CameraRoll.getPhotos(this.state.fetchParams, this._storeImages, this._logImageError);
}
// callback which processes received images from camera roll and stores them in an array
_storeImages(data) {
const assets = data.edges;
const images = assets.map( asset => asset.node.image );
this.setState({
images: images,
});
}
_logImageError(err) {
console.log(err);
}
_selectImage(uri) {
// define whatever you want to happen when an image is selected here
this.setState({
selected: uri,
});
console.log('Selected image: ', uri);
}
render() {
return (
<View style={{flex: 1, backgroundColor: 'white'}}>
<ScrollView style={styles.container}>
<View style={styles.imageGrid}>
{ this.state.images.map(image => {
return (
<TouchableHighlight onPress={() => this._selectImage(image.uri)}>
<Image style={styles.image} source={{ uri: image.uri }} />
</TouchableHighlight>
);
})}
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
imageGrid: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center'
},
image: {
width: 100,
height: 100,
margin: 10,
},
});
export default CameraRollView
Hmm, the package you are seeking is probably react-native-image-picker. It allows you to take a photo or select one from your native device gallery.
LINK: https://github.com/react-community/react-native-image-picker
In response to the linking issue. When you save a package using:
npm install --save react-native-image-picker
What is happening here is the --save part prepares the packages dependencies to be connected to native iOS and Android. This linking is done using the command react-native link.
In some cases packages require some manual linking aswell (for example, this package requires a small amount of native iOS and Android configuration)