I am trying to make a Netflix clone with react native and I put the home screen in a scrollview but when I add more content under the banner image and try to scroll down, it just snaps back up and won't stay there. I tried adding padding on the bottom but it still won't work.
import React from "react";
import {
StyleSheet,
View,
ScrollView,
ImageBackground,
} from "react-native";
import ContinueWatching from "../components/ContinueWatching";
import Header from "../components/Header";
import NavBar from "../components/NavBar";
import PlayBar from "../components/PlayBar";
const Home = () => {
return (
<View style={styles.container}>
<ScrollView>
<Header />
<NavBar />
<ImageBackground
style={styles.bannerImage}
source={{
uri: "https://i2.wp.com/technosports.co.in/wp-
content/uploads/2021/10/squid-scaled.jpg?fit=1920%2C2560&ssl=1",
}}
/>
<View style={styles.blendBottom}></View>
<View style={[styles.blendBottom, { top: 480, opacity: 0.65 }]}></View>
<PlayBar />
<ContinueWatching />
</ScrollView>
</View>
);
};
export default Home;
const styles = StyleSheet.create({
container: {
backgroundColor: "black",
flex: 1,
},
bannerImage: {
flex: 1,
height: 500,
width: 410,
resizeMode: "contain",
right: 10,
},
blendBottom: {
height: 60,
width: "100%",
backgroundColor: "black",
position: "absolute",
top: 460,
opacity: 0.25,
},
});
Related
On one screen there are 2 images in svg path format, 2 textinputs and a button. One image is at the top, and another at the bottom. Whenever I click on a textinput, the keyboard pushes the images and compresses all the elements. How could I solve it?
The project was created using Expo.
index.js
import React, {Component} from 'react';
import {View, Text, TextInput, TouchableOpacity} from 'react-native';
import Style from './style';
/* SVG Imports */
import PesqueiraOnline from '../../utils/pesqueira-online-path';
import Illustration from './svg-illustration';
export default class Login extends Component {
render(){
return(
<>
<View style={Style.pesqueiraonline}>
<PesqueiraOnline />
</View>
<View style={Style.container}>
<Text style={Style.texto}>Faça login para começar a fazer suas compras!</Text>
<TextInput style={Style.loginInputs} placeholder="CPF" placeholderTextColor="#B4B4B4" />
<TextInput style={Style.loginInputs} placeholder="Senha" placeholderTextColor="#B4B4B4" />
<TouchableOpacity style={Style.loginButton}>
<Text style={Style.textLoginButton}>ENTRAR</Text>
</TouchableOpacity>
</View>
<View style={Style.illustration}>
<Illustration />
</View>
</>
);
}
}
style.js
import { StyleSheet } from 'react-native';
export default Style = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
//backgroundColor: '#e1e1e1',
marginBottom: 75
},
texto: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: '#333'
},
/* Pesqueria Online */
pesqueiraonline: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
alignSelf: 'center',
marginTop: 50,
width: '100%',
height: undefined,
},
/* Illustration */
illustration: {
flex: 1,
alignItems: 'center',
marginBottom: 35,
marginRight: 30
},
/* Login Inputs */
loginInputs: {
width: 267,
height: 45,
borderRadius: 20,
borderWidth: 1,
borderColor: '#BDBDBD',
marginTop: 15,
paddingLeft: 15
},
/* Login Button */
loginButton: {
backgroundColor: '#6FCF97',
borderRadius: 20,
width: 113,
height: 48,
marginTop: 15,
justifyContent: 'center',
alignItems: 'center'
},
textLoginButton: {
color: '#fff',
fontWeight: 'bold'
}
});
A gif showing the problem:
Currently, I am trying to place an overlay on top of a background image. For some reason I just can't seem to get the background color to lay on top of the image. Any suggestions would be greatly appreciated. I am using a lot of Material UI etc, so my styling is done using JS.
import React from 'react'
import Background from '../images/background.jpg'
// MUI STUFF
import Grid from '#material-ui/core/Grid'
import Container from '#material-ui/core/Container'
import Box from '#material-ui/core/Box'
import { makeStyles } from '#material-ui/core/styles'
const useStyles = makeStyles(theme => ({
background: {
backgroundImage: `url(${Background})`,
position: 'relative',
objectFit: 'cover',
width: '100%',
height: 400,
paddingTop: 70,
margin: 0
},
card: {
width: '100%'
},
overlay: {
position: 'absolute',
objectFit: 'cover',
width: '100%',
height: 400,
margin: 0,
backgroundColor: '#5BC2E7'
}
}))
const Home = () => {
const classes = useStyles()
return (
<Box>
<div className={classes.overlay}>
<Box className={classes.background}>
<Container>
Wyncode is so great and stuff. Track your jobs and stuff here.
</Container>
</Box>
</div>
<Box>
<Container>More stuff will go here</Container>
</Box>
</Box>
)
}
export default Home
try this css:
background: {
backgroundImage: `url(${Background})`,
position: 'relative',
objectFit: 'cover',
width: '100%',
height: 400,
paddingTop: 70,
margin: 0
},
overlay: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
margin: 0,
backgroundColor: '#5BC2E7'
}
With this html:
<Box>
<Box className={classes.background}>
<div className={classes.overlay}>
<Container>
Wyncode is so great and stuff. Track your jobs and stuff here.
</Container>
</div>
</Box>
<Box>
<Container>More stuff will go here</Container>
</Box>
</Box>
In my react-native expo app, i have a background image that is taking full height and width in all screens and i want to put a lineargradient above the background image but it's not working, the image is always appearing above the gradient, here is the code:
import React, { Component } from 'react';
import { LinearGradeint } from 'expo';
import { Text, StyleSheet, ImageBackground } from 'react-native';
class App extends Component {
render() {
return(
<View style={styles.container}>
<LinearGradient
colors={['#4c669f', '#3b5998', '#192f6a']}>
<ImageBackground source={require('./images/background.jpg')} style={styles.backgroundImage}>
<View style={{width: "100%"}}>
<Text>
HI
</Text>
</View>
</ImageBackground>
</LinearGradient>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
backgroundImage: {
height: '100%',
width: '100%',
flex: 1,
},
export default App;
Try to put LinearGradient component inside ImageBackground.
<ImageBackground source={require('./images/background.jpg')} style={styles.backgroundImage}>
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} />
<View style={{width: "100%"}}>
</View>
</ImageBackground>
Add absolute position on the LinearGradient :
<LinearGradient
colors={['#4c669f', '#3b5998', '#192f6a']}
style={{
position: 'absolute',
left: 0,
right: 0,
top: 0,
height: '100%'
}}
/>
This worked for me:
<ImageBackground
source={require('../../assets/img/background.png')}
resizeMode="cover"
style={{
height: '100%',
width: '100%',
flex: 1,
}}>
<LinearGradient
colors={[
'rgba(255,180,113,0.75)',
'rgba(255,107,11,0.75)',
'rgba(255,180,113,0.75)',
]}
style={{flex: 1, justifyContent: 'center'}}>
{** CODE **}
</LinearGradient>
</ImageBackground>
*****I ran this react native code in expo .snack and the code ran flawlessly but when i run it in visual studio code to my iPhone it dosent seem to
work here is the error get is there anything i can do to get the code
to work.**
unexpected token 42:2
here is the code im running for the app***
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image,ImageBackground,button,
TouchableOpacity, Dimensions,Button} from 'react-native';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default class App extends Component {
render() {
return (
<View style={{flexDirection: "row"}}>
<ImageBackground source={{uri: 'https://lumiere-a.akamaihd.net/v1/images/usa_avengers_sb_bkgd8_1024_0ae5b001.jpeg?region=0%2C0%2C1024%2C576'}}
style={{width: width, height: height,flexDirection:'colum'}}>
<TouchableOpacity style={styles.spiderman}>
<Image source={{uri: 'http://www.pngmart.com/files/2/Spider-Man-Transparent-Background.png'}}
style={{width: 200, height:300,}} />
</TouchableOpacity>
<TouchableOpacity style={styles.hulk}>
<Image source={{uri:
'https://vignette.wikia.nocookie.net/avengers-assemble/images/d/d6/Usa_avengers_skchi_blackwidow_n_6e8100ad.png/revision/latest/scale-to-width-down/449?cb=20170426073401'}}
style={{width: 150, height: 80, position:'top',}} />
</TouchableOpacity>
<TouchableOpacity style={styles.blkwidow}>
<Image source={{uri: 'https://clipart.info/images/ccovers/1516942387Hulk-Png-Cartoon.png'}}
style={{width: 200, height: 250}} />
</TouchableOpacity>
</ImageBackground>
</View>
);
}
}
///need help with coloring each icon
const styles = StyleSheet.create({
spiderman: {
flex: 1,
position:'left',
alignItems: 'flex-end',
justifyContent: 'center',
width: 50,
height: 500,
bottom: -140,
left: Dimensions.get('window').width -10,
zIndex: 10,
},
blkwidow: {
flex: 1,
position:'left',
alignItems: 'flex-end',
justifyContent: 'flex-end',
width: 50,
height: 50,
bottom: 50,
left: Dimensions.get('window').width - 70,
zIndex: 10,
},
});
Your code needs to be reviewed. I have corrected the errors. See the code.
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Image,
ImageBackground,
//button - Not a component of react-native
TouchableOpacity,
Dimensions,
Button
} from 'react-native';
const width = Dimensions
.get('window')
.width;
const height = Dimensions
.get('window')
.height;
export default class App extends Component {
render() {
return (
<View style={{
flexDirection: "row"
}}>
<ImageBackground
source=
{ { uri: 'https://lumiere-a.akamaihd.net/v1/images/usa_avengers_sb_bkgd8_1024_0ae5b001.jpeg?region=0%2C0%2C1024%2C576' } }
style={{
width: width,
height: height,
flexDirection: 'column'
}}>
<TouchableOpacity >
<Image
style={{
width: 200,
height: 200
}}
source={{
uri: 'http://www.pngmart.com/files/2/Spider-Man-Transparent-Background.png'
}}/>
</TouchableOpacity>
<TouchableOpacity >
<Image
style={{
width: 150,
height: 80,
//position: 'top' - position should be either absolute or relative
}}
source={{
uri: 'https://vignette.wikia.nocookie.net/avengers-assemble/images/d/d6/Usa_avengers_skchi_blackwidow_n_6e8100ad.png/revision/latest/scale-to-width-down/449?cb=20170426073401'
}}/>
</TouchableOpacity>
<TouchableOpacity >
<Image
style={{
width: 200,
height: 250
}}
source={{
uri: 'https://clipart.info/images/ccovers/1516942387Hulk-Png-Cartoon.png'
}}/>
</TouchableOpacity>
</ImageBackground>
</View>
);
}
}
///need help with coloring each icon
const styles = StyleSheet.create({
spiderman: {
flex: 1,
position: 'relative',
alignItems: 'flex-end',
justifyContent: 'center',
width: 50,
height: 500,
bottom: -140,
left: Dimensions
.get('window')
.width - 10,
zIndex: 10
},
blkwidow: {
flex: 1,
position: 'relative',
alignItems: 'flex-end',
justifyContent: 'flex-end',
width: 50,
height: 50,
bottom: 50,
left: Dimensions
.get('window')
.width - 70,
zIndex: 10
}
});
you are improting button that is not true,you have to write Button and just once
Somehow react native zIndex fails to work on this piece of code...
<View>
<View style={{backgroundColor: 'red', width: 100, height: 100, zIndex: 1, position: 'absolute', top: 0, right: 0}}/>
<View style={{backgroundColor: 'blue', width: 50, height: 50, zIndex: 0, position: 'absolute', top: 0, right: 0}}/>
</View>
If anyone can explain to me why this is "not working" that would be great!
(btw, this is on Android React-native version 0.45.1)
This is my workflow atm:
index.android.js
import React from 'react-native';
import Viewport from './app/Viewport';
React.AppRegistry.registerComponent('TSK', () => Viewport);
Viewport.js
import React, { Component } from 'react';
import {
AppRegistry,
View,
StyleSheet
} from 'react-native';
// Viewport
export default class Viewport extends Component {
render() {
return (
<View>
<View style={{backgroundColor: 'red', width: 100, height: 100, zIndex: 1, position: 'absolute', top: 0, right: 0}}/>
<View style={{backgroundColor: 'blue', width: 50, height: 50, zIndex: 0, position: 'absolute', top: 0, right: 0}}/>
</View>
);
}
}
AppRegistry.registerComponent('Viewport', () => Viewport);