I'm trying to set a background Image in React-Native but it is not appearing on my screen. However, the text inside <ImageBackground></ImageBackground> is getting displayed.
Here's my code:
import React, { Component } from 'react';
import { View, ImageBackground, Text, StyleSheet } from 'react-native';
type Props = {};
export default class App extends Component {
render() {
return (
<ImageBackground style={styles.container} source={require("./Assets/bg.png")}>
<Text>Inside</Text>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: '100%',
height: '100%'
}
});
Here is my directory structure below. You can see there bg.png exists.
And Here is the output that I'm getting.
Here is my bg.png
I can't find what's wrong with this. Everything seems ok, Also I'm not getting any error message. Please Help
Here's the link to the expo.
It appears that there happens a crash in android for large images the bitmap becomes out of memory.
Therefore a workaround for that is to resize the image and use it.
For more info checkout this link
Related
I am learning React Native and I am having trouble displaying the ImageBackground component.
The ImageBackground has source that points to an image in the same folder, despite this is still not visible unless I give the ImageBackground a height in number, because if I try to give it a height in % it still won't show itself.
Here is the code for the component execpt the style:
import React from 'react';
import { View, ImageBackground, StyleSheet, Text } from 'react-native';
export default function WelcomeScreen(props) {
return (
<View>
<Text>Welcome</Text>
<ImageBackground source={require('./background.jpg')} style={styles.background} />
</View>
);
}
Trying different ways to style it, the ImageBackground has different behaviors regarding showing itself:
This will not show ImageBackground:
const styles = StyleSheet.create({
background: {
flex: 1,
},
});
This won't either:
const styles = StyleSheet.create({
background: {
flex: 1,
height: '100%',
},
});
This will show it:
const styles = StyleSheet.create({
background: {
flex: 1,
height: 300,
},
});
I do not understand why this happens. From my understanding the size should be added only when the image is from the net, and regardless this, the % value should still work.
What am I missing here?
EDIT:
I made a workaround for this using Dimension and feeding the screen height to the ImageBackground:
import { View, ImageBackground, StyleSheet, Dimensions } from 'react-native';
const { height } = Dimensions.get('screen');
const styles = StyleSheet.create({
background: {
flex: 1,
height,
},
});
Though it works, the question why do I need to set a height for an image in the same folder still stand.
if you want to give a value in percentage in such cases you should use some tricks like:
background: {
height: deviceHeight,
},
container: {
height: deviceHeight * 50 / 100,
}
or you can use a popular library in the name of react-native-responsive-screen. This library is going to give you the power to give relative values and convert them to absolute values behind the scene.
The snippet below is going to show how to use it:
import {widthPercentageToDP, heightPercentageToDP} from 'react-native-responsive-screen';
const styles = StyleSheet.create({
background: {
height: heightPercentageToDP('100%'),
}
})
This should work as you expected ;)
If you want your background image to cover your entire view, try something like this:
<View>
<ImageBackground style={styles.image} resizeMode={'cover'} source={require('../Images/test.jpg')}>
{/*your components*/}
</ImageBackground>
</View>
with this styling:
const styles = StyleSheet.create({
image: {
height: '100%',
width: undefined,
}
})
Image tag of react-native is working but image is not showing in the android emulator. Only the card is coming. Screenshot of source code is attached below.
Try this, I hope it will help you
import React, { Component } from 'react';
import { Text, View, StyleSheet , Image} from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
render() {
let Image_Http_URL ={ uri: 'https://reactnativecode.com/wp-content/uploads/2017/05/react_thumb_install.png'};
return (
<View style={{elevation:10, justifyContent: 'center', flex:1, margin:10}}>
<Image source={Image_Http_URL} style = {{height: 200, resizeMode : 'stretch', padding:5 }} />
</View>
);
}
}
Check 2 things May be it solve issue
1 : Internet permission is added in android/app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
2 : Is internet working on simulator? Try to check in browser of simulator.
I am trying to learn the basics of react native and have started with the basic tab template. I am trying to create a social media sharing screen, where you get the list of apps and airdrop on iOS to display but unfortunately this is not working. The code I have displays an empty view and I was expecting the share dialog to appear over the top. I get the view but no sharing options.
Here is the code
`
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Share } from 'react-native';
var ActionSheetIOS = React;
export default class ShareScreen extends React.Component {
static navigationOptions = {
title: 'Share',
};
showShareActionSheet() {
ActionSheetIOS.showShareActionSheetWithOptions({
url: 'https://www.someurl.org',
});
}
render() {
return (
<View style={styles.container}>
this.showShareActionSheet();
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 15,
backgroundColor: '#000000',
},
});
`
any ideas why this isn't working?
You need to wrap your this.showShareActionSheet(); with brackets to get it working.
<View style={styles.container}>
{this.showShareActionSheet()}
</View>
Otherwise it's gonna be considered as plain text and not as an instruction
You can use this package https://www.npmjs.com/package/react-native-share for sharing, This package will help you share the content to WhatsApp, FB, and other social apps.
I am having an issue with the image just showing up on the application. Through search results, I mostly see the solution being that that the height and width was required and missing, but I have already implemented with no results.
I have looked at the routes multiple times and don't see any issues on that end.
Lastly, I thought it could be something to do with the image. I have altered the size and it worked with the <Image /> tag. However, I need it to be a background image.
Current Code
import React from 'react'
import { View, Text, StyleSheet, ImageBackground } from 'react-native';
import { MaterialCommunityIcons } from '#expo/vector-icons'
export default function TitleScreen () {
return (
<View>
<ImageBackground
source={require('../assets/images/title_background.png')}
style={styles.backgroundImage}
imageStyle={{resizeMode: 'cover'}}
>
<Text>testing</Text>
{/* <MaterialCommunityIcons
name={'cards-outline'}
size={100}
/> */}
</ImageBackground>
</View>
)
}
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
width: '100%',
height: '100%',
}
});
Folder Layout
assets
-- images
--- title_background.png
components
-- TitleScreen.js
Answered! The answer was to add flex: 1 to the parent view container - for those running into the same problem.
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)