Develop Reference

React-Native Placing Pressable above background Image

I have a background Image that I am placing overtop of all of my other elements.
Screen
...other stuff...
return (
<View style={styles.body}>
<FlatList
style={styles.prizeList}
data={TEST_DATA}
numColumns={2}
renderItem={({item, index}) => {
let bgShelfImage = FULL_SHELF;
if (index === TEST_DATA.length - 1) {
bgShelfImage = FULL_SHELF;
} else {
if (index % 2 === 1) {
bgShelfImage = SECOND_HALF_SHELF;
} else {
bgShelfImage = FIRST_HALF_SHELF;
}
}
return (
<PrizeShelfCard
prize={item}
bgShelfImage={bgShelfImage}
handleShowPrize={handleShowPrize}
handleDisplayPrizeTitleChange={handleDisplayPrizeTitleChange}
handleDisplayPrizeDescChange={handleDisplayPrizeDescChange}
handleDisplayPrizeTypeChange={handleDisplayPrizeTypeChange}
handleDisplayPrizeTierChange={handleDisplayPrizeTierChange}
/>
);
}}
keyExtractor={item => item.prizeId}
/>
<ImageBackground
style={styles.backgroundContainer}
source={bookshelf}
resizeMode="stretch"
/>
</View>
);
};
const styles = StyleSheet.create({
body: {
flex: 1,
backgroundColor: '#29211F',
},
backgroundContainer: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
},
prizeList: {
marginTop: hp('5%'),
display: 'flex',
},
});
PrizeDisplayCard
...other stuff....
return (
<View style={styles.body}>
<ImageBackground
style={styles.backgroundContainer}
source={shelfImage}
resizeMode="stretch"
/>
<Pressable
style={styles.pressable}
onPress={() => {
console.log('prize clicked!');
}}>
</Pressable>
</View>
);
};
const styles = StyleSheet.create({
body: {
flex: 1,
height: hp('25%'),
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#29211F',
},
backgroundContainer: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
},
pressable: {
height: '50%',
width: '50%',
marginBottom: hp('5%'),
backgroundColor: 'red'
},
});
The problem is this. In the Screen code, I have an imageBackground which I place above all other elements. I need to do this because the background needs to overlay the other elements.
In this image, the outline of the "bookshelf" is this image:
overlayed and the rest is rendered by the flatlist since there will be a dynamic amount of elements. The red box is a pressable element. The pressable cannot be pressed because the Background template is overtop of the pressable. How can I make it so that the pressable is above the background Image? Is this possible the way that I'm doing it or do I need to find a different way?
I tried playing around with the zIndex, but that wasn't much help
Edit
Got rid of irrelevent parts of the code

zIndex only works on ios. I assume thaty ou are using android, that you can use elevation instead ;)

Render Error Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

I am trying to import an image on react-native, from the assets folder,(contains all the images). However the images are not compiling when I export them on the IOS-simulator. I think it is important to add that my assets file (that contains all the images), is a read-only file. I've attached an image on the bottom of what the assets-folder looks like on my end. In addition to that picture, I have also attached screenshots of the two errors I am experiencing with the IOS-simulator.
Thank You for your time!
Now, for better clarity here is my code:
import React from 'react';
import { ImageBackround, StyleSheet, View, Image, Text} from 'react-native';
function WelcomeScreen(props){
return(
<>
<ImageBackround
style={styles.background}
source={require('./assets/icon.png')}
>
<View style={styles.logoContainer}>
<Image style={styles.logo} source={require('./assets/favicon.png')}/>
<Text> Sell what you dont need!</Text>
</View>
<View style ={styles.registerButton}></View>
< View style= {styles.loginButton}></View>
</ImageBackround>
</>
)
}
const styles = StyleSheet.create({
background: {
flex:1,
alignItems: "center" ,
},
loginButton: {
width: "100%",
height: 70,
backgroundColor: "#4ecdc4",
},
logo: {
width: 100,
height: 100,
},
logoContainer: {
position: "absolute",
top: 70,
alignItems:"center",
},
registerButton: {
width: "100%",
height: 70,
backgroundColor: "#4ecdc4"
},
});
export default WelcomeScreen;
Here Ive attached in order, the image of the assets file, and the 2 errors that the Ios-simulator is giving me:

Can you try creating a file inside assets which exports all images and call it from your WelcomeScreen.
create index.js file inside assets folder like this
export const Images ={
adaptive:require('./adaptive.png'),
favicon:require('./favicon.png'),
icon:require('./icon.png'),
splash:require('./splash.png')
}
and change your WelcomeScreen like this
import React from 'react';
import { ImageBackround, StyleSheet, View, Image, Text} from 'react-native';
import {Images} from './assets';
function WelcomeScreen(props){
return(
<>
<ImageBackround
style={styles.background}
source={Images.icon}
>
<View style={styles.logoContainer}>
<Image style={styles.logo} source={Images.favicon}/>
<Text> Sell what you dont need!</Text>
</View>
<View style ={styles.registerButton}></View>
< View style= {styles.loginButton}></View>
</ImageBackround>
</>
)
}
const styles = StyleSheet.create({
background: {
flex:1,
alignItems: "center" ,
},
loginButton: {
width: "100%",
height: 70,
backgroundColor: "#4ecdc4",
},
logo: {
width: 100,
height: 100,
},
logoContainer: {
position: "absolute",
top: 70,
alignItems:"center",
},
registerButton: {
width: "100%",
height: 70,
backgroundColor: "#4ecdc4"
},
});
export default WelcomeScreen;

how to play local mp4 video in react native

Here In my code I am trying to play video from my local . I have stored one mp4 video in my code file. I have imported it where I have to play it . I am passing correct value but video is not coming on screen .
Only on blank screen is coming .
export const TRAININGVIDEO = require('./tutorialvid.mp4')
import Video from 'react-native-video';
import { TRAININGVIDEO, USER_LOGIN } from '../../images';
const deviceHeight = Dimensions.get('window').height;
export default class TrainingAndGuide extends Component {
constructor(props) {
super(props)
this.state = {
isLoading: false,
title: "Training Guide Video",
icon: 'settings',
iconType: 'MaterialCommunityIcons',
}
}
render() {
const { updateResponse, navigation, trainigVideos } = this.props;
const { title, icon, modalVisible } = this.state;
return (
<ImageBackground source={BG} style={{ width: '100%', height: '100%' }} resizeMode="cover">
<View>
<Header title={title} icon={icon} navigation={navigation} />
</View>
<View style={{
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff',
width: "100%",
height: '50%'
}}>
<Video source={{ TRAININGVIDEO }} // Can be a URL or a local file.
ref={(ref) => {
this.player = ref
}}
// Store reference
onBuffer={this.onBuffer} // Callback when remote video is buffering
onError={this.videoError} // Callback when video cannot be loaded
style={styles.backgroundVideo} />
</View>
</ImageBackground>
)
}
}
var styles = StyleSheet.create({
backgroundVideo: {
position: 'absolute',
width: "100%",
height: "50%"
},
});

you can use react-native-video package to play local or uri video file
https://www.npmjs.com/package/react-native-video
const styles = StyleSheet.create({
VideoBG: {
position: 'absolute',
width: 150,
height: 300
},
});

Try using values in pixels:
var styles = StyleSheet.create({
backgroundVideo: {
position: 'absolute',
width: "150px",
height: "300px"
},
});
as well as adding top: 0or bottom: 0 style since the position that you are using is absolute

How to make a cropped image fill all the View with flexbox and React-Native?

I want to make a cropedd image to fill all the view in my app.
My Code now is right this:
But I wanted that this small square with Homer eating this donuts fill all the screen, like this simulation I did:
This is my code:
import * as React from 'react';
import { View, Image, StyleSheet } from 'react-native';
export default class CroppedImage extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.cropped}>
<Image
style={styles.image}
source={{
uri:
'https://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png'
}}
/>
</View>
</View>
);
}
}
const OFFSET_LEFT = 0;
const OFFSET_TOP = 0;
const IMAGE_WIDTH = 239 * 1.5;
const IMAGE_HEIGHT = 391 * 1.5;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#6699CC'
},
bg: {
opacity: 0.25,
width: IMAGE_WIDTH,
height: IMAGE_HEIGHT
},
image: {
marginLeft: -OFFSET_LEFT,
marginTop: -OFFSET_TOP,
width: IMAGE_WIDTH,
height: IMAGE_HEIGHT
},
cropped: {
width: 150,
height: 150,
overflow: 'hidden',
position: 'absolute'
}
});
Any help here?

Try to add the property resizeMode to the Image as follows :
<Image
style={styles.image}
source={{
uri:'https://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png'
}}
resizeMode:'contain'
/>
and let me know if it worked or not!

Try to add the resizeMode to the style like so:
image: {
marginLeft: -OFFSET_LEFT,
marginTop: -OFFSET_TOP,
width: IMAGE_WIDTH,
height: IMAGE_HEIGHT,
resizeMode: "contain"
},
You can read more on it in the documentation here:
https://reactnative.dev/docs/image#resizemode

Make view 80% width of parent in React Native

I'm creating a form in React Native and would like to make my TextInputs 80% of the screen width.
With HTML and ordinary CSS, this would be straightforward:
input {
display: block;
width: 80%;
margin: auto;
}
Except that React Native doesn't support the display property, percentage widths, or auto margins.
So what should I do instead? There's some discussion of this problem in React Native's issue tracker, but the proposed solutions seem like nasty hacks.

As of React Native 0.42 height: and width: accept percentages.
Use width: 80% in your stylesheets and it just works.
Screenshot
Live Example
Child Width/Height as Proportion of Parent
Code
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
const width_proportion = '80%';
const height_proportion = '40%';
const styles = StyleSheet.create({
screen: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#5A9BD4',
},
box: {
width: width_proportion,
height: height_proportion,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#B8D2EC',
},
text: {
fontSize: 18,
},
});
export default () => (
<View style={styles.screen}>
<View style={styles.box}>
<Text style={styles.text}>
{width_proportion} of width{'\n'}
{height_proportion} of height
</Text>
</View>
</View>
);

That should fit your needs:
var yourComponent = React.createClass({
render: function () {
return (
<View style={{flex:1, flexDirection:'column', justifyContent:'center'}}>
<View style={{flexDirection:'row'}}>
<TextInput style={{flex:0.8, borderWidth:1, height:20}}></TextInput>
<View style={{flex:0.2}}></View> // spacer
</View>
</View>
);
}
});

If you are simply looking to make the input relative to the screen width, an easy way would be to use Dimensions:
// De structure Dimensions from React
var React = require('react-native');
var {
...
Dimensions
} = React;
// Store width in variable
var width = Dimensions.get('window').width;
// Use width variable in style declaration
<TextInput style={{ width: width * .8 }} />
I've set up a working project here. Code is also below.
https://rnplay.org/apps/rqQPCQ
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Dimensions
} = React;
var width = Dimensions.get('window').width;
var SampleApp = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={{fontSize:22}}>Percentage Width In React Native</Text>
<View style={{marginTop:100, flexDirection: 'row',justifyContent: 'center'}}>
<TextInput style={{backgroundColor: '#dddddd', height: 60, width: width*.8 }} />
</View>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
marginTop:100
},
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);

In your StyleSheet, simply put:
width: '80%';
instead of:
width: 80%;
Keep Coding........ :)

You can also try react-native-extended-stylesheet that supports percentage for single-orientation apps:
import EStyleSheet from 'react-native-extended-stylesheet';
const styles = EStyleSheet.create({
column: {
width: '80%',
height: '50%',
marginLeft: '10%'
}
});

The technique I use for having percentage width of the parent is adding an extra spacer view in combination with some flexbox. This will not apply to all scenarios but it can be very helpful.
So here we go:
class PercentageWidth extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.percentageWidthView}>
{/* Some content */}
</View>
<View style={styles.spacer}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row'
},
percentageWidthView: {
flex: 60
},
spacer: {
flex: 40
}
});
Basically the flex property is the width relative to the "total" flex of all items in the flex container. So if all items sum to 100 you have a percentage. In the example I could have used flex values 6 & 4 for the same result, so it's even more FLEXible.
If you want to center the percentage width view: add two spacers with half the width. So in the example it would be 2-6-2.
Of course adding the extra views is not the nicest thing in the world, but in a real world app I can image the spacer will contain different content.

I have an updated solution (late 2019) , to get 80% width of parent Responsively with Hooks it work's even if the device rotate.
You can use Dimensions.get('window').width to get Device Width in this example you can see how you can do it Responsively
import React, { useEffect, useState } from 'react';
import { Dimensions , View , Text , StyleSheet } from 'react-native';
export default const AwesomeProject() => {
const [screenData, setScreenData] = useState(Dimensions.get('window').width);
useEffect(() => {
const onChange = () => {
setScreenData(Dimensions.get('window').width);
};
Dimensions.addEventListener('change', onChange);
return () => {Dimensions.removeEventListener('change', onChange);};
});
return (
<View style={[styles.container, { width: screenData * 0.8 }]}>
<Text> I'mAwesome </Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#eee',
},
});

The easiest way to achieve is by applying width to view.
width: '80%'

This is the way I got the solution. Simple and Sweet. Independent of Screen density:
export default class AwesomeProject extends Component {
constructor(props){
super(props);
this.state = {text: ""}
}
render() {
return (
<View
style={{
flex: 1,
backgroundColor: "#ececec",
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}}
>
<View style={{ padding: 10, flexDirection: "row" }}>
<TextInput
style={{ flex: 0.8, height: 40, borderWidth: 1 }}
onChangeText={text => this.setState({ text })}
placeholder="Text 1"
value={this.state.text}
/>
</View>
<View style={{ padding: 10, flexDirection: "row" }}>
<TextInput
style={{ flex: 0.8, height: 40, borderWidth: 1 }}
onChangeText={text => this.setState({ text })}
placeholder="Text 2"
value={this.state.text}
/>
</View>
<View style={{ padding: 10, flexDirection: "row" }}>
<Button
onPress={onButtonPress}
title="Press Me"
accessibilityLabel="See an Information"
/>
</View>
</View>
);
}
}

Just add quotes around the size in your code. Using this you can use percentage in width, height
input: {
width: '80%'
}